/* * Dark-mode overrides for hand-written CSS classes that Tailwind's `dark:` * modifier can't reach. Loaded last in base.html so these win the cascade. * * Scope: only declares colors/backgrounds/borders. Layout, spacing, and * animations stay in their original component files. * * Tailwind config has `darkMode: 'class'` — every selector here is gated * behind `.dark` on , set by the boot-time inline script. * * On `!important`: this file loads before the per-page component CSS * (timetable/components.css, mobile.css) which `base.html` pulls in via the * `extra_css` block AFTER this one. The few `!important` rules below are NOT * redundant — they override later-loaded rules that win on load order or use * `!important` themselves (e.g. `.modern-search-input:focus` re-asserts a white * background; mobile.css forces `#schDays/#schTimes { background: white * !important }`). Removing them turns those surfaces white in dark mode. Each * cluster is annotated; don't strip without re-checking the overriding rule. */ /* ---------- Body / surface fallbacks ---------- */ .dark body { color: #e5e7eb; } /* ---------- Generic card patterns used across pages ---------- */ .dark .modern-card { background: rgba(31, 41, 55, 0.85); border: 1px solid rgba(75, 85, 99, 0.4); color: #e5e7eb; } .dark .modern-card .empty-state h3, .dark .modern-card .empty-state h4 { color: #f3f4f6; } .dark .modern-card .empty-state p { color: #d1d5db; } .dark .glass-card { background: rgba(31, 41, 55, 0.7); border: 1px solid rgba(75, 85, 99, 0.3); color: #e5e7eb; } /* !important needed: components.css `.modern-search-input:focus` (loaded after this file) re-asserts a white background at equal specificity. */ .dark .modern-search-input, .dark .modern-input, .dark .modern-filter-select { background: rgba(17, 24, 39, 0.7) !important; color: #f3f4f6 !important; border-color: rgba(75, 85, 99, 0.6) !important; } .dark .modern-search-input::placeholder, .dark .modern-input::placeholder { color: #9ca3af; } .dark .floating-label { color: #9ca3af; } /* ---------- Timetable grid ---------- */ .dark .day-header { background: rgba(31, 41, 55, 0.95); color: #e5e7eb; border-color: rgba(75, 85, 99, 0.4); } .dark .time-label { color: #9ca3af; } .dark .hour-line, .dark .day-line { background: rgba(75, 85, 99, 0.5); } /* !important needed: mobile.css forces `#schTimes/#schDays { background: white !important }` inside its media queries, which would otherwise win. */ .dark #schTimes, .dark #schDays { background: #1f2937 !important; } .dark #schDays { background: rgba(31, 41, 55, 0.95) !important; } /* ---------- Timetable action bar ---------- */ .dark .tb-action-btn { background: rgba(31, 41, 55, 0.7); color: #e5e7eb; border-color: rgba(75, 85, 99, 0.4); } .dark .tb-action-btn:hover { background: rgba(55, 65, 81, 0.9); } /* ---------- Filter card / dropdown wrappers ---------- */ /* !important needed: the gradient `.modern-filter-card` background in components.css (loaded after this file) overrides a plain dark rule. */ .dark .modern-filter-card { background: rgba(31, 41, 55, 0.85) !important; border-color: rgba(75, 85, 99, 0.4) !important; color: #e5e7eb; } .dark .filter-label { color: #d1d5db; } /* ---------- Generic Tailwind class overrides for custom modal markup ---------- */ .dark .bg-white { background-color: #1f2937; color: #e5e7eb; } .dark .bg-gray-50 { background-color: #111827; } .dark .bg-gray-100 { background-color: #1f2937; } .dark .text-gray-700 { color: #d1d5db; } .dark .text-gray-800 { color: #e5e7eb; } .dark .text-gray-900 { color: #f3f4f6; } .dark .text-gray-600 { color: #9ca3af; } .dark .text-gray-500 { color: #9ca3af; } .dark .border-gray-100, .dark .border-gray-200, .dark .border-gray-300 { border-color: rgba(75, 85, 99, 0.5); } /* Inputs inside modals */ .dark input[type="text"]:not(.modern-search-input):not(.modern-input), .dark input[type="email"], .dark input[type="password"], .dark input[type="number"], .dark input[type="time"], .dark textarea, .dark select:not(.modern-filter-select) { background-color: rgba(17, 24, 39, 0.85); color: #f3f4f6; border-color: rgba(75, 85, 99, 0.6); } .dark input::placeholder, .dark textarea::placeholder { color: #9ca3af; } /* Course-info / favorites empty states */ .dark .empty-state .text-gray-500, .dark .empty-state .text-gray-400 { color: #9ca3af; } /* ---------- Timetable tabs strip ---------- */ .dark #draft-tabs-strip { border-color: rgba(75, 85, 99, 0.4); } /* ---------- Notification / toast container leaves itself; uses inline colors ---------- */ /* ========================================================================= Light-only Tailwind utilities the blanket rules above don't reach. Templates deliberately carry almost no `dark:` variants (the navbar and help page are the exceptions) — THIS file is the site's dark theme, so every light-surface utility used in templates/JS needs a row here. `bg-white/5..20` are intentionally untouched: they're translucent white glints on colored gradients and must stay white in both themes. ========================================================================= */ /* ---------- White/gray surface opacity variants ---------- */ .dark .bg-white\/60 { background-color: rgba(31, 41, 55, 0.6); } .dark .bg-white\/80 { background-color: rgba(31, 41, 55, 0.8); } .dark .bg-white\/90 { background-color: rgba(31, 41, 55, 0.9); } .dark .bg-gray-50\/80 { background-color: rgba(17, 24, 39, 0.8); } .dark .bg-gray-200 { background-color: #374151; } .dark .bg-gray-300 { background-color: #4b5563; } /* ---------- Gradient stops (from/via/to) on light tints ---------- Card/hero gradients built from white and *-50/-100 tints collapse to a subtle dark slope (#1f2937 → #111827). Saturated 400+ stops (buttons, colored headers) are left alone. Format mirrors the built Tailwind output: color + position var. */ .dark .from-white, .dark .from-white\/60, .dark .from-gray-50, .dark .from-primary-50, .dark .from-secondary-50, .dark .from-accent-50, .dark .from-amber-50, .dark .from-blue-50, .dark .from-emerald-50, .dark .from-green-50, .dark .from-indigo-50, .dark .from-orange-50, .dark .from-pink-50, .dark .from-pink-100, .dark .from-purple-50, .dark .from-red-50 { --tw-gradient-from: #1f2937 var(--tw-gradient-from-position); --tw-gradient-to: rgba(31, 41, 55, 0) var(--tw-gradient-to-position); } .dark .via-white, .dark .via-primary-50, .dark .via-primary-50\/20, .dark .via-primary-50\/30, .dark .via-secondary-50, .dark .via-accent-50\/30 { --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to); } .dark .to-white, .dark .to-primary-50, .dark .to-primary-50\/30, .dark .to-primary-100\/50, .dark .to-secondary-50, .dark .to-secondary-50\/20, .dark .to-secondary-50\/30, .dark .to-secondary-100\/50, .dark .to-accent-50, .dark .to-accent-50\/30, .dark .to-accent-100\/50, .dark .to-amber-50\/30, .dark .to-emerald-50, .dark .to-emerald-50\/30, .dark .to-indigo-50\/30, .dark .to-purple-50, .dark .to-purple-50\/30, .dark .to-rose-100 { --tw-gradient-to: #111827 var(--tw-gradient-to-position); } /* ---------- Colored tint backgrounds (pills, chips, alerts) ---------- Light *-50/-100/-200 tints become their color's -900 shade at low alpha, the standard Tailwind dark-mode idiom, so the hue survives. */ .dark .bg-primary-50 { background-color: rgba(22, 78, 99, 0.3); } .dark .bg-primary-200 { background-color: rgba(22, 78, 99, 0.5); } .dark .bg-primary-200\/50 { background-color: rgba(22, 78, 99, 0.35); } .dark .bg-secondary-200 { background-color: rgba(76, 29, 149, 0.5); } .dark .bg-secondary-200\/50 { background-color: rgba(76, 29, 149, 0.35); } .dark .bg-accent-200 { background-color: rgba(124, 45, 18, 0.5); } .dark .bg-accent-200\/50 { background-color: rgba(124, 45, 18, 0.35); } .dark .bg-red-50 { background-color: rgba(127, 29, 29, 0.3); } .dark .bg-red-100 { background-color: rgba(127, 29, 29, 0.4); } .dark .bg-green-50 { background-color: rgba(20, 83, 45, 0.3); } .dark .bg-green-100 { background-color: rgba(20, 83, 45, 0.4); } .dark .bg-blue-50 { background-color: rgba(30, 58, 138, 0.3); } .dark .bg-blue-100 { background-color: rgba(30, 58, 138, 0.4); } .dark .bg-amber-50 { background-color: rgba(120, 53, 15, 0.3); } .dark .bg-yellow-50 { background-color: rgba(113, 63, 18, 0.3); } .dark .bg-yellow-100 { background-color: rgba(113, 63, 18, 0.4); } .dark .bg-indigo-50 { background-color: rgba(49, 46, 129, 0.3); } .dark .bg-orange-50 { background-color: rgba(124, 45, 18, 0.3); } .dark .bg-purple-100 { background-color: rgba(88, 28, 135, 0.4); } /* ---------- Dark-on-tint text lightened for dark surfaces ---------- */ .dark .text-primary-600 { color: #22d3ee; } .dark .text-primary-700, .dark .text-primary-800 { color: #67e8f9; } .dark .text-secondary-600 { color: #a78bfa; } .dark .text-secondary-700 { color: #c4b5fd; } .dark .text-accent-600 { color: #fb923c; } .dark .text-accent-700 { color: #fdba74; } .dark .text-red-600 { color: #f87171; } .dark .text-red-700, .dark .text-red-800 { color: #fca5a5; } .dark .text-green-600 { color: #4ade80; } .dark .text-green-700, .dark .text-green-800 { color: #86efac; } .dark .text-blue-600 { color: #60a5fa; } .dark .text-blue-700, .dark .text-blue-800 { color: #93c5fd; } .dark .text-amber-800, .dark .text-amber-900 { color: #fcd34d; } .dark .text-yellow-700 { color: #fde047; } .dark .text-indigo-600 { color: #818cf8; } .dark .text-indigo-700, .dark .text-indigo-800 { color: #a5b4fc; } .dark .text-emerald-600 { color: #34d399; } .dark .text-purple-600 { color: #c084fc; } .dark .text-purple-700 { color: #d8b4fe; } /* ---------- Light hover surfaces ---------- */ .dark .hover\:bg-gray-50:hover { background-color: rgba(55, 65, 81, 0.6); } .dark .hover\:bg-gray-100:hover { background-color: rgba(55, 65, 81, 0.7); } .dark .hover\:bg-gray-200:hover { background-color: rgba(75, 85, 99, 0.7); } .dark .hover\:bg-gray-300:hover { background-color: rgba(75, 85, 99, 0.8); } .dark .hover\:bg-primary-50:hover { background-color: rgba(22, 78, 99, 0.35); } .dark .hover\:bg-red-50:hover { background-color: rgba(127, 29, 29, 0.35); } .dark .hover\:bg-red-100:hover { background-color: rgba(127, 29, 29, 0.45); } /* ---------- Colored tint borders ---------- `border-white(/xx)` overlays are left alone — they sit on colored or glass surfaces where a white edge is correct in both themes. */ .dark .border-primary-50, .dark .border-primary-100, .dark .border-primary-100\/50, .dark .border-primary-200, .dark .border-primary-200\/30, .dark .border-primary-300 { border-color: rgba(21, 94, 117, 0.6); } .dark .border-secondary-100\/50, .dark .border-secondary-200, .dark .border-secondary-300 { border-color: rgba(91, 33, 182, 0.6); } .dark .border-accent-100\/50, .dark .border-accent-200, .dark .border-accent-300 { border-color: rgba(154, 52, 18, 0.6); } .dark .border-red-200 { border-color: rgba(153, 27, 27, 0.6); } .dark .border-green-100\/50, .dark .border-green-200 { border-color: rgba(22, 101, 52, 0.6); } .dark .border-emerald-100\/50, .dark .border-emerald-200, .dark .border-emerald-300 { border-color: rgba(6, 95, 70, 0.6); } .dark .border-indigo-100\/50, .dark .border-indigo-200, .dark .border-indigo-300 { border-color: rgba(55, 48, 163, 0.6); } .dark .border-blue-200 { border-color: rgba(30, 64, 175, 0.6); } .dark .border-amber-100\/50, .dark .border-amber-200, .dark .border-amber-300 { border-color: rgba(146, 64, 14, 0.6); } .dark .border-yellow-200 { border-color: rgba(133, 77, 14, 0.6); } /* ---------- Timetable page components not covered above ---------- */ .dark #timetable-bar { background: #1f2937; } .dark .search-result-item, .dark .favorite-item { background: rgba(31, 41, 55, 0.9); border-color: rgba(75, 85, 99, 0.4); } .dark .search-result-item:hover, .dark .favorite-item:hover { background: rgba(55, 65, 81, 0.95); } .dark .version-tab { background: #1f2937; color: #e5e7eb; border-color: rgba(75, 85, 99, 0.5); } .dark .version-tab .tab-context { background: #374151; color: #d1d5db; } /* !important needed: mobile.css `.timetable-section { background: white !important }`. */ .dark .timetable-section { background: #111827 !important; } .dark .overflow-y-auto::-webkit-scrollbar-track { background: #1f2937; } .dark .overflow-y-auto::-webkit-scrollbar-thumb { background: #4b5563; } /* ---------- Auth pages (auth-base.css components) ---------- auth-base.css loads AFTER this file (extra_head), so ties on specificity lose — the :hover/:focus rows below out-specify its white re-asserts. */ .dark .auth-card { background: rgba(31, 41, 55, 0.95); } .dark .auth-title { color: #f3f4f6; } .dark .auth-subtitle { color: #9ca3af; } .dark .auth-footer { background: rgba(17, 24, 39, 0.6); color: #9ca3af; } .dark .form-label, .dark .checkbox-label { color: #d1d5db; } .dark .form-input { background: rgba(17, 24, 39, 0.85); color: #f3f4f6; border-color: rgba(75, 85, 99, 0.6); } .dark .form-input:hover, .dark .form-input:focus { background: rgba(17, 24, 39, 0.95); } .dark .alert-success { background: rgba(6, 95, 70, 0.3); color: #6ee7b7; border-color: rgba(6, 95, 70, 0.6); } .dark .alert-danger { background: rgba(127, 29, 29, 0.3); color: #fca5a5; border-color: rgba(153, 27, 27, 0.6); } .dark .alert-warning { background: rgba(120, 53, 15, 0.3); color: #fcd34d; border-color: rgba(146, 64, 14, 0.6); } /* forgot-password.css tab strip */ .dark .tab-btn.active { background: #1f2937; color: #e5e7eb; } /* ---------- Legal pages (legal.css) ---------- */ .dark .legal-body { background: rgba(31, 41, 55, 0.95); color: #d1d5db; } .dark .legal-section h2, .dark .legal-section h3, .dark .legal-section li strong { color: #f3f4f6; } .dark .legal-section p, .dark .legal-section li, .dark .contact-info p { color: #b8c0cc; } .dark .contact-info { background: rgba(17, 24, 39, 0.6); border-color: rgba(75, 85, 99, 0.5); } .dark .legal-icon { background: rgba(31, 41, 55, 0.95); } /* ---------- Error pages (404.css / 500.css) ---------- */ .dark .message-box, .dark .card-container { background-color: #1f2937; color: #e5e7eb; } .dark .schedule-grid, .dark .magnifying-glass { background-color: #1f2937; } /* ---------- Shared modal chrome (index.css) ---------- */ .dark .modal-content { background-color: #1f2937; color: #e5e7eb; }