/* ═══════════════════════════════════════════════════════════════════════════
Global custom scrollbar — "Tracked groove" (12px, visible track + floating thumb).
Scope: PANEL ONLY. This sheet is loaded from includes/theme_init.php, which is
included exclusively by administration/* pages — the public marketing site never
loads it, so visitors are untouched.
Per-user toggle: /settings → users.ui_scrollbar ('on'|'off') → mirrored to
localStorage['iptv-scrollbar'] and stamped on PRE-PAINT as .sb-on / .sb-off
(same trick as html.dark, so there's no flash of the wrong scrollbar).
🔴 BROWSER GOTCHA: in Chromium, setting `scrollbar-color` (or a non-auto
`scrollbar-width`) SILENTLY DISABLES all ::-webkit-scrollbar styling. So the
standards-track properties are fenced behind `@supports not selector(::-webkit-scrollbar)`
— i.e. they only ever reach Firefox. Never hoist them out of that block.
Firefox can only do thumb+track COLOUR and thin/auto width (no radius, no hover),
so it gets a simpler—but still branded—bar. That's a browser limit, not a shortcut.
═══════════════════════════════════════════════════════════════════════════ */
:root {
--sb-size: 12px;
--sb-pad: 3px; /* transparent border + background-clip:content-box = thumb "floats" in the groove */
--sb-track: #f8fafc;
--sb-track-bd: #eef1f5;
--sb-thumb: #b6c0cf;
--sb-thumb-hover: #8f9cb0;
}
html.dark {
--sb-track: #0f172a;
--sb-track-bd: #283449;
--sb-thumb: #475569;
--sb-thumb-hover: #64748b;
}
/* ══════════════ ON — the bar, on the page scroller AND every sub-container ══════════════ */
html.sb-on::-webkit-scrollbar,
html.sb-on *::-webkit-scrollbar {
width: var(--sb-size);
height: var(--sb-size);
}
html.sb-on::-webkit-scrollbar-track,
html.sb-on *::-webkit-scrollbar-track { background: var(--sb-track); }
/* Directional hairline so the groove reads as a groove on both axes */
html.sb-on::-webkit-scrollbar-track:vertical,
html.sb-on *::-webkit-scrollbar-track:vertical { border-left: 1px solid var(--sb-track-bd); }
html.sb-on::-webkit-scrollbar-track:horizontal,
html.sb-on *::-webkit-scrollbar-track:horizontal { border-top: 1px solid var(--sb-track-bd); }
html.sb-on::-webkit-scrollbar-thumb,
html.sb-on *::-webkit-scrollbar-thumb {
background: var(--sb-thumb);
border-radius: 8px;
border: var(--sb-pad) solid transparent;
background-clip: content-box;
}
html.sb-on::-webkit-scrollbar-thumb:hover,
html.sb-on *::-webkit-scrollbar-thumb:hover {
background: var(--sb-thumb-hover);
background-clip: content-box;
}
/* Where a horizontal and a vertical bar meet */
html.sb-on::-webkit-scrollbar-corner,
html.sb-on *::-webkit-scrollbar-corner { background: var(--sb-track); }
/* Firefox only (see the gotcha above — must stay fenced) */
@supports not selector(::-webkit-scrollbar) {
html.sb-on,
html.sb-on * {
scrollbar-width: auto;
scrollbar-color: var(--sb-thumb) var(--sb-track);
}
}
/* ══════════════ OFF — no visible bar anywhere (still fully scrollable) ══════════════ */
html.sb-off,
html.sb-off * { scrollbar-width: none; -ms-overflow-style: none; }
html.sb-off::-webkit-scrollbar,
html.sb-off *::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ══════════════════════════════════════════════════════════════════════════════════════
APP SHELL — "everything inside": the scrollbar lives BETWEEN the header and the footer,
never running the full window height behind them.
── HOW TO USE ON A NEW PAGE (do this for every new panel page) ──
1. ← opts the page in
2.
…
← the ONLY thing that scrolls
Header/footer are pinned automatically; #pageScroll takes the remaining height.
🔴 #pageScroll must WRAP , not BE : our is `max-w-7xl mx-auto` (centred),
so making main itself the scroller floats the scrollbar in the middle of the page instead
of at the window edge. Keep the wrapper full-width.
🔴 `html` MUST be clamped, or you get DOUBLE SCROLLBARS. includes/libredesk_widget.php sets
`html{overflow-x:hidden}`, which forces `overflow-y` to compute to `auto` → becomes a
scroll container. Chrome then paints a second, INERT scrollbar next to the real inner one
(it won't actually scroll — scrollTop stays 0 — so it can't be detected by comparing
scrollHeight/clientHeight; you have to look, or assign scrollTop and read it back).
══════════════════════════════════════════════════════════════════════════════════════ */
html.app-shell { height: 100%; overflow: hidden; }
html.app-shell body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
html.app-shell body > header,
html.app-shell body > footer { flex-shrink: 0; }
html.app-shell #pageScroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* 🔴 KEEP THE HEADER/FOOTER ALIGNED WITH THE SCROLLING CONTENT.
The header/footer live OUTSIDE #pageScroll, so they span the full window width, while the
scroller loses --sb-size to the bar. Both centre their inner `max-w-7xl mx-auto` container, so
without this the content ends up centred in a narrower box and sits HALF A SCROLLBAR to the
LEFT of the header/footer — content visibly "shifts left" when the scrollbar is on.
Fix = give the header/footer the same gutter the scroller loses.
`scrollbar-gutter:stable` reserves it even when the content is short enough not to overflow,
so the alignment holds whether or not a bar is actually showing.
When the scrollbar is OFF its width is 0 → gutter is 0 and the padding rule doesn't apply,
so everything lines up in that state too. */
html.app-shell #pageScroll { scrollbar-gutter: stable; }
html.sb-on.app-shell body > header,
html.sb-on.app-shell body > footer { padding-right: var(--sb-size); }
/* ══════════════ Opt-out: .no-sb ══════════════
For the small horizontal chip / tab strips (filter chips, source tabs, bulk bars).
A 12px groove under a 30px-tall chip row wrecks it — these scroll by drag/swipe.
Specificity (0,2,1) intentionally beats the global (0,1,1).
🔴 `.scrollbar-none` is an ALIAS, not decoration: the playlist editor already marks its
7 chip rows with it, but the class was NEVER DEFINED anywhere — it only appeared to work
because a global `*{scrollbar-width:none}` (hidden inside includes/libredesk_widget.php)
was killing every bar on the page. That global is now gone, so defining the alias here is
what keeps those rows clean. `.ie-chiprow` is the icon editor's equivalent. */
html.sb-on .no-sb,
html.sb-on .scrollbar-none,
html.sb-on .ie-chiprow,
html.sb-on .no-sb *,
html.sb-on .scrollbar-none * { scrollbar-width: none; -ms-overflow-style: none; }
html.sb-on .no-sb::-webkit-scrollbar,
html.sb-on .scrollbar-none::-webkit-scrollbar,
html.sb-on .ie-chiprow::-webkit-scrollbar,
html.sb-on .no-sb *::-webkit-scrollbar,
html.sb-on .scrollbar-none *::-webkit-scrollbar { width: 0; height: 0; display: none; }