/* * dark-mode.css – global dark-mode overrides * * When is present, these rules override Tailwind's * utility-generated colours so the whole app gets a dark palette. * * NOTE: We intentionally use !important sparingly – only where Tailwind * inline utilities would otherwise win the specificity battle. */ /* ─── Colour-scheme hint for scrollbars / form controls ───────────── */ html.dark { color-scheme: dark; } /* ─── Body backgrounds ────────────────────────────────────────────── */ html.dark body { background: linear-gradient(to bottom right, #0f172a, #1e1b4b) !important; color: #e2e8f0; } /* ─── Header (only the sticky nav header, not content
tags) ─ */ html.dark header.sticky { background: rgba(15, 23, 42, 0.85) !important; border-color: #334155 !important; } /* ─── Sidebar ─────────────────────────────────────────────────────── */ html.dark nav.sidebar, html.dark nav#sidebar { background: #1e293b !important; border-color: #334155 !important; } html.dark nav.sidebar a, html.dark nav#sidebar a { color: #e2e8f0 !important; border-color: #334155 !important; } html.dark nav.sidebar a:hover, html.dark nav#sidebar a:hover { background: rgba(99, 102, 241, 0.15) !important; } html.dark .sidebar-overlay.open { background: rgba(0, 0, 0, 0.55); } /* ─── White cards / containers ────────────────────────────────────── */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-white\/90 { background-color: rgba(30, 41, 59, 0.95) !important; } html.dark .bg-white\/80 { background-color: rgba(30, 41, 59, 0.85) !important; } html.dark .bg-white\/70 { background-color: rgba(30, 41, 59, 0.75) !important; } /* ─── Blobs (decorative) ──────────────────────────────────────────── */ html.dark .blob { opacity: 0.12 !important; } /* ─── Borders ─────────────────────────────────────────────────────── */ html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #334155 !important; } html.dark .border-slate-300 { border-color: #475569 !important; } html.dark .border-slate-600 { border-color: #64748b !important; } html.dark .border-gray-300 { border-color: #475569 !important; } html.dark .border-white\/60, html.dark .border-white\/50 { border-color: rgba(51, 65, 85, 0.6) !important; } html.dark .border-dashed { border-color: #475569 !important; } html.dark .border-indigo-100 { border-color: rgba(99, 102, 241, 0.2) !important; } html.dark .border-indigo-300 { border-color: rgba(99, 102, 241, 0.4) !important; } html.dark .border-indigo-400 { border-color: rgba(99, 102, 241, 0.5) !important; } html.dark .border-indigo-500 { border-color: rgba(99, 102, 241, 0.6) !important; } html.dark .border-indigo-600 { border-color: rgba(99, 102, 241, 0.7) !important; } html.dark .border-indigo-700 { border-color: rgba(99, 102, 241, 0.8) !important; } html.dark .border-purple-100 { border-color: rgba(168, 85, 247, 0.2) !important; } html.dark .border-purple-400 { border-color: rgba(168, 85, 247, 0.5) !important; } html.dark .border-purple-500 { border-color: rgba(168, 85, 247, 0.6) !important; } html.dark .border-purple-600 { border-color: rgba(168, 85, 247, 0.7) !important; } html.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.2) !important; } html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.3) !important; } html.dark .border-emerald-300 { border-color: rgba(16, 185, 129, 0.4) !important; } html.dark .border-emerald-400 { border-color: rgba(16, 185, 129, 0.5) !important; } html.dark .border-emerald-500 { border-color: rgba(16, 185, 129, 0.6) !important; } html.dark .border-emerald-600 { border-color: rgba(16, 185, 129, 0.7) !important; } html.dark .border-red-100 { border-color: rgba(239, 68, 68, 0.2) !important; } html.dark .border-red-300 { border-color: rgba(239, 68, 68, 0.4) !important; } html.dark .border-red-400 { border-color: rgba(239, 68, 68, 0.5) !important; } html.dark .border-red-500 { border-color: rgba(239, 68, 68, 0.6) !important; } html.dark .border-red-600 { border-color: rgba(239, 68, 68, 0.7) !important; } html.dark .border-rose-100 { border-color: rgba(244, 63, 94, 0.2) !important; } html.dark .border-rose-200 { border-color: rgba(244, 63, 94, 0.3) !important; } html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; } html.dark .border-sky-200 { border-color: rgba(14, 165, 233, 0.3) !important; } html.dark .border-teal-200 { border-color: rgba(20, 184, 166, 0.3) !important; } html.dark .border-violet-200 { border-color: rgba(139, 92, 246, 0.3) !important; } html.dark .border-fuchsia-200 { border-color: rgba(217, 70, 239, 0.3) !important; } html.dark .border-lime-200 { border-color: rgba(132, 204, 22, 0.3) !important; } /* ─── Text colours ────────────────────────────────────────────────── */ html.dark .text-slate-900 { color: #f1f5f9 !important; } html.dark .text-slate-800 { color: #e2e8f0 !important; } html.dark .text-slate-700 { color: #cbd5e1 !important; } html.dark .text-slate-600 { color: #94a3b8 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #64748b !important; } html.dark .text-slate-300 { color: #64748b !important; } /* ─── Soft tinted backgrounds ─────────────────────────────────────── */ html.dark .bg-slate-50 { background-color: #1e293b !important; } html.dark .bg-slate-100 { background-color: #1e293b !important; } html.dark .bg-slate-100\/80 { background-color: rgba(30, 41, 59, 0.8) !important; } html.dark .bg-slate-200 { background-color: #334155 !important; } html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.12) !important; } html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18) !important; } html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.12) !important; } html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; } html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12) !important; } html.dark .bg-emerald-50\/40 { background-color: rgba(16, 185, 129, 0.09) !important; } html.dark .bg-emerald-50\/60 { background-color: rgba(16, 185, 129, 0.11) !important; } html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; } html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12) !important; } html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.18) !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; } html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; } html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; } html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; } html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.12) !important; } html.dark .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18) !important; } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.12) !important; } html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; } html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; } html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.18) !important; } html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.12) !important; } html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.18) !important; } html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.12) !important; } html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; } html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.12) !important; } html.dark .bg-violet-100 { background-color: rgba(139, 92, 246, 0.18) !important; } html.dark .bg-gray-50 { background-color: #1e293b !important; } html.dark .bg-gray-100 { background-color: #1e293b !important; } html.dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.12) !important; } html.dark .bg-fuchsia-100 { background-color: rgba(217, 70, 239, 0.12) !important; } html.dark .bg-lime-100 { background-color: rgba(132, 204, 22, 0.12) !important; } html.dark .bg-sky-200 { background-color: rgba(14, 165, 233, 0.18) !important; } html.dark .bg-slate-300 { background-color: #475569 !important; } /* ─── Shadows ─────────────────────────────────────────────────────── */ html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { --tw-shadow-color: rgba(0, 0, 0, 0.35) !important; } html.dark .shadow-indigo-200 { --tw-shadow-color: rgba(99, 102, 241, 0.15) !important; } html.dark .shadow-indigo-100 { --tw-shadow-color: rgba(99, 102, 241, 0.10) !important; } html.dark .shadow-purple-200 { --tw-shadow-color: rgba(168, 85, 247, 0.15) !important; } html.dark .shadow-emerald-200 { --tw-shadow-color: rgba(16, 185, 129, 0.15) !important; } html.dark .shadow-amber-200 { --tw-shadow-color: rgba(245, 158, 11, 0.15) !important; } html.dark .shadow-blue-200 { --tw-shadow-color: rgba(59, 130, 246, 0.15) !important; } html.dark .shadow-red-200 { --tw-shadow-color: rgba(239, 68, 68, 0.15) !important; } html.dark .shadow-rose-200 { --tw-shadow-color: rgba(244, 63, 94, 0.15) !important; } /* ─── Inputs ──────────────────────────────────────────────────────── */ html.dark input, html.dark textarea, html.dark select { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #475569 !important; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { border-color: #6366f1 !important; } /* ─── Hover states ────────────────────────────────────────────────── */ html.dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; } html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; } html.dark .hover\:bg-slate-200:hover { background-color: #475569 !important; } html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.18) !important; } html.dark .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, 0.25) !important; } html.dark .hover\:bg-purple-50:hover { background-color: rgba(168, 85, 247, 0.18) !important; } html.dark .hover\:bg-purple-100:hover { background-color: rgba(168, 85, 247, 0.25) !important; } html.dark .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.18) !important; } html.dark .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.25) !important; } html.dark .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, 0.18) !important; } html.dark .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.25) !important; } html.dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.18) !important; } html.dark .hover\:bg-rose-100:hover { background-color: rgba(244, 63, 94, 0.25) !important; } html.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.18) !important; } html.dark .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.25) !important; } html.dark .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.18) !important; } html.dark .hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.25) !important; } html.dark .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.18) !important; } html.dark .hover\:bg-green-100:hover { background-color: rgba(34, 197, 94, 0.25) !important; } /* ─── Tabs & active states ────────────────────────────────────────── */ html.dark .bg-white.shadow { background-color: #334155 !important; } /* ─── Logo text ───────────────────────────────────────────────────── */ html.dark .text-indigo-300 { color: #a5b4fc !important; } html.dark .text-indigo-400 { color: #818cf8 !important; } html.dark .text-indigo-600 { color: #818cf8 !important; } html.dark .text-indigo-700 { color: #a5b4fc !important; } html.dark .text-indigo-800 { color: #c7d2fe !important; } html.dark .text-purple-300 { color: #d8b4fe !important; } html.dark .text-purple-400 { color: #c084fc !important; } html.dark .text-purple-500 { color: #c084fc !important; } html.dark .text-purple-600 { color: #c084fc !important; } html.dark .text-purple-700 { color: #d8b4fe !important; } html.dark .text-purple-800 { color: #e9d5ff !important; } html.dark .text-amber-400 { color: #fcd34d !important; } html.dark .text-amber-600 { color: #fbbf24 !important; } html.dark .text-amber-700 { color: #fbbf24 !important; } html.dark .text-amber-800 { color: #fde68a !important; } html.dark .text-emerald-400 { color: #34d399 !important; } html.dark .text-emerald-600 { color: #34d399 !important; } html.dark .text-emerald-700 { color: #34d399 !important; } html.dark .text-emerald-800 { color: #6ee7b7 !important; } html.dark .text-red-400 { color: #f87171 !important; } html.dark .text-red-500 { color: #f87171 !important; } html.dark .text-red-700 { color: #fca5a5 !important; } html.dark .text-red-800 { color: #fca5a5 !important; } html.dark .text-green-400 { color: #4ade80 !important; } html.dark .text-green-600 { color: #4ade80 !important; } html.dark .text-green-700 { color: #86efac !important; } html.dark .text-green-800 { color: #86efac !important; } html.dark .text-green-900 { color: #a7f3d0 !important; } html.dark .text-green-700\/60 { color: rgba(134, 239, 172, 0.6) !important; } html.dark .text-green-800\/60 { color: rgba(134, 239, 172, 0.6) !important; } html.dark .text-rose-400 { color: #fb7185 !important; } html.dark .text-rose-600 { color: #fb7185 !important; } html.dark .text-rose-700 { color: #fda4af !important; } html.dark .text-blue-300 { color: #93c5fd !important; } html.dark .text-blue-400 { color: #60a5fa !important; } html.dark .text-blue-600 { color: #60a5fa !important; } html.dark .text-blue-700 { color: #93c5fd !important; } html.dark .text-violet-400 { color: #a78bfa !important; } html.dark .text-violet-600 { color: #a78bfa !important; } html.dark .text-violet-700 { color: #c4b5fd !important; } html.dark .text-teal-400 { color: #2dd4bf !important; } html.dark .text-teal-600 { color: #2dd4bf !important; } html.dark .text-teal-700 { color: #5eead4 !important; } html.dark .text-teal-800 { color: #99f6e4 !important; } html.dark .text-orange-300 { color: #fdba74 !important; } html.dark .text-orange-400 { color: #fb923c !important; } html.dark .text-orange-500 { color: #fb923c !important; } html.dark .text-orange-700 { color: #fdba74 !important; } html.dark .text-pink-400 { color: #f472b6 !important; } html.dark .text-gray-300 { color: #94a3b8 !important; } /* ─── Badge / pill backgrounds ────────────────────────────────────── */ html.dark .bg-indigo-200 { background-color: rgba(99, 102, 241, 0.25) !important; } html.dark .bg-purple-200 { background-color: rgba(168, 85, 247, 0.25) !important; } html.dark .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.25) !important; } html.dark .bg-red-200 { background-color: rgba(239, 68, 68, 0.25) !important; } html.dark .bg-amber-200 { background-color: rgba(245, 158, 11, 0.25) !important; } /* ─── Border-coloured accents ─────────────────────────────────────── */ html.dark .border-indigo-200 { border-color: rgba(99, 102, 241, 0.3) !important; } html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; } html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; } html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; } html.dark .border-orange-200 { border-color: rgba(249, 115, 22, 0.3) !important; } html.dark .border-purple-200 { border-color: rgba(168, 85, 247, 0.3) !important; } /* ─── Hover border states ─────────────────────────────────────────── */ html.dark .hover\:border-slate-300:hover { border-color: #475569 !important; } html.dark .hover\:border-indigo-200:hover { border-color: rgba(99, 102, 241, 0.4) !important; } html.dark .hover\:border-indigo-300:hover { border-color: rgba(99, 102, 241, 0.5) !important; } html.dark .hover\:border-indigo-400:hover { border-color: rgba(99, 102, 241, 0.6) !important; } html.dark .hover\:border-emerald-300:hover { border-color: rgba(16, 185, 129, 0.5) !important; } html.dark .hover\:border-emerald-400:hover { border-color: rgba(16, 185, 129, 0.6) !important; } html.dark .hover\:border-purple-400:hover { border-color: rgba(168, 85, 247, 0.6) !important; } html.dark .hover\:border-red-300:hover { border-color: rgba(239, 68, 68, 0.5) !important; } html.dark .hover\:border-red-400:hover { border-color: rgba(239, 68, 68, 0.6) !important; } /* ─── Hover text states ───────────────────────────────────────────── */ html.dark .hover\:text-slate-600:hover { color: #94a3b8 !important; } html.dark .hover\:text-slate-700:hover { color: #cbd5e1 !important; } html.dark .hover\:text-slate-800:hover { color: #e2e8f0 !important; } html.dark .hover\:text-slate-900:hover { color: #f1f5f9 !important; } html.dark .hover\:text-indigo-600:hover { color: #818cf8 !important; } html.dark .hover\:text-indigo-700:hover { color: #a5b4fc !important; } html.dark .hover\:text-indigo-800:hover { color: #c7d2fe !important; } html.dark .hover\:text-purple-800:hover { color: #e9d5ff !important; } html.dark .hover\:text-purple-600:hover { color: #c084fc !important; } html.dark .hover\:text-emerald-700:hover { color: #34d399 !important; } html.dark .hover\:text-emerald-900:hover { color: #6ee7b7 !important; } html.dark .hover\:text-amber-700:hover { color: #fbbf24 !important; } html.dark .hover\:text-amber-800:hover { color: #fde68a !important; } html.dark .hover\:text-blue-700:hover { color: #93c5fd !important; } html.dark .hover\:text-red-400:hover { color: #f87171 !important; } html.dark .hover\:text-red-500:hover { color: #f87171 !important; } html.dark .hover\:text-red-600:hover { color: #fb7185 !important; } html.dark .hover\:text-red-700:hover { color: #fca5a5 !important; } /* ─── Gradient FROM / TO overrides ────────────────────────────────── */ html.dark .from-slate-50 { --tw-gradient-from: #0f172a !important; } html.dark .from-indigo-50 { --tw-gradient-from: #1e1b4b !important; } html.dark .from-indigo-50\/50 { --tw-gradient-from: rgba(30, 27, 75, 0.5) !important; } html.dark .from-purple-50 { --tw-gradient-from: #2e1065 !important; } html.dark .from-amber-50 { --tw-gradient-from: #1c1407 !important; } html.dark .from-orange-50 { --tw-gradient-from: #1a1007 !important; } html.dark .from-emerald-50 { --tw-gradient-from: #022c22 !important; } html.dark .from-green-50 { --tw-gradient-from: #052e16 !important; } html.dark .from-rose-50 { --tw-gradient-from: #1f0712 !important; } html.dark .from-red-50 { --tw-gradient-from: #1f0707 !important; } html.dark .from-blue-50 { --tw-gradient-from: #0d1f4b !important; } html.dark .from-sky-50 { --tw-gradient-from: #082f49 !important; } html.dark .from-violet-50 { --tw-gradient-from: #1c0b42 !important; } html.dark .to-indigo-50 { --tw-gradient-to: #1e1b4b !important; } html.dark .to-purple-50 { --tw-gradient-to: #2e1065 !important; } html.dark .to-violet-50 { --tw-gradient-to: #1c0b42 !important; } html.dark .to-amber-50 { --tw-gradient-to: #1c1407 !important; } html.dark .to-orange-50 { --tw-gradient-to: #1a1007 !important; } html.dark .to-emerald-50 { --tw-gradient-to: #022c22 !important; } html.dark .to-green-50 { --tw-gradient-to: #052e16 !important; } html.dark .to-rose-50 { --tw-gradient-to: #1f0712 !important; } html.dark .to-red-50 { --tw-gradient-to: #1f0707 !important; } html.dark .to-blue-50 { --tw-gradient-to: #0d1f4b !important; } html.dark .to-sky-50 { --tw-gradient-to: #082f49 !important; } html.dark .to-gray-50 { --tw-gradient-to: #0f172a !important; } html.dark .to-white { --tw-gradient-to: #1e293b !important; } /* ─── Scrollbar (WebKit) ──────────────────────────────────────────── */ html.dark ::-webkit-scrollbar { width: 8px; } html.dark ::-webkit-scrollbar-track { background: #1e293b; } html.dark ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* ─── Modal overlays ──────────────────────────────────────────────── */ html.dark .modal-overlay.open { background: rgba(0, 0, 0, 0.65) !important; } /* ─── Inactivity warning popup (created by auth.js) ───────────────── */ html.dark #inactivity-warning > div { background: #1e293b !important; color: #e2e8f0 !important; } html.dark #inactivity-warning h2 { color: #f1f5f9 !important; } html.dark #inactivity-warning p { color: #94a3b8 !important; } /* ─── Difficulty recommendation card text ─────────────────────────── */ html.dark .text-blue-900 { color: #bfdbfe !important; } html.dark .text-rose-900 { color: #fecdd3 !important; } html.dark .text-emerald-900 { color: #a7f3d0 !important; } /* ─── Student row hover in Průběh studentů (prehled.html) ─────────── */ html.dark .hover\:bg-white\/80:hover { background-color: rgba(255, 255, 255, 0.07) !important; }