fix: remove deprecated scrollbar styles (#1687)
This commit is contained in:
parent
22fd567eb1
commit
3129ae7344
|
@ -10,18 +10,13 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// Firefox with scrollbar config changes as of 2018-11
|
// Firefox 64+
|
||||||
scrollbar-face-color: var(--scrollbar-face-color);
|
|
||||||
scrollbar-track-color: var(--scrollbar-track-color);
|
|
||||||
// Firefox nightly as of 2018-11, new standard version
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
|
||||||
scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color);
|
scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
// reset firefox styles so they don't cascade past HTML
|
// reset firefox styles so they don't cascade past HTML
|
||||||
scrollbar-face-color: initial;
|
|
||||||
scrollbar-track-color: initial;
|
|
||||||
scrollbar-color: initial;
|
scrollbar-color: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -29,28 +24,32 @@ body {
|
||||||
// Chrome/Safari
|
// Chrome/Safari
|
||||||
//
|
//
|
||||||
|
|
||||||
body::-webkit-scrollbar {
|
body {
|
||||||
width: var(--scrollbar-width);
|
|
||||||
height: var(--scrollbar-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
body::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar {
|
||||||
background: var(--scrollbar-face-color);
|
width: var(--scrollbar-width);
|
||||||
border-radius: var(--scrollbar-border-radius);
|
height: var(--scrollbar-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
body::-webkit-scrollbar-thumb:hover {
|
&::-webkit-scrollbar-thumb {
|
||||||
background: var(--scrollbar-face-color-hover);
|
background: var(--scrollbar-face-color);
|
||||||
}
|
border-radius: var(--scrollbar-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
body::-webkit-scrollbar-thumb:active {
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--scrollbar-face-color-active);
|
background: var(--scrollbar-face-color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
body::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active {
|
&::-webkit-scrollbar-thumb:active {
|
||||||
background: var(--scrollbar-track-color);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
body::-webkit-scrollbar-corner {
|
|
||||||
background: var(--scrollbar-background-color);
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue