/* * Pentacode loading screen — shared across app/time2/jobs/staff. * Served from packages/apps-common/static/ via createAppConfig's * SHARED_STATIC_DIRS at /_shared/loading-screen.css. * * The loading screen renders pre-JS (the custom element is * not registered yet), so this stylesheet must stand alone — no Lit, * no design tokens, just literal values. * * Dark-mode bg switch keys off `data-color-scheme` on , set by * each app's inline localStorage bootstrap. Jobs never sets the attr, * so its loading screen stays light — matching prior behaviour. */ .logo { display: flex; flex-direction: column; margin: auto; gap: 1rem; align-items: center; transition: transform 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); } .logo__animated { width: max(100px, 20svmin); object-fit: contain; } .logo__word { width: max(200px, 40svmin); } .loading-screen { position: absolute; inset: 0; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: sans-serif; background: white; z-index: 101; pointer-events: none; user-select: none; transition: opacity 0.5s cubic-bezier(0.47, 0, 0.745, 0.715); } :root[data-color-scheme="dark"] .loading-screen { background: black; } @media (prefers-color-scheme: dark) { :root[data-color-scheme="system"] .loading-screen { background: black; } } .loading-screen[aria-busy="false"] { opacity: 0; } [aria-busy="false"] .logo { transform: scale(0.5); } .version { color: #666; }