/* ══════════════════════════════════════════════════════════════════════════ THE SCROLLBAR LAW — one rule, every Lipi web surface. Not negotiable. A scrollbar is visible ONLY while the user is actively scrolling the very element it belongs to. Never at rest. Never on hover. Never because some OTHER element on the page was scrolled. If a bar can be seen without the user having started a scroll on that element, this file is being violated. Why it has to live in one shared file ------------------------------------- `scrollbar-color` is an INHERITED property. Declaring the reveal once on (the old pattern) leaked it into every nested scroller: scroll the dashboard and the IR card's key list, the chat log and the country picker all lit up their bars at once. The universal reset below re-declares the property on every element, which severs that inheritance, and `.is-scrolling` — put on the element that actually scrolled, and only for as long as it is scrolling (see scrollbars.js) — is the ONLY selector in the codebase allowed to paint a thumb. Engine notes ------------ · Chrome/Edge: once `scrollbar-color` is set, ::-webkit-scrollbar-* rules are ignored entirely. The -webkit- block below is therefore a fallback for engines with no standard scrollbar properties (Safari < 18.2). · Per-element opt-outs are still fine: any rule with a class/id selector beats `*`, so `scrollbar-width: none` on a horizontal strip (.scenes, .filters, .room-tabs …) keeps hiding that bar completely. Hiding always obeys the law; showing at rest does not. ══════════════════════════════════════════════════════════════════════════ */ :root { /* Pages that theme their scrollbar set --scrollbar; this is the fallback. */ --sb-thumb: rgba(150, 150, 142, 0.42); } /* Reset — every element, every engine: no thumb, no track, no inheritance. */ * { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.3s ease; } /* Reveal — the scrolled element, and nothing else. */ .is-scrolling { scrollbar-color: var(--scrollbar, var(--sb-thumb)) transparent; } /* Legacy WebKit fallback (Safari < 18.2, older iOS). Same law. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background-color: transparent; background-clip: content-box; border: 2px solid transparent; border-radius: 999px; transition: background-color 0.3s ease; } .is-scrolling::-webkit-scrollbar-thumb { background-color: var(--scrollbar, var(--sb-thumb)); } /* Touch surfaces already draw their own transient overlay indicator — never reserve layout space for a bar that is never painted. */ @media (pointer: coarse) { * { scrollbar-gutter: auto; } }