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;
|
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 */
|
/* Base */
|
||||||
html,
|
html,
|
||||||
body {
|
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"
|
"#multi-device-fields must have a transition property for smooth enable/disable animation"
|
||||||
)
|
)
|
||||||
assert "opacity" in body, "#multi-device-fields transition must include opacity"
|
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