mediawiki-skins-Citizen/resources/skins.citizen.styles/common/scrollbar.less
alistair3149 37cdf91257
feat(core): deprecate background-color-framed and input
background-color-framed can be replaced with color-surface-2 most of the time.
input is not used.
They are both deprecated in favor of the simpler color-surface system
2022-12-14 12:56:17 -05:00

47 lines
951 B
Plaintext

// Don't style scrollbar for touch device
// Since the scrollbar will stay visible if styled
// Besides scrollbar is subtle enough on touch devices
@media ( hover: hover ) {
* {
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-track {
background: transparent;
transition: @transition-background;
&:hover {
background: var( --background-color-quiet--hover );
}
}
::-webkit-scrollbar-thumb {
border: 5px solid transparent;
border-radius: var( --border-radius--large );
background-clip: content-box;
box-shadow: inset 0 0 0 10px var( --background-color-icon );
&:hover {
box-shadow: inset 0 0 0 10px var( --background-color-icon--hover );
}
&:active {
box-shadow: inset 0 0 0 10px var( --background-color-icon--active );
}
}
::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
}