/* Cabinet loading splash. Loaded from in both hosts (Cabinet.Web App.razor + Cabinet/wwwroot/index.html) so it paints before WASM boots, replacing the white-screen / theme-flash / anon→user flicker with one themed overlay. All colours come from app.css design tokens. First-frame correctness: the background is themed via @media (prefers-color-scheme) AND via body.rp-dark. The media query makes the very first paint correct for users following the OS theme (no JS timing dependency); the body.rp-dark override honours an explicit localStorage choice once theme.js has run. */ #rp-splash { position: fixed; inset: 0; z-index: 2000; /* above MudBlazor's appbar/drawer; no Mud overlay is up at boot */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--slate-50, #F8FAFC); transition: opacity 250ms ease; } /* OS-dark first frame (before theme.js runs). */ @media (prefers-color-scheme: dark) { #rp-splash { background: #14181F; } } /* Explicit user override (after theme.js sets body.rp-dark) wins over the media query. */ body.rp-dark #rp-splash { background: var(--slate-50, #14181F); } .rp-splash-mark { width: 56px; height: 56px; display: block; } /* Logo swap, same cascade as the background: light by default, dark when OS-dark (first frame) or once body.rp-dark is set (resolved dark always wins). We do NOT add a body:not(.rp-dark) override — it would out-specify the media query and break the OS-dark first frame before theme.js runs. The rare "explicit light on an OS-dark machine" user therefore sees a dark splash for the brief boot; the app revealed underneath is correctly light. */ .rp-splash-mark--dark { display: none; } @media (prefers-color-scheme: dark) { .rp-splash-mark--light { display: none; } .rp-splash-mark--dark { display: block; } } body.rp-dark .rp-splash-mark--light { display: none; } body.rp-dark .rp-splash-mark--dark { display: block; } .rp-splash-word { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.06em; font-size: 17px; color: var(--brand-primary, #1D73B3); } .rp-splash-spinner { width: 32px; height: 32px; border: 3px solid var(--slate-200, #E2E8F0); border-top-color: var(--brand-primary, #1D73B3); border-radius: 50%; animation: rp-splash-spin 0.7s linear infinite; } @media (prefers-reduced-motion: reduce) { .rp-splash-spinner { animation-duration: 1.6s; } } @keyframes rp-splash-spin { to { transform: rotate(360deg); } } #rp-splash.rp-splash--hide { opacity: 0; pointer-events: none; }