/* ========================================================= /public/assets/css/app.css --------------------------------------------------------- Safe theme system: - Uses CSS variables (tokens) - Switch via: - Does NOT require rewriting markup across the app ========================================================= */ /* ------------------------- Theme tokens (default: dark) ------------------------- */ :root{ --bg-auth-0: #070b14; --bg-app-0: #060a12; --fg: #e8eefc; --brand: #0099ff; --link: #8fc6ff; --link-hover: #b6dcff; --frost-bg: rgba(255,255,255,0.10); --frost-border: rgba(255,255,255,0.14); --input-bg: rgba(255,255,255,0.08); --input-border: rgba(255,255,255,0.16); --input-bg-focus: rgba(255,255,255,0.12); --input-border-focus: rgba(74,163,255,0.60); --auth-text: #0099ff; --auth-input-bg: rgba(0, 0, 0, 0.35); --auth-input-border: rgba(0, 153, 255, 0.4); --auth-input-placeholder: rgba(0, 153, 255, 0.6); --btn-primary-bg: rgba(74,163,255,0.95); --btn-primary-bg-hover: rgba(74,163,255,1); --btn-primary-solid: #0099ff; --btn-primary-solid-hover: #007acc; } /* ------------------------- Light theme overrides ------------------------- */ html[data-theme="light"]{ --bg-auth-0: #f5f7fb; --bg-app-0: #f3f6fb; --fg: #0c1a2a; --brand: #007fd6; --link: #0b66b3; --link-hover: #084c85; --frost-bg: rgba(255,255,255,0.78); --frost-border: rgba(10,40,80,0.10); --input-bg: rgba(255,255,255,0.90); --input-border: rgba(10,40,80,0.18); --input-bg-focus: rgba(255,255,255,1); --input-border-focus: rgba(0,127,214,0.50); --auth-text: #0b66b3; --auth-input-bg: rgba(255,255,255,0.95); --auth-input-border: rgba(0,127,214,0.28); --auth-input-placeholder: rgba(11,102,179,0.55); --btn-primary-bg: rgba(0,127,214,0.95); --btn-primary-bg-hover: rgba(0,127,214,1); --btn-primary-solid: #007fd6; --btn-primary-solid-hover: #0063a7; } /* ========================================================= Base backgrounds ========================================================= */ .bg-auth { min-height: 100vh; background: radial-gradient(circle at 20% 10%, rgba(74,163,255,0.25), transparent 40%), radial-gradient(circle at 80% 40%, rgba(0,255,210,0.12), transparent 45%), var(--bg-auth-0); color: var(--fg); } html[data-theme="light"] .bg-auth{ background: radial-gradient(circle at 20% 10%, rgba(0,127,214,0.15), transparent 45%), radial-gradient(circle at 80% 40%, rgba(0,180,160,0.10), transparent 50%), var(--bg-auth-0); } .bg-app { min-height: 100vh; background: radial-gradient(circle at 30% 20%, rgba(74,163,255,0.18), transparent 45%), radial-gradient(circle at 80% 60%, rgba(140,0,255,0.10), transparent 50%), var(--bg-app-0); color: var(--fg); } html[data-theme="light"] .bg-app{ background: radial-gradient(circle at 30% 20%, rgba(0,127,214,0.12), transparent 50%), radial-gradient(circle at 80% 60%, rgba(140,0,255,0.06), transparent 55%), var(--bg-app-0); } /* Frosted utility */ .frosted { background: var(--frost-bg) !important; backdrop-filter: blur(14px); border: 1px solid var(--frost-border); color: var(--fg); } /* Links */ a { color: var(--link); } a:hover { color: var(--link-hover); } /* Form controls */ .form-control { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--fg); } .form-control:focus { background: var(--input-bg-focus); border-color: var(--input-border-focus); color: var(--fg); box-shadow: none; } /* Primary buttons (generic) */ .btn-primary { background: var(--btn-primary-bg); border: none; } .btn-primary:hover { background: var(--btn-primary-bg-hover); } /* ================================ AUTH (Login / Register) POLISH ================================ */ .bg-auth .card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html[data-theme="light"] .bg-auth .card{ background: rgba(255,255,255,0.85); } /* Make ALL auth text readable */ .bg-auth, .bg-auth label, .bg-auth p, .bg-auth span, .bg-auth h1, .bg-auth h2, .bg-auth h3, .bg-auth h4, .bg-auth h5, .bg-auth h6, .bg-auth .form-text { color: var(--auth-text); } /* Inputs */ .bg-auth .form-control { background: var(--auth-input-bg); border: 1px solid var(--auth-input-border); color: var(--fg); } .bg-auth .form-control::placeholder { color: var(--auth-input-placeholder); } /* Buttons */ .bg-auth .btn-primary { background-color: var(--btn-primary-solid); border-color: var(--btn-primary-solid); } .bg-auth .btn-primary:hover { background-color: var(--btn-primary-solid-hover); border-color: var(--btn-primary-solid-hover); } /* ===================================================== AUTH PAGES – LOGO (HARD CENTER) ===================================================== */ .auth-logo{ width: 100%; display: flex; justify-content: center; align-items: center; margin: 0 0 1.25rem 0; text-align: center; } .auth-logo img{ display: block; margin: 0 auto; width: 128px; height: 128px; object-fit: contain; } /* ========================================================= Theme Toggle (modern icon switch) - Place a button with id="themeToggle" anywhere - Reads state from ========================================================= */ .theme-toggle{ width: 52px; height: 30px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; overflow: hidden; user-select: none; } html[data-theme="light"] .theme-toggle{ border: 1px solid rgba(0,0,0,0.14); background: rgba(0,0,0,0.04); } .theme-toggle:focus{ outline: none; box-shadow: 0 0 0 3px rgba(0,153,255,0.22); } .theme-toggle .tt-icon{ width: 50%; text-align: center; font-size: 14px; line-height: 1; opacity: 0.85; color: var(--fg); } .theme-toggle .tt-knob{ position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.22); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; } html[data-theme="light"] .theme-toggle .tt-knob{ background: rgba(0,0,0,0.10); border-color: rgba(0,0,0,0.12); } /* When light mode is ON, knob slides right */ .theme-toggle[data-theme="light"] .tt-knob{ transform: translateX(22px); } /* Small screens: keep it compact */ @media (max-width: 480px){ .theme-toggle{ width: 48px; height: 28px; } .theme-toggle .tt-knob{ width: 22px; height: 22px; } .theme-toggle[data-theme="light"] .tt-knob{ transform: translateX(20px); } }