/* ═══════════════════════════════════════════════════════════ dark-mode-root.css — RUB386 Root-level background fix: eliminates ALL white gaps in dark mode. ═══════════════════════════════════════════════════════════ LOADS : SYNCHRONOUSLY (not deferred) — right after core.css. Must be synchronous so it applies before first render and eliminates overscroll/elastic-scroll white gaps. SCOPE : html, body, #app-root, key layout wrappers. Additive — does not override any component color. STRATEGY: 1. html gets background: var(--bg-app) — the single root fix. This fills the browser canvas behind in all modes. In light mode --bg-app is #F3F2EE (correct warm off-white). In dark/black mode it resolves to the dark value. 2. body and #app-root get min-height: 100dvh — belt + suspenders. core.css already sets this on body; we reinforce it here. 3. .loading-overlay hardcoded white rgba fixed for dark modes. 4. .app-shell, .app-main-area get background: inherit — ensures no gap between layout containers and html canvas. ═══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ 1. ROOT CANVAS — THE SINGLE FIX THAT CLOSES ALL GAPS ══════════════════════════════════════════════════════════ html has no background by default → browser shows white. Setting background: var(--bg-app) fills the full document canvas — including areas revealed by: • overscroll / elastic scroll (macOS, iOS rubber-band) • mobile pull-to-refresh reveal • short pages that don't fill the viewport • any layout container without an explicit background */ html { background: var(--bg-app); } /* ══════════════════════════════════════════════════════════ 2. BODY FULL-HEIGHT GUARANTEE ══════════════════════════════════════════════════════════ core.css already sets min-height: 100vh; min-height: 100dvh. We reinforce here in the synchronous layer so it's present on the very first render frame. */ body { min-height: 100vh; min-height: 100dvh; background: var(--bg-app); /* redundant with core.css, intentional */ } /* ══════════════════════════════════════════════════════════ 3. APP ROOT — fills full viewport height ══════════════════════════════════════════════════════════ #app-root is the vanilla JS mount point. Without a min-height it can be shorter than the viewport on low-content pages, exposing the html background below it. */ #app-root { min-height: 100dvh; } /* ══════════════════════════════════════════════════════════ 4. LAYOUT WRAPPERS — background: inherit propagation ══════════════════════════════════════════════════════════ The app shell and main content area must not introduce a white gap. Using inherit ensures they always match the body. */ .app-shell, .app-main-area, #page-content { background-color: inherit; } /* ══════════════════════════════════════════════════════════ 5. LOADING OVERLAY — dark mode fix ══════════════════════════════════════════════════════════ core.css defines: .loading-overlay { background: rgba(255,255,255,.75) } This is correct for light mode (frosted overlay over content). In dark mode it creates a jarring white wash. */ [data-mode="dark"] .loading-overlay, [data-mode="black"] .loading-overlay{ background: rgba(var(--navy-900-rgb, 15, 24, 41), 0.82) !important; /* Fallback if rgb token not defined: */ background: color-mix(in srgb, var(--bg-app) 85%, transparent) !important; } /* Spinner track color in dark mode (uses light gray by default) */ [data-mode="dark"] .spinner-sm, [data-mode="black"] .spinner-sm, [data-mode="dark"] .spinner-md, [data-mode="black"] .spinner-md{ border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--accent-400, rgba(255, 255, 255, 0.55)); } /* ══════════════════════════════════════════════════════════ 6. APP LOADER — ensure it's never white in dark mode ══════════════════════════════════════════════════════════ layout-components.css already sets: .app-loader { background: var(--ql-ink-950) !important } We reinforce this here in the synchronous layer. */ [data-mode="dark"] #app-loader, [data-mode="black"] #app-loader, [data-mode="dark"] .app-loader, [data-mode="black"] .app-loader{ background: var(--bg-sunken, var(--navy-950)) !important; } /* ══════════════════════════════════════════════════════════ 7. MODAL PORTAL + TOAST CONTAINER ══════════════════════════════════════════════════════════ These fixed/absolute layers occasionally show white flashes on very first render. Ensure they're transparent by default so the html/body background shows through. */ #modal-portal, #share-modal-container, #toast-container { background: transparent; } /* ══════════════════════════════════════════════════════════ 8. MOBILE SAFE-AREA FILL ══════════════════════════════════════════════════════════ On iOS, the area behind the notch/home indicator can show white if not covered. Setting background on html ensures the safe-area-inset regions are filled with the app color. */ @supports (padding: env(safe-area-inset-bottom)) { html { /* Already set above — this ensures the safe area regions inherit */ background-attachment: fixed; } } /* ══════════════════════════════════════════════════════════ 9. SCROLLBAR TRACK — dark mode ══════════════════════════════════════════════════════════ core.css sets scrollbar-track background to transparent. But some browsers render the track against the html canvas. We set it explicitly to match in dark modes. */ [data-mode="dark"] ::-webkit-scrollbar-track, [data-mode="black"] ::-webkit-scrollbar-track{ background: var(--bg-sunken, #080e1a); } [data-mode="black"] ::-webkit-scrollbar-track { background: #000; } /* ══════════════════════════════════════════════════════════ 10. SKELETON SHIMMER — dark fix already in core.css ══════════════════════════════════════════════════════════ core.css has: [data-mode=black] .skeleton, [data-mode=dark] .skeleton { background: rgba(255,255,255,.06) } This is correct. No override needed here. */ /* ══════════════════════════════════════════════════════════ 11. PAGE CONTAINER TRANSPARENCY IN GLASS MODE ══════════════════════════════════════════════════════════ Glass mode uses a fixed body::before pseudo-element as its background. Page containers should be transparent so the gradient shows through. core.css already handles this via: We reinforce the full inheritance chain here. */ /* ══════════════════════════════════════════════════════════ 12. PRINT OVERRIDE — intentional white background ══════════════════════════════════════════════════════════ Restore white for printing regardless of dark mode. This is already in design-system.css but we reinforce it in case the synchronous load order matters. */ @media print { html, body { background: #fff !important; } } /* ── Dark mode canvas fill — prevents white gap at bottom ─── */ [data-mode="dark"] body, [data-mode="black"] body{ background-color: var(--bg-app) !important; min-height: 100dvh; } [data-mode="dark"] .app-main-area, [data-mode="black"] .app-main-area{ background-color: var(--bg-app) !important; min-height: 100dvh; }