This commit is contained in:
Vanessa 2023-06-28 22:40:34 +08:00
parent cfc4da244e
commit 69cd8f735d
47 changed files with 126 additions and 202 deletions

View file

@ -36,6 +36,8 @@
/* 线条 */
--b3-border-color: var(--b3-theme-surface-lighter);
--b3-border-radius: 6px;
--b3-border-radius-b: 12px;
/* 滚动条 */
--b3-scroll-color: rgba(0, 0, 0, .2);

View file

@ -36,6 +36,8 @@
/* 线条 */
--b3-border-color: #363636;
--b3-border-radius: 6px;
--b3-border-radius-b: 12px;
/* 滚动条 */
--b3-scroll-color: rgba(230, 230, 230, .2);

View file

@ -79,7 +79,7 @@
vertical-align: middle;
background-color: #f3f3f3;
border: solid 1px rgba(0, 0, 0, .06);
border-radius: 3px;
border-radius: 6px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}
@ -119,7 +119,7 @@
pre code {
background-color: #f8f9fa;
border-radius: 4px;
border-radius: 6px;
padding: 8px 16px;
font-size: 85%;
font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";

View file

@ -37,7 +37,7 @@
.b3-select {
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 4px;
border-radius: 6px;
padding: 4px 8px;
line-height: 20px;
box-sizing: border-box;
@ -57,7 +57,7 @@
.b3-button {
cursor: pointer;
color: #fff;
border-radius: 4px;
border-radius: 6px;
line-height: 20px;
padding: 4px 8px;
background-color: #218bff;
@ -169,7 +169,7 @@
vertical-align: middle;
background-color: #f3f3f3;
border: solid 1px rgba(0, 0, 0, .06);
border-radius: 3px;
border-radius: 6px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}

View file

@ -109,7 +109,7 @@ html {
min-width: 32px;
&:hover {
border-radius: 16px;
border-radius: var(--b3-border-radius-b);
background-color: var(--b3-theme-surface-light);
}
}
@ -172,7 +172,7 @@ html {
color: var(--b3-toolbar-color);
padding: 5px;
margin: 2px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
box-sizing: border-box;
transition: var(--b3-transition);
display: flex;
@ -295,7 +295,7 @@ html {
& > div {
height: 4px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
overflow: hidden;
background-color: #fff;
width: 64px;
@ -373,7 +373,7 @@ html {
line-height: 22px;
padding: 0 8px;
color: var(--b3-theme-on-surface-light);
border-radius: 2px;
border-radius: var(--b3-border-radius);
font-size: 12px;
user-select: none;
height: 22px;

View file

@ -6,7 +6,7 @@
z-index: 205;
width: 60vw;
word-break: break-word;
border-radius: 4px;
border-radius: var(--b3-border-radius-b);
opacity: 0;
transition: opacity 75ms linear;
top: -100px;
@ -24,7 +24,7 @@
}
& > .block__icons {
border-radius: 4px 4px 0 0;
border-radius: var(--b3-border-radius-b) var(--b3-border-radius-b) 0 0;
& > .resize__move {
height: 42px;
@ -36,7 +36,7 @@
overflow: auto;
display: flex;
flex-direction: column;
border-radius: 0 0 4px 4px;
border-radius: 0 0 var(--b3-border-radius-b) var(--b3-border-radius-b);
flex: 1;
}
@ -84,7 +84,7 @@
padding: 5px;
display: flex;
align-items: center;
border-radius: 2px;
border-radius: var(--b3-border-radius);
transition: var(--b3-transition), opacity .3s cubic-bezier(0, 0, .2, 1) 0ms;
&:hover:not([disabled]):not(.ft__primary),

View file

@ -4,7 +4,7 @@
box-sizing: border-box;
flex: 1;
background-color: var(--b3-theme-background);
border-radius: 0 12px 12px 0;
border-radius: 0 var(--b3-border-radius-b) var(--b3-border-radius-b) 0;
.b3-label {
padding: 16px 0;
@ -176,7 +176,7 @@
vertical-align: middle;
background-color: var(--b3-theme-surface);
border: solid 1px var(--b3-theme-surface-lighter);
border-radius: 3px;
border-radius: var(--b3-border-radius);
box-shadow: inset 0 -1px 0 var(--b3-theme-surface-lighter);
margin-left: 4px;
cursor: pointer;
@ -206,6 +206,7 @@
box-sizing: border-box;
opacity: 0;
z-index: 1;
border-radius: var(--b3-border-radius-b);
&--show {
opacity: 1;
@ -244,7 +245,7 @@
height: 96px;
width: 96px;
margin: 32px auto 32px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
flex-shrink: 0;
}
@ -254,7 +255,7 @@
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 4px;
border-radius: var(--b3-border-radius);
margin-bottom: 32px;
cursor: pointer;
left: 0;

View file

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

View file

@ -4,7 +4,7 @@
padding: 16px;
box-sizing: border-box;
border: 0;
border-radius: 0 0 4px 0;
border-radius: 0 0 var(--b3-border-radius-b) 0;
resize: none;
color: var(--b3-theme-on-background);
}
@ -15,7 +15,7 @@
flex-direction: column;
height: 100%;
box-sizing: border-box;
border-radius: 0 0 4px 4px;
border-radius: 0 0 var(--b3-border-radius-b) var(--b3-border-radius-b);
}
&__date {

View file

@ -28,7 +28,7 @@
transition: transform .2s cubic-bezier(0, 0, .2, 1) 0ms, opacity .3s cubic-bezier(0, 0, .2, 1) 0ms;
&.layout__dockl {
border-radius: 0 8px 8px 0;
border-radius: 0 var(--b3-border-radius-b) var(--b3-border-radius-b) 0;
border: 1px solid var(--b3-border-color);
border-left: 0;
overflow: hidden;
@ -42,7 +42,7 @@
border: 1px solid var(--b3-border-color);
box-shadow: -8px 0px 24px rgb(140 149 159 / 20%);
border-right: 0;
border-radius: 8px 0 0 8px;
border-radius: var(--b3-border-radius-b) 0 0 var(--b3-border-radius-b);
overflow: hidden;
top: 112px;
bottom: 82px;
@ -267,7 +267,7 @@
content: "";
width: 100%;
height: 3px;
border-radius: 6px;
border-radius: var(--b3-border-radius);
bottom: 0;
position: absolute;
background-color: var(--b3-theme-background-light);
@ -289,7 +289,7 @@
float: left;
height: 18px;
width: 18px;
border-radius: 2px;
border-radius: var(--b3-border-radius);
margin-top: 1px;
}
}
@ -318,7 +318,7 @@
align-items: center;
svg {
border-radius: 10px;
border-radius: var(--b3-border-radius-b);
height: 8px;
width: 8px;
color: var(--b3-theme-on-surface);
@ -388,7 +388,7 @@
padding: 6px;
color: var(--b3-theme-on-surface-light);
display: flex;
border-radius: 6px;
border-radius: var(--b3-border-radius);
margin: 7px;
&--pin {

View file

@ -175,7 +175,7 @@
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
background-color: var(--b3-theme-surface);
border: solid 1px var(--b3-theme-surface-lighter);
border-radius: 3px;
border-radius: var(--b3-border-radius);
box-shadow: inset 0 -1px 0 var(--b3-theme-surface-lighter);
margin: 2px 4px 0 16px;
}

View file

@ -1,7 +1,7 @@
.b3-button {
cursor: pointer;
color: var(--b3-theme-on-primary);
border-radius: 4px;
border-radius: var(--b3-border-radius);
line-height: 20px;
padding: 4px 8px;
background-color: var(--b3-theme-primary);
@ -45,7 +45,7 @@
top: 0;
width: 50%;
background-color: var(--b3-theme-primary);
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
}

View file

@ -1,7 +1,7 @@
.b3-card {
box-shadow: var(--b3-point-shadow);
background-color: var(--b3-theme-surface);
border-radius: 4px;
border-radius: var(--b3-border-radius);
margin: 16px;
overflow: hidden;
position: relative;
@ -42,7 +42,7 @@
img {
height: 74px;
object-fit: cover;
border-radius: 4px;
border-radius: var(--b3-border-radius);
width: 74px;
}
}

View file

@ -18,7 +18,7 @@
align-items: center;
box-sizing: border-box;
padding: 8px 12px;
border-radius: 16px;
border-radius: var(--b3-border-radius-b);
transition: var(--b3-transition);
text-decoration: none;
@ -92,7 +92,7 @@
&__close {
margin-right: -5px;
margin-left: 6px;
border-radius: 10px;
border-radius: var(--b3-border-radius-b);
height: 16px;
width: 16px;
transition: var(--b3-transition);

View file

@ -33,7 +33,7 @@
}
&__container {
border-radius: 12px;
border-radius: var(--b3-border-radius-b);
background-color: var(--b3-theme-surface);
position: relative;
box-shadow: var(--b3-dialog-shadow);

View file

@ -19,22 +19,6 @@
width: 16px;
}
&-action {
right: 9px;
top: 5px;
border-radius: 2px;
text-align: center;
padding: 2px;
position: absolute;
height: 16px;
width: 16px;
&:hover {
background-color: var(--b3-theme-surface);
color: var(--b3-theme-primary);
}
}
&-input {
padding-left: 35px !important;
}
@ -65,7 +49,6 @@
width: 16px;
cursor: pointer;
padding: 5px;
border-radius: 2px;
&:hover {
color: var(--b3-theme-on-background);
@ -87,7 +70,7 @@
left: 1px;
top: 1px;
height: 28px;
border-radius: 3px 0 0 3px;
border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
}
input {

View file

@ -5,7 +5,7 @@
}
&--background .b3-list-item {
border-radius: 4px;
border-radius: var(--b3-border-radius);
&:hover:not(.b3-list-item--focus),
&--focus:not(.dragover):not(.dragover__top):not(.dragover__bottom) {
@ -104,7 +104,7 @@
&--hl:hover {
color: var(--b3-theme-on-background);
background-color: var(--b3-list-icon-hover);
border-radius: 2px;
border-radius: var(--b3-border-radius);
}
}
@ -115,7 +115,7 @@
height: 16px;
width: 16px;
color: var(--b3-theme-on-surface);
border-radius: 2px;
border-radius: var(--b3-border-radius);
}
text-align: center;
@ -131,7 +131,7 @@
&:hover {
color: var(--b3-theme-on-background);
background-color: var(--b3-list-icon-hover);
border-radius: 2px;
border-radius: var(--b3-border-radius);
}
}
@ -228,7 +228,7 @@
&:hover {
color: var(--b3-theme-on-background);
background-color: var(--b3-list-icon-hover);
border-radius: 2px;
border-radius: var(--b3-border-radius);
}
}

View file

@ -1,6 +1,6 @@
.b3-menu {
position: fixed;
border-radius: 4px;
border-radius: var(--b3-border-radius-b);
box-shadow: var(--b3-dialog-shadow);
border: 1px solid var(--b3-theme-surface-lighter);
background-color: var(--b3-menu-background);
@ -20,7 +20,7 @@
&__submenu::-webkit-scrollbar-thumb {
box-sizing: content-box;
border: 2px solid transparent;
border-radius: 5px;
border-radius: var(--b3-border-radius);
box-shadow: inset 0 0 2.5px 2.5px var(--b3-scroll-color);
&:hover {
@ -116,7 +116,7 @@
height: 17px;
width: 17px;
margin: 0 16px 0 8px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
&--arrow {
width: 12px;
@ -141,7 +141,7 @@
&__item {
padding: 0 8px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
user-select: none;
display: flex;
line-height: 30px;
@ -269,7 +269,7 @@
display: none;
max-height: 80vh;
border: 1px solid var(--b3-theme-surface-lighter);
border-radius: 4px;
border-radius: var(--b3-border-radius-b);
background-color: var(--b3-menu-background);
padding: 8px;
position: fixed;
@ -332,7 +332,7 @@
&--current,
&:hover {
background: var(--b3-list-hover);
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
}

View file

@ -1,6 +1,6 @@
.b3-select {
border: 0;
border-radius: 4px;
border-radius: var(--b3-border-radius);
padding: 4px 26px 4px 8px;
box-sizing: border-box;
line-height: 20px;

View file

@ -1,6 +1,6 @@
.b3-slider {
-webkit-appearance: none;
border-radius: 2px;
border-radius: var(--b3-border-radius);
height: 16px;
background-color: transparent;
padding: 0 4px;
@ -15,7 +15,7 @@
-webkit-appearance: none;
width: 10px;
height: 10px;
border-radius: 8px;
border-radius: var(--b3-border-radius-b);
cursor: pointer;
background-color: var(--b3-theme-primary);
margin-top: -4px;

View file

@ -45,7 +45,7 @@
&__content {
line-height: 20px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
padding: 8px 16px;
color: var(--b3-theme-on-primary);
font-size: inherit;

View file

@ -5,7 +5,7 @@
width: 28px;
height: 12px;
border: 1px solid transparent;
border-radius: 7px;
border-radius: var(--b3-border-radius-b);
margin: 0;
outline: none;
display: inline-block;

View file

@ -1,6 +1,6 @@
.b3-text-field {
border: 0;
border-radius: 4px;
border-radius: var(--b3-border-radius);
box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
padding: 4px 8px;
line-height: 20px;

View file

@ -9,7 +9,7 @@
color: #fff;
word-wrap: break-word;
background: var(--b3-tooltips-color);
border-radius: 4px;
border-radius: var(--b3-border-radius);
line-height: 17px;
max-width: 320px;
animation-duration: 150ms;
@ -45,7 +45,7 @@
white-space: pre;
content: attr(aria-label);
background: var(--b3-tooltips-color);
border-radius: 4px;
border-radius: var(--b3-border-radius);
line-height: 17px;
transform: scale(0.8);
max-width: 60vw;

View file

@ -23,7 +23,7 @@
line-height: 1.625;
padding: 4px;
margin: 4px 0;
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
ins > iframe {
@ -101,7 +101,7 @@
vertical-align: middle;
background-color: var(--b3-theme-surface);
border: solid 1px var(--b3-theme-surface-lighter);
border-radius: 3px;
border-radius: var(--b3-border-radius);
box-shadow: inset 0 -1px 0 var(--b3-theme-surface-lighter);
}
@ -294,7 +294,7 @@
}
.hljs {
border-radius: 4px;
border-radius: var(--b3-border-radius);
padding: 22px 4px;
font-size: 85%;
overflow: auto;
@ -350,7 +350,7 @@
text-align: center;
svg {
border-radius: 4px;
border-radius: var(--b3-border-radius);
/* 由于会覆盖颜色先移除看看有没有副作用 https://github.com/siyuan-note/siyuan/issues/7735
polygon {
@ -365,7 +365,7 @@
[contenteditable="false"] svg {
background: var(--b3-theme-on-primary);
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
}
@ -380,7 +380,7 @@
}
[data-subtype="plantuml"] img {
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
.abcjs-container svg,
@ -488,17 +488,17 @@
color: var(--b3-theme-surface);
&--only {
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
&--first {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: var(--b3-border-radius);
border-top-left-radius: var(--b3-border-radius);
}
&--last {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: var(--b3-border-radius);
border-top-right-radius: var(--b3-border-radius);
}
&:hover {
@ -508,7 +508,7 @@
&--text {
cursor: text;
border-radius: 4px;
border-radius: var(--b3-border-radius);
&:hover {
color: var(--b3-theme-surface);
@ -539,7 +539,7 @@
background-color: var(--b3-theme-surface);
padding: 22px 4px;
box-sizing: border-box;
border-radius: 4px 0 0 4px;
border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
width: 3.6em;
font-family: var(--b3-font-family-code);
@ -567,7 +567,7 @@
display: none;
background-color: var(--b3-theme-surface);
border: 1px solid var(--b3-theme-surface-lighter);
border-radius: 3px;
border-radius: var(--b3-border-radius);
padding: 3px;
cursor: pointer;
color: var(--b3-theme-on-surface);
@ -614,7 +614,7 @@
.mermaidTooltip {
position: fixed;
border-radius: 4px;
border-radius: var(--b3-border-radius);
box-shadow: var(--b3-dialog-shadow);
border: 1px solid var(--b3-theme-surface-lighter);
background-color: var(--b3-theme-surface);

View file

@ -85,7 +85,7 @@
margin-left: 4px;
padding: 0 8px;
color: var(--b3-theme-on-surface-light);
border-radius: 4px;
border-radius: var(--b3-border-radius);
user-select: none;
background-color: var(--b3-theme-background-light);
line-height: 24px;
@ -114,7 +114,7 @@
flex-shrink: 0;
margin: 6px 4px;
color: var(--b3-theme-on-surface);
border-radius: 4px;
border-radius: var(--b3-border-radius);
&[disabled] {
opacity: 0.38;
@ -256,7 +256,7 @@
height: 17px;
width: 17px;
margin: 0 16px 0 8px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
align-self: center;
color: var(--b3-theme-on-surface);
}
@ -322,7 +322,7 @@
float: left;
padding: 6px;
margin: 6px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
&.keyboard__svg--big {
width: 30px;
@ -345,7 +345,7 @@
&-item {
background-color: var(--b3-theme-background);
border-radius: 8px;
border-radius: var(--b3-border-radius);
flex: 1;
display: flex;
align-items: center;

View file

@ -62,13 +62,13 @@
position: absolute;
&:first-child {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: var(--b3-border-radius);
border-top-left-radius: var(--b3-border-radius);
}
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: var(--b3-border-radius);
border-bottom-right-radius: var(--b3-border-radius);
}
}
}
@ -77,7 +77,7 @@
position: fixed;
border: 2px solid var(--b3-pdf-background1);
box-sizing: border-box;
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
}
@ -483,7 +483,7 @@
}
.thumbnailSelectionRing {
border-radius: 2px;
border-radius: var(--b3-border-radius);
padding: 7px;
margin: 0 auto;
box-shadow: 0 0 1px 1px var(--b3-theme-surface-lighter);
@ -522,7 +522,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
min-width: 95%;
height: auto;
margin-bottom: 1px;
border-radius: 2px;
border-radius: var(--b3-border-radius);
line-height: 15px;
user-select: none;
white-space: normal;
@ -625,7 +625,7 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
box-shadow: var(--b3-dialog-shadow);
border: 1px solid var(--b3-theme-surface-lighter);
background-color: var(--b3-theme-surface);
border-radius: 4px;
border-radius: var(--b3-border-radius-b);
width: 520px;
position: absolute;
inset-inline-start: 0px;

View file

@ -156,7 +156,7 @@
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
border-radius: 2px;
border-radius: var(--b3-border-radius);
}
.annotationLayer .textWidgetAnnotation input:focus,
@ -164,7 +164,7 @@
.annotationLayer .choiceWidgetAnnotation select:focus {
background: none;
border: 2px solid var(--input-focus-border-color);
border-radius: 2px;
border-radius: var(--b3-border-radius);
outline: var(--input-focus-outline);
}
@ -176,7 +176,7 @@
.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
border: 2px solid var(--input-focus-border-color);
border-radius: 2px;
border-radius: var(--b3-border-radius);
outline: var(--input-focus-outline);
}

View file

@ -46,7 +46,7 @@
margin: -1px;
padding: 1px;
background-color: rgba(180, 0, 170, 1);
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
.textLayer .highlight.appended {
@ -54,11 +54,11 @@
}
.textLayer .highlight.begin {
border-radius: 4px 0 0 4px;
border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
}
.textLayer .highlight.end {
border-radius: 0 4px 4px 0;
border-radius: 0 var(--b3-border-radius) var(--b3-border-radius) 0;
}
.textLayer .highlight.middle {

View file

@ -21,7 +21,7 @@
margin: -1px;
padding: 1px;
background-color: rgba(239, 203, 237, 1);
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
.xfaLayer .highlight.appended {
@ -29,11 +29,11 @@
}
.xfaLayer .highlight.begin {
border-radius: 4px 0 0 4px;
border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
}
.xfaLayer .highlight.end {
border-radius: 0 4px 4px 0;
border-radius: 0 var(--b3-border-radius) var(--b3-border-radius) 0;
}
.xfaLayer .highlight.middle {

View file

@ -1,7 +1,7 @@
.pcr-app {
box-shadow: var(--b3-dialog-shadow);
border: 1px solid var(--b3-theme-surface-lighter);
border-radius: 4px;
border-radius: var(--b3-border-radius);
.pcr-interaction .pcr-result {
@extend .b3-text-field;

View file

@ -42,7 +42,7 @@
line-height: 16px;
padding: 0 4px;
color: var(--b3-theme-on-surface);
border-radius: 2px;
border-radius: var(--b3-border-radius);
font-size: 12px;
user-select: none;
cursor: pointer;

View file

@ -172,7 +172,7 @@
padding: 4px;
line-height: 16px;
height: 16px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
margin: 3px 0;
color: var(--b3-theme-on-surface);
max-width: 70%;
@ -224,10 +224,6 @@
padding-bottom: 40px;
&--enable {
.protyle-background__tags .item:hover svg {
opacity: 1;
}
.protyle-background__img:hover .protyle-icons,
&:hover > .protyle-background__iconw > .protyle-icons,
.protyle-background__icon:hover {
@ -238,8 +234,7 @@
&--mobileshow {
.protyle-background__iconw > .protyle-icons,
.protyle-background__img .protyle-icons,
.protyle-background__tags .item svg {
.protyle-background__img .protyle-icons {
opacity: .86;
}
}
@ -259,7 +254,7 @@
height: 80px;
width: 80px;
float: left;
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
&:not(.fn__none) + .protyle-icons {
@ -297,65 +292,6 @@
}
}
&__tags {
padding: 4px 16px;
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 1;
.item {
margin: 4px 16px 4px 0;
position: relative;
padding: 0 4px;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
line-height: 20px;
color: var(--b3-card-success-color);
background-color: var(--b3-card-success-background);
&:hover {
color: var(--b3-theme-on-background);
}
&--1 {
color: var(--b3-card-info-color);
background-color: var(--b3-card-info-background);
}
&--2 {
color: var(--b3-card-warning-color);
background-color: var(--b3-card-warning-background);
}
&--3 {
color: var(--b3-card-error-color);
background-color: var(--b3-card-error-background);
}
svg {
opacity: 0;
position: absolute;
height: 8px;
width: 8px;
padding: 4px;
border-radius: 10px;
color: var(--b3-theme-on-surface);
background-color: var(--b3-theme-surface);
transition: var(--b3-transition);
top: -6px;
right: -10px;
&:hover {
color: var(--b3-theme-on-background);
background-color: var(--b3-theme-background-light);
}
}
}
}
&__iconw {
bottom: 0;
display: flex;
@ -371,7 +307,7 @@
margin: 34px 16px 0 24px;
position: relative;
font-size: 16px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
&:hover .protyle-title__icon {
opacity: 1;

View file

@ -4,7 +4,7 @@
z-index: 3;
position: fixed;
box-shadow: var(--b3-point-shadow);
border-radius: 4px;
border-radius: var(--b3-border-radius);
display: flex;
transition: top .15s cubic-bezier(0, 0, .2, 1) 0ms;
@ -47,7 +47,7 @@
&-hint {
position: fixed;
border-radius: 4px;
border-radius: var(--b3-border-radius-b);
box-shadow: var(--b3-dialog-shadow);
border: 1px solid var(--b3-theme-surface-lighter);
background-color: var(--b3-menu-background);
@ -60,7 +60,7 @@
&-util {
position: fixed;
border-radius: 4px;
border-radius: var(--b3-border-radius-b);
box-shadow: var(--b3-dialog-shadow);
border: 1px solid var(--b3-theme-surface-lighter);
background-color: var(--b3-menu-background);
@ -85,7 +85,7 @@
margin-right: 4px;
transition: var(--b3-transition);
padding: 0 4px;
border-radius: 2px;
border-radius: var(--b3-border-radius);
border: 1px solid transparent;
color: var(--b3-theme-on-background);
white-space: nowrap;

View file

@ -123,7 +123,7 @@
}
&--order:after {
border-radius: 4px;
border-radius: var(--b3-border-radius);
}
}
@ -305,7 +305,7 @@
width: 4px;
background: var(--b3-theme-surface);
display: none;
border-radius: 4px;
border-radius: var(--b3-border-radius);
cursor: col-resize;
transition: var(--b3-transition);
position: absolute;
@ -342,7 +342,7 @@
color: var(--b3-theme-primary);
background-color: var(--b3-theme-surface-lighter);
padding: 4px;
border-radius: 4px;
border-radius: var(--b3-border-radius);
svg {
height: 12px;
@ -389,7 +389,7 @@
width: 4px;
background-color: var(--b3-theme-surface);
display: none;
border-radius: 4px;
border-radius: var(--b3-border-radius);
cursor: nwse-resize;
transition: var(--b3-transition);
position: absolute;
@ -407,7 +407,7 @@
position: absolute;
bottom: 0;
right: 0;
border-radius: 4px;
border-radius: var(--b3-border-radius);
box-shadow: 0 0 1px 1px var(--b3-theme-on-surface);
box-sizing: border-box;
cursor: nwse-resize;
@ -489,7 +489,7 @@
position: absolute;
left: -18px !important;
top: 50% !important;
border-radius: 10px;
border-radius: var(--b3-border-radius-b);
margin-top: -8px;
border-left: 0 !important;
}

View file

@ -122,7 +122,7 @@
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
border-radius: 3px;
border-radius: var(--b3-border-radius);
font-family: var(--b3-font-family-code);
word-break: break-word;
background-size: 20px 20px;

View file

@ -10,7 +10,7 @@
::-webkit-scrollbar-thumb {
box-sizing: content-box;
border: 4px solid transparent;
border-radius: 5px;
border-radius: var(--b3-border-radius);
box-shadow: inset 0 0 5px 5px var(--b3-scroll-color);
&:hover {

View file

@ -224,7 +224,7 @@
&-tooltip {
background-color: var(--b3-tooltips-color);
border-radius: 10px;
border-radius: var(--b3-border-radius-b);
color: #fff;
display: none;
font-size: 12px;

View file

@ -12,7 +12,7 @@
<div class="b3-dialog__scrim" style="background-color: #1e1e1e"></div>
<img style="position: absolute;width: 36vh;" src="../../icon.png">
<button onclick="window.location.reload()" id="loadingRefresh"
style="display: none;position: absolute;bottom: 16px;background: transparent;border: 1px solid #4285f4;color: #4285f4;border-radius: 4px;line-height: 20px;padding: 4px 8px;">
style="display: none;position: absolute;bottom: 16px;background: transparent;border: 1px solid #4285f4;color: #4285f4;border-radius: 6px;line-height: 20px;padding: 4px 8px;">
Click to Refresh<br>点 击 刷 新
</button>
</div>

View file

@ -46,7 +46,7 @@ export const openSnippets = () => {
const dialog = new Dialog({
width: "70vw",
height: "80vh",
content: `<div class="layout-tab-bar fn__flex fn__flex-shrink" style="border-radius: 4px 4px 0 0">
content: `<div class="layout-tab-bar fn__flex fn__flex-shrink" style="border-radius: var(--b3-border-radius-b) var(--b3-border-radius-b) 0 0">
<div data-type="css" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">CSS</span><span class="fn__flex-1"></span></div>
<div data-type="js" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">JS</span><span class="fn__flex-1"></span></div>
</div>

View file

@ -12,7 +12,7 @@ export const initMessage = () => {
hideMessage(target.parentElement.getAttribute("data-id"));
event.preventDefault();
break;
} else if (target.tagName === "A") {
} else if (target.tagName === "A" || target.tagName === "BUTTON") {
break;
} else if (target.classList.contains("b3-snackbar")) {
hideMessage(target.getAttribute("data-id"));

View file

@ -295,7 +295,7 @@ export const progressLoading = (data: IWebSocketData) => {
progressElement.innerHTML = `<div class="b3-dialog__scrim" style="z-index:400;opacity: 1"></div>
<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:#fff;z-index:400;">
<div style="text-align: right">${data.data.current}/${data.data.total}</div>
<div style="margin: 8px 0;height: 8px;border-radius: 4px;overflow: hidden;background-color:#fff;"><div style="width: ${data.data.current / data.data.total * 100}%;transition: var(--b3-transition);background-color: var(--b3-theme-primary);height: 8px;"></div></div>
<div style="margin: 8px 0;height: 8px;border-radius: var(--b3-border-radius);overflow: hidden;background-color:#fff;"><div style="width: ${data.data.current / data.data.total * 100}%;transition: var(--b3-transition);background-color: var(--b3-theme-primary);height: 8px;"></div></div>
<div>${data.msg}</div>
</div>`;
} else if (data.code === 1) {
@ -304,7 +304,7 @@ export const progressLoading = (data: IWebSocketData) => {
} else {
progressElement.innerHTML = `<div class="b3-dialog__scrim" style="z-index:400;opacity: 1"></div>
<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:#fff;z-index:400;">
<div style="margin: 8px 0;height: 8px;border-radius: 4px;overflow: hidden;background-color:#fff;"><div style="background-color: var(--b3-theme-primary);height: 8px;background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);animation: stripMove 450ms linear infinite;background-size: 50px 50px;"></div></div>
<div style="margin: 8px 0;height: 8px;border-radius: var(--b3-border-radius);overflow: hidden;background-color:#fff;"><div style="background-color: var(--b3-theme-primary);height: 8px;background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);animation: stripMove 450ms linear infinite;background-size: 50px 50px;"></div></div>
<div>${data.msg}</div>
</div>`;
}

View file

@ -311,7 +311,7 @@ export const openHistory = (app: App) => {
});
const contentHTML = `<div class="fn__flex-column" style="height: 100%;">
<div class="layout-tab-bar fn__flex" style="border-radius: 4px 4px 0 0">
<div class="layout-tab-bar fn__flex" style="border-radius: var(--b3-border-radius-b) var(--b3-border-radius-b) 0 0">
<div data-type="doc" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.fileHistory}</span><span class="fn__flex-1"></span></div>
<div data-type="notebook" style="min-width: 160px" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.removedNotebook}</span><span class="fn__flex-1"></span></div>
<div data-type="repo" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.dataSnapshot}</span><span class="fn__flex-1"></span></div>

View file

@ -29,7 +29,7 @@ export const exportImage = (id: string) => {
const exportDialog = new Dialog({
title: window.siyuan.languages.exportAsImage,
content: `<div class="b3-dialog__content" style="${isMobile() ? "padding:8px;" : ""};background-color: var(--b3-theme-background)">
<div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: 10px;" class="export-img protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
<div style="${isMobile() ? "padding: 16px;margin: 16px 0" : "padding: 48px;margin: 8px 0 24px"};border: 1px solid var(--b3-border-color);border-radius: var(--b3-border-radius-b);" class="export-img protyle-wysiwyg${window.siyuan.config.editor.displayBookmarkIcon ? " protyle-wysiwyg--attr" : ""}" id="preview"></div>
<div class="fn__hr--b"></div>
<div class="fn__hr--b"></div>
</div>

View file

@ -50,7 +50,7 @@ export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) =>
label: {
backgroundColor: "#f6f8fa",
borderColor: "#d1d5da",
borderRadius: 5,
borderRadius: 6,
borderWidth: 0.5,
color: "#586069",
lineHeight: 20,

View file

@ -896,7 +896,7 @@ export class Toolbar {
this.subElement.style.width = "";
this.subElement.style.padding = "0";
}
this.subElement.innerHTML = `<div ${(isPin && this.subElement.firstElementChild.getAttribute("data-drag") === "true") ? 'data-drag="true"' : ""}><div class="block__icons block__icons--menu fn__flex">
this.subElement.innerHTML = `<div ${(isPin && this.subElement.firstElementChild.getAttribute("data-drag") === "true") ? 'data-drag="true"' : ""}><div class="block__icons block__icons--menu fn__flex" style="border-radius: var(--b3-border-radius-b) var(--b3-border-radius-b) 0 0;">
<span class="fn__flex-1 resize__move">
${title}
</span>
@ -913,7 +913,7 @@ export class Toolbar {
<span class="fn__space"></span>
<button data-type="close" class="block__icon block__icon--show b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.close}"><svg style="width: 10px"><use xlink:href="#iconClose"></use></svg></button>
</div>
<textarea ${protyle.disabled ? " readonly" : ""} spellcheck="false" class="b3-text-field b3-text-field--text fn__block" placeholder="${placeholder}" style="${isMobile() ? "" : "width:" + Math.max(480, renderElement.clientWidth * 0.7) + "px"};max-height:50vh;min-height: 48px;min-width: 268px"></textarea></div>`;
<textarea ${protyle.disabled ? " readonly" : ""} spellcheck="false" class="b3-text-field b3-text-field--text fn__block" placeholder="${placeholder}" style="${isMobile() ? "" : "width:" + Math.max(480, renderElement.clientWidth * 0.7) + "px"};max-height:50vh;min-height: 48px;min-width: 268px;border-radius: 0 0 var(--b3-border-radius-b) var(--b3-border-radius-b)"></textarea></div>`;
const autoHeight = () => {
textElement.style.height = textElement.scrollHeight + "px";
if (isMobile()) {

View file

@ -82,7 +82,7 @@ export const genSearch = (app: App, config: ISearchOption, element: Element, clo
}
});
const data = window.siyuan.storage[Constants.LOCAL_SEARCHKEYS];
element.innerHTML = `<div class="fn__flex-column" style="height: 100%;${closeCB ? "border-radius: 4px;overflow: hidden;" : ""}">
element.innerHTML = `<div class="fn__flex-column" style="height: 100%;${closeCB ? "border-radius: var(--b3-border-radius-b);overflow: hidden;" : ""}">
<div class="b3-form__icon search__header">
<span class="fn__a" id="searchHistoryBtn">
<svg data-menu="true" class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>