/* 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; } /* ── Boot progress + the wait ladder ────────────────────────────────────────────────────── blazor.web.js writes --blazor-load-percentage / --blazor-load-percentage-text onto from its own onDownloadResourceProgress hook (wired unconditionally in its WebAssembly start path — nothing to configure on our side), so the bar below is painted straight from the variable and cannot drift out of sync with the real download. loader.js only READS it, to add .rp-splash--progress on the first non-zero tick and to swap the caption once every resource has landed. Same hardcoded-hex reasoning as the rules above: this paints before tokens.css is guaranteed parsed. The MAUI host keeps .rp-splash-spinner instead — blazor.webview.js reports no progress, and its assets are local. */ .rp-splash-progress { position: relative; width: 200px; max-width: 60vw; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(29, 115, 179, .18); } .rp-splash-progress__fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--blazor-load-percentage, 0%); border-radius: inherit; background: #1D73B3; transition: width 200ms ease-out; } /* Until the first progress tick lands the variable is unset and the fill would sit at a dead 0% — which reads as "stuck", the exact impression this splash exists to avoid. Run an indeterminate sweep instead, and let .rp-splash--progress hand the width to the variable. */ #rp-splash:not(.rp-splash--progress) .rp-splash-progress__fill { width: 40%; animation: rp-splash-sweep 1.1s ease-in-out infinite; } @keyframes rp-splash-sweep { from { transform: translateX(-110%); } to { transform: translateX(260%); } } .rp-splash-status { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1.4; color: #6F6B63; margin-top: -8px; /* pulls the caption up against its bar; the flex gap is sized for the logo */ } /* The number is meaningless before the first reading, so it stays out of the caption until .rp-splash--progress lands (loader.js fills the text; empty content collapses the margin). */ .rp-splash-pct { display: none; } #rp-splash.rp-splash--progress .rp-splash-pct { display: inline; } #rp-splash.rp-splash--progress .rp-splash-pct:not(:empty)::before { content: " · "; } /* Absolutely positioned so that the hint appearing at 4s (and the button at 20s) never nudges the centred logo — a loading screen that twitches reads as broken. */ .rp-splash-foot { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 24px; } .rp-splash-hint { margin: 0; max-width: 320px; text-align: center; font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; line-height: 1.5; color: #6F6B63; } .rp-splash-retry { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: #1D73B3; background: transparent; border: 1px solid rgba(29, 115, 179, .45); border-radius: 8px; padding: 8px 16px; cursor: pointer; } .rp-splash-retry[hidden] { display: none; } @media (prefers-color-scheme: dark) { .rp-splash-progress { background: rgba(61, 155, 224, .25); } .rp-splash-progress__fill { background: #3D9BE0; } .rp-splash-status, .rp-splash-hint { color: #A9A49B; } .rp-splash-retry { color: #3D9BE0; border-color: rgba(61, 155, 224, .45); } } body.rp-dark .rp-splash-progress, html.dark .rp-splash-progress { background: rgba(61, 155, 224, .25); } body.rp-dark .rp-splash-progress__fill, html.dark .rp-splash-progress__fill { background: #3D9BE0; } body.rp-dark .rp-splash-status, body.rp-dark .rp-splash-hint, html.dark .rp-splash-status, html.dark .rp-splash-hint { color: #A9A49B; } body.rp-dark .rp-splash-retry, html.dark .rp-splash-retry { color: #3D9BE0; border-color: rgba(61, 155, 224, .45); } @media (prefers-reduced-motion: reduce) { #rp-splash:not(.rp-splash--progress) .rp-splash-progress__fill { animation-duration: 2.4s; } .rp-splash-progress__fill { transition: none; } }