feat: custom scrollbar styling — thin, dark, brand cyan hover
6px wide, rgba(48,54,61) thumb (--border at 60%), cyan hover/active. Applied globally via * selector — covers sidebar, grid, settings, and any future scrollable area. Firefox (scrollbar-width/color) + WebKit (::-webkit-scrollbar) cross-browser.
This commit is contained in:
@@ -60,6 +60,43 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Custom scrollbar — thin, dark, matches theme
|
||||
============================================================ */
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(48, 54, 61, 0.6) transparent;
|
||||
}
|
||||
|
||||
/* WebKit (Chrome, Edge, Safari) */
|
||||
*::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: rgba(48, 54, 61, 0.6);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 200, 200, 0.35); /* --accent at 35% */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:active {
|
||||
background: rgba(0, 200, 200, 0.55); /* --accent at 55% */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
html,
|
||||
body {
|
||||
|
||||
@@ -2077,3 +2077,16 @@ def test_css_multi_device_fields_transition() -> None:
|
||||
"#multi-device-fields must have a transition property for smooth enable/disable animation"
|
||||
)
|
||||
assert "opacity" in body, "#multi-device-fields transition must include opacity"
|
||||
|
||||
|
||||
# ============================================================
|
||||
# Custom scrollbar styling (thin, dark, brand cyan hover)
|
||||
# ============================================================
|
||||
|
||||
|
||||
def test_custom_scrollbar_styles():
|
||||
"""Custom scrollbar styling must exist for both WebKit and Firefox."""
|
||||
css = read_css()
|
||||
assert "scrollbar-width: thin" in css, "Firefox scrollbar-width must be set"
|
||||
assert "::-webkit-scrollbar" in css, "WebKit scrollbar rules must exist"
|
||||
assert "border-radius: 3px" in css or "border-radius:3px" in css, "scrollbar thumb must be rounded"
|
||||
|
||||
Reference in New Issue
Block a user