/* css/loading.css */ /* The splash runs before .NET, so it cannot read --mud-palette-*. The inline script in index.html sets these from the palette MainLayout left in local storage on the last visit; these values are the fallback for a first visit, and are ClassicDark's — the theme the app starts on — so an unthemed first run still matches the app bar that follows it. */ :root { --splash-bg: #1a1a27; --splash-surface: #1e1e2d; --splash-primary: #7e6fff; --splash-secondary: #ff4081; --splash-muted: #92929f; } .loading-screen { background-color: var(--splash-bg); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; } .loading-content { text-align: center; width: 340px; } /* A flex row, so the mark leads the title and follows it round when culture.js sets dir="rtl" on before boot. No left/right anywhere for that reason. */ .loading-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; } .loading-mark { width: 100%; height: 100%; display: block; } /* The mark and its twelve flare overlays share one box. */ .loading-markbox { position: relative; width: 44px; height: 44px; flex-shrink: 0; } /* A dendrite firing. Each overlay is a white copy of the silhouette, clipped to one branch's wedge out of the soma and revealed only where the ring in its mask gradient falls. Growing mask-size carries that ring from the soma edge — 78%, not 0 — out to the tips, so a spike starts at the root of the branch the way a real one does. Every branch has its own cycle length and offset, listed below, so they drift permanently out of phase. The ring lives in the mask rather than in an SVG element on purpose: animating the contents of an SVG mask leaves several engines never repainting what it masks. */ .loading-flare { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 30%, #fff 46%, transparent 62%); mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 30%, #fff 46%, transparent 62%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 78% 78%; mask-size: 78% 78%; animation-name: dendrite-fire; animation-timing-function: cubic-bezier(.25, .7, .4, 1); animation-iteration-count: infinite; } /* White carries on the dark themes. On a light one it would vanish into the background, so the spike borrows the accent instead — MainLayout records which kind of theme was chosen. */ .loading-flare use { fill: #ffffff; } :root[data-splash-scheme="light"] .loading-flare use { fill: var(--splash-secondary); } @keyframes dendrite-fire { 0% { -webkit-mask-size: 78% 78%; mask-size: 78% 78%; opacity: 0; } 6% { opacity: 1; } 26% { -webkit-mask-size: 230% 230%; mask-size: 230% 230%; opacity: 0; } 100% { -webkit-mask-size: 230% 230%; mask-size: 230% 230%; opacity: 0; } } /* One wedge per branch, twelve slices out of the soma at (49.06%, 50%) of the box. */ .fjq-f0 { clip-path: polygon(49.06% 50.00%, 5.20% -93.45%, 92.91% -93.45%); animation-duration: 3.38s; animation-delay: 2.69s; } .fjq-f1 { clip-path: polygon(49.06% 50.00%, 82.80% -96.16%, 158.76% -52.30%); animation-duration: 4.60s; animation-delay: 2.24s; } .fjq-f2 { clip-path: polygon(49.06% 50.00%, 151.36% -59.70%, 195.21% 16.26%); animation-duration: 3.52s; animation-delay: 2.82s; } .fjq-f3 { clip-path: polygon(49.06% 50.00%, 192.50% 6.14%, 192.50% 93.86%); animation-duration: 2.68s; animation-delay: 2.46s; } .fjq-f4 { clip-path: polygon(49.06% 50.00%, 195.21% 83.74%, 151.36% 159.70%); animation-duration: 3.84s; animation-delay: 3.81s; } .fjq-f5 { clip-path: polygon(49.06% 50.00%, 158.76% 152.30%, 82.80% 196.16%); animation-duration: 2.44s; animation-delay: 1.46s; } .fjq-f6 { clip-path: polygon(49.06% 50.00%, 92.91% 193.45%, 5.20% 193.45%); animation-duration: 2.44s; animation-delay: 3.89s; } .fjq-f7 { clip-path: polygon(49.06% 50.00%, 15.31% 196.16%, -60.65% 152.30%); animation-duration: 4.00s; animation-delay: 0.20s; } .fjq-f8 { clip-path: polygon(49.06% 50.00%, -53.24% 159.70%, -97.10% 83.74%); animation-duration: 4.75s; animation-delay: 4.63s; } .fjq-f9 { clip-path: polygon(49.06% 50.00%, -94.39% 93.86%, -94.39% 6.14%); animation-duration: 3.90s; animation-delay: 2.95s; } .fjq-f10 { clip-path: polygon(49.06% 50.00%, -97.10% 16.26%, -53.24% -59.70%); animation-duration: 2.61s; animation-delay: 0.07s; } .fjq-f11 { clip-path: polygon(49.06% 50.00%, -60.65% -52.30%, 15.31% -96.16%); animation-duration: 3.57s; animation-delay: 0.29s; } /* Someone who has asked for less motion gets the mark still. */ @media (prefers-reduced-motion: reduce) { .loading-flare { animation: none; opacity: 0; } } /* Same split as the BrandMark component: dendrites and body from the primary, nucleus from the secondary, the soft pair being the same colour at reduced opacity. */ .loading-mark .mark-primary { fill: var(--splash-primary); } .loading-mark .mark-primary-soft { fill: var(--splash-primary); opacity: 0.35; } .loading-mark .mark-accent-soft { fill: var(--splash-secondary); opacity: 0.5; } .loading-mark .mark-accent { fill: var(--splash-secondary); } .loading-title { font-family: 'Roboto', sans-serif; font-size: 2rem; font-weight: 700; color: var(--splash-primary); letter-spacing: 2px; } .blocks-grid { display: grid; grid-template-columns: repeat(12, 18px); gap: 4px; justify-content: center; } .block { width: 18px; height: 18px; border-radius: 3px; } .block.pending { background: var(--splash-surface); animation: blockPulse 1s ease-in-out infinite; } .block.loaded { background: var(--splash-primary); animation: blockPop 0.3s ease; } @keyframes blockPop { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } @keyframes blockPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } .loading-counter { font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: var(--splash-muted); margin-top: 16px; }