/* * Legion portal skin (F9.1) — repaints Authelia's stock MUI-blue portal in * the fleet's identity: violet accent (#5b3aff), the app's dark surfaces, * and the system font stack. Injected by the authelia-skin nginx sidecar * via sub_filter (a before ). Additive overrides only — if a * future Authelia/MUI upgrade renames a class, the affected rule silently * no-ops and the portal falls back to stock (graceful, never broken). * * Palette mirrors frontend/tailwind.config.js in limitless-radio: * bg #0b0b0f · surface #15151b · surface2 #1e1e26 · border #282831 * text #e6e6ec · muted #9292a0 · accent #5b3aff · accentHover #6e4eff */ :root { --lg-bg: #0b0b0f; --lg-surface: #15151b; --lg-surface2: #1e1e26; --lg-border: #282831; --lg-text: #e6e6ec; --lg-muted: #9292a0; --lg-accent: #5b3aff; --lg-accent-hi: #6e4eff; } html, body, #root { background: var(--lg-bg) !important; color: var(--lg-text) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* Ambient signal field behind the login card — the one flourish, echoing the sign-in interstitial. */ body::before { content: ""; position: fixed; left: 50%; top: 42%; width: 46rem; height: 46rem; transform: translate(-50%, -50%); border-radius: 9999px; background: radial-gradient(closest-side, rgba(91, 58, 255, 0.13), transparent 70%); pointer-events: none; z-index: 0; } /* Login card */ .MuiPaper-root { background: var(--lg-surface) !important; border: 1px solid var(--lg-border) !important; border-radius: 0.75rem !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important; background-image: none !important; } /* Type */ .MuiTypography-root { color: var(--lg-text) !important; } .MuiTypography-root.MuiTypography-body2, .MuiFormLabel-root { color: var(--lg-muted) !important; } /* Primary button — the accent */ .MuiButton-containedPrimary { background-color: var(--lg-accent) !important; box-shadow: none !important; border-radius: 0.5rem !important; text-transform: none !important; font-weight: 600 !important; letter-spacing: 0 !important; } .MuiButton-containedPrimary:hover { background-color: var(--lg-accent-hi) !important; } .MuiButton-root { text-transform: none !important; } .MuiButton-textPrimary { color: var(--lg-accent-hi) !important; } /* Text fields */ .MuiOutlinedInput-root { background: var(--lg-surface2) !important; border-radius: 0.5rem !important; } .MuiOutlinedInput-notchedOutline { border-color: var(--lg-border) !important; } .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #3a3a46 !important; } .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--lg-accent) !important; border-width: 1px !important; } .MuiInputBase-input { color: var(--lg-text) !important; } .MuiFormLabel-root.Mui-focused { color: var(--lg-accent) !important; } /* Checkbox ("Remember me") + focused labels + links → accent */ .MuiCheckbox-colorPrimary.Mui-checked { color: var(--lg-accent) !important; } .MuiLink-root { color: var(--lg-accent-hi) !important; text-decoration-color: rgba(110, 78, 255, 0.4) !important; } /* Spinner during auth steps */ .MuiCircularProgress-colorPrimary { color: var(--lg-accent) !important; } /* Method-selection tiles / list items on hover */ .MuiListItemButton-root:hover, .MuiButtonBase-root.MuiListItem-root:hover { background: var(--lg-surface2) !important; } /* Keep interactive content above the ambient field */ .MuiContainer-root, .MuiPaper-root { position: relative; z-index: 1; } /* Logo breathing room (asset_path logo.png) */ img[alt="Logo"], .MuiAppBar-root img { max-height: 3.25rem !important; width: auto !important; } /* ── Passkey-first login (companion: legion-passkey-first.js) ────────────── * Radio users are passkey-only. When the script confirms the passkey button * is present it adds `legion-pf-active` to ; these rules then tuck the * username/password path away behind the injected "Use a password instead" * toggle. Everything is gated on that body class and keyed off Authelia's * stable element IDs, so: (a) it fail-opens — no class, stock page; (b) React * re-renders of #form-login can't undo it; (c) if a browser lacks :has() the * rules simply no-op (stock page, still usable). * * Hidden while collapsed: username field, password field, "Remember me", * the "Sign in" (password) button, and the "or" divider above the passkey * button. The passkey button itself stays and becomes the primary CTA. */ body.legion-pf-active .MuiFormControl-root:has(> #username-textfield-label), body.legion-pf-active .MuiFormControl-root:has(> #password-textfield-label), body.legion-pf-active .MuiFormControlLabel-root:has(#remember-checkbox), body.legion-pf-active .MuiGrid-root:has(> #sign-in-button), body.legion-pf-active .MuiGrid-root:has(+ .MuiGrid-root > #passkey-sign-in-button) { display: none !important; } /* Passkey button as the hero CTA when it's the primary path. */ body.legion-pf-active #passkey-sign-in-button { margin-top: 0.25rem !important; } /* The injected "Use a password instead" toggle — a quiet secondary link. */ .legion-pw-toggle { display: block; width: 100%; margin: 0.9rem 0 0; padding: 0.4rem; background: transparent !important; border: 0; color: var(--lg-muted) !important; font: inherit; font-size: 0.85rem; text-align: center; text-decoration: underline; text-decoration-color: rgba(146, 146, 160, 0.4); cursor: pointer; } .legion-pw-toggle:hover { color: var(--lg-text) !important; text-decoration-color: var(--lg-accent-hi); } /* Once the user chooses the password path, the toggle is done. */ body.legion-pf-revealed .legion-pw-toggle { display: none !important; }