0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 https://github.com/siyuan-note/siyuan/issues/6197

Browse source
This commit is contained in:
Vanessa 2022-10-14 23:41:53 +08:00
parent 19e2bd2ab8
commit 209c034f48
25 changed files with 80 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/appearance/themes/daylight/theme.css
View file

@ -9,6 +9,7 @@
--b3-theme-background-light: #dfe0e1;
--b3-theme-surface: #f3f3f3;
--b3-theme-surface-light: rgba(243, 243, 243, .86);
--b3-theme-surface-lighter: rgba(0, 0, 0, .06);
--b3-theme-error: #d23f31;
/* 文字颜色 */

1
app/appearance/themes/midnight/theme.css
View file

@ -9,6 +9,7 @@
--b3-theme-background-light: #353637;
--b3-theme-surface: #292a2d;
--b3-theme-surface-light: rgba(41, 42, 45, .86);
--b3-theme-surface-lighter: rgba(230, 230, 230, .06);
--b3-theme-error: #d23f31;
/* 文字颜色 */

2
app/src/assets/scss/_block.scss
View file

@ -77,7 +77,7 @@
&__edit {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--b3-border-color);
border-bottom: 1px solid var(--b3-theme-surface-lighter);
.protyle-wysiwyg {
transition: none;

2
app/src/assets/scss/_card.scss
View file

@ -10,7 +10,7 @@
cursor: pointer;
&:hover {
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
transform: translate(0px, -4px);
box-shadow: var(--b3-dialog-shadow);
}

2
app/src/assets/scss/_color.scss
View file

@ -5,7 +5,7 @@
width: 16px;
border: 0;
transition: var(--b3-transition);
box-shadow: 0 0 0 2px var(--b3-border-color) inset;
box-shadow: 0 0 0 2px var(--b3-theme-surface-lighter) inset;
display: flex;
align-items: center;
flex-direction: column;

8
app/src/assets/scss/_dialog.scss
View file

@ -53,7 +53,7 @@
line-height: 24px;
font-size: 16px;
font-weight: 500;
border-bottom: 1px solid var(--b3-border-color);
border-bottom: 1px solid var(--b3-theme-surface-lighter);
}
&__content {
@ -63,7 +63,7 @@
&__action {
padding: 8px 24px;
border-top: 1px solid var(--b3-border-color);
border-top: 1px solid var(--b3-theme-surface-lighter);
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
@ -87,7 +87,7 @@
max-width: 520px;
.b3-list:last-child {
border-left: 1px solid var(--b3-border-color);
border-left: 1px solid var(--b3-theme-surface-lighter);
overflow: auto;
max-width: 360px;
min-width: 200px;
@ -95,7 +95,7 @@
.dialog__path {
padding: 4px 8px;
border-top: 1px solid var(--b3-border-color);
border-top: 1px solid var(--b3-theme-surface-lighter);
color: var(--b3-theme-on-surface);
font-size: 12px;
white-space: nowrap;

2
app/src/assets/scss/_form.scss
View file

@ -87,7 +87,7 @@
}
.b3-label {
border-bottom: 1px solid var(--b3-border-color);
border-bottom: 1px solid var(--b3-theme-surface-lighter);
padding: 16px 24px;
line-height: 20px;

2
app/src/assets/scss/_graph.scss
View file

@ -48,7 +48,7 @@
visibility: hidden;
pointer-events: none;
position: absolute;
border: 1px solid var(--b3-border-color);
border: 1px solid var(--b3-theme-surface-lighter);
border-radius: 4px;
box-shadow: var(--b3-dialog-shadow);
background-color: var(--b3-theme-surface);

40
app/src/assets/scss/_layout.scss
View file

@ -1,7 +1,7 @@
.layout {
&__wnd--active {
.layout-tab-bar .item--focus {
box-shadow: inset 0 -2px 0 0 var(--b3-theme-primary) !important;
box-shadow: inset 0 -2px 0 0 var(--b3-theme-primary);
& > .item__text {
color: var(--b3-theme-on-background);
@ -35,7 +35,7 @@
&:after {
content: "";
width: 100%;
height: 1px;
height: .5px;
display: block;
background-color: var(--b3-border-color);
top: 3px;
@ -52,7 +52,7 @@
&:after {
top: 0;
width: 1px;
width: .5px;
left: 0;
height: 100%;
}
@ -128,25 +128,26 @@
transition: var(--b3-transition);
flex: 1;
min-height: 30px;
border-left: .5px solid transparent;
&:not(:last-child),
&:not(:first-child),
&:last-child:not(.item--focus):not(.item--readonly) {
box-shadow: 2px -26px 0px 0px var(--b3-theme-surface), 1px -4px 1px 0px var(--b3-theme-on-surface-light);
}
&:last-child:not(.item--readonly) {
margin-right: 2px;
border-left-color: var(--b3-list-hover);
}
&:hover:not(.item--focus):not(.item--readonly) {
background-color: var(--b3-list-hover);
box-shadow: none;
border-left-color: transparent;
.item__text::after {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.001), var(--b3-list-hover));
}
}
&--readonly {
border-left-color: var(--b3-list-hover);
}
&--pin {
flex: none;
@ -169,11 +170,16 @@
&--focus {
background-color: var(--b3-theme-background);
box-shadow: none !important;
border-left-color: transparent !important;
box-shadow: inset 0 -2px 0 0 var(--b3-theme-background-light);
.item__text::after {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.001), var(--b3-theme-background));
}
& + .item {
border-left-color: transparent !important;
}
}
&--unupdate {
@ -245,17 +251,19 @@
background-color: var(--b3-theme-surface);
&#dockLeft {
border-right: 1px solid var(--b3-border-color);
border-right: .5px solid var(--b3-border-color);
}
&#dockRight {
border-left: 1px solid var(--b3-border-color);
border-left: .5px solid var(--b3-border-color);
}
&#dockTop {
border-bottom: .5px solid var(--b3-border-color);
}
&#dockTop,
&#dockBottom {
border-top: 1px solid var(--b3-border-color);
border-bottom: 1px solid var(--b3-border-color);
border-top: .5px solid var(--b3-border-color);
}
svg {

2
app/src/assets/scss/_list.scss
View file

@ -55,7 +55,7 @@
text-align: left;
border: 0;
color: var(--b3-theme-on-background);
margin-top: 0 !important;
margin: 0 8px !important;
&[draggable="true"]:active {
cursor: grabbing;

6
app/src/assets/scss/_menu.scss
View file

@ -31,7 +31,7 @@
.b3-menu__submenu {
display: block;
border: 1px solid var(--b3-border-color);
border: 1px solid var(--b3-theme-surface-lighter);
border-radius: 4px;
background-color: var(--b3-menu-background);
padding: 4px 0;
@ -143,7 +143,7 @@
}
&__separator {
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
height: 1px;
margin: 4px 0;
display: block;
@ -245,7 +245,7 @@
font-size: 16px;
&:hover {
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
}
svg {

2
app/src/assets/scss/_protyle.scss
View file

@ -56,7 +56,7 @@
&:hover {
color: var(--b3-theme-on-background);
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
}
}

2
app/src/assets/scss/_search.scss
View file

@ -3,7 +3,7 @@
display: flex;
background: var(--b3-theme-background);
position: relative;
border-bottom: 1px solid var(--b3-border-color);
border-bottom: 1px solid var(--b3-theme-surface-lighter);
.b3-text-field--text {
font-size: 18px;

2
app/src/assets/scss/_switch.scss
View file

@ -11,7 +11,7 @@
display: inline-block;
position: relative;
cursor: pointer;
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
overflow: inherit;
user-select: none;

6
app/src/assets/scss/_toolbar.scss
View file

@ -35,12 +35,12 @@
}
&:hover {
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
}
}
&__divider {
border-left: 1px solid var(--b3-border-color);
border-left: 1px solid var(--b3-theme-surface-lighter);
margin: 6px 4px;
}
}
@ -65,7 +65,7 @@
white-space: nowrap;
&:hover {
border-color: var(--b3-border-color);
border-color: var(--b3-theme-surface-lighter);
}
}
}

14
app/src/assets/scss/_typography.scss
View file

@ -36,7 +36,7 @@
}
iframe {
border: 1px solid var(--b3-border-color);
border: 1px solid var(--b3-theme-surface-lighter);
width: 765px;
box-sizing: border-box;
height: 256px;
@ -105,9 +105,9 @@
color: var(--b3-theme-on-surface);
vertical-align: middle;
background-color: var(--b3-theme-surface);
border: solid 1px var(--b3-border-color);
border: solid 1px var(--b3-theme-surface-lighter);
border-radius: 3px;
box-shadow: inset 0 -1px 0 var(--b3-border-color);
box-shadow: inset 0 -1px 0 var(--b3-theme-surface-lighter);
}
u {
@ -128,7 +128,7 @@
.bq {
padding: 4px;
color: var(--b3-theme-on-surface);
border-left: 0.25em solid var(--b3-border-color);
border-left: 0.25em solid var(--b3-theme-surface-lighter);
background-color: var(--b3-list-hover);
margin: 4px 0;
}
@ -213,13 +213,13 @@
tr {
background-color: var(--b3-theme-surface);
border-top: 1px solid var(--b3-border-color);
border-top: 1px solid var(--b3-theme-surface-lighter);
}
td,
th {
padding: 4px 8px;
border: 1px solid var(--b3-border-color);
border: 1px solid var(--b3-theme-surface-lighter);
box-sizing: border-box;
&:empty::after {
@ -563,7 +563,7 @@
position: absolute;
display: none;
background-color: var(--b3-theme-surface);
border: 1px solid var(--b3-border-color);
border: 1px solid var(--b3-theme-surface-lighter);
border-radius: 3px;
padding: 3px;
cursor: pointer;

12
app/src/assets/scss/_wysiwyg.scss
View file

@ -46,7 +46,7 @@
}
& > .protyle-action:after {
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
}
& > div:nth-child(3):not(.protyle-attr),
@ -223,11 +223,11 @@
&[data-type="NodeBlockQueryEmbed"] {
background-color: var(--b3-theme-surface);
border-left: 1px dashed var(--b3-border-color);
border-left: 1px dashed var(--b3-theme-surface-lighter);
& > .protyle-wysiwyg__embed {
-webkit-user-modify: read-only;
border-top: 1px dashed var(--b3-border-color);
border-top: 1px dashed var(--b3-theme-surface-lighter);
position: relative;
.code-block:hover .protyle-icon,
@ -321,7 +321,7 @@
top: 4px;
left: 4px;
color: var(--b3-theme-primary);
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
padding: 4px;
border-radius: 4px;
@ -464,7 +464,7 @@
content: "";
height: 16px !important;
width: 16px;
background: var(--b3-border-color);
background: var(--b3-theme-surface-lighter);
display: block;
position: absolute;
left: -18px !important;
@ -553,7 +553,7 @@
}
span[data-type~="tag"]:hover {
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
}
span[data-type~="block-ref"]:hover,

7
app/src/assets/scss/base.scss
View file

@ -164,7 +164,7 @@ progressLoading: 400
height: 42px;
line-height: 22px;
padding-left: 84px;
box-shadow: inset 0px -1px 1px 0px var(--b3-border-color);
border-bottom: .5px solid var(--b3-border-color);
&--browser {
padding-left: 0;
@ -216,7 +216,7 @@ progressLoading: 400
&--disabled,
&--disabled:hover {
color: var(--b3-border-color);
color: var(--b3-theme-surface-lighter);
cursor: not-allowed;
}
@ -241,6 +241,7 @@ progressLoading: 400
height: 32px;
line-height: 32px;
z-index: 2;
border-top: .5px solid var(--b3-border-color);
.toolbar__item {
padding: 9px;
@ -471,7 +472,7 @@ progressLoading: 400
.spread-search {
&__preview {
background-color: var(--b3-theme-background);
border-top: 1px solid var(--b3-border-color);
border-top: 1px solid var(--b3-theme-surface-lighter);
}
&__filter {

4
app/src/assets/scss/mobile.scss
View file

@ -90,7 +90,7 @@
background: var(--b3-theme-background);
&--border {
border-bottom: 1px solid var(--b3-border-color);
border-bottom: 1px solid var(--b3-theme-surface-lighter);
}
&--dark {
@ -257,7 +257,7 @@
background: var(--b3-theme-background);
z-index: 221;
display: flex;
border-top: 1px solid var(--b3-border-color);
border-top: 1px solid var(--b3-theme-surface-lighter);
button {
background: transparent;

12
app/src/assets/scss/pdf/_pdf.scss
View file

@ -212,7 +212,7 @@
position: absolute;
height: 4px;
background-color: var(--b3-theme-on-background);
border-bottom: 1px solid var(--b3-border-color);
border-bottom: 1px solid var(--b3-theme-surface-lighter);
transition-duration: 200ms;
transition-timing-function: ease;
}
@ -344,7 +344,7 @@
}
&[disabled] {
color: var(--b3-border-color);
color: var(--b3-theme-surface-lighter);
}
}
@ -446,7 +446,7 @@
border-radius: 2px;
padding: 7px;
margin: 0 auto;
box-shadow: 0 0 1px 1px var(--b3-border-color);
box-shadow: 0 0 1px 1px var(--b3-theme-surface-lighter);
}
a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
@ -535,7 +535,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
}
.treeItem.selected > a {
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
}
.treeItemToggler:hover + a,
@ -565,7 +565,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
#errorMoreInfo {
background-color: var(--b3-theme-surface);
color: var(--b3-theme-on-surface);
border: 1px solid var(--b3-border-color);
border: 1px solid var(--b3-theme-surface-lighter);
padding: 3px;
margin: 3px;
width: 98%;
@ -627,7 +627,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
margin: 4px 0;
height: 1px;
width: 100%;
background-color: var(--b3-border-color);
background-color: var(--b3-theme-surface-lighter);
}
.dialog .buttonRow {

4
app/src/menus/commonMenuItem.ts
View file

@ -214,7 +214,7 @@ export const openFileAttr = (attrs: IObject, id: string, focusName = "bookmark")
<div class="fn__space"></div>
<span class="block__icon fn__flex-center"><svg></svg></span>
</label>
<div style="background-color: var(--b3-border-color);height: 1px;margin: 16px 0;"></div>
<div style="background-color: var(--b3-theme-surface-lighter);height: 1px;margin: 16px 0;"></div>
<div class="custom-attr__add">
${notifyHTML}
${customHTML}
@ -410,7 +410,7 @@ export const openAttr = (nodeElement: Element, protyle: IProtyle, focusName = "b
<div class="fn__space"></div>
<span class="block__icon fn__flex-center"><svg></svg></span>
</label>
<div style="background-color: var(--b3-border-color);height: 1px;margin: 16px 0;"></div>
<div style="background-color: var(--b3-theme-surface-lighter);height: 1px;margin: 16px 0;"></div>
<div class="custom-attr__add">
${notifyHTML}
${customHTML}

2
app/src/mobile/util/menu.ts
View file

@ -134,7 +134,7 @@ export const popMenu = () => {
<div class="b3-list-item b3-list-item--big${window.siyuan.config.readonly ? " fn__none" : ""}" id="menuHistory">
<svg class="b3-list-item__graphic"><use xlink:href="#iconVideo"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.dataHistory}</span>
</div>
<div slot="border-bottom: 1px solid var(--b3-border-color);"></div>
<div slot="border-bottom: 1px solid var(--b3-theme-surface-lighter);"></div>
<div class="b3-list-item b3-list-item--big" id="menuAppearance">
<svg class="b3-list-item__graphic"><use xlink:href="#iconTheme"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.appearance}</span>
</div>

2
app/src/protyle/export/index.ts
View file

@ -179,7 +179,7 @@ const renderPDF = (id: string) => {
}
.b3-label {
border-bottom: 1px solid var(--b3-border-color);
border-bottom: 1px solid var(--b3-theme-surface-lighter);
display: block;
color: var(--b3-theme-on-surface);
padding-bottom: 16px;

4
app/src/protyle/gutter/index.ts
View file

@ -1613,11 +1613,11 @@ export class Gutter {
}
}, {
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.shadow}">
<span style="text-shadow: 1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)" class="b3-color__square fn__flex-center">A</span>
<span style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" class="b3-color__square fn__flex-center">A</span>
</div>`,
click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
e.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
e.style.textShadow = "1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)";
});
}
}, {

8
app/src/protyle/toolbar/Font.ts
View file

@ -65,7 +65,7 @@ export const fontMenu = (protyle: IProtyle) => {
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>`;
break;
case "style4":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)">${window.siyuan.languages.shadow}</button>`;
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>`;
break;
case "fontSize":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style">${lastFontStatus[1]}</button>`;
@ -93,7 +93,7 @@ export const fontMenu = (protyle: IProtyle) => {
<div style="margin: 4px 0 2px">${window.siyuan.languages.fontStyle}</div>
<div class="fn__flex">
<button data-type="style2" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>
<button data-type="style4" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)">${window.siyuan.languages.shadow}</button>
<button data-type="style4" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>
</div>
<div style="margin: 4px 0 2px">${window.siyuan.languages.fontSize}</div>
<div class="fn__flex">
@ -174,7 +174,7 @@ export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption)
textElement.style.webkitTextFillColor = "transparent";
break;
case "style4":
textElement.style.textShadow = "1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)";
textElement.style.textShadow = "1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)";
break;
case "id":
setBlockRef(textOption.color);
@ -263,7 +263,7 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
webkitTextFillColor === sideElement.style.webkitTextFillColor &&
webkitTextStroke === sideElement.style.webkitTextStroke &&
fontSize === sideElement.style.fontSize &&
"1px 1px var(--b3-border-color), 2px 2px var(--b3-border-color), 3px 3px var(--b3-border-color), 4px 4px var(--b3-border-color)" === sideElement.style.textShadow &&
"1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" === sideElement.style.textShadow &&
backgroundColor === sideElement.style.backgroundColor;
}
if (textObj.type === "fontSize") {