style: more flexible scrollbar

This commit is contained in:
charlie
2020-12-18 15:30:25 +08:00
parent 67e268ef8f
commit 9a3484265b
2 changed files with 33 additions and 19 deletions

View File

@@ -1,24 +1,38 @@
:root {
scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color) !important;
scrollbar-width: thin !important;
scrollbar-width: thin;
scrollbar-color: var(--ls-scrollbar-foreground-color) var(--ls-scrollbar-background-color);
}
html:not(.is-mac)[data-theme=dark] {
&::-webkit-scrollbar,
html::-webkit-scrollbar-track-piece {
background-color: var(--ls-scrollbar-background-color);
border: 4px solid var(--ls-scrollbar-background-color);
}
&::-webkit-scrollbar-thumb {
html:not(.is-mac) {
::-webkit-scrollbar-thumb {
background-color: var(--ls-scrollbar-foreground-color);
background-clip: padding-box;
min-height: 28px;
}
&::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar {
background-color: var(--ls-scrollbar-background-color);
}
::-webkit-scrollbar-thumb:active {
background-color: var(--ls-scrollbar-thumb-hover-color);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:active {
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-corner {
background: transparent;
}
}
html[data-theme=dark] {