/* ============================================= PERCETAKAN ERP — Theme System 6 preset tema modern & profesional. Diterapkan lewat atribut data-theme di , mencakup sidebar, topbar, kartu, tombol, badge, input, dan seluruh aksen warna aplikasi. ============================================= */ /* ── Variabel default per tema ───────────────────────────── */ html[data-theme="ocean"] { --t-primary: #2563eb; --t-primary-hover: #1d4ed8; --t-primary-light: #eff6ff; --t-primary-dark-tint: rgba(37,99,235,.18); --t-accent-text: #2563eb; --t-accent-text-dark: #60a5fa; --t-sidebar-bg: #ffffff; --t-sidebar-text: #374151; --t-sidebar-hover: #f3f4f6; --t-sidebar-active-bg: #eff6ff; --t-sidebar-active-text: #2563eb; --t-sidebar-border: #e5e7eb; --t-topbar-bg: #ffffff; --t-topbar-border: #e5e7eb; --t-topbar-text: #1f2937; --t-body-bg: #f3f4f6; --t-surface: #ffffff; --t-surface-border: #e5e7eb; --t-font: 'Inter', ui-sans-serif, system-ui, sans-serif; } html[data-theme="emerald"] { --t-primary: #059669; --t-primary-hover: #047857; --t-primary-light: #ecfdf5; --t-primary-dark-tint: rgba(5,150,105,.18); --t-accent-text: #059669; --t-accent-text-dark: #34d399; --t-sidebar-bg: #ffffff; --t-sidebar-text: #374151; --t-sidebar-hover: #f0fdf4; --t-sidebar-active-bg: #ecfdf5; --t-sidebar-active-text: #059669; --t-sidebar-border: #e5e7eb; --t-topbar-bg: #ffffff; --t-topbar-border: #e5e7eb; --t-topbar-text: #1f2937; --t-body-bg: #f4f7f5; --t-surface: #ffffff; --t-surface-border: #e5e7eb; --t-font: 'Inter', ui-sans-serif, system-ui, sans-serif; } html[data-theme="violet"] { --t-primary: #7c3aed; --t-primary-hover: #6d28d9; --t-primary-light: #f5f3ff; --t-primary-dark-tint: rgba(124,58,237,.18); --t-accent-text: #7c3aed; --t-accent-text-dark: #a78bfa; --t-sidebar-bg: #ffffff; --t-sidebar-text: #3f3151; --t-sidebar-hover: #f5f3ff; --t-sidebar-active-bg: #f5f3ff; --t-sidebar-active-text: #7c3aed; --t-sidebar-border: #ece7f7; --t-topbar-bg: #ffffff; --t-topbar-border: #ece7f7; --t-topbar-text: #2e1f47; --t-body-bg: #f6f4fa; --t-surface: #ffffff; --t-surface-border: #ece7f7; --t-font: 'Inter', ui-sans-serif, system-ui, sans-serif; } html[data-theme="amber"] { --t-primary: #d97706; --t-primary-hover: #b45309; --t-primary-light: #fffbeb; --t-primary-dark-tint: rgba(217,119,6,.18); --t-accent-text: #b45309; --t-accent-text-dark: #fbbf24; --t-sidebar-bg: #fffdf8; --t-sidebar-text: #57534e; --t-sidebar-hover: #fef3c7; --t-sidebar-active-bg: #fffbeb; --t-sidebar-active-text: #b45309; --t-sidebar-border: #f0e6d6; --t-topbar-bg: #fffdf8; --t-topbar-border: #f0e6d6; --t-topbar-text: #44403c; --t-body-bg: #faf6ef; --t-surface: #fffdf8; --t-surface-border: #f0e6d6; --t-font: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* Slate Corporate — sidebar gelap tetap, konten terang. Tampilan enterprise. */ html[data-theme="slate"] { --t-primary: #4f46e5; --t-primary-hover: #4338ca; --t-primary-light: #eef2ff; --t-primary-dark-tint: rgba(79,70,229,.22); --t-accent-text: #4f46e5; --t-accent-text-dark: #818cf8; --t-sidebar-bg: #0f172a; --t-sidebar-text: #cbd5e1; --t-sidebar-hover: #1e293b; --t-sidebar-active-bg: #1e293b; --t-sidebar-active-text: #818cf8; --t-sidebar-border: #1e293b; --t-topbar-bg: #ffffff; --t-topbar-border: #e2e8f0; --t-topbar-text: #1e293b; --t-body-bg: #f1f5f9; --t-surface: #ffffff; --t-surface-border: #e2e8f0; --t-font: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* Midnight Pro — tema gelap penuh, profesional, aksen cyan. */ html[data-theme="midnight"] { --t-primary: #06b6d4; --t-primary-hover: #0891b2; --t-primary-light: rgba(6,182,212,.14); --t-primary-dark-tint: rgba(6,182,212,.2); --t-accent-text: #22d3ee; --t-accent-text-dark: #22d3ee; --t-sidebar-bg: #0b1220; --t-sidebar-text: #94a3b8; --t-sidebar-hover: #131c2e; --t-sidebar-active-bg: #131c2e; --t-sidebar-active-text: #22d3ee; --t-sidebar-border: #1b2436; --t-topbar-bg: #0f1626; --t-topbar-border: #1b2436; --t-topbar-text: #e2e8f0; --t-body-bg: #0a0f1a; --t-surface: #0f1626; --t-surface-border: #1b2436; --t-font: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* SB Admin 2 Classic — gradient biru khas SB Admin 2, sidebar gelap, Nunito font. */ html[data-theme="sb2"] { --t-primary: #4e73df; --t-primary-hover: #2e59d9; --t-primary-light: #eaecfb; --t-primary-dark-tint: rgba(78,115,223,.2); --t-accent-text: #4e73df; --t-accent-text-dark: #93a9ee; --t-sidebar-bg: linear-gradient(180deg,#4e73df 0%,#224abe 100%); --t-sidebar-bg-solid: #224abe; --t-sidebar-text: #ffffffcc; --t-sidebar-hover: rgba(255,255,255,.12); --t-sidebar-active-bg: rgba(255,255,255,.15); --t-sidebar-active-text: #ffffff; --t-sidebar-border: rgba(255,255,255,.15); --t-topbar-bg: #ffffff; --t-topbar-border: #e3e6f0; --t-topbar-text: #3a3b45; --t-body-bg: #f8f9fc; --t-surface: #ffffff; --t-surface-border: #e3e6f0; --t-font: 'Nunito', 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ── Aturan bersama — berlaku untuk semua tema di atas ────── Menggunakan var(--t-*) sehingga cukup ditulis satu kali. */ html[data-theme] body { font-family: var(--t-font); } html[data-theme] body { background-color: var(--t-body-bg) !important; } /* Sidebar */ html[data-theme] #sidebar { background-color: var(--t-sidebar-bg) !important; border-color: var(--t-sidebar-border) !important; } html[data-theme] #sidebar .border-b, html[data-theme] #sidebar .border-t { border-color: var(--t-sidebar-border) !important; } html[data-theme] #sidebar a, html[data-theme] #sidebar button, html[data-theme] #sidebar span, html[data-theme] #sidebar p, html[data-theme] #sidebar i { color: var(--t-sidebar-text); } html[data-theme] #sidebar a:hover, html[data-theme] #sidebar button:hover { background-color: var(--t-sidebar-hover) !important; } html[data-theme] #sidebar [class*="bg-blue-50"], html[data-theme] #sidebar [class*="dark:bg-blue-900"] { background-color: var(--t-sidebar-active-bg) !important; } html[data-theme] #sidebar [class*="text-blue-600"], html[data-theme] #sidebar [class*="dark:text-blue-400"] { color: var(--t-sidebar-active-text) !important; } html[data-theme] #sidebar [class*="bg-blue-600"] { background-color: var(--t-primary) !important; } html[data-theme] #sidebar span.font-bold, html[data-theme] #sidebar span.sidebar-text.font-bold { color: var(--t-sidebar-text); } /* Topbar */ html[data-theme] header.sticky { background-color: var(--t-topbar-bg) !important; border-color: var(--t-topbar-border) !important; } html[data-theme] header.sticky h1 { color: var(--t-topbar-text) !important; } html[data-theme] header.sticky button i, html[data-theme] header.sticky > div > div i.fa-bars { color: var(--t-accent-text); } /* Bottom nav (mobile) & FAB mengikuti aksen tema */ html[data-theme] #bottom-nav { background-color: var(--t-topbar-bg) !important; border-color: var(--t-topbar-border) !important; } html[data-theme] .fab { background-color: var(--t-primary) !important; box-shadow: 0 8px 20px var(--t-primary-dark-tint) !important; } /* Aksen warna global (tombol, link, badge, focus ring) — mencakup SELURUH halaman, bukan hanya sidebar/topbar, tanpa perlu menyentuh setiap file view. */ html[data-theme] [class*="bg-blue-600"] { background-color: var(--t-primary) !important; } html[data-theme] [class*="hover:bg-blue-700"]:hover { background-color: var(--t-primary-hover) !important; } html[data-theme] [class*="text-blue-600"] { color: var(--t-accent-text) !important; } html[data-theme] [class*="text-blue-500"] { color: var(--t-accent-text) !important; } html[data-theme] [class*="dark:text-blue-400"] { color: var(--t-accent-text-dark) !important; } html[data-theme] [class*="border-blue-500"] { border-color: var(--t-primary) !important; } html[data-theme] [class*="bg-blue-50"] { background-color: var(--t-primary-light) !important; } html[data-theme] [class*="dark:bg-blue-900"] { background-color: var(--t-primary-dark-tint) !important; } html[data-theme] [class*="ring-blue-500"] { --tw-ring-color: var(--t-primary) !important; } html[data-theme] [class*="focus:ring-blue-500"]:focus { --tw-ring-color: var(--t-primary) !important; } html[data-theme] a:not(#sidebar a):not(.btn) { } html[data-theme] .toast.info { background-color: var(--t-primary) !important; } html[data-theme] .progress-bar-fill { background-color: var(--t-primary) !important; } html[data-theme] .form-input:focus { border-color: var(--t-primary) !important; box-shadow: 0 0 0 3px var(--t-primary-dark-tint) !important; } html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus { box-shadow: 0 0 0 3px var(--t-primary-dark-tint) !important; } html[data-theme] ::-webkit-scrollbar-thumb { background-color: var(--t-primary-hover); opacity: .6; } /* Kartu / permukaan — hanya tema struktural (slate & midnight) yang mengubah warna kartu secara global agar tampil sebagai tema "penuh", tema lain tetap memakai kartu putih/gelap netral standar agar terasa bersih. */ html[data-theme="slate"] [class*="bg-white"], html[data-theme="midnight"] [class*="bg-white"] { background-color: var(--t-surface) !important; } html[data-theme="slate"] [class*="dark:bg-gray-800"], html[data-theme="midnight"] [class*="dark:bg-gray-800"] { background-color: var(--t-surface) !important; } html[data-theme="slate"] [class*="border-gray-200"], html[data-theme="midnight"] [class*="border-gray-200"], html[data-theme="slate"] [class*="dark:border-gray-700"], html[data-theme="midnight"] [class*="dark:border-gray-700"] { border-color: var(--t-surface-border) !important; } /* Midnight juga membalik teks & body agar seluruh tampilan konsisten gelap walaupun toggle dark-mode pengguna sedang mati. */ html[data-theme="midnight"] [class*="text-gray-900"], html[data-theme="midnight"] [class*="text-gray-800"] { color: #e2e8f0 !important; } html[data-theme="midnight"] [class*="text-gray-700"], html[data-theme="midnight"] [class*="text-gray-600"] { color: #94a3b8 !important; } html[data-theme="midnight"] [class*="bg-gray-100"] { background-color: var(--t-body-bg) !important; } html[data-theme="midnight"] [class*="bg-gray-50"] { background-color: #101a2c !important; } html[data-theme="midnight"] .form-input { background-color: #101a2c !important; border-color: var(--t-surface-border) !important; color: #e2e8f0 !important; } /* SB Admin 2 Classic — sidebar gradient khusus (tidak bisa dari var background-color biasa) */ html[data-theme="sb2"] #sidebar { background: var(--t-sidebar-bg) !important; border-right: none !important; } html[data-theme="sb2"] #sidebar .border-b, html[data-theme="sb2"] #sidebar .border-t { border-color: var(--t-sidebar-border) !important; } html[data-theme="sb2"] #sidebar span.font-bold, html[data-theme="sb2"] #sidebar span.sidebar-text.font-bold { color: #ffffff !important; letter-spacing: .03em; } html[data-theme="sb2"] #sidebar [class*="bg-blue-600"] { background: rgba(255,255,255,.15) !important; } html[data-theme="sb2"] #sidebar hr, html[data-theme="sb2"] #sidebar .nav-group + .nav-group { border-color: rgba(255,255,255,.15); } html[data-theme="sb2"] main .bg-white, html[data-theme="sb2"] main [class*="dark:bg-gray-800"] { border-radius: 0.9rem; } html[data-theme="sb2"] [class*="rounded-lg"] { border-radius: 0.6rem; } html[data-theme="sb2"] [class*="rounded-xl"] { border-radius: 0.75rem; } /* Theme picker cards (halaman Pengaturan → Tampilan) */ .theme-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; } .theme-card { position: relative; border: 2px solid transparent; border-radius: 0.9rem; padding: 0; overflow: hidden; cursor: pointer; text-align: left; background: transparent; transition: transform .15s, box-shadow .15s, border-color .15s; } .theme-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(0,0,0,.18); } .theme-card.active { border-color: var(--tc-accent, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-accent, #2563eb) 25%, transparent); } .theme-card .theme-preview { height: 84px; display: flex; } .theme-card .theme-preview .tp-side { width: 30%; } .theme-card .theme-preview .tp-main { flex: 1; display: flex; flex-direction: column; } .theme-card .theme-preview .tp-topbar { height: 26px; } .theme-card .theme-preview .tp-body { flex: 1; } .theme-card .theme-meta { padding: 0.65rem 0.85rem; display: flex; align-items: center; justify-content: space-between; } .theme-card .theme-check { display: none; width: 1.35rem; height: 1.35rem; border-radius: 9999px; align-items: center; justify-content: center; color: #fff; font-size: .7rem; background: var(--tc-accent, #2563eb); } .theme-card.active .theme-check { display: flex; }