/** * Login Page Specific Styles * Styles specific to the login page */ /* === LOGIN PAGE LAYOUT === */ .login-body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--bg-primary); } .login-container { max-width: 400px; padding: var(--spacing-md); width: 100%; } /* === LOGIN CARD === */ .login-card { border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; background-color: var(--bg-card); } .login-card-header { background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-dark) 100%); color: white; text-align: center; padding: var(--spacing-lg); } .login-card-header h3 { margin: var(--spacing-sm) 0 0 0; font-weight: var(--font-weight-semibold); } .login-card-header p { margin-bottom: 0; opacity: 0.9; font-size: 0.9rem; } .login-card-body { padding: var(--spacing-xl); } /* === LOGIN ICON === */ .login-icon { font-size: 48px; margin-bottom: var(--spacing-sm); color: white; } /* === LOGIN FORM === */ .form-floating { margin-bottom: var(--spacing-lg); position: relative; } .form-floating input { padding: 12px 16px; border: 1px solid var(--border-color); border-radius: var(--border-radius); width: 100%; font-size: 1rem; /* Explicit color + background - without these, a browser/OS in dark mode applies its own dark-UA style to unstyled form controls (light text) while the input keeps its white background from nowhere else overriding it, rendering typed text invisible (white-on-white). This page has no dark theme of its own, so force light mode for these inputs specifically rather than relying on the browser's guess. */ color: var(--text-color); background-color: var(--bg-card); color-scheme: light; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } /* Browser autofill (saved credentials) ignores the plain color/background-color above and paints its own colors directly - same invisible-text risk if left unset, common companion to the dark-mode issue since autofill is often what people hit first on a login page. -webkit-text-fill-color is the only thing Chromium/WebKit actually respects for autofilled text color; the inset box-shadow + long transition is the standard trick to override autofill's background instead of the (non-functional here) background-color property. */ .form-floating input:-webkit-autofill, .form-floating input:-webkit-autofill:hover, .form-floating input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-color); -webkit-box-shadow: 0 0 0px 1000px var(--bg-card) inset; box-shadow: 0 0 0px 1000px var(--bg-card) inset; transition: background-color 5000s ease-in-out 0s; } .form-floating label { position: absolute; top: 12px; left: 16px; /* height: auto is the actual fix here (was the real root cause of the reported "can't see what I type" bug, not a color/contrast issue): Bootstrap 5.3's own .form-floating > label rule (loaded from CDN in login.php's , before this file) sets height: 100% - since this custom rule never reset it, the label's own bounding box stretched to the FULL height of the input (its own computed height matched the input's exactly), so its opaque background-color below painted over almost the entire input and hid whatever text was typed underneath it, not just a thin strip along the top border as intended. Confirmed via getBoundingClientRect(): label height was 51.6px === input height. */ height: auto; color: var(--text-muted); transition: all var(--transition-fast); pointer-events: none; background-color: var(--bg-card); padding: 0 4px; } .form-floating input:focus + label, .form-floating input:not(:placeholder-shown) + label { top: -8px; left: 12px; font-size: 0.8rem; color: var(--brand-color); } .form-floating input:focus { border-color: var(--brand-color); box-shadow: 0 0 0 0.25rem rgba(var(--brand-color-rgb), 0.25); } /* === LOGIN BUTTON === */ .btn-login { width: 100%; padding: var(--spacing-sm); font-weight: var(--font-weight-medium); font-size: 1rem; border-radius: var(--border-radius); background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-dark) 100%); color: white; border: none; transition: background-color var(--transition-fast); } .btn-login:hover { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-color) 100%); } .btn-login:focus { box-shadow: 0 0 0 0.25rem rgba(var(--brand-color-rgb), 0.25); } /* === LOGIN ALERT === */ .login-alert { margin-bottom: var(--spacing-lg); padding: var(--spacing-sm); border-radius: var(--border-radius); background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } .login-alert .btn-close { background: none; border: none; font-size: 1.2rem; color: #721c24; opacity: 0.7; float: right; cursor: pointer; } .login-alert .btn-close:hover { opacity: 1; } /* === RESPONSIVE LOGIN === */ @media (max-width: 576px) { .login-container { padding: var(--spacing-sm); } .login-card-body { padding: var(--spacing-lg); } .login-icon { font-size: 36px; } .login-card-header h3 { font-size: 1.3rem; } }