/* ============================================================ CZCORE — tmavý režim (override skin, cesta 2) Aktivuje se třídou .dark na (přepíná js/theme.js). Přebarvuje POUZE reálně použité Tailwind třídy (dle grep inventáře). Mění jen barvy (background/color/border/ring/gradient-stop) → žádný transform → neovlivní iOS pin shoutboxu/komentářů na visualViewport. Vše s !important, aby to přebilo runtime styly z Tailwind CDN. Záměrně PONECHÁNO beze změny: sytá tlačítka (bg-*-500/600), černé overlaye (bg-black/*), tmavé šedé (bg-gray-700/800), accent-* a už světlé odstíny textu (text-*-300/400, text-gray-200, text-white). Dočasné: po dokončení lze celý soubor + jeho odebrat. ============================================================ */ html.dark { --cz-bg: #0f141c; /* stránka (bg-gray-50) */ --cz-surface: #1b2230; /* karty / nav / dropdowny (bg-white) */ --cz-surface-2: #232c3d; /* bg-gray-100 */ --cz-surface-3: #2e3a4f; /* bg-gray-200 / hover */ --cz-border: #2c3647; /* gray-200/300 okraje */ --cz-border-2: #222b3a; /* gray-100 jemné okraje */ --cz-text: #e6eaf2; /* gray-900/800 */ --cz-text-2: #c2cad8; /* gray-700/600 */ --cz-muted: #93a0b5; /* gray-500/400 (čitelné popisky) */ --cz-faint: #6b7891; /* gray-300 */ /* akcentní text — zesvětlené odstíny pro kontrast na tmavém */ --cz-indigo: #a5b4fc; --cz-emerald: #34d399; --cz-red: #f87171; --cz-amber: #fbbf24; --cz-blue: #60a5fa; --cz-sky: #38bdf8; --cz-cyan: #22d3ee; --cz-purple: #c084fc; --cz-violet: #a78bfa; color-scheme: dark; /* ztmaví nativní scrollbary + form prvky */ } /* ---------- PLOCHY ---------- */ html.dark body { background-color: var(--cz-bg) !important; color: var(--cz-text) !important; } html.dark .bg-white { background-color: var(--cz-surface) !important; } html.dark .bg-white\/80 { background-color: rgba(27,34,48,0.85) !important; } html.dark .focus\:bg-white:focus { background-color: var(--cz-surface) !important; } html.dark .bg-gray-50 { background-color: var(--cz-bg) !important; } html.dark .bg-gray-100 { background-color: var(--cz-surface-2) !important; } html.dark .bg-gray-200 { background-color: var(--cz-surface-3) !important; } html.dark .bg-gray-300 { background-color: #3a4760 !important; } html.dark .bg-gray-400 { background-color: #4a5775 !important; } html.dark .bg-gray-500 { background-color: #5e6b82 !important; } html.dark .bg-gray-50\/50, html.dark .bg-gray-50\/60, html.dark .bg-gray-50\/80 { background-color: rgba(255,255,255,0.03) !important; } html.dark .disabled\:bg-gray-200:disabled { background-color: var(--cz-surface-3) !important; } /* jemné barevné plochy (tinty) → ztlumené průhledné */ html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.16) !important; } html.dark .bg-indigo-50\/20 { background-color: rgba(99,102,241,0.07) !important; } html.dark .bg-indigo-50\/30 { background-color: rgba(99,102,241,0.09) !important; } html.dark .bg-indigo-50\/40 { background-color: rgba(99,102,241,0.12) !important; } html.dark .bg-indigo-50\/50 { background-color: rgba(99,102,241,0.14) !important; } html.dark .bg-indigo-100 { background-color: rgba(99,102,241,0.22) !important; } html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.14) !important; } html.dark .bg-amber-50\/50 { background-color: rgba(245,158,11,0.08) !important; } html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.20) !important; } html.dark .bg-red-50 { background-color: rgba(239,68,68,0.14) !important; } html.dark .bg-red-100 { background-color: rgba(239,68,68,0.20) !important; } html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.14) !important; } html.dark .bg-emerald-50\/20 { background-color: rgba(16,185,129,0.06) !important; } html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.14) !important; } html.dark .bg-sky-50 { background-color: rgba(14,165,233,0.14) !important; } html.dark .bg-cyan-50 { background-color: rgba(34,211,238,0.12) !important; } html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.13) !important; } html.dark .bg-violet-50 { background-color: rgba(139,92,246,0.13) !important; } /* ---------- TEXT: šedá škála ---------- */ html.dark .text-gray-900, html.dark .text-gray-800 { color: var(--cz-text) !important; } html.dark .text-gray-700, html.dark .text-gray-600 { color: var(--cz-text-2) !important; } html.dark .text-gray-500, html.dark .text-gray-400 { color: var(--cz-muted) !important; } html.dark .text-gray-300 { color: var(--cz-faint) !important; } html.dark .disabled\:text-gray-400:disabled { color: var(--cz-faint) !important; } html.dark .placeholder-gray-400::placeholder { color: var(--cz-muted) !important; } /* ---------- TEXT: akcenty (zesvětleno) ---------- */ html.dark .text-indigo-700, html.dark .text-indigo-600, html.dark .text-indigo-500 { color: var(--cz-indigo) !important; } html.dark .text-indigo-500\/80 { color: rgba(165,180,252,0.85) !important; } html.dark .text-indigo-500\/90 { color: rgba(165,180,252,0.92) !important; } html.dark .text-emerald-800, html.dark .text-emerald-700, html.dark .text-emerald-600, html.dark .text-emerald-500 { color: var(--cz-emerald) !important; } html.dark .text-red-800, html.dark .text-red-700, html.dark .text-red-600, html.dark .text-red-500 { color: var(--cz-red) !important; } html.dark .text-amber-800, html.dark .text-amber-700, html.dark .text-amber-600, html.dark .text-amber-500 { color: var(--cz-amber) !important; } html.dark .text-blue-700, html.dark .text-blue-600, html.dark .text-blue-500 { color: var(--cz-blue) !important; } html.dark .text-sky-600, html.dark .text-sky-500 { color: var(--cz-sky) !important; } html.dark .text-cyan-700 { color: var(--cz-cyan) !important; } html.dark .text-purple-700, html.dark .text-purple-500 { color: var(--cz-purple) !important; } html.dark .text-violet-700 { color: var(--cz-violet) !important; } html.dark .text-orange-500 { color: #fb923c !important; } html.dark .text-pink-500 { color: #f472b6 !important; } /* ---------- OKRAJE ---------- */ html.dark .border-gray-200, html.dark .lg\:border-gray-200, html.dark .border-gray-300 { border-color: var(--cz-border) !important; } html.dark .border-gray-200\/60 { border-color: rgba(44,54,71,0.6) !important; } html.dark .border-gray-100 { border-color: var(--cz-border-2) !important; } html.dark .border-gray-50 { border-color: rgba(255,255,255,0.04) !important; } html.dark .border-white { border-color: rgba(255,255,255,0.12) !important; } html.dark .border-indigo-100 { border-color: rgba(99,102,241,0.28) !important; } html.dark .border-indigo-100\/50 { border-color: rgba(99,102,241,0.18) !important; } html.dark .border-indigo-200 { border-color: rgba(99,102,241,0.35) !important; } html.dark .border-indigo-300 { border-color: rgba(99,102,241,0.45) !important; } html.dark .border-amber-100 { border-color: rgba(245,158,11,0.28) !important; } html.dark .border-amber-200 { border-color: rgba(245,158,11,0.35) !important; } html.dark .border-amber-300 { border-color: rgba(245,158,11,0.45) !important; } html.dark .border-red-100 { border-color: rgba(239,68,68,0.28) !important; } html.dark .border-red-200 { border-color: rgba(239,68,68,0.38) !important; } html.dark .border-blue-100 { border-color: rgba(59,130,246,0.28) !important; } html.dark .border-blue-200 { border-color: rgba(59,130,246,0.35) !important; } html.dark .border-emerald-100 { border-color: rgba(16,185,129,0.28) !important; } html.dark .border-emerald-200 { border-color: rgba(16,185,129,0.35) !important; } html.dark .border-cyan-100 { border-color: rgba(34,211,238,0.28) !important; } html.dark .border-purple-100 { border-color: rgba(168,85,247,0.28) !important; } html.dark .border-sky-200 { border-color: rgba(14,165,233,0.35) !important; } /* ---------- HOVER: plochy ---------- */ html.dark .hover\:bg-gray-50:hover { background-color: var(--cz-surface-2) !important; } html.dark .hover\:bg-gray-50\/50:hover, html.dark .hover\:bg-gray-50\/70:hover { background-color: rgba(255,255,255,0.04) !important; } html.dark .hover\:bg-gray-100:hover { background-color: var(--cz-surface-3) !important; } html.dark .hover\:bg-gray-200:hover, html.dark .hover\:bg-gray-200\/80:hover { background-color: var(--cz-surface-3) !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.26) !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.24) !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.24) !important; } html.dark .hover\:bg-blue-100:hover { background-color: rgba(59,130,246,0.22) !important; } html.dark .hover\:bg-emerald-100:hover { background-color: rgba(16,185,129,0.22) !important; } /* ---------- HOVER: text ---------- */ html.dark .hover\:text-gray-900:hover { color: var(--cz-text) !important; } html.dark .hover\:text-gray-700:hover, html.dark .hover\:text-gray-600:hover { color: var(--cz-text-2) !important; } html.dark .hover\:text-indigo-800:hover, html.dark .hover\:text-indigo-700:hover, html.dark .hover\:text-indigo-600:hover, html.dark .hover\:text-indigo-500:hover { color: var(--cz-indigo) !important; } html.dark .hover\:text-red-600:hover, html.dark .hover\:text-red-500:hover { color: var(--cz-red) !important; } html.dark .hover\:text-amber-600:hover, html.dark .hover\:text-amber-500:hover { color: var(--cz-amber) !important; } html.dark .hover\:text-emerald-800:hover { color: var(--cz-emerald) !important; } /* ---------- HOVER: okraje ---------- */ html.dark .hover\:border-gray-200:hover { border-color: rgba(255,255,255,0.18) !important; } /* ---------- GROUP-HOVER ---------- */ html.dark .group:hover .group-hover\:bg-gray-100 { background-color: var(--cz-surface-3) !important; } html.dark .group:hover .group-hover\:text-gray-900 { color: var(--cz-text) !important; } html.dark .group:hover .group-hover\:text-gray-500 { color: var(--cz-muted) !important; } /* ---------- ACTIVE (mobil) ---------- */ html.dark .active\:bg-gray-100:active { background-color: var(--cz-surface-3) !important; } html.dark .active\:bg-amber-50:active { background-color: rgba(245,158,11,0.18) !important; } html.dark .active\:bg-red-50:active { background-color: rgba(239,68,68,0.18) !important; } /* ---------- DIVIDE ---------- */ html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--cz-border-2) !important; } html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,0.04) !important; } /* ---------- RING (světlé fokus prstence) ---------- */ html.dark .ring-gray-100 { --tw-ring-color: rgba(255,255,255,0.10) !important; } html.dark .ring-indigo-100 { --tw-ring-color: rgba(99,102,241,0.30) !important; } html.dark .ring-amber-100 { --tw-ring-color: rgba(245,158,11,0.30) !important; } html.dark .ring-red-100 { --tw-ring-color: rgba(239,68,68,0.30) !important; } html.dark .ring-emerald-100 { --tw-ring-color: rgba(16,185,129,0.30) !important; } html.dark .ring-blue-100 { --tw-ring-color: rgba(59,130,246,0.30) !important; } html.dark .ring-sky-100 { --tw-ring-color: rgba(14,165,233,0.30) !important; } /* ---------- FILE input tlačítko ---------- */ html.dark .file\:bg-indigo-50::file-selector-button { background-color: rgba(99,102,241,0.16) !important; } html.dark .hover\:file\:bg-indigo-100:hover::file-selector-button { background-color: rgba(99,102,241,0.26) !important; } html.dark .file\:text-indigo-600::file-selector-button, html.dark .file\:text-indigo-700::file-selector-button { color: var(--cz-indigo) !important; } /* ---------- GRADIENTY (světlé endpointy → tmavé) ---------- */ html.dark .from-white { --tw-gradient-from: #1b2230 var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(27,34,48,0)) !important; } html.dark .to-white { --tw-gradient-to: #1b2230 var(--tw-gradient-to-position) !important; } html.dark .to-gray-50\/50 { --tw-gradient-to: rgba(15,20,28,0.5) var(--tw-gradient-to-position) !important; } html.dark .from-amber-50 { --tw-gradient-from: rgba(245,158,11,0.10) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,158,11,0)) !important; } /* ---------- přepínač režimu (CSS swap ikon/štítků, bez JS) ---------- */ .theme-when-dark { display: none; } html.dark .theme-when-dark { display: inline-block; } html.dark .theme-when-light { display: none; }