/* ============================================================ WM COFFEE Admin - Dark Mode Stylesheet Digenerate dari Tailwind CSS (darkMode:'class') + tambahan manual. File ini HANYA aktif kalau punya class "dark" (lihat toggle di admin.html). Kalau class "dark" gak ada, semua rule di sini inert alias gak ngaruh sama sekali ke tampilan default (light mode). ============================================================ */ .dark\:divide-slate-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1)); } .dark\:border-amber-800:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(146 64 14 / var(--tw-border-opacity, 1)); } .dark\:border-green-800:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(22 101 52 / var(--tw-border-opacity, 1)); } .dark\:border-green-900:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(20 83 45 / var(--tw-border-opacity, 1)); } .dark\:border-orange-800:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(154 52 18 / var(--tw-border-opacity, 1)); } .dark\:border-red-800:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(153 27 27 / var(--tw-border-opacity, 1)); } .dark\:border-slate-100:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(241 245 249 / var(--tw-border-opacity, 1)); } .dark\:border-slate-600:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(71 85 105 / var(--tw-border-opacity, 1)); } .dark\:border-slate-700:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); } .dark\:bg-amber-950:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(69 26 3 / var(--tw-bg-opacity, 1)); } .dark\:bg-green-950:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(5 46 22 / var(--tw-bg-opacity, 1)); } .dark\:bg-orange-950:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(67 20 7 / var(--tw-bg-opacity, 1)); } .dark\:bg-red-950:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1)); } .dark\:bg-slate-600:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1)); } .dark\:bg-slate-700:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); } .dark\:bg-slate-800:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); } .dark\:bg-slate-900:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); } .dark\:bg-slate-950:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1)); } .dark\:text-amber-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(251 191 36 / var(--tw-text-opacity, 1)); } .dark\:text-blue-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity, 1)); } .dark\:text-green-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(74 222 128 / var(--tw-text-opacity, 1)); } .dark\:text-orange-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(251 146 60 / var(--tw-text-opacity, 1)); } .dark\:text-purple-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(192 132 252 / var(--tw-text-opacity, 1)); } .dark\:text-red-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } .dark\:text-slate-100:is(.dark *) { --tw-text-opacity: 1; color: rgb(241 245 249 / var(--tw-text-opacity, 1)); } .dark\:text-slate-200:is(.dark *) { --tw-text-opacity: 1; color: rgb(226 232 240 / var(--tw-text-opacity, 1)); } .dark\:text-slate-300:is(.dark *) { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity, 1)); } .dark\:text-slate-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .dark\:text-slate-50:is(.dark *) { --tw-text-opacity: 1; color: rgb(248 250 252 / var(--tw-text-opacity, 1)); } .dark\:text-slate-500:is(.dark *) { --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .dark\:text-slate-600:is(.dark *) { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); } .dark\:ring-slate-700:is(.dark *) { --tw-ring-opacity: 1; --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1)); } .dark\:file\:bg-slate-700:is(.dark *)::file-selector-button { --tw-bg-opacity: 1; background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); } .dark\:file\:text-slate-200:is(.dark *)::file-selector-button { --tw-text-opacity: 1; color: rgb(226 232 240 / var(--tw-text-opacity, 1)); } .dark\:hover\:border-red-800:hover:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(153 27 27 / var(--tw-border-opacity, 1)); } .dark\:hover\:border-slate-400:hover:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(148 163 184 / var(--tw-border-opacity, 1)); } .dark\:hover\:bg-slate-500:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1)); } .dark\:hover\:bg-slate-600:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1)); } .dark\:hover\:bg-slate-700:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); } .dark\:hover\:text-blue-400:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity, 1)); } .dark\:hover\:text-red-300:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(252 165 165 / var(--tw-text-opacity, 1)); } .dark\:hover\:text-red-400:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } .dark\:hover\:text-slate-300:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity, 1)); } .dark\:hover\:file\:bg-slate-600:is(.dark *)::file-selector-button:hover { --tw-bg-opacity: 1; background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1)); } /* ===== Manual: elemen form (input/textarea/select) gak punya class bg-white eksplisit di markup-nya (cuma border-gray-300), jadi gak ketangkep scanner Tailwind di atas. Default browser-nya putih polos -- perlu di-override manual biar gak nyilaukan pas dark mode aktif. ===== */ .dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark input[type="number"], .dark input[type="tel"], .dark input[type="search"], .dark textarea, .dark select { background-color: #0f172a; color: #f1f5f9; } .dark input[type="text"]::placeholder, .dark input[type="email"]::placeholder, .dark input[type="password"]::placeholder, .dark input[type="number"]::placeholder, .dark input[type="tel"]::placeholder, .dark input[type="search"]::placeholder, .dark textarea::placeholder { color: #64748b; } .dark select option { background-color: #0f172a; color: #f1f5f9; } /* Transisi halus pas toggle dark mode dinyalain/dimatiin, biar gak "jeplak" mendadak */ body, .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .border-gray-100, .border-gray-200, .border-gray-300 { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } /* Toggle dark mode: ikon bulan/matahari */ .dark-mode-toggle-btn { position: relative; }