/* * Override mode gelap untuk layout Color Admin (app.min.css tidak * menyertakan varian dark bawaan). Aktif saat . * Lihat partials/color_admin_navbar.php untuk tombol toggle-nya dan * layouts/color_admin.php untuk logika default dari Pengaturan Sistem. * Bagian "AUTH" di bawah dipakai layouts/auth_newsfeed.php (Login & Register). */ :root[data-theme="dark"] body { background-color: #161c24; color: #d7dde3; } /* ===== AUTH (Login & Register, layouts/auth_newsfeed.php) ===== */ :root[data-theme="dark"] .login-with-news-feed .right-content { background: #1e2733 !important; color: #d7dde3; } :root[data-theme="dark"] .login-with-news-feed .login-header .brand { color: #f2f5f7 !important; } :root[data-theme="dark"] .login-with-news-feed .login-header .brand small { color: #8a97a8 !important; } :root[data-theme="dark"] .login-with-news-feed .login-content { color: #b7c0cc; } :root[data-theme="dark"] .login-with-news-feed .text-inverse { color: #d7dde3 !important; } :root[data-theme="dark"] .login-with-news-feed a { color: #8ecae6; } /* ===== AUTH v2 (Lupa Password, layouts/auth_v2.php) ===== .login-v2 bawaan tema didesain selalu di atas foto+gradasi gelap (teks putih permanen). Supaya mode terang benar-benar terang, foto cover disembunyikan & panel dibuat terang di mode terang; mode gelap memakai tampilan asli temanya (foto + gradasi gelap). */ :root[data-theme="light"] .login-cover-image { display: none; } :root[data-theme="light"] .login-cover-bg { background: #eef1f4; } :root[data-theme="light"] .login.login-v2 .login-header .brand { color: #1a2229 !important; } :root[data-theme="light"] .login.login-v2 .login-header .brand small { color: #557087 !important; } :root[data-theme="light"] .login.login-v2 .login-header .icon { color: rgba(26,34,41,.15) !important; } :root[data-theme="light"] .login-v2 .login-content { color: #4e5c68; } :root[data-theme="dark"] .login-cover-bg { background: linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,.92)); } :root[data-theme="dark"] #header, :root[data-theme="dark"] .navbar-default { background: #1e2733 !important; } /* Garis bawah navbar: putih di mode gelap, hitam di mode terang. Dibuat pakai box-shadow, BUKAN border-bottom -- border-bottom menambah 1px ke tinggi kotak header (#header tidak punya height eksplisit, jadi box-sizing:border-box tidak menyerapnya), yang akan menggeser posisi spinner/progress bar loading halaman (Pace.js, dibundel di app.min.js) yang posisinya dihitung tetap dalam px dari tinggi header (lihat `.pace-progress{top:50px}` dkk di app.min.css). box-shadow murni dekorasi visual di luar box model, jadi tidak mengubah tinggi/posisi apa pun. */ :root[data-theme="dark"] #header { box-shadow: 0 1px 0 0 #fff; } :root[data-theme="light"] #header { box-shadow: 0 1px 0 0 #000; } :root[data-theme="dark"] #header .navbar-nav > li > a, :root[data-theme="dark"] #header .navbar-brand { color: #d7dde3; } /* Ikon 3 bar (toggle sidebar di tampilan mobile) -- bawaan tema warnanya abu-abu gelap (#2d353c), nyaris tidak kelihatan di atas latar header mode gelap (#1e2733). Dibuat putih supaya kontras & terlihat jelas. */ :root[data-theme="dark"] .header .navbar-toggle .icon-bar { background: #fff; } :root[data-theme="dark"] #header .dropdown-menu { background: #232d3b; border-color: #2f3b4c; } :root[data-theme="dark"] #header .dropdown-item { color: #d7dde3; } :root[data-theme="dark"] #header .dropdown-item:hover { background: #2f3b4c; color: #fff; } :root[data-theme="dark"] #header .dropdown-header { color: #8a97a8; } /* Dropdown lonceng notifikasi (.media-list): app.min.css cuma mewarnai .dropdown-item-nya (#header .dropdown-item di atas), tapi judul (h6.media- heading, #2d353c) & isi (p, #4e5c68) di dalamnya punya selector LEBIH SPESIFIK dari tema yang tidak ikut ke-override -- keduanya warna gelap yang didesain untuk latar terang, jadi nyaris tidak kebaca di atas latar #232d3b mode gelap. */ :root[data-theme="dark"] #header .dropdown-menu.media-list .media-heading { color: #f2f5f7; } :root[data-theme="dark"] #header .dropdown-menu.media-list .media p { color: #b7c0cc; } :root[data-theme="dark"] #header .dropdown-menu.media-list .dropdown-footer { background: #1e2733; border-top-color: #2f3b4c; } :root[data-theme="dark"] #header .dropdown-menu.media-list .dropdown-footer a { color: #8ecae6; } /* ===== SIDEBAR ================================================== Warna sidebar dikendalikan lewat CSS variable supaya 2 sumber (toggle terang/gelap di sini, warna kustom dari Pengaturan Sistem > Tampilan di layouts/color_admin.php) tidak baku-hantam soal spesifisitas selector. Aturan main cascade: deklarasi ber-!important SELALU menang atas yang tidak !important, apa pun spesifisitasnya -- jadi kalau admin mengaktifkan warna kustom, color_admin.php cukup timpa variabel ini dengan !important dan otomatis menang di kedua mode tanpa perlu menduplikasi selector :root[data-theme=...] sama sekali. */ :root { --sidebar-bg: #2d353c; --sidebar-text: rgba(255,255,255,.6); --sidebar-hover-bg: rgba(255,255,255,.15); --sidebar-hover-text: #fff; } :root[data-theme="light"] { --sidebar-bg: #fff; --sidebar-text: #4a5568; --sidebar-hover-bg: #eef2f5; --sidebar-hover-text: #0f766e; } :root[data-theme="dark"] { --sidebar-bg: #1e2733; --sidebar-text: #b7c0cc; --sidebar-hover-bg: rgba(255,255,255,.08); --sidebar-hover-text: #fff; } .sidebar, .sidebar-bg, .sidebar .nav-profile { background: var(--sidebar-bg) !important; } .sidebar-menu, .sidebar .nav > li > a, .sidebar .nav-header, .sidebar .sub-menu > li > a { color: var(--sidebar-text) !important; } .sidebar .nav > li > a:hover, .sidebar .nav > li.active > a, .sidebar .nav > li.has-sub.active > a, .sidebar .sub-menu > li > a:hover, .sidebar .sub-menu > li.active > a { background: var(--sidebar-hover-bg) !important; color: var(--sidebar-hover-text) !important; } :root[data-theme="dark"] #content { background: transparent; } :root[data-theme="dark"] .breadcrumb, :root[data-theme="dark"] .page-header { color: #d7dde3; } :root[data-theme="dark"] .breadcrumb a { color: #8ecae6; } :root[data-theme="dark"] .panel, :root[data-theme="dark"] .panel-body, :root[data-theme="dark"] .modal-content { background: #1e2733; color: #d7dde3; } :root[data-theme="dark"] .panel-heading { background: #232d3b !important; color: #d7dde3 !important; border-bottom: 1px solid #2f3b4c; } :root[data-theme="dark"] .panel-footer { background: #232d3b; border-top: 1px solid #2f3b4c; } /* Bootstrap polos `.card` (dipakai mis. kartu rombel di Anggota Rombel) -- app.min.css/tema ini sendiri tidak pernah pakai .card (selalu .panel), jadi tanpa ini dia jatuh ke default Bootstrap (putih) & mencolok di tengah halaman gelap. Warna disamakan dengan .panel-heading/.form-control (#232d3b) supaya kartu terlihat "menonjol tipis" dari .panel-body (#1e2733) di sekitarnya, konsisten dengan hierarki panel > kartu. */ :root[data-theme="dark"] .card { background-color: #232d3b; border-color: #2f3b4c; color: #d7dde3; } :root[data-theme="dark"] .card-title { color: #fff; } /* Bootstrap `.alert-*` (dipakai di banyak halaman -- notifikasi, form backup/restore, dll, bukan cuma modal Wali Kelas) -- sama seperti .card, tidak pernah disentuh tema ini jadi tetap warna terang Bootstrap default & mencolok di modal/panel gelap. Pola warna: latar gelap bernuansa warna alert-nya + teks & border terang senada, bukan literal warna Bootstrap defaultnya, supaya tetap kebaca di atas latar gelap. */ :root[data-theme="dark"] .alert-info { background-color: #16303d; border-color: #1f4f63; color: #8ecae6; } :root[data-theme="dark"] .alert-success { background-color: #17301f; border-color: #235c34; color: #7bc98f; } :root[data-theme="dark"] .alert-warning { background-color: #3a2e12; border-color: #5c4a1c; color: #e8c777; } :root[data-theme="dark"] .alert-danger { background-color: #3a1a1e; border-color: #5c262c; color: #e8909a; } :root[data-theme="dark"] .alert .alert-link { color: inherit; text-decoration: underline; } :root[data-theme="dark"] .table { color: #d7dde3; } :root[data-theme="dark"] .ca-divided-item { border-top-color: #2f3b4c; } :root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } :root[data-theme="dark"] .table-bordered, :root[data-theme="dark"] .table-bordered td, :root[data-theme="dark"] .table-bordered th { border-color: #2f3b4c; } :root[data-theme="dark"] .table thead th { border-bottom-color: #2f3b4c; color: #d7dde3; } :root[data-theme="dark"] .dataTables_wrapper .dataTables_info, :root[data-theme="dark"] .dataTables_wrapper .dataTables_length, :root[data-theme="dark"] .dataTables_wrapper .dataTables_filter { color: #d7dde3; } /* "Tombol karet" (dtr-control) bawaan DataTables Responsive -- defaultnya panah kecil digambar pakai trik CSS border-triangle rgba(0,0,0,.5). Sekadar mengganti warna triangle-nya ternyata masih kurang jelas (bentuknya sendiri terlalu kecil/tipis sebagai penanda tombol) -- jadi trik border-triangle-nya dibuang total, diganti lencana bulat solid berisi karakter "+"/"−" yang WARNA LATARNYA SENDIRI yang kontras (bukan cuma warna panahnya), jadi tetap jelas kelihatan di atas baris apa pun (termasuk baris table-striped/hover): hitam di atas putih pada mode terang, putih di atas hitam pada mode gelap. */ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before, table.dataTable.dtr-column > tbody > tr > td.dtr-control:before, table.dataTable.dtr-column > tbody > tr > th.dtr-control:before, table.dataTable.dtr-column > tbody > tr > td.control:before, table.dataTable.dtr-column > tbody > tr > th.control:before { content: "+" !important; /* float (bukan inline-flex) SENGAJA -- lencana ini disisipkan lewat :before ke DALAM sel data kolom pertama (mode "inline" bawaan Responsive), berbagi baris dengan teks/angka aslinya. inline-flex ikut masuk perhitungan baseline & tinggi baris teks di sebelahnya, jadi seluruh isi sel (termasuk baris-baris lain di tabel yang sama) ketarik turun. float melepas lencana dari alur baseline itu sama sekali -- teks di sampingnya mengalir normal tanpa terganggu. */ float: left !important; box-sizing: border-box !important; width: 16px !important; height: 16px !important; margin: 1px .5em 0 0 !important; border: 1.5px solid !important; border-radius: 50% !important; font-family: monospace !important; font-size: 11px !important; font-weight: 700 !important; line-height: 13px !important; text-align: center !important; } table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before, table.dataTable.dtr-column > tbody > tr.dtr-expanded > td.dtr-control:before, table.dataTable.dtr-column > tbody > tr.dtr-expanded > th.dtr-control:before, table.dataTable.dtr-column > tbody > tr.dtr-expanded > td.control:before, table.dataTable.dtr-column > tbody > tr.dtr-expanded > th.control:before { content: "\2212" !important; /* − (minus), baris sedang dibuka */ } :root[data-theme="light"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, :root[data-theme="light"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before, :root[data-theme="light"] table.dataTable.dtr-column > tbody > tr > td.dtr-control:before, :root[data-theme="light"] table.dataTable.dtr-column > tbody > tr > th.dtr-control:before, :root[data-theme="light"] table.dataTable.dtr-column > tbody > tr > td.control:before, :root[data-theme="light"] table.dataTable.dtr-column > tbody > tr > th.control:before { background-color: #fff !important; color: #000 !important; border-color: #000 !important; } :root[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, :root[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before, :root[data-theme="dark"] table.dataTable.dtr-column > tbody > tr > td.dtr-control:before, :root[data-theme="dark"] table.dataTable.dtr-column > tbody > tr > th.dtr-control:before, :root[data-theme="dark"] table.dataTable.dtr-column > tbody > tr > td.control:before, :root[data-theme="dark"] table.dataTable.dtr-column > tbody > tr > th.control:before { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } /* app.min.css memasangkan teks gelap + latar terang hardcode di :hover ini (didesain untuk mode terang) -- harus dipaksa menang pakai !important, kalau tidak teks jadi tidak kebaca saat kursor di atas baris tabel. */ :root[data-theme="dark"] .table-hover tbody tr:hover, :root[data-theme="dark"] .table-hover tbody tr:hover td, :root[data-theme="dark"] .table-hover tbody tr:hover th { background-color: #2a3648 !important; color: #fff !important; } /* .btn-white (dipakai luas -- tombol "Batal"/"Tutup" di footer modal, "Ke Dashboard" di halaman scan_not_mobile, dst) hardcode putih polos + teks gelap di app.min.css, TANPA varian mode gelap sama sekali -- jadi selalu tampil sebagai kotak putih terang menyala di atas latar gelap, tidak menyesuaikan tema. Diberi warna netral gelap yang serasi dengan modal/panel di sekitarnya. */ :root[data-theme="dark"] .btn-white { color: #d7dde3; background-color: #2a3648; border-color: #384457; } :root[data-theme="dark"] .btn-white:hover, :root[data-theme="dark"] .btn-white:focus, :root[data-theme="dark"] .btn-white.focus { color: #fff; background-color: #384457; border-color: #45536a; } :root[data-theme="dark"] .btn-white.disabled, :root[data-theme="dark"] .btn-white:disabled { color: #7e8f9e; background-color: #232d3b; border-color: #2f3b4c; } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] select.form-control, :root[data-theme="dark"] .form-control-file { background-color: #232d3b; border-color: #384354; color: #d7dde3; } :root[data-theme="dark"] .form-control:focus { background-color: #232d3b; color: #fff; } /* :not(.label) penting -- banyak halaman di app ini memakai