Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 01:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

💄 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
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-background-light: #dfe0e1;
--b3-theme-surface: #f3f3f3; --b3-theme-surface: #f3f3f3;
--b3-theme-surface-light: rgba(243, 243, 243, .86); --b3-theme-surface-light: rgba(243, 243, 243, .86);
--b3-theme-surface-lighter: rgba(0, 0, 0, .06);
--b3-theme-error: #d23f31; --b3-theme-error: #d23f31;
/* 文字颜色 */ /* 文字颜色 */

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

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

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

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

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

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

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

@ -5,7 +5,7 @@
width: 16px; width: 16px;
border: 0; border: 0;
transition: var(--b3-transition); 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; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -56,7 +56,7 @@
&:hover { &:hover {
color: var(--b3-theme-on-background); 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; display: flex;
background: var(--b3-theme-background); background: var(--b3-theme-background);
position: relative; position: relative;
border-bottom: 1px solid var(--b3-border-color); border-bottom: 1px solid var(--b3-theme-surface-lighter);
.b3-text-field--text { .b3-text-field--text {
font-size: 18px; font-size: 18px;

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

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

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

@ -35,12 +35,12 @@
} }
&:hover { &:hover {
background-color: var(--b3-border-color); background-color: var(--b3-theme-surface-lighter);
} }
} }
&__divider { &__divider {
border-left: 1px solid var(--b3-border-color); border-left: 1px solid var(--b3-theme-surface-lighter);
margin: 6px 4px; margin: 6px 4px;
} }
} }
@ -65,7 +65,7 @@
white-space: nowrap; white-space: nowrap;
&:hover { &: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 { iframe {
border: 1px solid var(--b3-border-color); border: 1px solid var(--b3-theme-surface-lighter);
width: 765px; width: 765px;
box-sizing: border-box; box-sizing: border-box;
height: 256px; height: 256px;
@ -105,9 +105,9 @@
color: var(--b3-theme-on-surface); color: var(--b3-theme-on-surface);
vertical-align: middle; vertical-align: middle;
background-color: var(--b3-theme-surface); background-color: var(--b3-theme-surface);
border: solid 1px var(--b3-border-color); border: solid 1px var(--b3-theme-surface-lighter);
border-radius: 3px; 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 { u {
@ -128,7 +128,7 @@
.bq { .bq {
padding: 4px; padding: 4px;
color: var(--b3-theme-on-surface); 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); background-color: var(--b3-list-hover);
margin: 4px 0; margin: 4px 0;
} }
@ -213,13 +213,13 @@
tr { tr {
background-color: var(--b3-theme-surface); background-color: var(--b3-theme-surface);
border-top: 1px solid var(--b3-border-color); border-top: 1px solid var(--b3-theme-surface-lighter);
} }
td, td,
th { th {
padding: 4px 8px; padding: 4px 8px;
border: 1px solid var(--b3-border-color); border: 1px solid var(--b3-theme-surface-lighter);
box-sizing: border-box; box-sizing: border-box;
&:empty::after { &:empty::after {
@ -563,7 +563,7 @@
position: absolute; position: absolute;
display: none; display: none;
background-color: var(--b3-theme-surface); background-color: var(--b3-theme-surface);
border: 1px solid var(--b3-border-color); border: 1px solid var(--b3-theme-surface-lighter);
border-radius: 3px; border-radius: 3px;
padding: 3px; padding: 3px;
cursor: pointer; cursor: pointer;

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

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

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

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

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

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

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

@ -212,7 +212,7 @@
position: absolute; position: absolute;
height: 4px; height: 4px;
background-color: var(--b3-theme-on-background); 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-duration: 200ms;
transition-timing-function: ease; transition-timing-function: ease;
} }
@ -344,7 +344,7 @@
} }
&[disabled] { &[disabled] {
color: var(--b3-border-color); color: var(--b3-theme-surface-lighter);
} }
} }
@ -446,7 +446,7 @@
border-radius: 2px; border-radius: 2px;
padding: 7px; padding: 7px;
margin: 0 auto; 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, a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
@ -535,7 +535,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
} }
.treeItem.selected > a { .treeItem.selected > a {
background-color: var(--b3-border-color); background-color: var(--b3-theme-surface-lighter);
} }
.treeItemToggler:hover + a, .treeItemToggler:hover + a,
@ -565,7 +565,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
#errorMoreInfo { #errorMoreInfo {
background-color: var(--b3-theme-surface); background-color: var(--b3-theme-surface);
color: var(--b3-theme-on-surface); color: var(--b3-theme-on-surface);
border: 1px solid var(--b3-border-color); border: 1px solid var(--b3-theme-surface-lighter);
padding: 3px; padding: 3px;
margin: 3px; margin: 3px;
width: 98%; width: 98%;
@ -627,7 +627,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
margin: 4px 0; margin: 4px 0;
height: 1px; height: 1px;
width: 100%; width: 100%;
background-color: var(--b3-border-color); background-color: var(--b3-theme-surface-lighter);
} }
.dialog .buttonRow { .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> <div class="fn__space"></div>
<span class="block__icon fn__flex-center"><svg></svg></span> <span class="block__icon fn__flex-center"><svg></svg></span>
</label> </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"> <div class="custom-attr__add">
${notifyHTML} ${notifyHTML}
${customHTML} ${customHTML}
@ -410,7 +410,7 @@ export const openAttr = (nodeElement: Element, protyle: IProtyle, focusName = "b
<div class="fn__space"></div> <div class="fn__space"></div>
<span class="block__icon fn__flex-center"><svg></svg></span> <span class="block__icon fn__flex-center"><svg></svg></span>
</label> </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"> <div class="custom-attr__add">
${notifyHTML} ${notifyHTML}
${customHTML} ${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"> <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> <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>
<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"> <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> <svg class="b3-list-item__graphic"><use xlink:href="#iconTheme"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.appearance}</span>
</div> </div>

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

@ -179,7 +179,7 @@ const renderPDF = (id: string) => {
} }
.b3-label { .b3-label {
border-bottom: 1px solid var(--b3-border-color); border-bottom: 1px solid var(--b3-theme-surface-lighter);
display: block; display: block;
color: var(--b3-theme-on-surface); color: var(--b3-theme-on-surface);
padding-bottom: 16px; 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}"> 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>`, </div>`,
click: () => { click: () => {
this.genClick(nodeElements, protyle, (e: HTMLElement) => { 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>`; 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; break;
case "style4": 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; break;
case "fontSize": case "fontSize":
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style">${lastFontStatus[1]}</button>`; 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 style="margin: 4px 0 2px">${window.siyuan.languages.fontStyle}</div>
<div class="fn__flex"> <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="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>
<div style="margin: 4px 0 2px">${window.siyuan.languages.fontSize}</div> <div style="margin: 4px 0 2px">${window.siyuan.languages.fontSize}</div>
<div class="fn__flex"> <div class="fn__flex">
@ -174,7 +174,7 @@ export const setFontStyle = (textElement: HTMLElement, textOption: ITextOption)
textElement.style.webkitTextFillColor = "transparent"; textElement.style.webkitTextFillColor = "transparent";
break; break;
case "style4": 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; break;
case "id": case "id":
setBlockRef(textOption.color); setBlockRef(textOption.color);
@ -263,7 +263,7 @@ export const hasSameTextStyle = (currentElement: HTMLElement, sideElement: HTMLE
webkitTextFillColor === sideElement.style.webkitTextFillColor && webkitTextFillColor === sideElement.style.webkitTextFillColor &&
webkitTextStroke === sideElement.style.webkitTextStroke && webkitTextStroke === sideElement.style.webkitTextStroke &&
fontSize === sideElement.style.fontSize && 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; backgroundColor === sideElement.style.backgroundColor;
} }
if (textObj.type === "fontSize") { if (textObj.type === "fontSize") {