/*@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';*/ /* Fullscreen overlay rendered server-side as part of every initial document by Components/App.razor. Visible by default; the inline script in App.razor hides it when the WASM-bundle fetches go quiet for a few seconds — at which point Blazor Auto's Server→WASM swap has settled (or, on Server-only routes, isn't coming). The overlay covers the swap window so the user never sees the Server-interactive intermediate state and never gets surprised by a mid-interaction re-render. Colors come from FluentUI design tokens, which are theme-aware on their own — they switch with FluentDesignTheme's light/dark state and pick up consumer- customized accent colors. The hex fallbacks inside each var() cover the brief window before the FluentUI stylesheet has applied so the very-first paint isn't transparent; the token wins once it's in. The dark-mode rule below swaps the fallback hex for that pre-token window — once tokens load, the var() supersedes the fallback in either branch. */ #ppp-blazor-loading { position: fixed; inset: 0; background: var(--neutral-layer-2, #fbfbfb); display: flex; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.4s ease-out; } #ppp-blazor-loading.hidden { opacity: 0; pointer-events: none; } .ppp-blazor-loading-spinner { /* 32px matches FluentProgressRing's default Medium size, which is what OverlayWithProgress (the localization-loading overlay rendered after Blazor starts) shows. Keeping the two visually identical avoids a size flicker when one overlay hands off to the other. */ width: 32px; height: 32px; border: 3px solid var(--neutral-stroke-rest, #e0e0e0); border-top-color: var(--accent-fill-rest, #0078d4); border-radius: 50%; animation: ppp-blazor-loading-spin 1s linear infinite; } @keyframes ppp-blazor-loading-spin { to { transform: rotate(360deg); } } /* When the ppp-theme cookie is "dark" — App.razor stamps that onto server-side for first-paint correctness — switch the var() fallbacks to dark equivalents so the pre-token-load window also looks right. After FluentUI's stylesheet applies, the design tokens take over in both branches. */ body[data-theme="dark"] #ppp-blazor-loading { background: var(--neutral-layer-2, #272727); } body[data-theme="dark"] .ppp-blazor-loading-spinner { border-color: var(--neutral-stroke-rest, #3a3a3a); } .siteheader { background-color: var(--neutral-layer-4) !important; border-bottom: calc(var(--stroke-width) * 2px) solid var(--accent-fill-rest); margin-bottom: 0 !important; min-height: 50px; padding: .5rem 1rem; } .siteheader .settings { padding-right: 6px; display: flex; align-items: center; margin-left: 0; margin-right: 10px; } [dir="rtl"] .siteheader .settings { padding: 0 0 0 6px; margin-left: 10px; margin-right: 0; } .footer { display: flex !important; flex-direction: row !important; background: var(--neutral-layer-4); color: var(--neutral-foreground-rest) !important; padding: 10px 10px; margin-top: 0px !important; } .full-width { width: 100%; } body { --body-font: "DM Sans", "Segoe UI Variable", "Segoe UI", sans-serif !important; font-family: var(--body-font) !important; } blockquote p:last-child { margin-bottom: 0; } :not(pre) > code { font-size: 1em; }