/* cloud-terminal cyber theme override for Authelia portal (Dracula dark) * Injected by nginx sub_filter into . * Targets MUI v5 (emotion) class names used by Authelia 4.39 frontend. * Scoped under body[data-theme="dark"] so we never affect a hypothetical light variant. */ :root { --cp-bg: #1a1c25; --cp-surface: #282a36; --cp-surface-2: #21222c; --cp-surface-3: #44475a; --cp-text: #f8f8f2; --cp-text-muted: #6272a4; --cp-accent: #bd93f9; /* violet — primary */ --cp-accent-2: #8be9fd; /* cyan — focus glow */ --cp-accent-3: #ff79c6; /* pink — secondary */ --cp-success: #50fa7b; --cp-warning: #f1fa8c; --cp-danger: #ff5555; --cp-border: rgba(189, 147, 249, 0.22); --cp-border-strong: rgba(189, 147, 249, 0.45); --cp-glow: rgba(139, 233, 253, 0.45); --cp-glow-violet: rgba(189, 147, 249, 0.55); --cp-radius: 3px; --cp-radius-lg: 6px; --cp-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; --cp-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; } /* ---------- Base surface ---------- */ html, body[data-theme="dark"] { background: var(--cp-bg) !important; color: var(--cp-text) !important; font-family: var(--cp-sans) !important; } body[data-theme="dark"] #root { background: var(--cp-bg) !important; color: var(--cp-text) !important; min-height: 100vh; } /* Subtle vignette + scanline backdrop for cyber feel */ body[data-theme="dark"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at top, rgba(189, 147, 249, 0.08) 0%, transparent 55%), radial-gradient(ellipse at bottom, rgba(139, 233, 253, 0.06) 0%, transparent 60%); } /* ---------- Card / Paper (the login card) ---------- */ body[data-theme="dark"] .MuiPaper-root { background: var(--cp-surface) !important; color: var(--cp-text) !important; background-image: none !important; border: 1px solid var(--cp-border) !important; border-radius: var(--cp-radius-lg) !important; box-shadow: 0 0 28px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--cp-border), 0 0 60px rgba(189, 147, 249, 0.05) !important; } /* ---------- Typography ---------- */ body[data-theme="dark"] .MuiTypography-root { color: var(--cp-text) !important; font-family: var(--cp-sans) !important; } body[data-theme="dark"] .MuiTypography-h1, body[data-theme="dark"] .MuiTypography-h2, body[data-theme="dark"] .MuiTypography-h3, body[data-theme="dark"] .MuiTypography-h4, body[data-theme="dark"] .MuiTypography-h5, body[data-theme="dark"] .MuiTypography-h6, body[data-theme="dark"] .MuiTypography-subtitle1, body[data-theme="dark"] .MuiTypography-subtitle2 { font-family: var(--cp-mono) !important; letter-spacing: 0.02em; color: var(--cp-text) !important; } body[data-theme="dark"] .MuiTypography-caption { color: var(--cp-text-muted) !important; } /* ---------- Labels ---------- */ body[data-theme="dark"] .MuiFormLabel-root, body[data-theme="dark"] .MuiInputLabel-root { color: var(--cp-text-muted) !important; font-family: var(--cp-mono) !important; letter-spacing: 0.02em; } body[data-theme="dark"] .MuiFormLabel-root.Mui-focused, body[data-theme="dark"] .MuiInputLabel-root.Mui-focused { color: var(--cp-accent-2) !important; } body[data-theme="dark"] .MuiFormHelperText-root { color: var(--cp-text-muted) !important; } body[data-theme="dark"] .MuiFormHelperText-root.Mui-error { color: var(--cp-danger) !important; } /* ---------- Inputs (outlined) ---------- */ body[data-theme="dark"] .MuiOutlinedInput-root, body[data-theme="dark"] .MuiInputBase-root { background: var(--cp-surface-2) !important; color: var(--cp-text) !important; border-radius: var(--cp-radius) !important; font-family: var(--cp-mono) !important; } body[data-theme="dark"] .MuiOutlinedInput-input, body[data-theme="dark"] .MuiInputBase-input { color: var(--cp-text) !important; caret-color: var(--cp-accent-2) !important; } body[data-theme="dark"] .MuiInputBase-input::placeholder { color: var(--cp-text-muted) !important; opacity: 0.8; } body[data-theme="dark"] .MuiOutlinedInput-notchedOutline { border-color: var(--cp-border) !important; transition: border-color 0.15s, box-shadow 0.15s; } body[data-theme="dark"] .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--cp-border-strong) !important; } body[data-theme="dark"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--cp-accent-2) !important; border-width: 1px !important; box-shadow: 0 0 0 3px var(--cp-glow); } body[data-theme="dark"] .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline { border-color: var(--cp-danger) !important; box-shadow: 0 0 0 3px rgba(255, 85, 85, 0.25); } /* Browser autofill cleanup */ body[data-theme="dark"] .MuiInputBase-input:-webkit-autofill { -webkit-text-fill-color: var(--cp-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--cp-surface-2) inset !important; caret-color: var(--cp-accent-2) !important; transition: background-color 9999s ease-out 0s; } /* ---------- Buttons ---------- */ body[data-theme="dark"] .MuiButton-root { font-family: var(--cp-mono) !important; text-transform: uppercase !important; letter-spacing: 0.06em; border-radius: var(--cp-radius) !important; transition: box-shadow 0.15s, transform 0.05s, background-color 0.15s, color 0.15s; } body[data-theme="dark"] .MuiButton-containedPrimary, body[data-theme="dark"] .MuiButton-contained { background: var(--cp-accent) !important; color: #1a1c25 !important; box-shadow: 0 0 0 1px var(--cp-accent), 0 0 14px rgba(189, 147, 249, 0.35) !important; } body[data-theme="dark"] .MuiButton-containedPrimary:hover, body[data-theme="dark"] .MuiButton-contained:hover { background: var(--cp-accent) !important; box-shadow: 0 0 0 1px var(--cp-accent-2), 0 0 22px var(--cp-glow-violet) !important; } body[data-theme="dark"] .MuiButton-containedPrimary:active, body[data-theme="dark"] .MuiButton-contained:active { transform: translateY(1px); } body[data-theme="dark"] .MuiButton-containedSecondary { background: var(--cp-accent-3) !important; color: #1a1c25 !important; box-shadow: 0 0 0 1px var(--cp-accent-3), 0 0 14px rgba(255, 121, 198, 0.35) !important; } body[data-theme="dark"] .MuiButton-outlined { border: 1px solid var(--cp-border-strong) !important; color: var(--cp-accent-2) !important; background: transparent !important; } body[data-theme="dark"] .MuiButton-outlined:hover { border-color: var(--cp-accent-2) !important; box-shadow: 0 0 14px var(--cp-glow); background: rgba(139, 233, 253, 0.05) !important; } body[data-theme="dark"] .MuiButton-text { color: var(--cp-accent-2) !important; } body[data-theme="dark"] .MuiButton-text:hover { color: var(--cp-accent-3) !important; background: rgba(139, 233, 253, 0.06) !important; text-shadow: 0 0 6px var(--cp-glow); } body[data-theme="dark"] .MuiButton-root.Mui-disabled { opacity: 0.45 !important; box-shadow: none !important; color: var(--cp-text-muted) !important; } /* IconButton */ body[data-theme="dark"] .MuiIconButton-root { color: var(--cp-accent-2) !important; border-radius: var(--cp-radius) !important; } body[data-theme="dark"] .MuiIconButton-root:hover { background: rgba(139, 233, 253, 0.08) !important; color: var(--cp-accent-3) !important; } body[data-theme="dark"] .MuiTouchRipple-root .MuiTouchRipple-rippleVisible { color: var(--cp-accent-2); opacity: 0.4; } /* ---------- Links ---------- */ body[data-theme="dark"] a, body[data-theme="dark"] .MuiLink-root { color: var(--cp-accent-2) !important; text-decoration: none; transition: color 0.15s, text-shadow 0.15s; } body[data-theme="dark"] a:hover, body[data-theme="dark"] .MuiLink-root:hover { color: var(--cp-accent-3) !important; text-shadow: 0 0 6px var(--cp-glow); } /* ---------- Checkbox / Radio ---------- */ body[data-theme="dark"] .MuiCheckbox-root, body[data-theme="dark"] .MuiRadio-root { color: var(--cp-text-muted) !important; } body[data-theme="dark"] .MuiCheckbox-root.Mui-checked, body[data-theme="dark"] .MuiRadio-root.Mui-checked { color: var(--cp-accent) !important; } body[data-theme="dark"] .MuiFormControlLabel-label { color: var(--cp-text) !important; font-family: var(--cp-sans) !important; } /* ---------- Alerts ---------- */ body[data-theme="dark"] .MuiAlert-root { border-radius: var(--cp-radius) !important; font-family: var(--cp-sans) !important; } body[data-theme="dark"] .MuiAlert-standardError, body[data-theme="dark"] .MuiAlert-filledError { background: rgba(255, 85, 85, 0.12) !important; color: #ff8888 !important; border: 1px solid rgba(255, 85, 85, 0.4) !important; } body[data-theme="dark"] .MuiAlert-standardWarning, body[data-theme="dark"] .MuiAlert-filledWarning { background: rgba(241, 250, 140, 0.10) !important; color: #f5fa9c !important; border: 1px solid rgba(241, 250, 140, 0.35) !important; } body[data-theme="dark"] .MuiAlert-standardSuccess, body[data-theme="dark"] .MuiAlert-filledSuccess { background: rgba(80, 250, 123, 0.12) !important; color: #5cf08a !important; border: 1px solid rgba(80, 250, 123, 0.4) !important; } body[data-theme="dark"] .MuiAlert-standardInfo, body[data-theme="dark"] .MuiAlert-filledInfo { background: rgba(139, 233, 253, 0.10) !important; color: var(--cp-accent-2) !important; border: 1px solid rgba(139, 233, 253, 0.35) !important; } /* Snackbars use Paper-like surface — re-skin */ body[data-theme="dark"] .MuiSnackbarContent-root { background: var(--cp-surface) !important; color: var(--cp-text) !important; border: 1px solid var(--cp-border-strong) !important; border-radius: var(--cp-radius) !important; box-shadow: 0 0 18px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--cp-border) !important; } /* ---------- Progress / Loader ---------- */ body[data-theme="dark"] .MuiCircularProgress-root { color: var(--cp-accent-2) !important; filter: drop-shadow(0 0 6px var(--cp-glow)); } /* ---------- Divider ---------- */ body[data-theme="dark"] .MuiDivider-root { border-color: var(--cp-border) !important; } /* ---------- SVG icons (Font Awesome inline + MUI svg) ---------- */ body[data-theme="dark"] .MuiSvgIcon-root, body[data-theme="dark"] .svg-inline--fa { color: var(--cp-accent-2); } /* Logo brightens via subtle glow */ body[data-theme="dark"] img[src*="logo"], body[data-theme="dark"] img[alt*="logo" i], body[data-theme="dark"] img[alt*="Logo"] { filter: drop-shadow(0 0 12px var(--cp-glow-violet)); } /* ---------- Scrollbar ---------- */ body[data-theme="dark"] * { scrollbar-color: var(--cp-accent) var(--cp-surface-2); scrollbar-width: thin; } body[data-theme="dark"] *::-webkit-scrollbar { width: 8px; height: 8px; } body[data-theme="dark"] *::-webkit-scrollbar-track { background: var(--cp-surface-2); } body[data-theme="dark"] *::-webkit-scrollbar-thumb { background: var(--cp-accent); border-radius: var(--cp-radius); box-shadow: 0 0 6px var(--cp-glow); } body[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: var(--cp-accent-2); } /* ---------- Misc tweaks ---------- */ body[data-theme="dark"] hr { border: 0; border-top: 1px solid var(--cp-border); } body[data-theme="dark"] code, body[data-theme="dark"] pre { font-family: var(--cp-mono) !important; background: var(--cp-surface-2); color: var(--cp-accent-2); padding: 2px 6px; border-radius: var(--cp-radius); border: 1px solid var(--cp-border); } /* TOTP / one-time-code inputs often render as grids */ body[data-theme="dark"] input[type="tel"], body[data-theme="dark"] input[autocomplete="one-time-code"] { font-family: var(--cp-mono) !important; font-size: 1.4rem !important; letter-spacing: 0.15em; text-align: center; } /* ============================================================= * PATCH 2026-05-16 — TOTP digit inputs, countdown icon, notched * outline radius, floating label cutout, text-input focus glow. * Placed at end so these rules win cascade vs earlier blocks. * ============================================================= */ /* ---------- P1: TOTP digit inputs (react-otp-input) ---------- */ body[data-theme="dark"] input[type="tel"][maxlength="1"], body[data-theme="dark"] [class*="otp"] input, body[data-theme="dark"] [class*="OneTimePassword"] input, body[data-theme="dark"] [class*="OtpField"] input { background: var(--cp-surface) !important; color: var(--cp-text) !important; border: 1px solid var(--cp-border-strong) !important; border-radius: var(--cp-radius) !important; caret-color: var(--cp-accent-2) !important; font-family: var(--cp-mono) !important; font-size: 1.4rem !important; letter-spacing: 0; } body[data-theme="dark"] input[type="tel"][maxlength="1"]:focus, body[data-theme="dark"] [class*="otp"] input:focus, body[data-theme="dark"] [class*="OneTimePassword"] input:focus, body[data-theme="dark"] [class*="OtpField"] input:focus { outline: none !important; border-color: var(--cp-accent-2) !important; box-shadow: 0 0 14px var(--cp-glow) !important; } /* ---------- P2: TOTP countdown icon + circular progress ---------- */ body[data-theme="dark"] .MuiIconButton-root .MuiSvgIcon-root, body[data-theme="dark"] [class*="OneTimePassword"] .MuiSvgIcon-root, body[data-theme="dark"] [class*="otp"] .MuiSvgIcon-root { color: var(--cp-accent-2) !important; fill: currentColor !important; } body[data-theme="dark"] .MuiCircularProgress-circle { stroke: var(--cp-accent) !important; } body[data-theme="dark"] .MuiCircularProgress-root { color: var(--cp-accent) !important; } /* ---------- P3.1: Outlined input border-radius (was 0px) ---------- */ body[data-theme="dark"] .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline { border-radius: var(--cp-radius) !important; } body[data-theme="dark"] .MuiOutlinedInput-root { border-radius: var(--cp-radius) !important; } /* ---------- P3.2: Floating label / legend cutout ---------- */ body[data-theme="dark"] .MuiOutlinedInput-notchedOutline legend { background: transparent !important; } body[data-theme="dark"] .MuiInputLabel-outlined { background: var(--cp-surface) !important; padding: 0 4px !important; color: var(--cp-text-muted) !important; } body[data-theme="dark"] .MuiInputLabel-outlined.Mui-focused { color: var(--cp-accent-2) !important; } /* ---------- P3.3: Diffuse glow on focused text inputs ---------- */ body[data-theme="dark"] .MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 14px var(--cp-glow); } /* ---------- P3.4: TOTP countdown SVG — inline HTML attrs need attribute selectors ---------- */ body[data-theme="dark"] svg[viewBox="0 0 26 26"] circle[stroke="#000"] { stroke: var(--cp-surface-3) !important; } body[data-theme="dark"] svg[viewBox="0 0 26 26"] circle[fill="#000"] { fill: var(--cp-surface) !important; } body[data-theme="dark"] svg[viewBox="0 0 26 26"] circle[stroke="#FFFFFF"] { stroke: var(--cp-accent) !important; }