/* ========================================================================== dbmoon — lapisan tampilan di atas Bootstrap 5.3 (UI-01) Tema diatur lewat atribut data-bs-theme di : "light" atau "dark". Semua warna lewat token di bawah; komponen tidak pernah memakai warna mentah, supaya kedua tema selalu berpasangan. Palet senada dengan dokumentasi HTML. ========================================================================== */ :root, [data-bs-theme="light"] { --dbm-bg: #F3F5F7; --dbm-surface: #FFFFFF; --dbm-surface-2: #F8FAFB; --dbm-ink: #111823; --dbm-muted: #586374; --dbm-line: #D9DFE6; --dbm-accent: #2F5E8E; --dbm-accent-hover: #264D75; --dbm-accent-ink: #1D4169; --dbm-accent-soft: #E0E9F3; --dbm-on-accent: #FFFFFF; --dbm-ok: #2B7552; --dbm-ok-soft: #DFEFE6; --dbm-warn: #9E6300; --dbm-warn-soft: #F6ECD9; --dbm-danger: #AE3A31; --dbm-danger-soft: #F6E1DE; --dbm-shadow: 0 1px 2px rgba(15, 30, 50, .06), 0 8px 24px -14px rgba(15, 30, 50, .22); } [data-bs-theme="dark"] { --dbm-bg: #0E1319; --dbm-surface: #151C24; --dbm-surface-2: #1A222C; --dbm-ink: #E2E8EF; --dbm-muted: #94A0AF; --dbm-line: #25303B; --dbm-accent: #7DAEDD; --dbm-accent-hover: #97BFE5; --dbm-accent-ink: #A9CAEC; --dbm-accent-soft: #18283A; --dbm-on-accent: #0B1117; --dbm-ok: #6DC199; --dbm-ok-soft: #15291F; --dbm-warn: #E3A64E; --dbm-warn-soft: #302410; --dbm-danger: #E7857A; --dbm-danger-soft: #361C19; --dbm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -14px rgba(0, 0, 0, .7); } /* ---- jembatan ke variabel Bootstrap */ :root, [data-bs-theme] { --bs-body-bg: var(--dbm-bg); --bs-body-color: var(--dbm-ink); --bs-emphasis-color: var(--dbm-ink); --bs-secondary-color: var(--dbm-muted); --bs-tertiary-bg: var(--dbm-surface-2); --bs-border-color: var(--dbm-line); --bs-link-color: var(--dbm-accent-ink); --bs-link-hover-color: var(--dbm-accent); --bs-focus-ring-color: color-mix(in srgb, var(--dbm-accent) 35%, transparent); --bs-body-font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --bs-font-monospace: "Cascadia Mono", ui-monospace, "JetBrains Mono", Consolas, monospace; --bs-body-font-size: .9375rem; } body { background: var(--dbm-bg); color: var(--dbm-ink); min-height: 100vh; display: flex; flex-direction: column; } a { text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--dbm-accent); outline-offset: 2px; } .mono, code, .kode { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; } code { color: var(--dbm-accent-ink); background: var(--dbm-accent-soft); padding: .05rem .35rem; border-radius: .25rem; font-size: .85em; } .text-muted, .text-body-secondary { color: var(--dbm-muted) !important; } .label-kecil { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dbm-muted); font-weight: 600; } h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.01em; } /* ---- tombol & form */ .btn-primary { --bs-btn-bg: var(--dbm-accent); --bs-btn-border-color: var(--dbm-accent); --bs-btn-color: var(--dbm-on-accent); --bs-btn-hover-bg: var(--dbm-accent-hover); --bs-btn-hover-border-color: var(--dbm-accent-hover); --bs-btn-hover-color: var(--dbm-on-accent); --bs-btn-active-bg: var(--dbm-accent-hover); --bs-btn-active-border-color: var(--dbm-accent-hover); --bs-btn-active-color: var(--dbm-on-accent); --bs-btn-disabled-bg: var(--dbm-accent); --bs-btn-disabled-border-color: var(--dbm-accent); --bs-btn-disabled-color: var(--dbm-on-accent); } .btn-outline-secondary { --bs-btn-color: var(--dbm-muted); --bs-btn-border-color: var(--dbm-line); --bs-btn-hover-bg: var(--dbm-surface-2); --bs-btn-hover-color: var(--dbm-ink); --bs-btn-hover-border-color: var(--dbm-line); --bs-btn-active-bg: var(--dbm-accent-soft); --bs-btn-active-color: var(--dbm-accent-ink); --bs-btn-active-border-color: var(--dbm-accent); } .form-control, .form-select { background-color: var(--dbm-surface); border-color: var(--dbm-line); color: var(--dbm-ink); } .form-control:focus, .form-select:focus { background-color: var(--dbm-surface); color: var(--dbm-ink); border-color: var(--dbm-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--dbm-accent) 25%, transparent); } .form-control::placeholder { color: color-mix(in srgb, var(--dbm-muted) 70%, transparent); } /* ---- navigasi atas */ .dbm-nav { background: var(--dbm-surface); border-bottom: 1px solid var(--dbm-line); padding-block: .5rem; } .dbm-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; color: var(--dbm-ink); text-decoration: none; letter-spacing: -.02em; } .dbm-brand:hover { color: var(--dbm-ink); } .dbm-brand .bulan { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--dbm-accent-soft); color: var(--dbm-accent-ink); } .dbm-nav .nav-link { color: var(--dbm-muted); border-radius: .4rem; padding: .4rem .7rem; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } .dbm-nav .nav-link:hover { color: var(--dbm-ink); background: var(--dbm-surface-2); } .dbm-nav .nav-link.active { color: var(--dbm-accent-ink); background: var(--dbm-accent-soft); font-weight: 600; } .dbm-nav .nav-link.disabled { color: color-mix(in srgb, var(--dbm-muted) 55%, transparent); } .fase { font-family: var(--bs-font-monospace); font-size: .65rem; padding: .05rem .3rem; border-radius: .25rem; border: 1px solid var(--dbm-line); color: var(--dbm-muted); } .navbar-toggler { border-color: var(--dbm-line); color: var(--dbm-ink); } .navbar-toggler:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--dbm-accent) 25%, transparent); } .dropdown-menu { --bs-dropdown-bg: var(--dbm-surface); --bs-dropdown-border-color: var(--dbm-line); --bs-dropdown-link-color: var(--dbm-ink); --bs-dropdown-link-hover-bg: var(--dbm-surface-2); --bs-dropdown-link-hover-color: var(--dbm-ink); --bs-dropdown-link-active-bg: var(--dbm-accent-soft); --bs-dropdown-link-active-color: var(--dbm-accent-ink); --bs-dropdown-header-color: var(--dbm-muted); --bs-dropdown-divider-bg: var(--dbm-line); box-shadow: var(--dbm-shadow); } /* ---- pemilih tema: tiga tombol sejajar */ .pilih-tema { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--dbm-line); border-radius: 999px; background: var(--dbm-surface-2); } .pilih-tema button { border: 0; background: transparent; color: var(--dbm-muted); border-radius: 999px; padding: .25rem .6rem; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; line-height: 1.2; } .pilih-tema button:hover { color: var(--dbm-ink); } .pilih-tema button.active { background: var(--dbm-surface); color: var(--dbm-accent-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: 600; } @media (max-width: 575.98px) { .pilih-tema .teks { display: none; } } /* di navbar cukup ikon (judul tombol tetap terbaca pembaca layar); label penuh di layar masuk */ .dbm-nav .pilih-tema .teks { display: none; } .dbm-nav .pilih-tema button { padding: .3rem .5rem; } /* ---- panel & tabel */ .panel { background: var(--dbm-surface); border: 1px solid var(--dbm-line); border-radius: .6rem; } .panel-kepala { padding: .85rem 1.1rem; border-bottom: 1px solid var(--dbm-line); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .panel-kepala h2 { font-size: 1rem; margin: 0; font-weight: 600; } .panel-isi { padding: 1rem 1.1rem; } .tabel-bungkus { overflow-x: auto; } .table { --bs-table-bg: transparent; --bs-table-color: var(--dbm-ink); --bs-table-border-color: var(--dbm-line); --bs-table-hover-bg: var(--dbm-surface-2); --bs-table-hover-color: var(--dbm-ink); margin: 0; font-size: .875rem; } .table thead th { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--dbm-muted); font-weight: 600; white-space: nowrap; background: var(--dbm-surface); } .table td, .table th { padding: .6rem 1.1rem; vertical-align: top; } /* ---- lencana status: warna semantik terpisah dari aksen */ .lencana { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; } .lencana::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; } .lencana-ok { background: var(--dbm-ok-soft); color: var(--dbm-ok); } .lencana-warn { background: var(--dbm-warn-soft); color: var(--dbm-warn); } .lencana-bahaya { background: var(--dbm-danger-soft); color: var(--dbm-danger); } .lencana-netral { background: var(--dbm-surface-2); color: var(--dbm-muted); border: 1px solid var(--dbm-line); } /* ---- pesan */ .alert { border-radius: .5rem; } .alert-danger { --bs-alert-bg: var(--dbm-danger-soft); --bs-alert-color: var(--dbm-danger); --bs-alert-border-color: color-mix(in srgb, var(--dbm-danger) 30%, transparent); } .alert-success { --bs-alert-bg: var(--dbm-ok-soft); --bs-alert-color: var(--dbm-ok); --bs-alert-border-color: color-mix(in srgb, var(--dbm-ok) 30%, transparent); } .alert-info { --bs-alert-bg: var(--dbm-accent-soft); --bs-alert-color: var(--dbm-accent-ink); --bs-alert-border-color: color-mix(in srgb, var(--dbm-accent) 30%, transparent); } /* ---- halaman masuk & OTP */ .masuk-latar { flex: 1; display: grid; place-items: center; padding-block: 2rem; background: radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--dbm-accent) 12%, transparent), transparent 70%), var(--dbm-bg); } .masuk-kartu { width: 100%; max-width: 25rem; background: var(--dbm-surface); border: 1px solid var(--dbm-line); border-radius: .8rem; box-shadow: var(--dbm-shadow); padding: 1.75rem; } .masuk-kartu.lebar { max-width: 34rem; } .masuk-kartu h1 { font-size: 1.35rem; font-weight: 700; margin-bottom: .25rem; } .kode-otp { font-family: var(--bs-font-monospace); font-size: 1.6rem; letter-spacing: .5em; text-align: center; padding-left: .5em; } .qr { background: #FFFFFF; /* QR harus tetap gelap di atas putih agar terbaca kamera, di tema apa pun */ padding: .6rem; border-radius: .5rem; border: 1px solid var(--dbm-line); width: max-content; max-width: 100%; } .qr svg { display: block; max-width: 100%; height: auto; } .rahasia { font-family: var(--bs-font-monospace); font-size: .9rem; word-spacing: .15rem; background: var(--dbm-surface-2); border: 1px dashed var(--dbm-line); border-radius: .4rem; padding: .5rem .7rem; word-break: break-word; } .langkah { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; counter-reset: langkah; } .langkah > li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; counter-increment: langkah; } .langkah > li::before { content: counter(langkah); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--dbm-accent-soft); color: var(--dbm-accent-ink); } /* ---- beranda */ .sapaan h1 { font-size: 1.5rem; font-weight: 700; margin: 0; } .fakta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: 0; font-size: .9rem; } .fakta dt { color: var(--dbm-muted); font-weight: 400; } .fakta dd { margin: 0; } .tahap { list-style: none; margin: 0; padding: 0; } .tahap li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .75rem; align-items: baseline; padding: .7rem 1.1rem; border-top: 1px solid var(--dbm-line); } .tahap li:first-child { border-top: 0; } .tahap .kode { color: var(--dbm-muted); font-size: .8rem; } .tahap .judul { font-weight: 600; } .tahap .ket { display: block; font-size: .83rem; color: var(--dbm-muted); font-weight: 400; } .kaki { color: var(--dbm-muted); font-size: .8rem; border-top: 1px solid var(--dbm-line); padding-block: .9rem; margin-top: 2.5rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .kolom-perangkat { max-width: 18rem; } /* ========================================================================== F2 — Daftar Database ========================================================================== */ .alert-warning { --bs-alert-bg: var(--dbm-warn-soft); --bs-alert-color: var(--dbm-warn); --bs-alert-border-color: color-mix(in srgb, var(--dbm-warn) 30%, transparent); } .teks-bahaya { color: var(--dbm-danger) !important; } .lencana-aksen { background: var(--dbm-accent-soft); color: var(--dbm-accent-ink); } .lencana-aksen::before { display: none; } /* tab bagian: garis bawah, bukan tombol, supaya beda dari menu utama */ .tab-dbm { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; border-bottom: 1px solid var(--dbm-line); } .tab-dbm a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .1rem; margin-bottom: -1px; color: var(--dbm-muted); text-decoration: none; border-bottom: 2px solid transparent; } .tab-dbm a:hover { color: var(--dbm-ink); } .tab-dbm a.active { color: var(--dbm-accent-ink); border-bottom-color: var(--dbm-accent); font-weight: 600; } .kosong { padding: 2.5rem 1.1rem; text-align: center; color: var(--dbm-muted); } .kosong .bi { font-size: 2rem; display: block; margin-bottom: .5rem; color: color-mix(in srgb, var(--dbm-muted) 60%, transparent); } .kosong p { margin: 0 auto; max-width: 42ch; } .peta-kecil td, .peta-kecil th { padding-block: .45rem; } .peta-kecil .angka { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--dbm-ink); } .peta-kecil .angka.nol { color: color-mix(in srgb, var(--dbm-muted) 55%, transparent); font-weight: 400; } .peta-kecil .angka:hover { color: var(--dbm-accent-ink); text-decoration: underline; } fieldset.panel-isi { margin: 0; min-width: 0; } fieldset.panel-isi legend { float: none; width: auto; margin-bottom: .6rem; } .border-bottom, .border-top { border-color: var(--dbm-line) !important; } .form-check-input { background-color: var(--dbm-surface); border-color: var(--dbm-line); } .form-check-input:checked { background-color: var(--dbm-accent); border-color: var(--dbm-accent); } .form-text { color: var(--dbm-muted); } .btn-link.teks-bahaya { text-decoration: none; } .btn-link.teks-bahaya:hover { text-decoration: underline; } button[aria-busy="true"] { cursor: progress; opacity: .75; }