56 lines
1.2 KiB
SCSS
56 lines
1.2 KiB
SCSS
// By design, scrollbar styles are only applied to the top level scroller.
|
|
// Note that the nonstandard -webkit-* version cannot be "unset,"
|
|
// which is inconvenient. But it also doesn't cascade, so we can
|
|
// use that to our advantage.
|
|
//
|
|
// See: https://superuser.com/a/417750
|
|
|
|
//
|
|
// Firefox
|
|
//
|
|
|
|
html {
|
|
// Firefox 64+
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
|
|
scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color);
|
|
}
|
|
|
|
body {
|
|
// reset firefox styles so they don't cascade past HTML
|
|
scrollbar-color: initial;
|
|
}
|
|
|
|
//
|
|
// Chrome/Safari
|
|
//
|
|
|
|
body {
|
|
|
|
&::-webkit-scrollbar {
|
|
width: var(--scrollbar-width);
|
|
height: var(--scrollbar-height);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: var(--scrollbar-face-color);
|
|
border-radius: var(--scrollbar-border-radius);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-face-color-hover);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb:active {
|
|
background: var(--scrollbar-face-color-active);
|
|
}
|
|
|
|
&::-webkit-scrollbar-track, &::-webkit-scrollbar-track:hover, &::-webkit-scrollbar-track:active {
|
|
background: var(--scrollbar-track-color);
|
|
}
|
|
|
|
&::-webkit-scrollbar-corner {
|
|
background: var(--scrollbar-background-color);
|
|
}
|
|
|
|
}
|