/* * Tema "Dark Oranye" -- override utility class Tailwind yang udah dipakai di * seluruh halaman (bukan bikin ulang tiap halaman pakai dark:), jadi bisa * langsung nyala di SEMUA halaman tanpa ubah file Blade satu-satu. * * Cara pakai: kasih attribute data-theme="dark-orange" di . Selector di * sini SENGAJA [data-theme="dark-orange"] + .class (bukan cuma .class) biar * spesifisitasnya lebih tinggi drpd utility class Tailwind CDN, otomatis * menang di cascade tanpa perlu !important di mana-mana. * * Palet: DASAR abu-abu gelap NETRAL (bukan coklat hangat) + ORANYE sebagai * satu-satunya warna aksen (tombol, ikon aktif, teks penting) -- nyontek gaya * referensi (dasar netral gelap, oranye cuma buat elemen yg emang perlu * "nyala"). Warna semantik lain (biru=info, merah=bahaya, amber=peringatan, * dst) tetap huenya sendiri, cuma disesuaikan kontrasnya buat latar gelap. */ [data-theme="dark-orange"] { color-scheme: dark; } /* ===== Dasar halaman & body ===== */ [data-theme="dark-orange"] body { background-color: #0B0B0D !important; color: #E4E4E7; } /* ===== Permukaan/Card (bg-white, bg-stone-50/100/200) ===== */ [data-theme="dark-orange"] .bg-white { background-color: #18181B; } [data-theme="dark-orange"] .bg-stone-50 { background-color: #1C1C20; } [data-theme="dark-orange"] .bg-stone-100 { background-color: #232327; } [data-theme="dark-orange"] .bg-stone-200 { background-color: #2C2C31; } [data-theme="dark-orange"] .bg-stone-300 { background-color: #3A3A41; } [data-theme="dark-orange"] .bg-stone-400 { background-color: #5C5C66; } [data-theme="dark-orange"] .bg-stone-800 { background-color: #2A2A2F; } [data-theme="dark-orange"] .bg-stone-900 { background-color: #1C1C20; } [data-theme="dark-orange"] .hover\:bg-stone-50:hover { background-color: #202024; } [data-theme="dark-orange"] .hover\:bg-stone-100:hover { background-color: #28282D; } [data-theme="dark-orange"] .hover\:bg-stone-200:hover { background-color: #323238; } [data-theme="dark-orange"] .hover\:bg-stone-900:hover { background-color: #202024; } /* ===== Border ===== */ [data-theme="dark-orange"] .border-stone-100 { border-color: rgba(255,255,255,0.06); } [data-theme="dark-orange"] .border-stone-200 { border-color: rgba(255,255,255,0.10); } [data-theme="dark-orange"] .border-stone-300 { border-color: rgba(255,255,255,0.16); } [data-theme="dark-orange"] .border-stone-800 { border-color: rgba(255,255,255,0.14); } /* Cincin putih di lingkaran nav aktif -- di tema gelap disamain sama warna bar (bg-white yg di dark-theme jadi #18181B), biar nyatu bukan putih nyala. */ [data-theme="dark-orange"] .border-white { border-color: #18181B; } [data-theme="dark-orange"] .divide-stone-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,0.06); } /* ===== Teks netral (stone) ===== */ [data-theme="dark-orange"] .text-stone-900 { color: #FAFAFA; } [data-theme="dark-orange"] .text-stone-800 { color: #F4F4F5; } [data-theme="dark-orange"] .text-stone-700 { color: #D4D4D8; } [data-theme="dark-orange"] .text-stone-600 { color: #A1A1AA; } [data-theme="dark-orange"] .text-stone-500 { color: #8B8B94; } [data-theme="dark-orange"] .text-stone-400 { color: #6B6B75; } [data-theme="dark-orange"] .text-stone-300 { color: #4C4C54; } [data-theme="dark-orange"] .hover\:text-stone-600:hover { color: #D4D4D8; } [data-theme="dark-orange"] .hover\:text-stone-700:hover { color: #F4F4F5; } /* ===== Primary/brand: emerald -> oranye ===== */ [data-theme="dark-orange"] .bg-emerald-50 { background-color: rgba(249,115,22,0.14); } [data-theme="dark-orange"] .bg-emerald-100 { background-color: rgba(249,115,22,0.20); } [data-theme="dark-orange"] .bg-emerald-500 { background-color: #FB923C; } [data-theme="dark-orange"] .bg-emerald-600 { background-color: #F97316; } [data-theme="dark-orange"] .bg-emerald-700 { background-color: #F2610C; } [data-theme="dark-orange"] .bg-emerald-800 { background-color: #EA580C; } [data-theme="dark-orange"] .bg-emerald-900 { background-color: #C2410C; } [data-theme="dark-orange"] .hover\:bg-emerald-50:hover { background-color: rgba(249,115,22,0.18); } [data-theme="dark-orange"] .hover\:bg-emerald-100:hover { background-color: rgba(249,115,22,0.24); } [data-theme="dark-orange"] .hover\:bg-emerald-800:hover { background-color: #EA580C; } [data-theme="dark-orange"] .hover\:bg-emerald-900:hover { background-color: #C2410C; } [data-theme="dark-orange"] .text-emerald-600 { color: #FB923C; } [data-theme="dark-orange"] .text-emerald-700 { color: #FDA55A; } [data-theme="dark-orange"] .text-emerald-900 { color: #FDA55A; } [data-theme="dark-orange"] .text-emerald-100 { color: #FED7AA; } [data-theme="dark-orange"] .hover\:text-emerald-600:hover { color: #FB923C; } /* Tombol semi-transparan di atas banner emerald (mis. "Tambah Karyawan"/"Lihat Absensi" di dashboard admin) -- kelewat kalau cuma .bg-emerald-700 yg di-override, soalnya "/60" itu literal nama class SENDIRI (beda dari .bg-emerald-700 polos). text-emerald-900 DISAMAIN sama text-emerald-700 (bukan warna gelap kayak default Tailwind-nya) karena di tema ini .bg-white ikut jadi GELAP (#18181B) -- kalau text-emerald-900 dibiarin gelap juga, tulisannya ilang/gak kebaca. */ [data-theme="dark-orange"] .bg-emerald-700\/60 { background-color: rgba(242, 97, 12, 0.6); } [data-theme="dark-orange"] .border-emerald-100 { border-color: rgba(249,115,22,0.25); } [data-theme="dark-orange"] .border-emerald-200 { border-color: rgba(249,115,22,0.35); } [data-theme="dark-orange"] .border-emerald-600 { border-color: #F97316; } [data-theme="dark-orange"] .border-emerald-700 { border-color: #F2610C; } [data-theme="dark-orange"] .border-emerald-800 { border-color: #EA580C; } [data-theme="dark-orange"] .focus\:ring-emerald-700\/30:focus { --tw-ring-color: rgba(249,115,22,0.35); } [data-theme="dark-orange"] .focus\:border-emerald-700:focus { border-color: #F97316; } /* ===== Biru (info) ===== */ [data-theme="dark-orange"] .bg-blue-50 { background-color: rgba(59,130,246,0.14); } [data-theme="dark-orange"] .bg-blue-100 { background-color: rgba(59,130,246,0.20); } [data-theme="dark-orange"] .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,0.20); } [data-theme="dark-orange"] .hover\:bg-blue-100:hover { background-color: rgba(59,130,246,0.26); } [data-theme="dark-orange"] .bg-blue-700 { background-color: #1D4ED8; } [data-theme="dark-orange"] .bg-blue-800 { background-color: #1E40AF; } [data-theme="dark-orange"] .hover\:bg-blue-800:hover { background-color: #1E3A8A; } [data-theme="dark-orange"] .text-blue-600 { color: #60A5FA; } [data-theme="dark-orange"] .text-blue-700 { color: #93C5FD; } [data-theme="dark-orange"] .hover\:text-blue-600:hover { color: #60A5FA; } [data-theme="dark-orange"] .border-blue-200 { border-color: rgba(59,130,246,0.35); } /* ===== Merah (bahaya) ===== */ [data-theme="dark-orange"] .bg-red-50 { background-color: rgba(239,68,68,0.14); } [data-theme="dark-orange"] .bg-red-100 { background-color: rgba(239,68,68,0.20); } [data-theme="dark-orange"] .hover\:bg-red-50:hover { background-color: rgba(239,68,68,0.20); } [data-theme="dark-orange"] .hover\:bg-red-100:hover { background-color: rgba(239,68,68,0.26); } [data-theme="dark-orange"] .bg-red-200 { background-color: rgba(239,68,68,0.30); } [data-theme="dark-orange"] .bg-red-400 { background-color: #F87171; } [data-theme="dark-orange"] .bg-red-500 { background-color: #EF4444; } [data-theme="dark-orange"] .bg-red-600 { background-color: #DC2626; } [data-theme="dark-orange"] .bg-red-700 { background-color: #B91C1C; } [data-theme="dark-orange"] .hover\:bg-red-700:hover { background-color: #991B1B; } [data-theme="dark-orange"] .bg-red-800 { background-color: #991B1B; } [data-theme="dark-orange"] .text-red-500 { color: #F87171; } [data-theme="dark-orange"] .text-red-600 { color: #F87171; } [data-theme="dark-orange"] .text-red-700 { color: #FCA5A5; } [data-theme="dark-orange"] .hover\:text-red-600:hover { color: #F87171; } [data-theme="dark-orange"] .hover\:text-red-700:hover { color: #FCA5A5; } [data-theme="dark-orange"] .border-red-100 { border-color: rgba(239,68,68,0.25); } [data-theme="dark-orange"] .border-red-200 { border-color: rgba(239,68,68,0.35); } /* ===== Hijau (sukses/online -- pakai palet "green", BUKAN "emerald" krn emerald udah kepakai jadi warna brand tema ini. Badge status kayak "Online"/RX Power Hijau/Suhu Normal sengaja gak ikut warna brand, tapi tetap perlu disamarin di sini biar gak kelewat kontras nongol putih terang di atas latar gelap. ===== */ [data-theme="dark-orange"] .bg-green-50 { background-color: rgba(34,197,94,0.14); } [data-theme="dark-orange"] .bg-green-100 { background-color: rgba(34,197,94,0.20); } [data-theme="dark-orange"] .text-green-600 { color: #4ADE80; } [data-theme="dark-orange"] .border-green-200 { border-color: rgba(34,197,94,0.35); } /* ===== Amber (peringatan) ===== */ [data-theme="dark-orange"] .bg-amber-50 { background-color: rgba(245,158,11,0.14); } [data-theme="dark-orange"] .bg-amber-500 { background-color: #F59E0B; } [data-theme="dark-orange"] .bg-amber-600 { background-color: #D97706; } [data-theme="dark-orange"] .bg-amber-700 { background-color: #B45309; } [data-theme="dark-orange"] .hover\:bg-amber-700:hover { background-color: #92400E; } [data-theme="dark-orange"] .text-amber-500 { color: #FBBF24; } [data-theme="dark-orange"] .text-amber-600 { color: #FBBF24; } [data-theme="dark-orange"] .text-amber-700 { color: #FCD34D; } [data-theme="dark-orange"] .border-amber-100 { border-color: rgba(245,158,11,0.25); } [data-theme="dark-orange"] .border-amber-200 { border-color: rgba(245,158,11,0.35); } /* ===== Oranye murni (dipertahankan, dibikin lebih menonjol krn ini tema utama) ===== */ [data-theme="dark-orange"] .bg-orange-50 { background-color: rgba(249,115,22,0.18); } [data-theme="dark-orange"] .bg-orange-100 { background-color: rgba(249,115,22,0.24); } [data-theme="dark-orange"] .hover\:bg-orange-50:hover { background-color: rgba(249,115,22,0.24); } [data-theme="dark-orange"] .hover\:bg-orange-100:hover { background-color: rgba(249,115,22,0.30); } [data-theme="dark-orange"] .bg-orange-500 { background-color: #F97316; } [data-theme="dark-orange"] .bg-orange-600 { background-color: #EA580C; } [data-theme="dark-orange"] .hover\:bg-orange-600:hover { background-color: #C2410C; } [data-theme="dark-orange"] .bg-orange-700 { background-color: #C2410C; } [data-theme="dark-orange"] .hover\:bg-orange-700:hover { background-color: #9A3412; } [data-theme="dark-orange"] .text-orange-500 { color: #FB923C; } [data-theme="dark-orange"] .text-orange-600 { color: #FB923C; } [data-theme="dark-orange"] .text-orange-700 { color: #FDBA74; } [data-theme="dark-orange"] .border-orange-200 { border-color: rgba(249,115,22,0.35); } [data-theme="dark-orange"] .border-orange-500 { border-color: #F97316; } [data-theme="dark-orange"] .border-orange-600 { border-color: #EA580C; } /* ===== Indigo/Ungu/Pink/Cyan (badge role, dsb) ===== */ [data-theme="dark-orange"] .bg-indigo-50 { background-color: rgba(99,102,241,0.16); } [data-theme="dark-orange"] .hover\:bg-indigo-100:hover { background-color: rgba(99,102,241,0.24); } [data-theme="dark-orange"] .text-indigo-600 { color: #A5B4FC; } [data-theme="dark-orange"] .text-indigo-700 { color: #C7D2FE; } [data-theme="dark-orange"] .bg-purple-50 { background-color: rgba(168,85,247,0.16); } [data-theme="dark-orange"] .text-purple-700 { color: #D8B4FE; } [data-theme="dark-orange"] .bg-cyan-50 { background-color: rgba(34,211,238,0.16); } [data-theme="dark-orange"] .bg-pink-50 { background-color: rgba(236,72,153,0.16); } [data-theme="dark-orange"] .text-pink-600 { color: #F472B6; } [data-theme="dark-orange"] .text-pink-700 { color: #F9A8D4; } [data-theme="dark-orange"] .border-pink-200 { border-color: rgba(236,72,153,0.35); } /* ===== Abu-abu generik (dipakai di beberapa halaman lama) ===== */ [data-theme="dark-orange"] .bg-gray-100 { background-color: #232327; } [data-theme="dark-orange"] .bg-gray-800 { background-color: #1C1C20; } [data-theme="dark-orange"] .bg-gray-900 { background-color: #131316; } [data-theme="dark-orange"] .text-gray-400 { color: #6B6B75; } [data-theme="dark-orange"] .text-gray-500 { color: #8B8B94; } [data-theme="dark-orange"] .text-gray-600 { color: #A1A1AA; } [data-theme="dark-orange"] .text-gray-700 { color: #D4D4D8; } [data-theme="dark-orange"] .text-gray-900 { color: #FAFAFA; } /* ===== Warna kustom hex spesifik (dipakai di dashboard, dll) ===== */ [data-theme="dark-orange"] .bg-\[\#F6F8FC\] { background-color: #0B0B0D !important; } [data-theme="dark-orange"] .text-\[\#1E293B\] { color: #FAFAFA !important; } [data-theme="dark-orange"] .bg-gradient-to-br.from-emerald-800.to-emerald-900 { --tw-gradient-from: #EA580C var(--tw-gradient-from-position); --tw-gradient-to: #7C2D12 var(--tw-gradient-to-position); } /* Lingkaran item aktif di bottom nav mobile -- hijau di tema Terang, oranye di sini. */ [data-theme="dark-orange"] .bg-gradient-to-br.from-emerald-500.to-emerald-700 { --tw-gradient-from: #FB923C var(--tw-gradient-from-position); --tw-gradient-to: #C2410C var(--tw-gradient-to-position); } [data-theme="dark-orange"] .bg-gradient-to-br.from-\[\#355CFF\].to-\[\#4F46E5\] { --tw-gradient-from: #EA580C var(--tw-gradient-from-position); --tw-gradient-to: #7C2D12 var(--tw-gradient-to-position); } /* ===== Shadow -- lembutin biar gak putih nyala di atas latar gelap ===== */ [data-theme="dark-orange"] [class*="shadow-"] { box-shadow: 0 10px 25px rgba(0,0,0,0.45) !important; } /* Pengecualian: bar & tombol tengah bottom nav mobile -- shadow oranye-nya SENGAJA dipertahankan (efek "nyala"), taruh SETELAH aturan umum di atas biar menang (spesifisitas sama, urutan terakhir yg dipakai). */ [data-theme="dark-orange"] .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.14\)\] { box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important; } [data-theme="dark-orange"] .shadow-\[0_8px_20px_rgba\(249\,115\,22\,0\.45\)\] { box-shadow: 0 8px 22px rgba(249,115,22,0.55) !important; } /* ===== Scrollbar gelap (kosmetik, browser Chromium/WebKit) ===== */ [data-theme="dark-orange"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark-orange"] ::-webkit-scrollbar-track { background: #0B0B0D; } [data-theme="dark-orange"] ::-webkit-scrollbar-thumb { background: #3A3A41; border-radius: 6px; }