/* ===================================================== DARK MODE STYLESHEET Aktif saat memiliki class "dark-mode" ===================================================== */ /* ── Tombol Toggle Dark Mode ─────────────────────── */ #dark-mode-toggle { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); flex-shrink: 0; } #dark-mode-toggle:hover { background: rgba(255, 255, 255, 0.35); transform: rotate(20deg) scale(1.1); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } #dark-mode-toggle .icon-sun { display: none; } #dark-mode-toggle .icon-moon { display: inline-block; } body.dark-mode #dark-mode-toggle .icon-sun { display: inline-block; } body.dark-mode #dark-mode-toggle .icon-moon { display: none; } /* ── Variabel Warna Dark Mode ────────────────────── */ body.dark-mode { background-color: #0f1117; color: #e2e8f0; } /* ── Gradient Background ─────────────────────────── */ body.dark-mode .argon-bg-gradient { background: linear-gradient(135deg, #1a1f3a 0%, #111827 100%); } /* ── Sidebar ─────────────────────────────────────── */ body.dark-mode .sidebar-argon { background: #1e2030; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.4); } body.dark-mode .sidebar-brand { color: #e2e8f0; } body.dark-mode .nav-label-argon { color: #64748b; } body.dark-mode .nav-menu-argon li a { color: #94a3b8; } body.dark-mode .nav-menu-argon li a:hover, body.dark-mode .nav-menu-argon li a.active { background-color: #2d3149; color: #e2e8f0; } body.dark-mode .nav-menu-argon li a i { background: #2d3149; color: #7c8fd0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } body.dark-mode .nav-menu-argon li a.active i { background: linear-gradient(135deg, #4c63d2, #7258d4); color: #ffffff; } body.dark-mode .has-submenu.open > a.submenu-toggle.active { background: #2d3149; color: #e2e8f0; } body.dark-mode .has-submenu.open > a.submenu-toggle.active i:first-child { background: linear-gradient(135deg, #4c63d2, #7258d4); color: #ffffff; } body.dark-mode .submenu-argon li a.active { color: #7c8fd0; background: #252840; } body.dark-mode .sidebar-toggle { color: #7c8fd0; } body.dark-mode .sidebar-toggle:hover { background: #2d3149; color: #e2e8f0; } body.dark-mode .sidebar-footer { border-top: 1px solid #2d3149; } body.dark-mode .sidebar-footer strong { color: #e2e8f0; } body.dark-mode .sidebar-footer a { color: #f87171; } body.dark-mode .sidebar-argon::-webkit-scrollbar-thumb { background: #2d3149; } body.dark-mode .sidebar-argon::-webkit-scrollbar-thumb:hover { background: #3d4568; } /* ── Header ──────────────────────────────────────── */ body.dark-mode .argon-header { color: #e2e8f0; } body.dark-mode .page-title-argon { color: #e2e8f0; } body.dark-mode .global-back-btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #e2e8f0; } body.dark-mode .global-back-btn:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; } body.dark-mode #clock-wrapper { color: #cbd5e1; } body.dark-mode .btn-header-argon { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #e2e8f0; } body.dark-mode .btn-header-argon:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; } body.dark-mode .mobile-menu-toggle { background: #1e2030; color: #e2e8f0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* ── Card & Content ──────────────────────────────── */ body.dark-mode .card-argon, body.dark-mode .card { background: #1e2030 !important; color: #e2e8f0 !important; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3) !important; border-color: #2d3149 !important; } body.dark-mode .card-header { background: #1e2030 !important; color: #e2e8f0 !important; border-bottom-color: #2d3149 !important; } body.dark-mode .card-body { background: #1e2030 !important; color: #e2e8f0 !important; } body.dark-mode .card-footer { background: #1e2030 !important; border-top-color: #2d3149 !important; } body.dark-mode .card-header-argon { border-bottom-color: #2d3149; } body.dark-mode .card-title-argon { color: #e2e8f0; } body.dark-mode .content-wrapper { background: transparent; } /* ── Dashboard Spesifik ──────────────────────────── */ body.dark-mode .page-header { background: #1e2030 !important; border-color: #2d3149 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } body.dark-mode .page-title h1 { color: #e2e8f0 !important; } body.dark-mode .page-subtitle { color: #94a3b8 !important; } body.dark-mode .app-main__inner { background: transparent !important; } body.dark-mode .report-panel, body.dark-mode .report-info-item, body.dark-mode .report-history-empty { background: #1e2030 !important; border-color: #2d3149 !important; color: #e2e8f0 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important; } body.dark-mode .report-info-item { background: #252840 !important; } body.dark-mode .report-panel-header h2, body.dark-mode .report-info-item strong, body.dark-mode .report-history-table td, body.dark-mode .report-history-table td strong, body.dark-mode .report-history-table td span { color: #e2e8f0 !important; } body.dark-mode .report-panel-header p, body.dark-mode .report-info-item span, body.dark-mode .report-history-table td small, body.dark-mode .report-history-empty { color: #94a3b8 !important; } body.dark-mode .report-history-table th { background: #252840 !important; color: #cbd5e1 !important; border-bottom-color: #343852 !important; } body.dark-mode .report-history-table td { border-bottom-color: #2d3149 !important; } body.dark-mode .report-required-note { background: rgba(239, 68, 68, 0.16) !important; color: #fca5a5 !important; } /* ── Tabel ───────────────────────────────────────── */ body.dark-mode table.dataTable, body.dark-mode .table { background: #1e2030 !important; color: #e2e8f0 !important; } body.dark-mode .table thead th, body.dark-mode table.dataTable thead th { background: #252840 !important; color: #94a3b8 !important; border-bottom-color: #2d3149 !important; border-color: #2d3149 !important; } body.dark-mode .table tbody tr, body.dark-mode table.dataTable tbody tr { background: #1e2030 !important; color: #e2e8f0 !important; border-color: #2d3149 !important; } body.dark-mode .table tbody tr:hover, body.dark-mode table.dataTable tbody tr:hover { background: #252840 !important; } body.dark-mode .table-bordered, body.dark-mode .table-bordered td, body.dark-mode .table-bordered th { border-color: #2d3149 !important; } body.dark-mode .table td, body.dark-mode .table th { border-color: #2d3149 !important; color: #e2e8f0 !important; } body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background: #252840 !important; } /* DataTables wrapper */ body.dark-mode .dataTables_wrapper .dataTables_length, body.dark-mode .dataTables_wrapper .dataTables_filter, body.dark-mode .dataTables_wrapper .dataTables_info, body.dark-mode .dataTables_wrapper .dataTables_paginate { color: #94a3b8 !important; } body.dark-mode .dataTables_wrapper .dataTables_filter input, body.dark-mode .dataTables_wrapper .dataTables_length select { background: #252840 !important; color: #e2e8f0 !important; border-color: #2d3149 !important; } body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { color: #94a3b8 !important; } body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current, body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #2d3149 !important; color: #e2e8f0 !important; border-color: #2d3149 !important; } /* ── Form & Input ────────────────────────────────── */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select, body.dark-mode .form-control { background-color: #252840 !important; color: #e2e8f0 !important; border-color: #3d4568 !important; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #64748b !important; } body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus, body.dark-mode .form-control:focus { background-color: #2d3149 !important; color: #e2e8f0 !important; border-color: #4c63d2 !important; box-shadow: 0 0 0 0.2rem rgba(76, 99, 210, 0.25) !important; } body.dark-mode .form-group label, body.dark-mode label { color: #cbd5e1 !important; } body.dark-mode .input-group-text { background-color: #252840 !important; color: #94a3b8 !important; border-color: #3d4568 !important; } /* Select2 */ body.dark-mode .select2-container--bootstrap4 .select2-selection, body.dark-mode .select2-container--default .select2-selection--single { background-color: #252840 !important; color: #e2e8f0 !important; border-color: #3d4568 !important; } body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e2e8f0 !important; } body.dark-mode .select2-dropdown { background-color: #1e2030 !important; border-color: #2d3149 !important; } body.dark-mode .select2-results__option { color: #e2e8f0 !important; } body.dark-mode .select2-results__option--highlighted { background-color: #2d3149 !important; color: #e2e8f0 !important; } body.dark-mode .select2-search--dropdown .select2-search__field { background-color: #252840 !important; color: #e2e8f0 !important; border-color: #3d4568 !important; } body.dark-mode .select2-container--default .select2-selection--multiple { background-color: #252840 !important; border-color: #3d4568 !important; } body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #3d4568 !important; color: #e2e8f0 !important; border-color: #4c63d2 !important; } /* ── Teks Umum ───────────────────────────────────── */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e2e8f0 !important; } body.dark-mode p, body.dark-mode span, body.dark-mode li, body.dark-mode td, body.dark-mode th, body.dark-mode div { color: inherit; } body.dark-mode .text-muted { color: #64748b !important; } body.dark-mode .text-dark { color: #e2e8f0 !important; } body.dark-mode .text-body { color: #e2e8f0 !important; } body.dark-mode .stat-label { color: #64748b !important; } body.dark-mode .stat-value { color: #e2e8f0 !important; } body.dark-mode .stat-card { background: #1e2030 !important; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3) !important; } /* ── Bootstrap Utilities ─────────────────────────── */ body.dark-mode .bg-white, body.dark-mode .bg-light { background-color: #1e2030 !important; } body.dark-mode .border, body.dark-mode .border-bottom, body.dark-mode .border-top { border-color: #2d3149 !important; } body.dark-mode .shadow, body.dark-mode .shadow-sm { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } /* ── Badge ───────────────────────────────────────── */ body.dark-mode .badge-light { background-color: #2d3149 !important; color: #e2e8f0 !important; } body.dark-mode .badge-secondary { background-color: #3d4568 !important; color: #e2e8f0 !important; } /* ── Alert ───────────────────────────────────────── */ body.dark-mode .alert { border-color: #2d3149; } body.dark-mode .alert-info { background-color: #1a2d4a !important; color: #7dd3fc !important; border-color: #1e3a5f !important; } body.dark-mode .alert-warning { background-color: #3b2f00 !important; color: #fcd34d !important; border-color: #4a3b00 !important; } body.dark-mode .alert-danger { background-color: #3b0a0a !important; color: #fca5a5 !important; border-color: #4a0e0e !important; } body.dark-mode .alert-success { background-color: #0a2e1e !important; color: #6ee7b7 !important; border-color: #0e3b27 !important; } /* ── Modal ───────────────────────────────────────── */ body.dark-mode .modal-content { background-color: #1e2030 !important; color: #e2e8f0 !important; border-color: #2d3149 !important; } body.dark-mode .modal-header { background-color: #252840 !important; border-bottom-color: #2d3149 !important; color: #e2e8f0 !important; } body.dark-mode .modal-header .modal-title { color: #e2e8f0 !important; } body.dark-mode .modal-footer { background-color: #252840 !important; border-top-color: #2d3149 !important; } body.dark-mode .modal-header .close, body.dark-mode .modal-header button.close { color: #e2e8f0 !important; opacity: 0.7; } body.dark-mode .modal-body { color: #e2e8f0 !important; } /* ── Dropdown ────────────────────────────────────── */ body.dark-mode .dropdown-menu { background-color: #1e2030 !important; border-color: #2d3149 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } body.dark-mode .dropdown-item { color: #e2e8f0 !important; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: #252840 !important; color: #ffffff !important; } body.dark-mode .dropdown-divider { border-top-color: #2d3149 !important; } /* ── Breadcrumb ──────────────────────────────────── */ body.dark-mode .breadcrumb { background-color: transparent !important; } body.dark-mode .breadcrumb-item, body.dark-mode .breadcrumb-item a { color: #94a3b8 !important; } body.dark-mode .breadcrumb-item.active { color: #e2e8f0 !important; } body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #64748b !important; } /* ── Nav Tabs ────────────────────────────────────── */ body.dark-mode .nav-tabs { border-bottom-color: #2d3149 !important; } body.dark-mode .nav-tabs .nav-link { color: #94a3b8 !important; } body.dark-mode .nav-tabs .nav-link.active { background-color: #1e2030 !important; border-color: #2d3149 #2d3149 #1e2030 !important; color: #e2e8f0 !important; } body.dark-mode .nav-pills .nav-link { color: #94a3b8 !important; } body.dark-mode .nav-pills .nav-link.active { background-color: #4c63d2 !important; color: #ffffff !important; } /* ── Tombol ──────────────────────────────────────── */ body.dark-mode .btn-light { background-color: #2d3149 !important; color: #e2e8f0 !important; border-color: #3d4568 !important; } body.dark-mode .btn-light:hover { background-color: #3d4568 !important; color: #ffffff !important; } body.dark-mode .btn-secondary { background-color: #3d4568 !important; border-color: #4c5580 !important; color: #e2e8f0 !important; } body.dark-mode .btn-outline-secondary { border-color: #3d4568 !important; color: #94a3b8 !important; } body.dark-mode .btn-outline-secondary:hover { background-color: #2d3149 !important; color: #e2e8f0 !important; } /* ── Footer ──────────────────────────────────────── */ body.dark-mode .footer-argon { color: #64748b; } body.dark-mode .footer-argon a { color: #7c8fd0; } body.dark-mode .footer-argon a:hover { color: #a5b4fb; } /* ── List Group ──────────────────────────────────── */ body.dark-mode .list-group-item { background-color: #1e2030 !important; color: #e2e8f0 !important; border-color: #2d3149 !important; } body.dark-mode .list-group-item:hover { background-color: #252840 !important; } /* ── Progress Bar ────────────────────────────────── */ body.dark-mode .progress { background-color: #252840 !important; } /* ── HR ──────────────────────────────────────────── */ body.dark-mode hr { border-color: #2d3149 !important; } /* ── Pre / Code ──────────────────────────────────── */ body.dark-mode pre, body.dark-mode code { background-color: #252840 !important; color: #a5b4fb !important; } /* ── Toastr ──────────────────────────────────────── */ body.dark-mode #toast-container .toast { opacity: 0.95 !important; } /* ── Scrollbar Global ────────────────────────────── */ body.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: #0f1117; } body.dark-mode ::-webkit-scrollbar-thumb { background: #2d3149; border-radius: 10px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #3d4568; } /* ── Transisi halus ──────────────────────────────── */ body { transition: background-color 0.3s ease, color 0.3s ease; } .sidebar-argon, .card, .card-argon, .modal-content, .dropdown-menu, .form-control, input, textarea, select { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ===================================================== DARK MODE - OPAC (Halaman Publik) Layout: app/Views/layout/opac/layout.php CSS: opac-custom.css, opac_style.css ===================================================== */ /* ── Body OPAC ───────────────────────────────────── */ body.dark-mode { background-color: #0f1117 !important; color: #e2e8f0 !important; } /* ── OPAC Navbar ─────────────────────────────────── */ body.dark-mode .navbar-custom { background-color: #141824 !important; border-bottom: 1px solid #2d3149 !important; } body.dark-mode .navbar-brand h1 { color: #e2e8f0 !important; } body.dark-mode .navbar-brand p { color: #94a3b8 !important; } body.dark-mode .nav-link { color: #cbd5e1 !important; } body.dark-mode .nav-link:hover, body.dark-mode .nav-link.active { color: #a5b4fb !important; } body.dark-mode .navbar-toggler { color: #e2e8f0 !important; border-color: rgba(255,255,255,0.2) !important; } body.dark-mode .navbar-toggler-icon-custom { color: #e2e8f0 !important; } /* ── OPAC Dropdown Menu ──────────────────────────── */ body.dark-mode .navbar-custom .dropdown-menu { background-color: #1e2030 !important; border-color: #2d3149 !important; } body.dark-mode .navbar-custom .dropdown-item { color: #e2e8f0 !important; } body.dark-mode .navbar-custom .dropdown-item:hover { background-color: #252840 !important; color: #ffffff !important; } /* ── OPAC Hero Section ───────────────────────────── */ body.dark-mode .hero-section { background: linear-gradient(135deg, #1a2340 0%, #111827 100%) !important; } body.dark-mode .hero-section h1, body.dark-mode .hero-section h2 { color: #e2e8f0 !important; } body.dark-mode .hero-section .lead { color: #cbd5e1 !important; } /* ── OPAC Search Box ─────────────────────────────── */ body.dark-mode .search-box .form-control, body.dark-mode .search-box .form-select { background-color: #252840 !important; border-color: #3d4568 !important; color: #e2e8f0 !important; } body.dark-mode .search-box .form-control::placeholder { color: #64748b !important; } /* ── OPAC Content Section ────────────────────────── */ body.dark-mode .content-section { background-color: #111827 !important; } /* ── Catalog Card ────────────────────────────────── */ body.dark-mode .catalog-card { background-color: #1e2030 !important; border-color: #2d3149 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important; } body.dark-mode .catalog-card .card-body { background-color: #1e2030 !important; color: #e2e8f0 !important; } body.dark-mode .catalog-card h5, body.dark-mode .catalog-card h6 { color: #e2e8f0 !important; } body.dark-mode .catalog-card .text-muted, body.dark-mode .catalog-card small { color: #94a3b8 !important; } body.dark-mode .book-cover { border-color: #2d3149 !important; } /* ── Sidebar OPAC ────────────────────────────────── */ body.dark-mode .sidebar-card { background-color: #1e2030 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } body.dark-mode .sidebar-card .card-body { background-color: #1e2030 !important; color: #e2e8f0 !important; } body.dark-mode .stat-item { border-bottom-color: #2d3149 !important; } body.dark-mode .stat-icon { background-color: #252840 !important; } body.dark-mode .stat-value { color: #e2e8f0 !important; } body.dark-mode .stat-section { border-bottom-color: #2d3149 !important; } body.dark-mode .stat-section h6 { color: #e2e8f0 !important; } body.dark-mode .stat-list-item { border-bottom-color: #2d3149 !important; } body.dark-mode .stat-name { color: #94a3b8 !important; } body.dark-mode .stat-name:hover { color: #7c8fd0 !important; } body.dark-mode .stat-list::-webkit-scrollbar-track { background: #1e2030 !important; } body.dark-mode .stat-list::-webkit-scrollbar-thumb { background: #2d3149 !important; } /* ── OPAC Footer ─────────────────────────────────── */ body.dark-mode .footer-custom { background-color: #0a0d14 !important; border-top-color: #1e2030 !important; color: #94a3b8 !important; } body.dark-mode .footer-custom h4, body.dark-mode .footer-custom .footer-title { color: #e2e8f0 !important; } body.dark-mode .footer-links a { color: #64748b !important; } body.dark-mode .footer-links a:hover { color: #7c8fd0 !important; } body.dark-mode .footer-contact li { color: #64748b !important; } body.dark-mode .footer-custom .text-secondary { color: #64748b !important; } body.dark-mode .footer-custom .border-top { border-color: #1e2030 !important; } /* ── OPAC Pagination ─────────────────────────────── */ body.dark-mode .pagination .page-link { background-color: #1e2030 !important; border-color: #2d3149 !important; color: #94a3b8 !important; } body.dark-mode .pagination .page-link:hover { background-color: #2d3149 !important; border-color: #3d4568 !important; color: #e2e8f0 !important; } body.dark-mode .pagination .page-item.active .page-link { background-color: #4c63d2 !important; border-color: #4c63d2 !important; color: #ffffff !important; } body.dark-mode .pagination .page-item.disabled .page-link { background-color: #1e2030 !important; border-color: #2d3149 !important; color: #3d4568 !important; } /* ── OPAC Login Button ───────────────────────────── */ body.dark-mode .btn.btn-light.text-primary { background-color: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.2) !important; } body.dark-mode .btn.btn-light.text-primary:hover { background-color: rgba(255,255,255,0.2) !important; color: #ffffff !important; } /* ── OPAC General Text ───────────────────────────── */ body.dark-mode .text-secondary { color: #64748b !important; } body.dark-mode h1:not(.hero-section h1), body.dark-mode h2:not(.hero-section h2), body.dark-mode h3, body.dark-mode h4, body.dark-mode h5 { color: #e2e8f0 !important; } /* ===================================================== DARK MODE - OPAC INDEX PAGE (Inline styles override) Kelas-kelas yang didefinisikan langsung di