/* ========================================================= DARK MODE — TAMPILAN CLIENT (IDE-LH) Mengikuti pola admin (assets/css/dark-mode.css), tapi disesuaikan dengan komponen Bootstrap 5 & gaya modern di layout-client/main.blade.php. Key localStorage 'theme' dipakai bareng dengan admin. ========================================================= */ /* Cegah flash putih saat halaman pertama dimuat. Class ditaruh di oleh script early di . */ html.dark-mode { background-color: #0f1420; } /* Glassmorphism — blob dekoratif versi gelap. */ body.dark-mode::before { background: radial-gradient(650px circle at 10% 15%, rgba(13, 110, 253, 0.24), transparent 42%), radial-gradient(700px circle at 90% 10%, rgba(34, 198, 230, 0.16), transparent 42%), radial-gradient(600px circle at 80% 88%, rgba(16, 185, 129, 0.16), transparent 42%); } /* ========================================================= 1. PUSAT KOMANDO WARNA ========================================================= */ body.dark-mode { --cdm-bg: #0f1420; /* Background utama */ --cdm-surface: #1a2232; /* Card, navbar, footer, dropdown */ --cdm-surface-2: #232d40; /* Hover / elemen sekunder */ --cdm-border: #2c3850; /* Garis pemisah & border */ --cdm-text: #e5e9f0; /* Teks utama */ --cdm-muted: #94a3b8; /* Teks sekunder */ --cdm-primary: #4d9fff; /* Aksen biru */ --cdm-danger: #ff6b6b; /* Merah untuk teks target/deadline */ --cdm-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); background-color: var(--cdm-bg) !important; color: var(--cdm-text) !important; scrollbar-color: var(--cdm-surface-2) var(--cdm-bg); } /* ========================================================= 2. NAVBAR & FOOTER ========================================================= */ body.dark-mode .navbar { background: rgba(15, 20, 32, 0.85) !important; border-bottom: 1px solid var(--cdm-border) !important; } /* Footer transparan (gaya admin), cukup atur warna garis pemisah. */ body.dark-mode footer, body.dark-mode .footer { background-color: transparent !important; border-color: var(--cdm-border) !important; } body.dark-mode .nav-link { color: var(--cdm-muted) !important; } body.dark-mode .nav-link:hover, body.dark-mode .nav-link.active { color: var(--cdm-primary) !important; } /* Burger menu — garis pakai currentColor, jadi cukup ubah warna toggler jadi terang biar kelihatan di background gelap. */ body.dark-mode .custom-toggler { color: #f5f5f5; } /* Logo IDE-LH biar tetap terbaca */ body.dark-mode .navbar-brand span.text-dark, body.dark-mode .navbar-brand span { color: var(--cdm-text) !important; } /* Dropdown user */ body.dark-mode .dropdown-menu { background-color: var(--cdm-surface) !important; border-color: var(--cdm-border) !important; } body.dark-mode .dropdown-item { color: var(--cdm-text) !important; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: var(--cdm-surface-2) !important; color: #fff !important; } body.dark-mode .dropdown-divider { border-color: var(--cdm-border) !important; } /* ========================================================= 3. CARD & SURFACE ========================================================= */ body.dark-mode .card, body.dark-mode .stat-card { background-color: var(--cdm-surface) !important; border-color: var(--cdm-border) !important; color: var(--cdm-text) !important; box-shadow: var(--cdm-shadow) !important; } body.dark-mode .card-header, body.dark-mode .card-footer { background-color: var(--cdm-surface) !important; border-color: var(--cdm-border) !important; } /* Utility background Bootstrap */ body.dark-mode .bg-light, body.dark-mode .bg-white { background-color: var(--cdm-surface) !important; color: var(--cdm-text) !important; border-color: var(--cdm-border) !important; } /* ========================================================= 4. TEKS ========================================================= */ body.dark-mode .text-dark { color: var(--cdm-text) !important; } body.dark-mode .text-muted, body.dark-mode .text-secondary, body.dark-mode small { color: var(--cdm-muted) !important; } body.dark-mode .text-primary { color: var(--cdm-primary) !important; } body.dark-mode .text-danger { color: var(--cdm-danger) !important; } /* ========================================================= 5. BORDER & PEMBATAS ========================================================= */ body.dark-mode .border, body.dark-mode .border-top, body.dark-mode .border-bottom, body.dark-mode .border-start, body.dark-mode .border-end { border-color: var(--cdm-border) !important; } body.dark-mode hr { border-color: var(--cdm-border) !important; opacity: 1; } body.dark-mode hr.bg-light { background-color: var(--cdm-border) !important; } /* ========================================================= 6. FORM & INPUT (Kolom pencarian dll) ========================================================= */ body.dark-mode .form-control { background-color: var(--cdm-bg) !important; border-color: var(--cdm-border) !important; color: var(--cdm-text) !important; } body.dark-mode .form-control:focus { background-color: var(--cdm-bg) !important; border-color: var(--cdm-primary) !important; box-shadow: 0 0 0 0.2rem rgba(77, 159, 255, 0.2) !important; color: var(--cdm-text) !important; } body.dark-mode .form-control::placeholder { color: var(--cdm-muted) !important; } /* Kolom pencarian (field pill mandiri) duduk langsung di atas background halaman, jadi butuh surface lebih terang + border biar kontras & nampak. */ body.dark-mode .search-field, body.dark-mode .search-field:focus { background-color: rgba(35, 45, 64, 0.55) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--cdm-border) !important; color: var(--cdm-text) !important; } body.dark-mode .search-field::placeholder { color: var(--cdm-muted) !important; } /* ========================================================= 7. BADGE STATUS & CHIP (welcome & track-detail) ========================================================= */ /* Badge status pakai bg-opacity + text-dark → paksa teks jadi terang */ body.dark-mode .badge.text-dark { color: var(--cdm-text) !important; } /* Chip Jenis Dokumen & Sektor */ body.dark-mode .chip-doc { background-color: rgba(77, 159, 255, 0.15) !important; color: #8bc0ff !important; border-color: rgba(77, 159, 255, 0.35) !important; } body.dark-mode .chip-sektor { background-color: rgba(34, 197, 94, 0.15) !important; color: #6ee7a8 !important; border-color: rgba(34, 197, 94, 0.35) !important; } /* Kotak deadline / target berlatar merah muda */ body.dark-mode [style*="background-color: #fff5f5"] { background-color: rgba(220, 53, 69, 0.15) !important; border-color: rgba(220, 53, 69, 0.4) !important; } /* ========================================================= 8. ALERT (Hasil pencarian kosong) ========================================================= */ body.dark-mode .alert-warning { background-color: rgba(255, 193, 7, 0.12) !important; border-color: rgba(255, 193, 7, 0.3) !important; color: var(--cdm-text) !important; } /* ========================================================= 9. TOMBOL ========================================================= */ body.dark-mode .btn-outline-primary { color: var(--cdm-primary) !important; border-color: var(--cdm-primary) !important; } body.dark-mode .btn-outline-primary:hover { background-color: var(--cdm-primary) !important; color: #0f1420 !important; } /* ========================================================= 10. PAGINATION (layout-client.pagination) ========================================================= */ body.dark-mode .page-link { background-color: var(--cdm-surface) !important; border-color: var(--cdm-border) !important; color: var(--cdm-text) !important; } body.dark-mode .page-link:hover { background-color: var(--cdm-surface-2) !important; } body.dark-mode .page-item.active .page-link { background-color: var(--cdm-primary) !important; border-color: var(--cdm-primary) !important; color: #0f1420 !important; } body.dark-mode .page-item.disabled .page-link { background-color: var(--cdm-bg) !important; color: #55607a !important; border-color: var(--cdm-border) !important; } body.dark-mode .pagination { border-color: var(--cdm-border) !important; } /* ========================================================= 11. TIMELINE RIWAYAT (track-detail) ========================================================= */ body.dark-mode .timeline-content, body.dark-mode .timeline-left { color: var(--cdm-muted) !important; } /* ========================================================= 12. SCROLLBAR ========================================================= */ body.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: var(--cdm-bg); } body.dark-mode ::-webkit-scrollbar-thumb { background: var(--cdm-border); border-radius: 8px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--cdm-surface-2); } /* ========================================================= 13. TOMBOL SWITCH DARK MODE DI NAVBAR (disamakan dengan tampilan admin) ========================================================= */ .theme-switch { position: relative; width: 58px; height: 28px; flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: 999px; cursor: pointer; background: #cbd5e1; transition: background .35s ease; -webkit-tap-highlight-color: transparent; } .theme-switch:hover { filter: brightness(0.97); } .theme-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(13, 110, 253, .3); } .theme-switch__track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; pointer-events: none; } .theme-switch__bg-icon { font-size: .92rem; line-height: 1; transition: opacity .35s ease; } .theme-switch__bg-icon--sun { color: #fff3cd; opacity: 1; } .theme-switch__bg-icon--moon { color: #e2e8f0; opacity: .55; } .theme-switch__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; color: #f59e0b; font-size: 1rem; z-index: 2; transition: transform .35s cubic-bezier(.4, .2, .2, 1), color .35s ease, background .35s ease; } .theme-switch__thumb i { line-height: 1; } /* State: Dark aktif */ .theme-switch.is-dark { background: #334155; } .theme-switch.is-dark .theme-switch__thumb { transform: translateX(30px); color: #cbd5e1; background: #1e293b; } .theme-switch.is-dark .theme-switch__bg-icon--sun { opacity: .45; } .theme-switch.is-dark .theme-switch__bg-icon--moon { opacity: 1; } /* ========================================================= 14. GLASSMORPHISM — KARTU KACA (versi gelap) Ditaruh paling akhir biar menang urutan cascade atas aturan .card / .stat-card solid di atas (specificity sama). ========================================================= */ body.dark-mode .glass-card { background: rgba(26, 34, 50, 0.55) !important; -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important; }