/* ===================================================================
Dark mode — palet VS Code "Dark+" (default theme VS Code)
Di-load PALING TERAKHIR di fragments/css.html supaya menang atas:
1) CSS statis lain (style.css, custom.css, bootstrap.css)
2) CSS yang di-inject bundle.js (webpack style-loader) saat runtime —
urutannya di tidak bisa dijamin selalu di bawah file ini,
makanya banyak !important di sini.
=================================================================== */
:root {
--vsc-bg: #1e1e1e; /* editor background */
--vsc-bg-elevated: #252526; /* sidebar / panel background */
--vsc-bg-lighter: #2d2d2d; /* card / table row background */
--vsc-bg-input: #3c3c3c; /* input / dropdown background */
--vsc-border: #3c3c3c;
--vsc-border-light: #454545;
--vsc-fg: #d4d4d4; /* teks utama */
--vsc-fg-muted: #969696; /* teks sekunder */
--vsc-accent: #007acc; /* biru status bar / tombol */
--vsc-accent-hover: #1177bb;
--vsc-link: #3794ff;
--vsc-hover: #2a2d2e;
--vsc-selection: #094771;
}
html, body {
background-color: var(--vsc-bg) !important;
color: var(--vsc-fg) !important;
}
/* ---------- layout: header, sidebar, page container ---------- */
.page-container,
.header,
.header-container,
#page-wrapper {
background-color: var(--vsc-bg) !important;
color: var(--vsc-fg) !important;
border-color: var(--vsc-border) !important;
}
.sidebar,
.sidebar-inner,
.sidemenu {
background-color: var(--vsc-bg-elevated) !important;
color: var(--vsc-fg) !important;
}
.sidebar-logo {
background-color: var(--vsc-bg-elevated) !important;
border-color: var(--vsc-border) !important;
}
/* Matikan tap-highlight biru bawaan browser mobile di link logo brand
(sidebar-logo dibungkus , kena overlay biru tiap kali di-tap). */
.sidebar-logo a,
.sidebar-link,
.sidebar-menu a {
-webkit-tap-highlight-color: transparent;
}
.sidebar-menu li a,
.sidemenu ul li a {
color: var(--vsc-fg-muted) !important;
}
.sidebar-menu li a:hover,
.sidebar-menu li a:focus,
.sidemenu ul li a:hover {
background-color: var(--vsc-hover) !important;
color: var(--vsc-fg) !important;
}
/* Item aktif: bar aksen kiri ala VS Code Activity Bar, BUKAN blok background
solid. Background solid pernah bikin "kotak biru" yang tingginya cuma
sebatas .icon-holder (35px, dikunci CSS lain) sementara teks menu yang
wrap ke baris berikutnya meluber di luar kotak. box-shadow inset dipakai
(bukan border-left) supaya tidak menggeser lebar konten/reflow layout. */
.sidebar-menu li a.active,
.sidebar-menu li.active > a,
.sidemenu ul li a.active {
background-color: var(--vsc-hover) !important;
color: #fff !important;
box-shadow: inset 3px 0 0 0 var(--vsc-accent) !important;
}
.mobile-menu-toggle {
color: var(--vsc-fg-muted) !important;
}
/* Nama brand di sidebar-logo jangan ikut kena warna link biru generik. */
.sidebar-logo h4,
.sidebar-logo a,
.sidebar-logo a:hover {
color: var(--vsc-fg) !important;
}
/* ---------- kartu / panel dashboard (topDashboard, dsb) ---------- */
.topDashboard,
.panel,
.panel-default,
.panel-body,
.panel-heading,
.well,
.card {
background-color: var(--vsc-bg-elevated) !important;
color: var(--vsc-fg) !important;
border-color: var(--vsc-border) !important;
}
.topDashboardLabel {
color: var(--vsc-fg-muted) !important;
}
/* ---------- tabel ---------- */
table,
.table,
.viewtable {
background-color: var(--vsc-bg-elevated) !important;
color: var(--vsc-fg) !important;
}
.table thead th,
.viewmaintitle {
background-color: var(--vsc-bg-input) !important;
color: var(--vsc-fg) !important;
border-color: var(--vsc-border) !important;
}
.table td,
.table th,
.viewtable td {
border-color: var(--vsc-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd),
.viewtable tr:nth-child(odd) {
background-color: var(--vsc-bg-lighter) !important;
}
.table-hover > tbody > tr:hover {
background-color: var(--vsc-hover) !important;
}
/* ---------- kotak search/filter, summary transaksi, tabel: border
diredupkan + sudut dibuat melengkung tipis (border-radius kecil).
Catatan: border-radius tidak reliable dipasang langsung di
yang border-collapse:collapse (dukungan browser tidak konsisten),
makanya dibulatkan lewat sel pojok (td/th pertama & terakhir) —
trik CSS standar, hasilnya tetap terlihat seperti 1 kotak melengkung. */
.panel,
.panel-default,
.borderaround,
.searchactionbutton,
.summaryTable,
#search .searchcontainer {
border-color: var(--vsc-border-light) !important;
border-radius: 4px !important;
}
.panel-heading {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.viewtable,
.borderright,
.viewtitle {
border-color: var(--vsc-border-light) !important;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.viewtable td {
border-color: var(--vsc-border) !important;
}
.table-bordered thead tr:first-child th:first-child,
.viewtable tr:first-child td:first-child {
border-top-left-radius: 4px !important;
}
.table-bordered thead tr:first-child th:last-child,
.viewtable tr:first-child td:last-child {
border-top-right-radius: 4px !important;
}
.table-bordered tbody tr:last-child td:first-child,
.viewtable tr:last-child td:first-child {
border-bottom-left-radius: 4px !important;
}
.table-bordered tbody tr:last-child td:last-child,
.viewtable tr:last-child td:last-child {
border-bottom-right-radius: 4px !important;
}
/* ---------- form ---------- */
.form-control,
input,
select,
textarea {
background-color: var(--vsc-bg-input) !important;
color: var(--vsc-fg) !important;
border-color: var(--vsc-border-light) !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
border-color: var(--vsc-accent) !important;
box-shadow: 0 0 0 1px var(--vsc-accent) !important;
}
.form-control::placeholder {
color: var(--vsc-fg-muted) !important;
}
label {
color: var(--vsc-fg) !important;
}
/* ---------- tombol ---------- */
.btn-default,
.btn-secondary {
background-color: var(--vsc-bg-input) !important;
color: var(--vsc-fg) !important;
border-color: var(--vsc-border-light) !important;
}
.btn-primary {
background-color: var(--vsc-accent) !important;
border-color: var(--vsc-accent) !important;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: var(--vsc-accent-hover) !important;
border-color: var(--vsc-accent-hover) !important;
}
/* ---------- link, dropdown, modal ---------- */
a {
color: var(--vsc-link);
}
a:hover {
color: #56a8ff;
}
.dropdown-menu {
background-color: var(--vsc-bg-elevated) !important;
border-color: var(--vsc-border) !important;
}
.dropdown-menu > li > a {
color: var(--vsc-fg) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background-color: var(--vsc-hover) !important;
color: var(--vsc-fg) !important;
}
.modal-content {
background-color: var(--vsc-bg-elevated) !important;
color: var(--vsc-fg) !important;
}
.modal-header,
.modal-footer {
border-color: var(--vsc-border) !important;
}
/* ---------- scrollbar (custom.css/style.css sudah atur warna lama) ---------- */
::-webkit-scrollbar-track {
background: var(--vsc-bg-elevated) !important;
}
::-webkit-scrollbar-thumb {
background: var(--vsc-border-light) !important;
}
::-webkit-scrollbar-thumb:hover {
background: var(--vsc-accent) !important;
}
/* ---------- pagination, alert, badge ---------- */
.pagination > li > a,
.pagination > li > span {
background-color: var(--vsc-bg-input) !important;
color: var(--vsc-fg) !important;
border-color: var(--vsc-border-light) !important;
}
.pagination > .active > a {
background-color: var(--vsc-accent) !important;
border-color: var(--vsc-accent) !important;
}
.alert {
border-color: var(--vsc-border) !important;
}
/* ---------- footer (background di fragments/footer.html pakai inline style) ---------- */
footer {
background-color: var(--vsc-bg-elevated) !important;
color: var(--vsc-fg-muted) !important;
}
/* ---------- logo login (static/images/Logo.png punya bg putih baked-in,
bukan transparan asli — tidak ada tool edit gambar di komputer ini untuk
bikin transparan beneran, jadi disamarkan pakai blend mode: area putih
di gambar otomatis "menyatu" dengan warna background gelap di belakangnya). ---------- */
img[src="/images/Logo.png"] {
mix-blend-mode: multiply;
}