/* ============================================================================= * OpenVue — login.css * ============================================================================= * * Styles for the login / authentication page. This page does NOT use the * base.html template — it is a standalone page with its own class. * * HTML structure (from login.html): * * *

* *

-- label + input pairs *

-- "remember me" checkbox row * *

-- error message (hidden) *

* * * Depends on: base.css (for custom properties and reset) * * License: MIT * ========================================================================== */ /* ============================================================================= * 1. Login Body * ============================================================================= * The element gets this class on login.html. Overrides the default * body overflow:hidden from base.css so the login page can scroll on small * screens if needed. * -------------------------------------------------------------------------- */ .login-body { overflow: auto; height: 100vh; } /* ============================================================================= * 2. Login Container * ============================================================================= * Full-viewport flex container that centres the login card both vertically * and horizontally. A subtle radial gradient adds visual interest behind * the card. * -------------------------------------------------------------------------- */ .login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-lg); background: radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(167, 139, 250, 0.06) 0%, transparent 50%), var(--bg-primary); } /* ============================================================================= * 3. Login Card * ============================================================================= * The main card container. Fixed max-width on desktop, full-width (with max) * on mobile. Contains the brand header and the login form. * -------------------------------------------------------------------------- */ .login-card { width: 100%; max-width: 400px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: slideUp var(--transition-slow) ease forwards; } /* ============================================================================= * 4. Login Header * ============================================================================= * Top section of the login card with the app logo SVG, title

, and * the subtitle paragraph. Slightly darker background for visual separation. * -------------------------------------------------------------------------- / .login-header { padding: var(--space-xl) var(--space-lg) var(--space-lg); text-align: center; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); } / Logo SVG inside the header / .login-header svg { width: 48px; height: 48px; margin: 0 auto var(--space-md); color: var(--accent); } .login-header h1 { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xs); } / Subtitle text below the title — "Dashcam Recording Dashboard" / .login-subtitle { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: 0; } / ============================================================================= * 5. Login Form * ============================================================================= * The form body with username/password fields and the submit button. * Uses .form-group for field layout and .btn classes for the submit button. * -------------------------------------------------------------------------- / / Form padding inside the card / .login-card form { padding: var(--space-lg); } / -- Form group: label + input pair --------------------------------------- / / Used for username and password fields. / .form-group { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); } .form-group label { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); } / Text inputs inside form groups (username, password) / .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="email"] { width: 100%; padding: 10px var(--space-md); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-size: var(--font-size-md); transition: border-color var(--transition), box-shadow var(--transition); } .form-group input::placeholder { color: var(--text-muted); } .form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } / -- Form row: horizontal layout for "remember me" checkbox --------------- / .form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); font-size: var(--font-size-sm); } / -- Checkbox label: wraps checkbox input + text span --------------------- / / Used for the "Remember me" toggle on the login page. / .checkbox-label { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; font-size: var(--font-size-sm); color: var(--text-secondary); } .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; appearance: none; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; position: relative; transition: all var(--transition); flex-shrink: 0; } .checkbox-label input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .checkbox-label input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } / ============================================================================= * 6. Form Error * ============================================================================= * Displayed inside the form when authentication fails. Hidden by default * via inline style="display:none;" in the HTML; shown by JS on error. * -------------------------------------------------------------------------- / .form-error { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--red); animation: fadeIn var(--transition) ease forwards; } / ============================================================================= * 7. Full-Width Button Modifier * ============================================================================= * .btn-full makes any .btn stretch to 100% width. Used on the login form's * "Sign In" button: