/* scrollbars, haiku style: a sunken trough, a raised thumb with grip lines, and an arrow
button at each end. this is webkit's ::-webkit-scrollbar (chrome, safari, edge). firefox
only takes two colours, and chrome ignores the webkit styles wherever scrollbar-color is
set, so that only goes where the webkit ones aren't understood. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-corner { background: var(--chrome); }
::-webkit-scrollbar-track {
background: var(--track);
box-shadow: inset 1px 1px 0 var(--lo-deep), inset -1px -1px 0 var(--hi);
}
::-webkit-scrollbar-thumb {
border: 1px solid var(--edge); border-radius: var(--r-box);
box-shadow: var(--raised);
}
/* three grip lines across the middle, drawn as lit and shaded pairs */
::-webkit-scrollbar-thumb:vertical {
background:
repeating-linear-gradient(var(--lo-deep) 0 1px, var(--hi) 1px 2px, transparent 2px 3px) center / 6px 8px no-repeat,
linear-gradient(90deg, var(--control), var(--control-mid) 45%, var(--control-end));
}
::-webkit-scrollbar-thumb:horizontal {
background:
repeating-linear-gradient(90deg, var(--lo-deep) 0 1px, var(--hi) 1px 2px, transparent 2px 3px) center / 8px 6px no-repeat,
var(--grad-control);
}
::-webkit-scrollbar-thumb:hover:vertical {
background:
repeating-linear-gradient(var(--lo-deep) 0 1px, var(--hi) 1px 2px, transparent 2px 3px) center / 6px 8px no-repeat,
linear-gradient(90deg, var(--control), var(--control-hover-mid) 45%, var(--control-hover-end));
}
::-webkit-scrollbar-thumb:hover:horizontal {
background:
repeating-linear-gradient(90deg, var(--lo-deep) 0 1px, var(--hi) 1px 2px, transparent 2px 3px) center / 8px 6px no-repeat,
var(--grad-control-hover);
}
/* one arrow button at each end. the arrows are two right triangles drawn with gradients,
since a url() image couldn't follow the theme's colours */
::-webkit-scrollbar-button {
display: block; width: 14px; height: 14px;
background-color: var(--control-mid);
background-repeat: no-repeat;
border: 1px solid var(--edge);
box-shadow: var(--raised);
}
::-webkit-scrollbar-button:active { background-color: var(--control-pressed-mid); box-shadow: var(--sunken); }
::-webkit-scrollbar-button:vertical:start:decrement {
background-image: linear-gradient(to bottom right, transparent 50%, var(--glyph) 50%), linear-gradient(to bottom left, transparent 50%, var(--glyph) 50%);
background-size: 4px 4px; background-position: 2px 4px, 6px 4px;
}
::-webkit-scrollbar-button:vertical:end:increment {
background-image: linear-gradient(to top right, transparent 50%, var(--glyph) 50%), linear-gradient(to top left, transparent 50%, var(--glyph) 50%);
background-size: 4px 4px; background-position: 2px 4px, 6px 4px;
}
::-webkit-scrollbar-button:horizontal:start:decrement {
background-image: linear-gradient(to bottom right, transparent 50%, var(--glyph) 50%), linear-gradient(to top right, transparent 50%, var(--glyph) 50%);
background-size: 4px 4px; background-position: 4px 2px, 4px 6px;
}
::-webkit-scrollbar-button:horizontal:end:increment {
background-image: linear-gradient(to bottom left, transparent 50%, var(--glyph) 50%), linear-gradient(to top left, transparent 50%, var(--glyph) 50%);
background-size: 4px 4px; background-position: 4px 2px, 4px 6px;
}
/* chrome also offers a second pair of buttons at each end */
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment, ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
@supports not selector(::-webkit-scrollbar) {
* { scrollbar-color: var(--control-end) var(--track); }
}