/* ============================================================================ S4U lite mode (site wide). Cuts the expensive paint work for low-powered devices: backdrop blur off everywhere, transitions and decorative animations reduced to near zero on s4u surfaces. Enabled per device via localStorage 's4u.liteMode', applied as the `s4u-lite` class on by an inline head snippet in the three layouts (_Layout, _S4ULayout, _S4ULoginLayout) BEFORE first paint. The class does NOT cascade into iframes, so every document (mosaic feed boxes, the channel-browser sheet) self-applies via its own snippet, and a `storage` listener in the snippet follows toggles made in other tabs or in the parent. Toggle UIs: the page-size dialog (page-zoom.js) and the Add-ons page. Standalone on purpose: it also loads on the legacy Materialize layout where design-system.css is absent. Old-TV notes (Chromium ~49): plain selectors only (attribute substring is fine), no oklch, no :is()/:where(), no `inset`. Kill style: near-zero DURATIONS, never `animation/transition: none`. transitionend/animationend still fire and `forwards` fills still land on their end state, so JS that waits on either keeps working, just instantly. The motion kill is scoped to s4u surfaces (.s4u content plus s4u-prefixed chrome/widgets) so vendor loading indicators on legacy pages (Materialize preloader, SweetAlert, Clappr) keep animating. ========================================================================== */ /* ---- 1) Backdrop blur off ------------------------------------------------ The single biggest paint cost of the redesign (only s4u CSS uses it), and brutal with hardware acceleration off. Global under the flag on purpose. */ html.s4u-lite *, html.s4u-lite *::before, html.s4u-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ---- 2) Blur-dependent surfaces ------------------------------------------ These read fine blurred at low alpha but turn see-through without it. Nudge toward opaque; values track the source declarations (same rgb, higher alpha). Scrims and near-opaque sheets (alpha >= 0.9) need no help. */ /* login glass card: login.css .s4u-card rgba(14,14,18,0.62) */ html.s4u-lite .s4u-card { background: rgba(14, 14, 18, 0.94); } /* shell top bar, content scrolls under it: app-shell.css .s4u-top rgba(10,10,12,0.72) */ html.s4u-lite .s4u-top { background: rgba(10, 10, 12, 0.96); } /* immersive-exit chip over live video: app-shell.css rgba(18,18,22,0.62) */ html.s4u-lite .s4u-immersive-exit { background: rgba(18, 18, 22, 0.9); } /* mosaic hover pills over video: mosaic.css rgba(12,11,10,0.82) */ html.s4u-lite .s4u .colm .tile-promote { background: rgba(12, 11, 10, 0.94); } html.s4u-lite .s4u .colm .tile-framecatch::before, html.s4u-lite .s4u .colm:not(.is-hero) .tile-swapcatch::before { background: rgba(12, 11, 10, 0.94); } /* ---- 3) Motion off on s4u surfaces --------------------------------------- */ html.s4u-lite .s4u, html.s4u-lite .s4u::before, html.s4u-lite .s4u::after, html.s4u-lite .s4u *, html.s4u-lite .s4u *::before, html.s4u-lite .s4u *::after, html.s4u-lite [class*="s4u-"], html.s4u-lite [class*="s4u-"]::before, html.s4u-lite [class*="s4u-"]::after, html.s4u-lite [class*="s4u-"] *, html.s4u-lite [class*="s4u-"] *::before, html.s4u-lite [class*="s4u-"] *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } /* ---- 4) Functional animations survive the kill --------------------------- Loading feedback is not decoration: frozen bars read as a hang. Durations restated from the source files (keep in sync if those change). Higher specificity than the kill above, so order is belt and braces. */ /* indeterminate loading bars: app-shell.css (1.05s) + login.css (1.1s) share the class; one restated duration covers both, visually identical */ html.s4u-lite .s4u-progress .bar { animation-duration: 1.1s !important; animation-iteration-count: infinite !important; } /* player restart busy spinner: player.css s4u-restart-spin 0.8s linear infinite */ html.s4u-lite .s4u .s4u-stage-info__link--restart.is-busy svg { animation-duration: 0.8s !important; animation-iteration-count: infinite !important; } /* mosaic "Audio" cue: rests at opacity:0 and only its 3s forwards animation ever shows it (mosaic.css s4u-audio-cue); a near-zero duration would jump straight to the faded end state and the cue would never be seen */ html.s4u-lite .s4u .colm .tile-selected::after { animation-duration: 3s !important; animation-iteration-count: 1 !important; } /* ---- 5) OS-level "reduce motion" gets the motion kill for free ------------ Same rules as sections 3 and 4 without the flag: users who already asked their OS for less motion (accessibility, or slow machines with Windows animation effects off) get it even with Lite mode off. Blur stays: it is a paint cost, not motion, and this preference is strictly about motion. Keep in sync with sections 3 and 4. */ @media (prefers-reduced-motion: reduce) { .s4u, .s4u::before, .s4u::after, .s4u *, .s4u *::before, .s4u *::after, [class*="s4u-"], [class*="s4u-"]::before, [class*="s4u-"]::after, [class*="s4u-"] *, [class*="s4u-"] *::before, [class*="s4u-"] *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } .s4u-progress .bar { animation-duration: 1.1s !important; animation-iteration-count: infinite !important; } .s4u .s4u-stage-info__link--restart.is-busy svg { animation-duration: 0.8s !important; animation-iteration-count: infinite !important; } .s4u .colm .tile-selected::after { animation-duration: 3s !important; animation-iteration-count: 1 !important; } }