/* ============================================================================ static/css/appearance.css — Preferensi tampilan per-user (Appearance Menu) ============================================================================ Bekerja MURNI lewat token: base.html merender ; file ini menerjemahkan atribut itu menjadi override token --accent / --ckd-font / font-size root. TIDAK ADA template yang perlu tahu fitur ini ada — itulah alasan tokenisasi F1. Nilai atribut DIJAMIN whitelist oleh server (routes/profile/ui_prefs.py). Default ('module' / 'default' / 'normal') sengaja TIDAK punya selector: tanpa override = tampilan bawaan, aman total bila fitur dimatikan. ==========================================================================*/ /* ---------- AKSEN GLOBAL (menimpa tema per-modul .adm.theme-*) ---------- Spesifisitas html[data]+.adm = (0,2,1) > .adm.theme-x (0,2,0). */ html[data-accent="teal"] .adm { --accent:#0d9488; --accent-ink:#0a6f64; --accent-weak:#e6f5f2; --accent-weak2:#cdeae5; } html[data-accent="violet"] .adm { --accent:#6d4ad8; --accent-ink:#5436ad; --accent-weak:#f0ecfd; --accent-weak2:#e2dbfa; } html[data-accent="rose"] .adm { --accent:#be4b6e; --accent-ink:#97354f; --accent-weak:#fbedf1; --accent-weak2:#f6dbe2; } html[data-accent="amber"] .adm { --accent:#b06a0f; --accent-ink:#8a530c; --accent-weak:#f7efdf; --accent-weak2:#eedfc2; } html[data-accent="ocean"] .adm { --accent:#15677a; --accent-ink:#104f5e; --accent-weak:#e4f0f3; --accent-weak2:#c8e1e7; } html[data-accent="slate"] .adm { --accent:#3f5170; --accent-ink:#2e3c54; --accent-weak:#eef1f6; --accent-weak2:#d8dfea; } /* ---------- FONT FAMILY (menimpa token --ckd-font di :root) ---------- */ /* dua token sekaligus: --ckd-font (halaman umum) + --font-sans (area konsol .adm) */ html[data-font="inter"] { --ckd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } html[data-font="system"] { --ckd-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } html[data-font="serif"] { --ckd-font: Georgia, 'Iowan Old Style', 'Times New Roman', serif; } html[data-font="inter"] .adm { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } html[data-font="system"] .adm { --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } html[data-font="serif"] .adm { --font-sans: Georgia, 'Iowan Old Style', 'Times New Roman', serif; } /* ---------- SKALA FONT (root font-size; seluruh rem ikut menskala) ---------- */ /* root (semua rem, termasuk konsol .adm yg berbasis rem) + body (design_system mematok body 14px dalam px, jadi wajib ditimpa eksplisit) */ html[data-fontsize="compact"] { font-size: 15px; } html[data-fontsize="large"] { font-size: 17.5px; } html[data-fontsize="compact"] body { font-size: 13px; } html[data-fontsize="large"] body { font-size: 15.5px; } /* ============================================================================ MODE GELAP (v2) — html[data-bs-theme="dark"] ============================================================================ Satu atribut menggerakkan DUA lapisan sekaligus: 1. Bootstrap 5.3 native dark (card, table, modal, form, dropdown otomatis). 2. Token permukaan CKD di bawah ini (design_system + admin_console sudah tertokenisasi penuh sejak F1 — kita hanya menimpa nilai variabelnya). Mode 'light' tidak punya selector = nilai bawaan (aman total). appearance.js yang memutuskan atribut: light/dark eksplisit, 'auto' ikut prefers-color-scheme OS (dengan listener perubahan realtime). */ /* --- Token global design_system --- */ html[data-bs-theme="dark"] { --ckd-bg:#0f1520; --ckd-surface:#171e2b; --ckd-border:#2a3345; --ckd-text:#e2e8f0; --ckd-text-muted:#94a3b8; --ckd-text-light:#64748b; } /* --- Token konsol admin (.adm) --- */ html[data-bs-theme="dark"] .adm { --app-bg:#0f1520; --surface:#171e2b; --surface-2:#1e2735; --line:#2a3345; --line-soft:#232c3d; --ink-900:#eef2f8; --ink-700:#c7d0de; --ink-500:#8fa0b8; --ink-400:#64748b; } /* Aksen "weak" bawaan terlalu terang utk latar gelap -> versi redup translusen */ html[data-bs-theme="dark"] .adm, html[data-bs-theme="dark"] .adm[class*="theme-"] { --accent-weak: color-mix(in srgb, var(--accent) 18%, #171e2b); --accent-weak2: color-mix(in srgb, var(--accent) 30%, #171e2b); --accent-ink: color-mix(in srgb, var(--accent) 70%, #ffffff); } /* Permukaan umum di luar token (header pill, badge terang, tabel putih) */ html[data-bs-theme="dark"] body { background-color: var(--ckd-bg); color: var(--ckd-text); } /* F8 AUDIT NOTE: !important pada blok dark-mode di bawah WAJIB DIPERTAHANKAN — sama seperti admin_console.css, ini meng-override Bootstrap utility classes (.bg-white, .text-dark, .shadow-sm) yang sendirinya ber-!important di Bootstrap 5. */ html[data-bs-theme="dark"] .bg-white { background-color: var(--ckd-surface) !important; } html[data-bs-theme="dark"] .bg-light, html[data-bs-theme="dark"] .table-light > *, html[data-bs-theme="dark"] thead.table-light th { background-color: var(--ckd-surface) !important; color: var(--ckd-text) !important; } html[data-bs-theme="dark"] .text-dark { color: var(--ckd-text) !important; } html[data-bs-theme="dark"] .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } /* Pill/swatch menu Tampilan mengikuti permukaan (perbaikan hardcode #fff v1) */ html[data-bs-theme="dark"] .appearance-pill { background: var(--ckd-surface); border-color: var(--ckd-border); color: var(--ckd-text); } html[data-bs-theme="dark"] .appearance-swatch.active { border-color:#fff; } /* Preview jenis font pada halaman /profile/pengaturan (kartu "Ag") */ .appearance-fprev--inter { font-family: 'Inter', sans-serif; } .appearance-fprev--system { font-family: system-ui, sans-serif; } .appearance-fprev--serif { font-family: Georgia, serif; } .appearance-fprev--default{ font-family: inherit; }