:root { --app-sidebar-width: 252px; --app-sidebar-mini: 68px; --app-topbar-height: 52px; --app-radius: 6px; --app-radius-sm: 4px; /* Ditimpa dari Pengaturan → Tampilan (lihat font_style_vars()) */ --app-font-size: 15px; --app-report-font-size: 12px; } /* -------------------------------------------------- Palet: Terang Putih dengan aksen oranye. */ :root, html[data-skin="terang"] { --mt-bg: #f8f9fa; --mt-side: #ffffff; --mt-surface: #ffffff; --mt-surface-alt: #f6f7f9; --mt-line: #ededed; --mt-line-soft: #f2f2f2; --mt-ink: #202c4b; --mt-ink-soft: #6b7280; --mt-ink-faint: #717782; /* 4,5:1 — dinaikkan dari #99a1af (2,6:1) */ --mt-accent: #f26522; --mt-accent-deep: #b8430b; /* teks tautan — 5,5:1; #d9520f hanya 4,1:1 */ --mt-accent-strong: #c2490c; --mt-accent-bg: #fef1eb; --mt-accent-on: #ffffff; --mt-ok: #0f7a3c; --mt-ok-bg: #d2f5e1; --mt-ok-line: #a9e8c4; --mt-warn: #8c6a00; --mt-warn-bg: #fff4d2; --mt-warn-line: #f2dfa1; --mt-bad: #cc0d0d; --mt-bad-bg: #fbe0e0; --mt-bad-line: #f3bcbc; --mt-info: #1b84ff; --mt-info-bg: #d6e9ff; } /* -------------------------------------------------- Palet: Pastel Tidak ada putih murni dan tidak ada hitam; semuanya bersemu biru. Warna teks TIDAK ikut dipudarkan — pastel gampang membuat angka kecil tak terbaca, dan menyipit membaca kolom rupiah jauh lebih melelahkan daripada layar yang sedikit terang. */ html[data-skin="pastel"] { --mt-bg: #e8edf1; --mt-side: #f2f6f8; --mt-surface: #f7f9fb; --mt-surface-alt: #f1f5f8; --mt-line: #d5dee5; --mt-line-soft: #e3eaef; --mt-ink: #2d3a47; --mt-ink-soft: #5d6e7d; --mt-ink-faint: #66747f; /* 4,6:1 — dinaikkan dari #8698a7 (2,8:1) */ --mt-accent: #5c8aa8; --mt-accent-deep: #47708a; --mt-accent-strong: #47708a; --mt-accent-bg: #e2ecf3; --mt-accent-on: #f7f9fb; --mt-ok: #3b7464; --mt-ok-bg: #e4efeb; --mt-ok-line: #bcd8cf; --mt-warn: #836537; --mt-warn-bg: #f2ecdf; --mt-warn-line: #ddcba7; --mt-bad: #97525d; --mt-bad-bg: #f1e4e6; --mt-bad-line: #dfc0c5; --mt-info: #4a7fa5; --mt-info-bg: #e0eaf2; } /* -------------------------------------------------- Palet: Teduh Pastel yang lebih redup lagi, untuk layar besar atau kerja malam. */ html[data-skin="teduh"] { --mt-bg: #dbe3ea; --mt-side: #e4ebf0; --mt-surface: #eef3f6; --mt-surface-alt: #e7eef3; --mt-line: #c7d3dc; --mt-line-soft: #d9e3ea; --mt-ink: #27333f; --mt-ink-soft: #566674; --mt-ink-faint: #62707b; /* 4,6:1 — dinaikkan dari #7d8f9e (3,0:1) */ --mt-accent: #5c8aa8; --mt-accent-deep: #416a84; --mt-accent-strong: #416a84; --mt-accent-bg: #dbe8f0; --mt-accent-on: #eef3f6; --mt-ok: #397162; --mt-ok-bg: #dfeae6; --mt-ok-line: #b4d0c7; --mt-warn: #7f6138; --mt-warn-bg: #ece6da; --mt-warn-line: #d6c4a1; --mt-bad: #914f5a; --mt-bad-bg: #ecdfe1; --mt-bad-line: #d8bac0; --mt-info: #44779b; --mt-info-bg: #dbe5ee; } /* -------------------------------------------------- Palet: Gelap Halaman gelap memerlukan dua hal yang tidak berlaku di palet terang: 1. Latarnya BUKAN hitam. Hitam pekat dengan teks putih menghasilkan silau tepi (halation) — huruf tampak berpendar dan mata cepat lelah, terutama pada angka kecil. Dipakai abu-abu kebiruan yang sangat tua. 2. Aksennya membawa teks GELAP, bukan putih. Oranye terang dengan tulisan putih tidak akan pernah lolos ambang kontras; dengan tulisan gelap justru mencapai 6,7:1. Ditemani data-bs-theme="dark" di (dipasang oleh app.js dan skrip di ) supaya komponen Bootstrap yang tidak ditimpa di sini — modal, offcanvas, tombol tutup, kalender bawaan — ikut gelap. */ html[data-skin="gelap"] { --mt-bg: #151a21; --mt-side: #1a2029; --mt-surface: #1e252f; --mt-surface-alt: #232b36; --mt-line: #333d4a; --mt-line-soft: #2a323d; --mt-ink: #e6ecf3; --mt-ink-soft: #a6b3c2; --mt-ink-faint: #8794a3; /* 5,0:1 — dinaikkan dari #7b8896 yang gagal */ --mt-accent: #f2783f; --mt-accent-deep: #f89463; /* teks aksen: lebih MUDA, bukan lebih tua */ --mt-accent-strong: #f2783f; --mt-accent-bg: #33241b; --mt-accent-on: #1a1005; /* teks gelap di atas aksen — 6,7:1 */ --mt-ok: #6ee7a8; --mt-ok-bg: #16301f; --mt-ok-line: #2c5b3c; --mt-warn: #f0c674; --mt-warn-bg: #332a16; --mt-warn-line: #5c4c26; --mt-bad: #ff8a8a; --mt-bad-bg: #3a1e1e; --mt-bad-line: #653333; --mt-info: #7fbcff; --mt-info-bg: #1a2b3d; } html[data-skin="gelap"] { --bs-secondary-color-rgb: 166, 179, 194; } /* --------------------------------------------------------------------- Sistem Operasional — aksennya dibuat hijau agar operator langsung tahu sedang berada di aplikasi yang mana. Dulu pembedanya warna latar menu samping; sekarang menu samping terang di kedua aplikasi, jadi yang membedakan adalah aksennya: lambang, menu aktif, dan tombol utama. --------------------------------------------------------------------- */ body.app-ops { --mt-accent: #16906a; --mt-accent-deep: #0f7a58; --mt-accent-strong: #0f7a58; /* 4,8:1 dengan putih */ --mt-accent-bg: #dcf3ea; } /* Di palet gelap hijaunya harus dibalik seperti oranye: warna cerah yang membawa teks gelap, bukan hijau tua yang membawa teks putih */ html[data-skin="gelap"] body.app-ops { --mt-accent: #35c894; --mt-accent-deep: #5fd8ae; --mt-accent-strong: #35c894; --mt-accent-bg: #14332a; --mt-accent-on: #06150f; /* 8,8:1 */ } /* --------------------------------------------------------------------- Variabel Bootstrap ditimpa di sini. Inilah yang membuat 139 tampilan ikut berganti rupa tanpa satu pun disunting. --------------------------------------------------------------------- */ :root { --bs-body-bg: var(--mt-bg); --bs-body-color: var(--mt-ink-soft); --bs-emphasis-color: var(--mt-ink); --bs-heading-color: var(--mt-ink); --bs-border-color: var(--mt-line); --bs-border-color-translucent: var(--mt-line); --bs-tertiary-bg: var(--mt-surface-alt); --bs-secondary-bg: var(--mt-surface-alt); --bs-secondary-color: var(--mt-ink-soft); --bs-primary: var(--mt-accent-strong); --bs-link-color: var(--mt-accent-deep); --bs-link-hover-color: var(--mt-accent); --bs-border-radius: var(--app-radius); --bs-border-radius-sm: var(--app-radius-sm); --bs-border-radius-lg: 8px; } /* .text-secondary dipakai 747 kali di seluruh tampilan. Bootstrap menghitungnya dari --bs-secondary-color-rgb, jadi yang perlu diganti nilainya, bukan aturannya. Ditulis per palet karena rgb() tidak menerima hex. */ :root, html[data-skin="terang"] { --bs-secondary-color-rgb: 107, 114, 128; } html[data-skin="pastel"] { --bs-secondary-color-rgb: 93, 110, 125; } html[data-skin="teduh"] { --bs-secondary-color-rgb: 86, 102, 116; } body { background-color: var(--mt-bg); color: var(--mt-ink-soft); font-size: var(--app-font-size, 15px); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--mt-ink); } /* Angka disamakan lebarnya supaya kolom rupiah berbaris lurus ke bawah */ .num, .stat-value, .table-report { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ Sidebar */ .app-sidebar { position: fixed; top: 0; inset-inline-start: 0; width: var(--app-sidebar-width); height: 100vh; background: var(--mt-side); color: var(--mt-ink-soft); border-inline-end: 1px solid var(--mt-line); display: flex; flex-direction: column; z-index: 1040; overflow-y: auto; overflow-x: hidden; transition: width .2s ease, transform .2s ease; } .app-sidebar .brand { display: flex; align-items: center; gap: .6rem; height: var(--app-topbar-height); flex: 0 0 var(--app-topbar-height); padding: 0 1rem; color: var(--mt-ink); font-weight: 600; border-bottom: 1px solid var(--mt-line); text-decoration: none; position: sticky; top: 0; background: var(--mt-side); z-index: 1; } /* Lambangnya memakai --mt-accent (bukan yang lebih tua): ini isian hias berisi ikon, bukan teks, jadi warna merek yang penuh boleh dipakai. */ .app-sidebar .brand .bi { font-size: 1rem; width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--app-radius-sm); background: var(--mt-accent); color: var(--mt-accent-on); display: grid; place-items: center; } .app-sidebar .brand small { color: var(--mt-ink-faint) !important; } /* --- Pencarian menu ------------------------------------------------------ Menempel di bawah lambang supaya tetap terlihat saat menu panjang digulir. Ikut menghilang saat menu diciutkan jadi ikon — kotak isian 68 px tidak ada gunanya; pintasan papan tik melebarkan menunya lebih dulu. */ .nav-search { position: sticky; top: var(--app-topbar-height); z-index: 2; display: flex; align-items: center; gap: .45rem; margin: .6rem .7rem .1rem; padding: .35rem .6rem; background: var(--mt-bg); border: 1px solid var(--mt-line); border-radius: var(--app-radius-sm); color: var(--mt-ink-faint); } .nav-search:focus-within { border-color: var(--mt-accent); box-shadow: 0 0 0 .2rem var(--mt-accent-bg); } .nav-search > .bi { font-size: .9rem; flex: 0 0 auto; } .nav-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: .84rem; color: var(--mt-ink); padding: 0; } .nav-search input::placeholder { color: var(--mt-ink-faint); } /* Silang bawaan peramban pada input[type=search] bertabrakan dengan tombol kosongkan kita sendiri */ .nav-search input::-webkit-search-cancel-button { -webkit-appearance: none; } .nav-search-kbd { flex: 0 0 auto; font-size: .68rem; line-height: 1; padding: .18rem .32rem; border: 1px solid var(--mt-line); border-bottom-width: 2px; border-radius: 3px; background: var(--mt-surface); color: var(--mt-ink-faint); } .nav-search:focus-within .nav-search-kbd { display: none; } .nav-search-clear { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--mt-ink-faint); padding: 0 .1rem; line-height: 1; font-size: .78rem; } .nav-search-clear:hover { color: var(--mt-ink); } .nav-search-empty { margin: .5rem 1.2rem; font-size: .8rem; color: var(--mt-ink-faint); } /* Baris yang cocok saat menjelajah hasil dengan panah atas/bawah */ .app-sidebar .nav-link.nav-search-cursor { background: var(--mt-accent-bg); color: var(--mt-accent-deep); } .app-sidebar .nav-link.nav-search-cursor .bi { color: inherit; } @media (min-width: 992px) { html.sidebar-hidden .nav-search, html.sidebar-hidden .nav-search-empty { display: none; } } .app-sidebar .nav { padding: .35rem .7rem 1rem; } /* Label golongan sebelumnya #7d93ad di atas biru tua. Di menu terang warna semuda itu jatuh ke ±2,6:1 pada huruf kapital 11 px — di bawah ambang WCAG AA. Dinaikkan ke warna teks biasa. */ .app-sidebar .nav-section { padding: 1rem .5rem .3rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mt-ink-soft); } /* Nama menu memakai warna judul, bukan warna teks biasa. Menu adalah hal yang dicari mata paling sering; di layar terang kantor abu-abu terlalu samar. Ikonnya dibiarkan selangkah lebih muda supaya namanya yang pertama terbaca, bukan gambarnya. */ .app-sidebar .nav-link { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; margin-bottom: 1px; border-radius: var(--app-radius-sm); color: var(--mt-ink); font-weight: 500; font-size: .875rem; border: 0; transition: background .15s ease, color .15s ease; } .app-sidebar .nav-link .bi { width: 1.1rem; text-align: center; color: var(--mt-ink-soft); } .app-sidebar .nav-link:hover { background: var(--mt-accent-bg); color: var(--mt-accent-deep); } .app-sidebar .nav-link:hover .bi { color: inherit; } /* Isian aksen yang membawa teks putih memakai --mt-accent-strong. Oranye #F26522 dengan teks putih hanya 3,2:1 — di bawah AA, dan justru mengenai baris yang paling sering dicari mata. */ .app-sidebar .nav-link.active { background: var(--mt-accent-strong); color: var(--mt-accent-on); font-weight: 600; } .app-sidebar .nav-link.active .bi { color: inherit; } /* Kelompok menu yang dapat dilipat */ .app-sidebar .nav-group { width: 100%; background: none; text-align: start; } .app-sidebar .nav-caret { font-size: .68rem; transition: transform .15s ease-in-out; } .app-sidebar .nav-group.collapsed .nav-caret { transform: rotate(-90deg); } /* Anak menu: tanpa ikon, menjorok, dan sedikit lebih kecil */ .app-sidebar .nav-sub .nav-link { padding-block: .38rem; padding-inline-start: 2.3rem; font-size: .84rem; font-weight: 400; color: var(--mt-ink-soft); } .app-sidebar .nav-sub .nav-link.active { font-weight: 600; color: var(--mt-accent-on); } .app-sidebar .sidebar-footer { margin-top: auto; padding: .85rem 1.15rem; font-size: .75rem; color: var(--mt-ink-faint); border-top: 1px solid var(--mt-line); } /* --------------------------------------------------------- Area utama */ .app-main { margin-inline-start: var(--app-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-inline-start .2s ease; } /* Menu diciutkan di layar lebar: tinggal ikonnya, isi halaman melebar. Pilihannya disimpan di localStorage dan dipasang sejak agar tidak ada kedipan saat halaman dimuat. Dulu menu disembunyikan sepenuhnya. Diubah jadi menciut karena ikon yang tersisa masih menunjukkan di mana pengguna berada — menu yang hilang sama sekali membuat orang kehilangan pegangan. */ @media (min-width: 992px) { html.sidebar-hidden .app-sidebar { width: var(--app-sidebar-mini); } html.sidebar-hidden .app-main { margin-inline-start: var(--app-sidebar-mini); } html.sidebar-hidden .app-sidebar .brand { justify-content: center; padding: 0; } html.sidebar-hidden .app-sidebar .brand > span { display: none; } html.sidebar-hidden .app-sidebar .nav { padding-inline: .6rem; } html.sidebar-hidden .app-sidebar .nav-link { justify-content: center; gap: 0; padding: .6rem 0; } html.sidebar-hidden .app-sidebar .nav-link > span, html.sidebar-hidden .app-sidebar .nav-caret { display: none; } /* Anak menu tidak muat di 68 px. Menekan kelompoknya akan melebarkan menu lebih dulu — lihat app.js. */ html.sidebar-hidden .app-sidebar .nav-sub, html.sidebar-hidden .app-sidebar .sidebar-footer { display: none; } /* Label golongan diganti garis. Kalau hanya dihapus, menu jadi satu tumpukan ikon tanpa jeda dan justru lebih sulit dibaca. */ html.sidebar-hidden .app-sidebar .nav-section { font-size: 0; padding: .5rem 0; margin: 0 .3rem; border-top: 1px solid var(--mt-line); } html.sidebar-hidden .app-sidebar .nav-section:first-child { border-top: 0; padding-top: .2rem; } } .app-topbar { background: var(--mt-surface); border-bottom: 1px solid var(--mt-line); min-height: var(--app-topbar-height); padding: .4rem 1.25rem; position: sticky; top: 0; z-index: 1030; } .app-topbar h1 { font-size: 1.05rem; } .app-content { padding: 1.25rem; flex: 1 1 auto; } /* Kaki halaman dipatok di dasar layar. * * Dipakai `sticky`, BUKAN `fixed`, dan alasannya bukan selera: * * - `fixed` keluar dari alur biasa, jadi lebarnya harus dihitung sendiri * terhadap menu samping — dan menu itu bisa 252 px, bisa 68 px saat * diciutkan, bisa nol di layar kecil. Tiga angka yang harus diikuti * beserta animasinya. `sticky` tetap anak dari .app-main, jadi lebarnya * ikut sendiri tanpa satu baris perhitungan pun. * - `fixed` juga menutupi ujung isi halaman secara permanen, sehingga * perlu padding cadangan di .app-content yang besarnya harus ditebak. * `sticky` turun ke alur begitu halaman digulir sampai habis, jadi * tidak ada yang tertutup selamanya dan tidak ada padding yang ditebak. * * Urutan tumpukan: modal Bootstrap 1050+, dropdown Select2 1060, bilah atas * 1030, tirai menu di layar kecil 1035. Kaki halaman ditaruh di 1020 — * di atas isi halaman, di bawah semua yang harus menimpanya. * * Ruangnya dirampingkan dari py-3 karena benda yang selalu menempel memakan * tinggi layar terus-menerus; yang sesekali lewat boleh lebih lega. */ .app-main > footer { position: sticky; bottom: 0; z-index: 1020; padding-block: .5rem; background: var(--mt-surface); border-top: 1px solid var(--mt-line); color: var(--mt-ink-faint) !important; } @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); } .app-sidebar.show { transform: translateX(0); box-shadow: 0 0 30px rgba(32, 44, 75, .25); } .app-main { margin-inline-start: 0; } .app-backdrop { position: fixed; inset: 0; background: rgba(32, 44, 75, .45); z-index: 1035; } .app-content { padding: 1rem; } } /* ------------------------------------------------------------- Kartu */ /* Kartu dibuat RATA: bergaris tipis, tanpa bayangan. Bayangan pada belasan kartu sekaligus membuat halaman terasa berisik. */ .card { background: var(--mt-surface); border: 1px solid var(--mt-line); border-radius: var(--app-radius); box-shadow: none; } .card-header { background: transparent; border-bottom-color: var(--mt-line); color: var(--mt-ink); font-weight: 600; padding: .85rem 1.25rem; } .card-body { padding: 1.25rem; } .card-footer { background: var(--mt-surface-alt); border-top-color: var(--mt-line); padding: .75rem 1.25rem; } .stat-card .stat-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; } .stat-card .stat-value { font-size: 1.4rem; font-weight: 600; line-height: 1.2; color: var(--mt-ink); } .stat-card .stat-label { font-size: .78rem; color: var(--mt-ink-soft); text-transform: uppercase; letter-spacing: .04em; } /* ------------------------------------------------------------- Tabel */ .table { --bs-table-bg: transparent; --bs-table-color: var(--mt-ink-soft); --bs-table-border-color: var(--mt-line-soft); --bs-table-hover-bg: var(--mt-accent-bg); --bs-table-hover-color: var(--mt-ink); } .table > thead th { background: var(--mt-surface-alt); color: var(--mt-ink); border-bottom-color: var(--mt-line); font-weight: 600; } /* .table-light dipakai 94 kali; nilainya dipatok Bootstrap saat dikompilasi */ .table-light { --bs-table-bg: var(--mt-surface-alt); --bs-table-color: var(--mt-ink); --bs-table-border-color: var(--mt-line); } /* Ukuran font tabel laporan diatur global lewat Pengaturan → Tampilan */ .table-report { font-size: var(--app-report-font-size, 12px); } .table-report th { font-size: .92em; text-transform: uppercase; letter-spacing: .03em; color: var(--mt-ink-soft); } .table-report td, .table-report th { vertical-align: middle; } /* Baris rapat agar laporan lebar tetap muat */ .table-report.table-sm > :not(caption) > * > * { padding: .3rem .4rem; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Kolom angka menyusut sesuai isinya sehingga kolom nama akun mendapat sisa ruang dan tidak terpotong ke beberapa baris. */ .table-report th.num, .table-report td.num { width: 1%; } .text-mono { font-family: var(--bs-font-monospace); font-size: .85em; color: var(--mt-ink); } /* Anak flex baru mau menyusut kalau lebar minimumnya dilepas */ .min-width-0 { min-width: 0; } /* Kolom pendamping ikut terlihat saat kolom utama yang panjang digulir. Batas tinggi menjaga bagian bawahnya tetap terjangkau di layar pendek. */ @media (min-width: 1200px) { .side-stack { position: sticky; top: calc(var(--app-topbar-height) + 1.25rem); max-height: calc(100vh - var(--app-topbar-height) - 2rem); overflow-y: auto; } } .row-group td { background: var(--mt-surface-alt); font-weight: 600; color: var(--mt-ink); } .row-total td { border-top: 2px solid var(--mt-line); font-weight: 600; color: var(--mt-ink); } .row-grand td { border-top: 3px double var(--mt-line); border-bottom: 3px double var(--mt-line); font-weight: 700; color: var(--mt-ink); } /* ---------------------------------------------------- Tombol & isian */ /* Bootstrap memaku warna tombol saat dikompilasi — .btn-primary TIDAK membaca --bs-primary. Karena itu tombolnya ditimpa satu per satu. */ .btn-primary { --bs-btn-bg: var(--mt-accent-strong); --bs-btn-border-color: var(--mt-accent-strong); --bs-btn-color: var(--mt-accent-on); --bs-btn-hover-bg: var(--mt-accent-deep); --bs-btn-hover-border-color: var(--mt-accent-deep); --bs-btn-hover-color: var(--mt-accent-on); --bs-btn-active-bg: var(--mt-accent-deep); --bs-btn-active-border-color: var(--mt-accent-deep); --bs-btn-active-color: var(--mt-accent-on); --bs-btn-disabled-bg: var(--mt-accent); --bs-btn-disabled-border-color: var(--mt-accent); --bs-btn-disabled-color: var(--mt-accent-on); } .btn-outline-primary { --bs-btn-color: var(--mt-accent-deep); --bs-btn-border-color: var(--mt-accent-strong); --bs-btn-hover-bg: var(--mt-accent-strong); --bs-btn-hover-border-color: var(--mt-accent-strong); --bs-btn-hover-color: var(--mt-accent-on); --bs-btn-active-bg: var(--mt-accent-strong); --bs-btn-active-border-color: var(--mt-accent-strong); --bs-btn-active-color: var(--mt-accent-on); --bs-btn-disabled-color: var(--mt-accent-deep); --bs-btn-disabled-border-color: var(--mt-accent-strong); } .btn-outline-secondary { --bs-btn-color: var(--mt-ink); --bs-btn-border-color: var(--mt-line); --bs-btn-bg: var(--mt-surface); --bs-btn-hover-bg: var(--mt-accent-bg); --bs-btn-hover-border-color: var(--mt-accent-bg); --bs-btn-hover-color: var(--mt-accent-deep); --bs-btn-active-bg: var(--mt-accent-bg); --bs-btn-active-border-color: var(--mt-line); --bs-btn-active-color: var(--mt-accent-deep); --bs-btn-disabled-color: var(--mt-ink-faint); --bs-btn-disabled-border-color: var(--mt-line); } .btn-outline-danger { --bs-btn-color: var(--mt-bad); --bs-btn-border-color: var(--mt-bad-line); --bs-btn-hover-bg: var(--mt-bad); --bs-btn-hover-border-color: var(--mt-bad); --bs-btn-active-bg: var(--mt-bad); --bs-btn-active-border-color: var(--mt-bad); --bs-btn-disabled-color: var(--mt-bad); --bs-btn-disabled-border-color: var(--mt-bad-line); } .btn-light, .btn-white { --bs-btn-bg: var(--mt-surface); --bs-btn-border-color: var(--mt-line); --bs-btn-color: var(--mt-ink); --bs-btn-hover-bg: var(--mt-accent-bg); --bs-btn-hover-border-color: var(--mt-line); --bs-btn-hover-color: var(--mt-accent-deep); } .form-control, .form-select { background-color: var(--mt-surface); border-color: var(--mt-line); color: var(--mt-ink); border-radius: var(--app-radius-sm); } .form-control::placeholder { color: var(--mt-ink-faint); } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--mt-surface-alt); color: var(--mt-ink-soft); } .form-label { color: var(--mt-ink); font-weight: 500; margin-bottom: .3rem; } .form-text { color: var(--mt-ink-faint); } /* Sorot fokus tetap tegas — palet lembut tidak boleh mengorbankan ketereksesan bagi pengguna keyboard */ .form-control:focus, .form-select:focus, .btn:focus-visible, .app-sidebar .nav-link:focus-visible { border-color: var(--mt-accent); box-shadow: 0 0 0 .2rem var(--mt-accent-bg); outline: none; } .form-check-input:checked { background-color: var(--mt-accent-strong); border-color: var(--mt-accent-strong); } .form-check-input:focus { border-color: var(--mt-accent); box-shadow: 0 0 0 .2rem var(--mt-accent-bg); } /* ---------------------------------------------------- Lencana & pesan */ .badge { font-weight: 600; border-radius: var(--app-radius-sm); } /* text-bg-* dipatok Bootstrap saat dikompilasi; disamakan dengan palet */ .text-bg-primary { background-color: var(--mt-accent-strong) !important; color: var(--mt-accent-on) !important; } .text-bg-secondary { background-color: var(--mt-line-soft) !important; color: var(--mt-ink-soft) !important; } .text-bg-success { background-color: var(--mt-ok-bg) !important; color: var(--mt-ok) !important; } .text-bg-warning { background-color: var(--mt-warn-bg) !important; color: var(--mt-warn) !important; } .text-bg-danger { background-color: var(--mt-bad-bg) !important; color: var(--mt-bad) !important; } .text-bg-info { background-color: var(--mt-info-bg) !important; color: var(--mt-info) !important; } .text-bg-light { background-color: var(--mt-surface-alt) !important; color: var(--mt-ink) !important; } .text-bg-dark { background-color: var(--mt-ink) !important; color: var(--mt-surface) !important; } .text-primary { color: var(--mt-accent-deep) !important; } .text-success { color: var(--mt-ok) !important; } .text-danger { color: var(--mt-bad) !important; } .text-warning { color: var(--mt-warn) !important; } .text-info { color: var(--mt-info) !important; } .text-muted { color: var(--mt-ink-faint) !important; } .alert { border-radius: var(--app-radius); } .alert-primary { --bs-alert-bg: var(--mt-accent-bg); --bs-alert-border-color: var(--mt-line); --bs-alert-color: var(--mt-accent-deep); } .alert-success { --bs-alert-bg: var(--mt-ok-bg); --bs-alert-border-color: var(--mt-ok-line); --bs-alert-color: var(--mt-ok); } .alert-warning { --bs-alert-bg: var(--mt-warn-bg); --bs-alert-border-color: var(--mt-warn-line); --bs-alert-color: var(--mt-warn); } .alert-danger { --bs-alert-bg: var(--mt-bad-bg); --bs-alert-border-color: var(--mt-bad-line); --bs-alert-color: var(--mt-bad); } .alert-info { --bs-alert-bg: var(--mt-info-bg); --bs-alert-border-color: var(--mt-line); --bs-alert-color: var(--mt-info); } .dropdown-menu { --bs-dropdown-bg: var(--mt-surface); --bs-dropdown-border-color: var(--mt-line); --bs-dropdown-link-color: var(--mt-ink); --bs-dropdown-link-hover-bg: var(--mt-accent-bg); --bs-dropdown-link-hover-color: var(--mt-accent-deep); --bs-dropdown-link-active-bg: var(--mt-accent-strong); --bs-dropdown-link-active-color: var(--mt-accent-on); --bs-dropdown-header-color: var(--mt-ink-faint); box-shadow: 0 .4rem 1rem rgba(32, 44, 75, .1); } .nav-tabs { --bs-nav-tabs-border-color: var(--mt-line); --bs-nav-tabs-link-active-bg: var(--mt-surface); --bs-nav-tabs-link-active-color: var(--mt-accent-deep); --bs-nav-tabs-link-active-border-color: var(--mt-line) var(--mt-line) var(--mt-surface); --bs-nav-link-color: var(--mt-ink-soft); --bs-nav-link-hover-color: var(--mt-accent-deep); } .pagination { --bs-pagination-color: var(--mt-ink); --bs-pagination-bg: var(--mt-surface); --bs-pagination-border-color: var(--mt-line); --bs-pagination-hover-bg: var(--mt-accent-bg); --bs-pagination-hover-color: var(--mt-accent-deep); --bs-pagination-active-bg: var(--mt-accent-strong); --bs-pagination-active-border-color: var(--mt-accent-strong); --bs-pagination-active-color: var(--mt-accent-on); --bs-pagination-disabled-bg: var(--mt-surface-alt); --bs-pagination-disabled-color: var(--mt-ink-faint); } .modal-content { background: var(--mt-surface); border-color: var(--mt-line); } .modal-header, .modal-footer { border-color: var(--mt-line); } .list-group { --bs-list-group-bg: var(--mt-surface); --bs-list-group-border-color: var(--mt-line); --bs-list-group-color: var(--mt-ink-soft); --bs-list-group-action-hover-bg: var(--mt-accent-bg); --bs-list-group-active-bg: var(--mt-accent-strong); --bs-list-group-active-border-color: var(--mt-accent-strong); --bs-list-group-active-color: var(--mt-accent-on); } .progress { background: var(--mt-line-soft); } .progress-bar { background: var(--mt-accent); } hr { border-color: var(--mt-line); opacity: 1; } /* ------------------------------------------------ Tutup buku: isian sisipan Blok isian yang menyela tabel perhitungan. Bentuknya sengaja BUKAN kartu: tanpa garis tepi penuh dan tanpa jarak atas, supaya ia terbaca sebagai bagian dari tangga angka yang sedang berjalan — bukan kotak lain yang kebetulan diletakkan di tengahnya. Garis kiri tebal itu satu-satunya penanda: "di sini Anda boleh mengubah". */ /* Padding kanan sengaja disamakan dengan padding sel tabel (.4rem, dari .table-report.table-sm), BUKAN dengan padding kirinya. Dengan begitu tepi kanan isian angka jatuh persis di garis yang sama dengan kolom angka pada tabel di atas dan di bawahnya. Kalau kiri-kanan disamakan, angkanya meleset setengah sentimeter — cukup untuk terlihat tidak sengaja. */ .closing-setup { border-left: 3px solid var(--mt-accent); background: var(--mt-surface-alt); padding: .75rem .4rem .85rem .9rem; margin-bottom: .25rem; } .closing-setup-judul { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mt-ink-soft); margin-bottom: .6rem; } .closing-setup-judul .bi { color: var(--mt-accent-deep); } /* Tabel yang mengapit blok isian tidak boleh berjarak — jaraknya sudah diurus blok isiannya sendiri */ .closing-setup + table { margin-top: .25rem; } /* `.input-group` bawaan Bootstrap boleh MEMBUNGKUS. Begitu kolomnya lebih sempit daripada lebar minimum isiannya, tanda "%" atau "Rp" terlempar ke baris berikutnya — kotaknya masih benar, tampilannya yang rusak. Melebarkan kolom saja tidak menutup kasus ini: pada layar sempit ia akan terulang. Dilarang membungkus, lalu isiannya dibiarkan menyusut. */ .closing-setup .input-group { flex-wrap: nowrap; } /* Isian angka tetap punya lebar minimum yang masuk akal, supaya menyusutnya berhenti sebelum angkanya terpotong */ .closing-setup #tax_rate { min-width: 3.6rem; } .closing-setup #tax_amount { min-width: 8.5rem; } /* ------------------------------------------------------- Pusat Bantuan */ /* Judul di Pusat Bantuan memakai DUA warna, atas permintaan pengguna: isi halaman oranye #FF5722, daftar isi tetap coklat. Pembagiannya kebetulan juga menolong keterbacaan — daftar isi adalah teks paling kecil dan paling rapat di halaman ini, jadi warna yang kontrasnya tinggi memang lebih pantas di sana. */ /* (1) Isi halaman — #FF5722, sama di keempat palet. * * SATU-SATUNYA warna di berkas ini yang tidak lolos ambang kontras. * Diukur pada permukaan kartu tiap palet: * * terang 3,16:1 pastel 3,00:1 * teduh 2,83:1 gelap 4,88:1 * * Ambang WCAG AA untuk teks sebesar ini adalah 4,5:1, jadi ketiga palet * terang berada di bawahnya. Dipasang atas permintaan pengguna yang sudah * diberi tahu angkanya. Bila suatu saat ingin dikembalikan ke ambang aman * tanpa mengubah ronanya, #C1390F adalah oranye terdekat yang lolos di * ketiga palet terang (5,4 / 5,2 / 4,9) — cukup ganti nilainya di sini. * * JANGAN jadikan ini contoh untuk warna lain di berkas ini. */ :root { --mt-judul: #FF5722; } /* (2) Daftar isi — coklat, dan coklatnya BERBEDA per palet: coklat tua yang bagus di atas kartu putih menjadi nyaris hitam di atas kartu gelap, jadi palet gelap memakai coklat muda. Keempatnya lolos WCAG AA pada permukaan kartunya masing-masing — 8,5:1 / 8,0:1 / 9,0:1 / 6,7:1. */ :root, html[data-skin="terang"] { --mt-judul-toc: #6b4423; } html[data-skin="pastel"] { --mt-judul-toc: #6b4423; } html[data-skin="teduh"] { --mt-judul-toc: #5c3a1e; } html[data-skin="gelap"] { --mt-judul-toc: #d9a066; } /* Isi: judul kartu tiap menu + judul golongan di antara kartu */ .help-entri > .card-header { color: var(--mt-judul); font-weight: 700; } .help-bagian { color: var(--mt-judul) !important; font-weight: 700; } /* Daftar isi: judul kartunya + judul golongan di dalamnya */ .help-toc-head { color: var(--mt-judul-toc); font-weight: 700; } .help-toc-bagian .nav-section { color: var(--mt-judul-toc) !important; font-weight: 700; } .help-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mt-ink-faint); margin-bottom: .25rem; } /* Butir dirapatkan ke tepi: daftar bantuan dibaca sebagai poin, bukan sebagai kutipan yang menjorok */ .help-list { padding-left: 1.05rem; margin-bottom: 0; } .help-list li + li { margin-top: .4rem; } .help-bagian { font-size: .74rem; font-weight: 700; letter-spacing: .06em; border-bottom: 1px solid var(--mt-line); padding-bottom: .3rem; } .help-toc-item { font-size: .84rem; color: var(--mt-ink); padding-left: .1rem; border-left: 2px solid transparent; } .help-toc-item:hover { color: var(--mt-accent-deep); border-left-color: var(--mt-accent); padding-left: .35rem; } /* Lompatan dari "menu berkaitan" berhenti tepat di bawah bilah atas yang dipatok — tanpa ini, judul kartunya tertutup bilah itu */ .help-entri { scroll-margin-top: calc(var(--app-topbar-height) + 1rem); } /* -------------------------------------------------- Form baris jurnal */ .journal-line input.amount { text-align: right; } .journal-line .form-select, .journal-line .form-control { font-size: .875rem; } .balance-indicator.ok { color: var(--mt-ok); } .balance-indicator.off { color: var(--mt-bad); } /* ----------------------------------------------------------- Select2 */ /* Samakan tinggi & tipografi dengan kontrol Bootstrap */ .select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + .75rem + 2px); background-color: var(--mt-surface); border-color: var(--mt-line); border-radius: var(--app-radius-sm); color: var(--mt-ink); } .select2-container--bootstrap-5.select2--small .select2-selection { min-height: calc(1.5em + .5rem + 2px); font-size: .875rem; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--mt-ink); } .select2-container--bootstrap-5 .select2-dropdown { background: var(--mt-surface); border-color: var(--mt-line); } .select2-container--bootstrap-5 .select2-results__option--highlighted { background: var(--mt-accent-strong) !important; color: var(--mt-accent-on) !important; } /* Tema Bootstrap bawaan Select2 MEMATOK warna teksnya (#212529) di `.select2-dropdown`, bukan mewarisi dari halaman. Latarnya sudah kita ganti mengikuti palet di baris atas, tapi teksnya tidak — di palet gelap hasilnya hitam di atas panel gelap, jadi seluruh pilihan lenyap dan hanya baris yang sedang disorot yang terbaca. Kedalaman pemilih di bawah ini SENGAJA disamakan dengan pemilih vendor (`.select2-dropdown .select2-results__options .select2-results__option`, dan seterusnya) supaya menang tanpa perlu !important. Kalau dipendekkan, warna vendor kembali menang dan bugnya muncul lagi. */ .select2-container--bootstrap-5 .select2-dropdown { color: var(--mt-ink); } .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { color: var(--mt-ink); } /* "Tidak ada hasil", "Memuat…", dan pilihan yang dimatikan — sengaja lebih redup daripada teks biasa, tapi tetap di atas ambang (4,5 / 4,6 / 4,6 / 5,0) */ .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled=true] { color: var(--mt-ink-faint); } /* Judul golongan pada daftar bertingkat (mis. akun dikelompokkan per jenis) */ .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group { color: var(--mt-ink-soft); font-weight: 600; } /* Nilai yang SEDANG terpilih. Vendor memberinya biru #0d6efd — warna yang tidak ada di palet mana pun dan bertabrakan dengan aksen oranye saat pilihan itu juga sedang disorot. Diganti latar aksen samar dengan teks biasa: penandanya tetap jelas, kontrasnya tetap setinggi teks biasa, dan tidak ada dua warna kuat bersebelahan. */ .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) { background-color: var(--mt-accent-bg); color: var(--mt-ink); font-weight: 600; } /* Kotak pencarian di dalam dropdown ikut dipatok putih oleh vendor */ .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background-color: var(--mt-surface-alt); border-color: var(--mt-line); color: var(--mt-ink); } .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field::placeholder { color: var(--mt-ink-faint); } /* Baris jurnal & rincian faktur memakai kontrol berukuran kecil */ .journal-line .select2-container, .invoice-item .select2-container { font-size: .875rem; } /* Dropdown selalu di atas offcanvas/sticky topbar */ .select2-container--open { z-index: 1060; } .select2-container--bootstrap-5 .select2-dropdown { box-shadow: 0 .5rem 1rem rgba(32, 44, 75, .12); } /* -------------------------------------------------- Tambalan gelap Hal-hal yang tidak ikut berubah sendiri karena warnanya dipatok pada berkas pihak ketiga atau pada gambar, bukan pada variabel. */ html[data-skin="gelap"] { color-scheme: dark; /* bilah gulir, kalender & pemilih berkas bawaan */ } /* Tanda centang dan panah pada isian Bootstrap berupa gambar SVG hitam yang ditanam di dalam CSS — tidak terlihat di atas isian gelap */ html[data-skin="gelap"] .form-select { filter: none; } html[data-skin="gelap"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a6b3c2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } html[data-skin="gelap"] .btn-close { filter: invert(1) grayscale(1) brightness(2); } /* Select2 tidak punya mode gelap sama sekali; kotak pilihan majemuk dan tombol hapusnya masih memakai warna terang bawaannya */ html[data-skin="gelap"] .select2-container--bootstrap-5 .select2-selection__choice { background: var(--mt-surface-alt); border-color: var(--mt-line); color: var(--mt-ink); } html[data-skin="gelap"] .select2-container--bootstrap-5 .select2-search__field { color: var(--mt-ink); } html[data-skin="gelap"] .select2-container--bootstrap-5 .select2-selection__placeholder { color: var(--mt-ink-faint); } /* Tombol hapus pilihan (×) berupa gambar SVG di dalam CSS vendor: abu-abu #676a6d biasa, HITAM saat disentuh. Di palet gelap yang hitam itu hilang sama sekali — tombolnya masih bekerja, tapi tidak kelihatan justru pada saat kursor berada di atasnya. Warnanya ada di dalam data URI, jadi tidak bisa ditimpa lewat properti biasa; dibalik dengan filter. */ html[data-skin="gelap"] .select2-container--bootstrap-5 .select2-selection__clear { filter: invert(1) brightness(1.6); } /* Grafik Chart.js menggambar garis kisi dan label memakai warna yang diberikan lewat JS; nilai bawaannya gelap dan hilang di latar gelap. Diambil app.js dari variabel ini — lihat warnaGrafik(). */ html[data-skin="gelap"] { --app-chart-grid: #2a323d; --app-chart-tick: #a6b3c2; } :root { --app-chart-grid: #e9ecef; --app-chart-tick: #6b7280; } /* ------------------------------------------------------------- Cetak */ .print-header { border-bottom: 2px solid #000; margin-bottom: 1rem; padding-bottom: .6rem; } @media print { /* Palet dikembalikan ke putih-hitam apa pun pilihan di layar. Pastel yang enak dipandang justru boros tinta dan menghasilkan cetakan kelabu; laporan keuangan yang dicetak harus tegas. */ html, html[data-skin], html[data-skin="gelap"] body.app-ops, body.app-ops { --mt-bg: #fff; --mt-side: #fff; --mt-surface: #fff; --mt-surface-alt: #f2f2f2; --mt-line: #999; --mt-line-soft: #ccc; --mt-ink: #000; --mt-ink-soft: #333; --mt-ink-faint: #666; --mt-accent: #000; --mt-accent-deep: #000; --mt-accent-strong: #000; --mt-accent-bg: #fff; --mt-accent-on: #fff; color-scheme: light; } /* Mode gelap Bootstrap dinyalakan lewat atribut, dan atribut tidak dapat dicabut dari CSS. Variabelnya dikembalikan satu per satu supaya komponen bawaan tidak ikut tercetak gelap. */ html[data-bs-theme="dark"] { --bs-body-bg: #fff; --bs-body-color: #000; --bs-emphasis-color: #000; --bs-secondary-color: #333; --bs-secondary-color-rgb: 51, 51, 51; --bs-border-color: #999; --bs-tertiary-bg: #f2f2f2; } .no-print, .app-sidebar, .app-topbar, .select2-container { display: none !important; } .app-main { margin: 0; } .app-content { padding: 0; } .app-main > footer { display: none !important; } body { background: #fff; font-size: calc(var(--app-font-size, 15px) - 2px); } .card { border: 0; box-shadow: none; } .table { font-size: var(--app-report-font-size, 12px); } a[href]:after { content: ""; } }