/* ============================================================================ * auth.css — Self-contained styles for standalone auth pages (login, password * reset, TOTP verify). These pages own their and do NOT extend base.html, * so instead of pulling the full panel stylesheet they load ONLY this file. * It defines its own token set for BOTH themes (dark default + [data-theme=light] * override), a minimal reset, and the auth component styles (.login-* / .auth-*). * ==========================================================================*/ /* ── Minimal reset (panel_base.css is NOT loaded here) ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: clip; max-width: 100%; } /* ── Design tokens — dark is the default; light overrides only what differs. Auth pages set data-theme on , so both resolve with no panel CSS. ── */ :root, :root[data-theme="dark"] { --color-bg-primary: #0a0e1a; --color-bg-secondary: #0f1526; --color-bg-card: #131928; --color-bg-hover: #1a2035; --color-border: rgba(255, 255, 255, 0.06); --color-brand: #3b82f6; --color-brand-light: #60a5fa; --color-brand-dark: #2563eb; --color-brand-glow: rgba(59, 130, 246, 0.3); --color-text-primary: #f0f4ff; --color-text-secondary: #94a3b8; --color-text-muted: #475569; --color-success: #10b981; --color-danger: #ef4444; --color-danger-light: #f87171; --color-warning: #f59e0b; --radius-md: 10px; --radius-xl: 24px; --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); } :root[data-theme="light"] { --color-bg-primary: #f8fafc; --color-bg-secondary: #ffffff; --color-bg-card: #ffffff; --color-bg-hover: #f1f5f9; --color-border: rgba(15, 23, 42, 0.08); --color-brand-light: #1d4ed8; --color-brand-dark: #1e40af; --color-brand-glow: rgba(59, 130, 246, 0.15); --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-muted: #94a3b8; /* success/danger/danger-light/warning/radius/transition are theme-independent */ } /* ══ Shared auth-base styles (password reset / TOTP verify) ══ */ body { font-family: 'Inter', sans-serif; } .auth-page { min-height: 100vh; background: var(--color-bg-primary); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .auth-card { width: 100%; max-width: 420px; background: var(--color-bg-secondary, #161b22); border: 1px solid var(--color-border, #2a3344); border-radius: 14px; padding: 2.25rem 2rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); } .auth-logo { text-align: center; margin-bottom: 1.25rem; } .auth-logo img { width: 56px; height: 56px; } .auth-card h2 { color: var(--color-text-primary); font-size: 1.3rem; font-weight: 700; text-align: center; margin: 0 0 .5rem; } .auth-card p.subtitle { color: var(--color-text-muted, #94a3b8); font-size: .9rem; text-align: center; margin: 0 0 1.5rem; line-height: 1.5; } .auth-card label { display:block; color: var(--color-text-muted,#94a3b8); font-size:.85rem; margin-bottom:.4rem; } .auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"] { width: 100%; box-sizing: border-box; padding: 11px 13px; margin-bottom: 1rem; border: 1px solid var(--color-border, #2a3344); border-radius: 9px; background: var(--color-bg-primary); color: var(--color-text-primary); font-size: .95rem; } .auth-card input:focus { outline: none; border-color: var(--color-brand, #4f8cff); } .auth-btn { width: 100%; padding: 12px; border: none; border-radius: 9px; cursor: pointer; background: var(--color-brand, #4f8cff); color: #fff; font-weight: 600; font-size: .95rem; transition: filter .15s; } .auth-btn:hover { filter: brightness(1.08); } .auth-links { text-align: center; margin-top: 1.25rem; } .auth-links a { color: var(--color-brand-light, #80b0ff); font-size: .88rem; text-decoration: none; } .auth-links a:hover { text-decoration: underline; } .auth-msg { padding: .8rem 1rem; border-radius: 9px; font-size: .88rem; margin-bottom: 1.25rem; line-height: 1.5; } .auth-msg.info { background: rgba(79,140,255,.12); color: #9cc1ff; border: 1px solid rgba(79,140,255,.3); } .auth-msg.error { background: rgba(248,113,113,.12); color: #fca5a5; border: 1px solid rgba(248,113,113,.3); } .errorlist { list-style:none; padding:0; margin:0 0 1rem; color:#fca5a5; font-size:.84rem; } /* Softer card shadow on light — the dark drop shadow is too heavy on a light canvas. */ html[data-theme="light"] .auth-card { box-shadow: 0 16px 44px rgba(2,6,23,.08); } /* ══ Login page styles ══ */ .login-page { min-height: 100vh; background: var(--color-bg-primary); display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; } /* Admin (secret-path) login gets a subtly warmer background + a thin amber top accent, so it's visually distinct from the standard user login. */ .login-page.is-admin { background: radial-gradient(1200px 500px at 50% -10%, rgba(245, 158, 11, 0.06), transparent 70%), var(--color-bg-primary); box-shadow: inset 0 4px 0 0 var(--color-warning, #f59e0b); } .login-page.is-admin::before { background: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, transparent 70%); } .login-page.is-admin::after { background: radial-gradient(circle, rgba(239, 68, 68, 0.10) 0%, transparent 70%); } /* Animated background orbs */ .login-page::before, .login-page::after { content: ''; position: fixed; border-radius: 50%; filter: blur(80px); animation: floatOrb 8s ease-in-out infinite alternate; } .login-page::before { width: 600px; height: 600px; background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%); top: -200px; right: -200px; } .login-page::after { width: 500px; height: 500px; background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%); bottom: -200px; left: -200px; animation-delay: -4s; } @keyframes floatOrb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(30px, -30px); } } /* Grid pattern */ .login-page .grid-bg { position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } /* ── Light theme adjustments ────────────────────────────────── The brand gradient, grid motif and orbs are tuned for a dark canvas. On light we swap to dark-ink variants so "VinzaPanel" stays legible and the grid motif stays visible like in dark. */ html[data-theme="light"] .login-page .grid-bg { background-image: linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px); } html[data-theme="light"] .login-page::before { background: radial-gradient(circle, rgba(79,70,229,0.14) 0%, transparent 70%); } html[data-theme="light"] .login-page::after { background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%); } html[data-theme="light"] .login-card { box-shadow: 0 20px 60px rgba(2,6,23,0.10); } .login-container { width: 100%; max-width: 420px; position: relative; z-index: 1; } /* Brand header */ .login-brand { text-align: center; margin-bottom: 32px; } /* No glow and no pulse behind the mark. The coloured halo was the only thing giving the logo a background of its own, and it fought the flat surface the rest of this page sits on. The mark carries itself. */ .login-brand-logo { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } } /* The primary text token, not a gradient. A gradient needs -webkit-text-fill-color:transparent, which means the wordmark disappears entirely anywhere that property is unsupported or overridden — and it needed a second hand-tuned pair of colours per theme. The token is already theme-aware. */ .login-brand h1 { font-size: 1.8rem; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.03em; } .login-brand p { color: var(--color-text-muted); font-size: 0.875rem; margin-top: 4px; } /* Login card */ .login-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 32px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px); } .login-card h2 { font-size: 1.1rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; } .login-card .subtitle { font-size: 0.825rem; color: var(--color-text-muted); margin-bottom: 28px; } /* Input with icon */ /* Base form control — panel_base.css is NOT loaded on auth pages, so the canonical .form-control lives here too (the rules below only tweak it). */ .form-control { width: 100%; padding: 10px 14px; background: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-primary); font-size: 0.875rem; font-family: inherit; transition: all var(--transition-fast); outline: none; } .form-control::placeholder { color: var(--color-text-muted); } .form-control:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-glow); } .input-group { position: relative; margin-bottom: 16px; } .input-group .input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 0.875rem; pointer-events: none; transition: color var(--transition-fast); } .input-group .form-control { padding-left: 40px; } .input-group .form-control:focus ~ .input-icon, .input-group:focus-within .input-icon { color: var(--color-brand); } .input-group .input-icon { z-index: 1; } .input-group .form-control:focus { padding-left: 40px; } /* Password toggle */ .input-group .pass-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; font-size: 0.875rem; transition: color var(--transition-fast); } .input-group .pass-toggle:hover { color: var(--color-text-primary); } /* Remember + Forgot */ .login-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; font-size: 0.825rem; } .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--color-text-secondary); } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-brand); cursor: pointer; } .forgot-link { color: var(--color-brand-light); transition: color var(--transition-fast); } .forgot-link:hover { color: var(--color-brand); } /* Captcha */ .captcha-group { margin-bottom: 1rem; } .captcha-label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--color-text-muted, #94a3b8); margin-bottom: 0.5rem; } .captcha-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .captcha-field img { border-radius: 6px; flex-shrink: 0; } .captcha-field input[type="text"] { flex: 1; min-width: 120px; padding: 10px 12px; border: 1px solid var(--color-border, #2a3344); border-radius: 8px; background: var(--color-bg-primary); color: var(--color-text-primary); font-size: 0.95rem; } .captcha-field input[type="text"]:focus { outline: none; border-color: var(--color-brand, #4f8cff); } .captcha-error { color: #f87171; font-size: 0.82rem; margin-top: 0.4rem; } /* Login button */ .login-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark)); color: white; border: none; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); letter-spacing: 0.01em; } .login-btn:hover:not(:disabled) { box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6); transform: translateY(-1px); } .login-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } /* Error alert */ .alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #fca5a5; } .alert-error i { color: var(--color-danger); flex-shrink: 0; margin-top: 1px; } /* Footer */ .login-footer { text-align: center; margin-top: 24px; font-size: 0.78rem; color: var(--color-text-muted); } /* Server info strip */ .server-strip { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; padding: 12px; background: rgba(255,255,255,0.03); border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-text-muted); } .server-strip .strip-item { display: flex; align-items: center; gap: 5px; } .server-strip .strip-item i { color: var(--color-success); font-size: 0.6rem; } .passkey-btn { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; font-size:.82rem; font-weight:600; background:transparent; border:1px solid rgba(148,163,184,.30); border-radius:8px; color:var(--color-text-secondary,#cbd5e1); cursor:pointer; transition:all .15s; } .passkey-btn:hover { border-color:rgba(148,163,184,.55); color:#fff; background:rgba(148,163,184,.06); } .passkey-btn i { opacity:.8; }