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

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

Browse source
This commit is contained in:
Vanessa 2024-10-21 10:17:19 +08:00
parent 4a0600bea7
commit 54f2a61f1e
3 changed files with 68 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -134,6 +134,15 @@
/* 下拉菜单 */
--b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(95, 99, 104, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);
/* switch */
--b3-switch-background: #e1e3e1;
--b3-switch-border: #747775;
--b3-switch-hover: rgba(31, 31, 31, 0.06);
--b3-switch-checked: #fff;
--b3-switch-checked-background: #0b57d0;
--b3-switch-checked-hover: #d3e3fd;
--b3-switch-checked-hover2: rgba(31, 31, 31, .06);
/* 阴影 */
--b3-point-shadow: 0 0 1px 0 rgba(0, 0, 0, .1), 0 0 2px 0 rgba(0, 0, 0, .2);
--b3-dialog-shadow: 0 8px 24px rgba(0, 0, 0, .2);

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

@ -133,6 +133,15 @@
/* 下拉菜单 */
--b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(154, 160, 166, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);
/* switch */
--b3-switch-background: #444746;
--b3-switch-border: #8e918f;
--b3-switch-hover: rgba(253, 252, 251, .10);
--b3-switch-checked: #0842a0;
--b3-switch-checked-background: #a8c7fa;
--b3-switch-checked-hover: #0842a0;
--b3-switch-checked-hover2: rgba( 253,252,251, .10);
/* 阴影 */
--b3-point-shadow: inset 0 .5px .5px .5px rgba(255, 255, 255, .09), 0 3px 6px rgba(0, 0, 0, .04), 0 0 0 0 transparent;
--b3-dialog-shadow: 0 8px 24px #010409;

87
app/src/assets/scss/component/_switch.scss
View file

@ -1,17 +1,16 @@
.b3-switch {
flex-shrink: 0;
-webkit-appearance: none;
box-sizing: border-box;
width: 28px;
height: 12px;
border: 1px solid transparent;
width: 36px;
height: 20px;
border: 1px solid var(--b3-switch-border);
border-radius: var(--b3-border-radius-b);
margin: 0;
outline: none;
display: inline-block;
position: relative;
cursor: pointer;
background-color: var(--b3-theme-surface-lighter);
background-color: var(--b3-switch-background);
overflow: inherit;
user-select: none;
@ -21,54 +20,68 @@
}
&--menu {
margin: 13px 6px 13px 0;
margin: 2px 2px 2px 0;
align-self: center;
}
&:after {
border: 1px solid var(--b3-theme-surface-lighter);
box-shadow: var(--b3-point-shadow);
box-sizing: border-box;
width: 16px;
height: 16px;
width: 12px;
height: 12px;
border-radius: 50%;
pointer-events: none;
z-index: 1;
content: '';
background-color: #fff;
left: -4px;
top: -3px;
content: "";
background-color: var(--b3-switch-border);
display: block;
left: 9px;
position: absolute;
transition: transform .3s ease, opacity .2s;
top: 50%;
transform: translate(-50%, -50%);
transition: left 80ms linear, background-color 80ms linear, width 80ms linear, height 80ms linear;
}
&:before {
content: '';
left: -14px;
right: initial;
top: -13px;
width: 36px;
height: 36px;
background-color: rgba(158, 158, 158, .12);
display: none;
border-radius: 24px;
content: "";
left: 9px;
position: absolute;
transition: transform .3s ease, opacity .2s;
opacity: .54;
top: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
background-color: var(--b3-switch-hover);
display: none;
border-radius: 50%;
transition: background-color 80ms linear;
}
&:checked {
background-color: var(--b3-theme-primary-light);
background-color: var(--b3-switch-checked-background);
border-color: transparent;
&:after {
background-color: var(--b3-theme-primary);
border-color: var(--b3-theme-primary);
background-color: var(--b3-switch-checked);
height: 16px;
width: 16px;
}
&:before,
&:after {
transform: translateX(19px);
transition: transform .6s cubic-bezier(.2, .85, .32, 1.2), opacity .3s;
left: 25px;
}
&:hover:not(:disabled) {
&:after {
background-color: var(--b3-switch-checked-hover);
}
&:before {
background-color: var(--b3-switch-checked-hover2);
}
}
&:active:not(:disabled):after {
height: 18px;
width: 18px;
}
}
@ -77,12 +90,12 @@
cursor: not-allowed;
}
&:hover:not(:disabled):before,
&:focus:not(:disabled):before {
display: inline-block;
&:active:not(:disabled):after {
height: 14px;
width: 14px;
}
&:focus:not(:disabled):before {
background-color: var(--b3-theme-primary-lightest);
&:hover:not(:disabled):before {
display: inline-block;
}
}