react-restyle-components
Version:
Easy use restyle components
71 lines (70 loc) • 3.35 kB
CSS
.theme--dark {
--scrollbar-background: transparent;
--scrollbar-button-display: none;
--scrollbar-thumb: rgb(142 142 142);
}
.theme--light {
--scrollbar-background: transparent;
--scrollbar-button-display: none;
--scrollbar-thumb: rgb(163 179 221);
}
/* The bar/track */
::-webkit-scrollbar {
background: var(--scrollbar-background);
width: var(--scrollbar-size, 20px);
height: var(--scrollbar-size, 20px);
}
/* The thumb/drag/pill */
::-webkit-scrollbar-thumb {
border: calc(var(--scrollbar-size, 20px) * var(--scrollbar-inset, 0.2)) solid transparent;
border-radius: calc(var(--scrollbar-size, 20px) / 2);
background-color: rgb(from var(--scrollbar-thumb) r g b / 0.3);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(from var(--scrollbar-thumb) r g b / 0.7);
}
/* The buttons */
::-webkit-scrollbar-button:single-button {
display: var(--scrollbar-button-display, block);
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: var(--scrollbar-size, 20px);
width: var(--scrollbar-size, 20px);
height: var(--scrollbar-size, 20px);
}
::-webkit-scrollbar-button:single-button:hover {
background-color: rgb(from var(--scrollbar-thumb) r g b / 0.25);
}
::-webkit-scrollbar-button:not(:single-button) {
display: none;
}
/* Left button */
.theme--dark ::-webkit-scrollbar-button:horizontal:start {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='12,6 12,14 8,10'/></svg>");
}
.theme--light ::-webkit-scrollbar-button:horizontal:start {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='12,6 12,14 8,10'/></svg>");
}
/* Right button */
.theme--dark ::-webkit-scrollbar-button:horizontal:end {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='8,6 8,14 12,10'/></svg>");
}
.theme--light ::-webkit-scrollbar-button:horizontal:end {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='8,6 8,14 12,10'/></svg>");
}
/* Up button */
.theme--dark ::-webkit-scrollbar-button:vertical:start {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='6,12 14,12 10,8'/></svg>");
}
.theme--light ::-webkit-scrollbar-button:vertical:start {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='6,12 14,12 10,8'/></svg>");
}
/* Down button */
.theme--dark ::-webkit-scrollbar-button:vertical:end {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(185, 200, 231)'><polygon points='6,8 14,8 10,12'/></svg>");
}
.theme--light ::-webkit-scrollbar-button:vertical:end {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgb(77, 77, 77)'><polygon points='6,8 14,8 10,12'/></svg>");
}