/* 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. Colors come directly from the design handoff (Паттерны №13 «Сплэш загрузки»); no design-token references — splash paints before tokens.css is guaranteed parsed, so hardcoded hexes are intentional here. First-frame correctness: background and spinner are themed via @media (prefers-color-scheme: dark) AND via body.rp-dark / html.dark. The media query makes the very first paint correct for users following the OS theme (no JS timing dependency); the body/html class override honours an explicit localStorage choice once theme.js has run. `html.dark` is added alongside `body.rp-dark` everywhere so both legacy app.css and Blueprint tokens.css users see the correct dark splash. */ #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: #FBFAF8; transition: opacity 250ms ease; } /* OS-dark first frame (before theme.js runs). */ @media (prefers-color-scheme: dark) { #rp-splash { background: #171614; } } /* Explicit user override (after theme.js sets body.rp-dark and/or html.dark) wins over the media query. */ body.rp-dark #rp-splash, html.dark #rp-splash { background: #171614; } .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 / html.dark is set (resolved dark always wins). We do NOT add a :not(.rp-dark) / :not(.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, html.dark .rp-splash-mark--light { display: none; } body.rp-dark .rp-splash-mark--dark, html.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: #1D73B3; } /* Spinner: light — track rgba(29,115,179,.2), tip #1D73B3. dark — track rgba(61,155,224,.25), tip #3D9BE0. */ .rp-splash-spinner { width: 32px; height: 32px; border: 3px solid rgba(29, 115, 179, .2); border-top-color: #1D73B3; border-radius: 50%; animation: rp-splash-spin 0.7s linear infinite; } @media (prefers-color-scheme: dark) { .rp-splash-spinner { border-color: rgba(61, 155, 224, .25); border-top-color: #3D9BE0; } } body.rp-dark .rp-splash-spinner, html.dark .rp-splash-spinner { border-color: rgba(61, 155, 224, .25); border-top-color: #3D9BE0; } @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; }