/* ───────────────────────────────────────────────────────────────────────── * Site-wide Shoelace FOUC (Flash of Undefined Custom Elements) guard. * * Loaded in admin/public/index.html alongside shoelace-fouc.js so the * `shoelace-not-ready` class is applied to before body parses. * shoelace-fouc.js clears the class once every critical Shoelace component * class has been registered by the autoloader. * * Two layers of guard: * 1. Elements that reserve layout space when defined but render nothing when * undefined (sl-input, sl-select, sl-button, etc.) — these are hidden * with `visibility: hidden` so their reserved size is preserved and the * final layout paints on first frame. * 2. Elements that render their contents inline when undefined (sl-drawer, * sl-dialog, sl-menu, sl-tooltip contents) — these are `display: none` * so their body doesn't sit inline in the document flow taking up * hundreds of pixels until Shoelace defines them. * * Once `shoelace-not-ready` is removed from , every .mode-wrapper fades * in over 150ms to smooth over any residual sub-frame shifts (row heights * finalising, sticky-column offset calculations, etc.). * ───────────────────────────────────────────────────────────────────────── */ /* Layer 1 — reserve-and-hide for inline-flow Shoelace elements. Already * covered by the unconditional `:not(:defined) { visibility: hidden }` * rule at admin/public/css/style.css:1, so no additional rule needed here. * * Layer 2 — content-bearing Shoelace elements that render their whole slot * markup inline until hydrated. Hide these entirely; they're supposed to * be off-screen (drawer/dialog) or popover-only (menu/tooltip) anyway. * These MUST be scoped to `html.shoelace-not-ready` — after Shoelace * hydrates the elements they still match `:not(:defined)` for a frame, * but we want them to reveal (as opened drawers, active tooltips, etc.). * The class flip guarantees these rules stop applying once the whole * dependency set is ready. */ html.shoelace-not-ready sl-drawer:not(:defined), html.shoelace-not-ready sl-dialog:not(:defined), html.shoelace-not-ready sl-menu:not(:defined), html.shoelace-not-ready sl-tooltip:not(:defined), html.shoelace-not-ready sl-popup:not(:defined) { display: none !important; } /* Fade every mode-wrapper (the admin panel's main content region for each * tab) from opacity 0 → 1 once Shoelace is ready. Covers all 22 admin * modes without per-mode wiring. Sidebar and other chrome outside the * mode-wrappers stay fully visible so the shell doesn't blink on load. */ html.shoelace-not-ready .mode-wrapper { opacity: 0; } .mode-wrapper { transition: opacity 0.15s ease-in; } @media (prefers-reduced-motion: reduce) { html.shoelace-not-ready .mode-wrapper { opacity: 1; } .mode-wrapper { transition: none; } }