/* ========================================================================= FFEWES — THEME OVERLAY (untuk halaman mockup) ------------------------------------------------------------------------- Halaman mockup (01a/01b/02a/02b/03a/04a/05a/05b/06a/Network Graph) mendefinisikan warnanya lewat CSS custom properties di :root. Overlay ini menimpa variabel-variabel tersebut dengan variabel tema FFEWESThemes (--l-* untuk halaman terang, --d-* untuk halaman gelap), sehingga semua halaman ikut berubah saat pengguna mengganti tema di Landing Page. Class penanda: - : halaman terang (04a, 05a, 05b, Network Graph) - : halaman gelap (01a, 01b, 02a, 02b, 03a, 06a) Kontras dijaga: teks utama selalu memakai --l-strong/--l-ink atau --d-text/--d-ink (terang di atas panel gelap), bukan warna senada. ========================================================================= */ /* ------------------------- halaman TERANG ------------------------- */ body.ff-light { --bg: var(--l-bg) !important; --navy: var(--l-headline) !important; --navy2: var(--l-headline2) !important; --ink: var(--l-strong) !important; --mute: var(--l-soft) !important; --muted: var(--l-soft) !important; --line: var(--l-line) !important; --card: var(--l-card) !important; --panel: var(--l-bg2) !important; --paper: var(--l-bg) !important; --blue: var(--l-accent) !important; --mint: var(--l-accent2) !important; --yellow: var(--l-warn) !important; --fitur: var(--l-accent) !important; --data: var(--l-accent2) !important; --outs: var(--l-warn) !important; --outf: var(--l-warn) !important; background: var(--l-bg) !important; color: var(--l-strong) !important; } /* ------------------------- halaman GELAP ------------------------- */ body.ff-dark { --bg: var(--d-bg) !important; --bg2: var(--d-panel2) !important; --chrome: var(--d-panel) !important; --panel: var(--d-panel) !important; --panel2: var(--d-panel3) !important; --line: var(--d-border) !important; --line2: var(--d-border2) !important; --border: var(--d-border2) !important; --grid: var(--d-border) !important; --ink: var(--d-text) !important; --ink2: var(--d-muted) !important; --text: var(--d-text) !important; --muted: var(--d-muted) !important; --cyan: var(--d-cyan) !important; --cyanb: var(--d-green) !important; --green: var(--d-green) !important; --yellow: var(--d-yellow) !important; --orange: var(--d-orange) !important; --red: var(--d-red) !important; --white: var(--d-text) !important; --forecast: var(--d-orange) !important; --current: var(--d-yellow) !important; --predavg: var(--d-yellow) !important; --magenta: var(--d-red) !important; --blue: var(--d-cyan) !important; --red-deep: var(--d-red-deep) !important; background: var(--d-bg) !important; color: var(--d-text) !important; } /* Teks sekunder tetap cukup kontras (di atas panel yang sesuai) */ body.ff-light ::placeholder { color: var(--l-faint) !important; } body.ff-dark ::placeholder { color: var(--d-faint) !important; } /* ========================================================================= OVERRIDE KHUSUS — boks info PCH (H) & kontrol bar dashboard (01a/01b) ========================================================================= */ /* --- Boks info hujan kumulatif (klik PCH (H)) --- */ body.ff-dark .spop, body.ff-dark .spcard, body.ff-dark .spspark { background: var(--d-panel) !important; color: var(--d-text) !important; border-color: var(--d-border2) !important; } body.ff-dark .spcard { background: var(--d-panel3) !important; } body.ff-dark .spspark { background: var(--d-panel2) !important; } body.ff-dark .sphead { border-bottom-color: var(--d-border2) !important; } body.ff-dark .spsub { color: var(--d-muted) !important; } body.ff-dark .sprow { border-bottom-color: rgba(255, 255, 255, .12) !important; color: var(--d-muted) !important; } body.ff-dark .sprow b { color: var(--d-text) !important; } /* --- Kontrol bar: tombol "Perbarui Data & Informasi" lebih ringkas, agar tidak bertumpuk dengan tombol "Putar" --- */ body.ff-dark .runbox { max-width: 196px !important; flex-basis: 196px !important; min-width: 0 !important; } body.ff-dark #btn-model { min-height: 30px !important; height: 30px !important; padding: 2px 10px !important; font-size: 11.5px !important; letter-spacing: .1px !important; white-space: nowrap !important; } body.ff-dark #mlabel { white-space: nowrap !important; } body.ff-dark .runmeta { font-size: 8.5px !important; line-height: 1.05 !important; } /* --- Container layout dashboard 01a/01b (cadangan JS dominate) --- */ body.ff-dark .rail, body.ff-dark .top, body.ff-dark .app, body.ff-dark .mapcol { background: var(--d-bg) !important; } /* ========================================================================= MODE TERANG di dashboard (01a/01b/02a/02b/03a/06a) — tema cerah Saat body.ff-dark + ff-theme-light: seluruh kontainer & kartu dipaksa ke palet TERANG tema (--l-*), persis karakter landing page. ========================================================================= */ body.ff-dark.ff-theme-light { background: var(--l-bg) !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .top, body.ff-dark.ff-theme-light .ctrl, body.ff-dark.ff-theme-light .rail, body.ff-dark.ff-theme-light .app, body.ff-dark.ff-theme-light .mapcol, body.ff-dark.ff-theme-light .vwrap, body.ff-dark.ff-theme-light .dasmaintitle, body.ff-dark.ff-theme-light .leftcards, body.ff-dark.ff-theme-light .sumwrap { background: var(--l-bg) !important; color: var(--l-strong) !important; background-image: none !important; } /* Kartu & panel dalam */ body.ff-dark.ff-theme-light .rail .card, body.ff-dark.ff-theme-light .rail .ch, body.ff-dark.ff-theme-light .rail .cb, body.ff-dark.ff-theme-light .rail .warn, body.ff-dark.ff-theme-light .rail .opmini, body.ff-dark.ff-theme-light .rail .opgroup, body.ff-dark.ff-theme-light .rail .opghead, body.ff-dark.ff-theme-light .rail .rightimpact .actualmini, body.ff-dark.ff-theme-light .rail .impactstat, body.ff-dark.ff-theme-light .rail .impactchip, body.ff-dark.ff-theme-light .left-summary-card, body.ff-dark.ff-theme-light .ctrl .tl, body.ff-dark.ff-theme-light .ctrl .isowrap, body.ff-dark.ff-theme-light .ctrl .runbox, body.ff-dark.ff-theme-light .ctrl .isorange { background: var(--l-card) !important; background-image: none !important; border-color: var(--l-line) !important; color: var(--l-strong) !important; } /* Teks & ikon */ body.ff-dark.ff-theme-light .rail, body.ff-dark.ff-theme-light .top, body.ff-dark.ff-theme-light .ctrl, body.ff-dark.ff-theme-light .leftcards, body.ff-dark.ff-theme-light .dasmaintitle { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .runmeta, body.ff-dark.ff-theme-light .tread, body.ff-dark.ff-theme-light .sub, body.ff-dark.ff-theme-light .spsub { color: var(--l-mid) !important; } /* Peta: bingkai area ikut terang */ body.ff-dark.ff-theme-light .mapcol { background: var(--l-bg) !important; } /* ========================================================================= KONTRAST & OVERFLOW (semua mode) ========================================================================= */ /* -- Mode terang di dashboard: paksa semua teks ke warna gelap kontras -- */ body.ff-dark.ff-theme-light .top, body.ff-dark.ff-theme-light .rail, body.ff-dark.ff-theme-light .ctrl, body.ff-dark.ff-theme-light .mapcol { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .rail *, body.ff-dark.ff-theme-light .ctrl *, body.ff-dark.ff-theme-light .top * { border-color: var(--l-line) !important; } body.ff-dark.ff-theme-light .rail .ch, body.ff-dark.ff-theme-light .rail .wshead, body.ff-dark.ff-theme-light .opghead { background: var(--l-card) !important; color: var(--l-strong) !important; background-image: none !important; } body.ff-dark.ff-theme-light .rail .card .ch b, body.ff-dark.ff-theme-light .rail .cb b, body.ff-dark.ff-theme-light .leftcards b, body.ff-dark.ff-theme-light .runmeta, body.ff-dark.ff-theme-light .tread, body.ff-dark.ff-theme-light .sub, body.ff-dark.ff-theme-light .spsub { color: var(--l-strong) !important; } /* -- Mode gelap: teks sekunder di atas panel gelap tetap kontras -- */ body.ff-dark .rail .cb b, body.ff-dark .runmeta, body.ff-dark .tread, body.ff-dark .spsub, body.ff-dark .sprow { color: var(--d-muted) !important; } /* -- Proteksi overflow umum (semua halaman & mode) -- */ body.ff-dark .top .ws, body.ff-dark .sendbox, body.ff-dark .fdrop, body.ff-dark.ff-theme-light .top .ws, body.ff-dark.ff-theme-light .sendbox, body.ff-dark.ff-theme-light .fdrop { min-width: 0 !important; max-width: 100% !important; width: auto !important; } body.ff-dark .rail, body.ff-dark.ff-theme-light .rail { overflow-x: hidden !important; } body.ff-dark .frow .mn, body.ff-dark .chip, body.ff-dark.ff-theme-light .frow .mn, body.ff-dark.ff-theme-light .chip { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important; } body.ff-dark .opgroup .opghead, body.ff-dark.ff-theme-light .opgroup .opghead { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } body.ff-dark .btn, body.ff-dark.ff-theme-light .btn { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* ========================================================================= KONTRAST SPESIFIK (jam, tombol, runmodel) — v11 ========================================================================= */ /* Jam realtime pojok kanan atas — kuning #FFEA00 tak terbaca di mode terang */ body.ff-dark.ff-theme-light .clock, body.ff-dark.ff-theme-light .clock b, body.ff-dark.ff-theme-light .clock span { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .clock { border-left-color: var(--l-line) !important; } /* Tombol mode Prediksi/Aktual (.vbtn) — jaga kontras teks di kedua mode */ body.ff-dark .vbtn.pred { color: #5c0e0e !important; } /* teks merah tua di bg kuning */ body.ff-dark.ff-theme-light .vbtn.pred { color: #5c0e0e !important; } body.ff-dark .vbtn.actual { color: #ffffff !important; } /* teks putih di bg biru tua */ body.ff-dark.ff-theme-light .vbtn.actual { color: var(--l-strong) !important; } /* terang: teks gelap */ /* Tombol AKTIF (bg kuning) — aturan .vbtn.actual/.vbtn.pred di atas memakai selector .actual/.pred yang juga cocok dengan tombol AKTIF (.actual-active / .pred-active) sehingga font bisa jadi PUTIH di atas bg kuning pada tema gelap (mis. Navy Operasional). Kunci tombol AKTIF kembali ke merah tua asli desain. */ body.ff-dark .vbtn.actual-active, body.ff-dark.ff-theme-light .vbtn.actual-active, body.ff-dark .actual-page .vbtn.actual-active, body.ff-dark.ff-theme-light .actual-page .vbtn.actual-active, body.ff-dark .vbtn.pred-active, body.ff-dark.ff-theme-light .vbtn.pred-active, body.ff-dark .forecast-page .vbtn.pred-active, body.ff-dark.ff-theme-light .forecast-page .vbtn.pred-active{ color: #7a1212 !important; text-shadow: none !important; } /* Tombol "Perbarui" (btn-model) & teks di dalamnya */ body.ff-dark #btn-model { color: #04202a !important; } /* bg cyan terang, teks gelap */ body.ff-dark.ff-theme-light #btn-model { color: #04202a !important; } /* Run model Otomatis (01b) — cegah luber dari kotak */ body.ff-dark .runbox, body.ff-dark.ff-theme-light .runbox { min-width: 0 !important; max-width: 100% !important; flex-basis: auto !important; } body.ff-dark .runmeta, body.ff-dark.ff-theme-light .runmeta { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; max-width: 100% !important; font-size: 8px !important; line-height: 1.15 !important; } body.ff-dark .runmeta b, body.ff-dark.ff-theme-light .runmeta b { color: var(--d-yellow) !important; } body.ff-dark.ff-theme-light .runmeta b { color: var(--l-warn) !important; } /* ========================================================================= v12 — MODE TERANG: paksa SEMUA teks kontras (menyeluruh) Aturan ini menangkap "masih banyak teks senada" sekaligus: semua elemen teks di rail/ctrl/top dipaksa gelap, lalu status penting dikembalikan warnanya di bawah (urutan cascade). ========================================================================= */ body.ff-dark.ff-theme-light .rail :where(h1,h2,h3,h4,h5,h6,p,span,div,b,strong,small,label,td,th,li,a,button), body.ff-dark.ff-theme-light .ctrl :where(h1,h2,h3,h4,h5,h6,p,span,div,b,strong,small,label,td,th,li,a,button), body.ff-dark.ff-theme-light .top :where(h1,h2,h3,h4,h5,h6,p,span,div,b,strong,small,label,td,th,li,a,button), body.ff-dark.ff-theme-light .dasmaintitle :where(span,div,b), body.ff-dark.ff-theme-light .leftcards :where(span,div,b) { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .rail .runmeta, body.ff-dark.ff-theme-light .ctrl .runmeta, body.ff-dark.ff-theme-light .spsub, body.ff-dark.ff-theme-light .tread, body.ff-dark.ff-theme-light .sub { color: var(--l-mid) !important; } /* status penting — kembalikan warna khas (tetap kontras di bg terang) */ body.ff-dark.ff-theme-light .pstat.normal b { color: #0d7a4f !important; } body.ff-dark.ff-theme-light .pstat.waspada b { color: #9b7600 !important; } body.ff-dark.ff-theme-light .pstat.siaga b { color: #b45309 !important; } body.ff-dark.ff-theme-light .pstat.awas b { color: #c0392b !important; } body.ff-dark.ff-theme-light .sstat.light b { color: #0d7a4f !important; } body.ff-dark.ff-theme-light .sstat.med b { color: #967400 !important; } body.ff-dark.ff-theme-light .sstat.heavy b { color: #b45309 !important; } body.ff-dark.ff-theme-light .sstat.vheavy b { color: #c0392b !important; } body.ff-dark.ff-theme-light .sstat.extreme b { color: #704bb1 !important; } body.ff-dark.ff-theme-light .critbadge, body.ff-dark.ff-theme-light .warn-status, body.ff-dark.ff-theme-light .status-chip { font-weight: 900 !important; } /* ========================================================================= v13 — POPUP PCH/PDA (klik marker): label durasi (5 mnt/1 jam/3 jam/dst) ========================================================================= */ /* Mode terang: boks jadi terang, label abu -> gelap kontras */ body.ff-dark.ff-theme-light .spop, body.ff-dark.ff-theme-light .spcard, body.ff-dark.ff-theme-light .spspark { background: var(--l-card) !important; background-image: none !important; border-color: var(--l-line) !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .sprow span, body.ff-dark.ff-theme-light .spcard .k, body.ff-dark.ff-theme-light .spsub, body.ff-dark.ff-theme-light .sphead, body.ff-dark.ff-theme-light .qphead .t, body.ff-dark.ff-theme-light .qphead .u { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .sprow b, body.ff-dark.ff-theme-light .qpstatus .sprow b { color: var(--l-headline) !important; } body.ff-dark.ff-theme-light .spbadge { color: var(--l-headline) !important; background: var(--l-bg2) !important; } /* Mode gelap: label abu tetap kontras di panel gelap */ body.ff-dark .sprow span, body.ff-dark .spcard .k, body.ff-dark .spsub { color: var(--d-muted) !important; } body.ff-dark .sprow b, body.ff-dark .qpstatus .sprow b { color: var(--d-text) !important; } /* ========================================================================= v14 — RUN MODEL (overflow) & TEKS KUNING di popup (mode terang) ========================================================================= */ /* "Run model Otomatis: 07:00 & 19:00 WIB" — .rline masih nowrap, paksa wrap */ body.ff-dark .rline, body.ff-dark.ff-theme-light .rline { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; display: block !important; } body.ff-dark .runbox, body.ff-dark.ff-theme-light .runbox { min-width: 0 !important; max-width: 100% !important; flex: 0 1 auto !important; overflow: hidden !important; } body.ff-dark .runmeta, body.ff-dark.ff-theme-light .runmeta { max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* Teks kuning di popup (R24, catatan) — mode terang -> gelap kontras */ body.ff-dark.ff-theme-light .r24head .t, body.ff-dark.ff-theme-light .r24note, body.ff-dark.ff-theme-light .qphead .u { color: var(--l-strong) !important; text-shadow: none !important; } /* Mode gelap: kuning tetap (kontras di panel gelap) */ body.ff-dark .r24head .t, body.ff-dark .r24note { color: #ffd400 !important; } /* ========================================================================= v15 — RUN MODEL: paksa 2 baris & font kecil (kalahkan nowrap spesifik) ========================================================================= */ body.ff-dark .forecast-page .runmeta .rline, body.ff-dark .actual-page .runmeta .rline, body.ff-dark.ff-theme-light .forecast-page .runmeta .rline, body.ff-dark.ff-theme-light .actual-page .runmeta .rline { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; display: block !important; font-size: 8px !important; line-height: 1.15 !important; max-width: 100% !important; } body.ff-dark .forecast-page .runmeta, body.ff-dark .actual-page .runmeta, body.ff-dark.ff-theme-light .forecast-page .runmeta, body.ff-dark.ff-theme-light .actual-page .runmeta { font-size: 8px !important; line-height: 1.15 !important; overflow-wrap: anywhere !important; word-break: break-word !important; max-width: 100% !important; overflow: visible !important; } body.ff-dark .forecast-page .runmeta b, body.ff-dark .actual-page .runmeta b, body.ff-dark.ff-theme-light .forecast-page .runmeta b, body.ff-dark.ff-theme-light .actual-page .runmeta b { font-size: 8px !important; } body.ff-dark .forecast-page .runbox, body.ff-dark .actual-page .runbox, body.ff-dark.ff-theme-light .forecast-page .runbox, body.ff-dark.ff-theme-light .actual-page .runbox { min-width: 0 !important; max-width: 100% !important; flex: 0 1 auto !important; overflow: visible !important; } /* ========================================================================= v16 — RUN MODEL (final): font 7.5px + wrap paksa, semua kombinasi class ========================================================================= */ body.ff-dark .forecast-page .runmeta .rline, body.ff-dark .actual-page .runmeta .rline, body.ff-dark .forecast-page .runmeta .rline:first-child, body.ff-dark .actual-page .runmeta .rline:first-child, body.ff-dark.ff-theme-light .forecast-page .runmeta .rline, body.ff-dark.ff-theme-light .actual-page .runmeta .rline, body.ff-dark.ff-theme-light .forecast-page .runmeta .rline:first-child, body.ff-dark.ff-theme-light .actual-page .runmeta .rline:first-child { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; display: block !important; line-height: 1.15 !important; max-width: 100% !important; } body.ff-dark .forecast-page .runmeta, body.ff-dark .actual-page .runmeta, body.ff-dark.ff-theme-light .forecast-page .runmeta, body.ff-dark.ff-theme-light .actual-page .runmeta { overflow: visible !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; line-height: 1.15 !important; } body.ff-dark .forecast-page .runbox, body.ff-dark .actual-page .runbox, body.ff-dark.ff-theme-light .forecast-page .runbox, body.ff-dark.ff-theme-light .actual-page .runbox { height: auto !important; min-height: 0 !important; overflow: visible !important; min-width: 0 !important; max-width: 100% !important; flex: 0 1 auto !important; } /* ========================================================================= v18 — KETERANGAN PETA (details.leftlegend): jangan pernah hitam ========================================================================= */ /* Mode terang: latar & font legenda selalu terang */ body.ff-dark.ff-theme-light .leftlegend, body.ff-dark.ff-theme-light .leftlegend .cb, body.ff-dark.ff-theme-light .leftlegend .llbody { background: var(--l-card) !important; background-image: none !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .leftlegend .llitem, body.ff-dark.ff-theme-light .leftlegend .llriveritem, body.ff-dark.ff-theme-light .leftlegend .lllayeritem, body.ff-dark.ff-theme-light .leftlegend .llisoitem, body.ff-dark.ff-theme-light .leftlegend .lladminitem { background: var(--l-card) !important; background-image: none !important; border-color: var(--l-line) !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .leftlegend .lab2, body.ff-dark.ff-theme-light .leftlegend .cap, body.ff-dark.ff-theme-light .leftlegend .txt, body.ff-dark.ff-theme-light .leftlegend .llsubhd, body.ff-dark.ff-theme-light .leftlegend .llisohead, body.ff-dark.ff-theme-light .leftlegend .llhead { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .leftlegend .lltgl { background: var(--l-bg2) !important; color: var(--l-strong) !important; border-color: var(--l-line) !important; } /* Mode gelap: teks legenda kontras di panel gelap */ body.ff-dark .leftlegend .llitem, body.ff-dark .leftlegend .llriveritem, body.ff-dark .leftlegend .lllayeritem, body.ff-dark .leftlegend .llisoitem, body.ff-dark .leftlegend .lladminitem { color: var(--d-muted) !important; } body.ff-dark .leftlegend .lab2, body.ff-dark .leftlegend .cap { color: var(--d-text) !important; } /* ========================================================================= v19 — KETERANGAN PETA: tombol ON/OFF (stationtoggle/rivertoggle/isomodebtn) Mode terang: tombol dibuat terang + teks gelap agar tidak jadi boks gelap. ========================================================================= */ body.ff-dark.ff-theme-light .leftlegend .stationtoggle, body.ff-dark.ff-theme-light .leftlegend .rivertoggle, body.ff-dark.ff-theme-light .leftlegend .isomodebtn, body.ff-dark.ff-theme-light .leftlegend .lltgl { background: var(--l-bg2) !important; background-image: none !important; color: var(--l-strong) !important; border-width: 1.5px !important; box-shadow: none !important; text-shadow: none !important; } body.ff-dark.ff-theme-light .leftlegend .stationtoggle.on, body.ff-dark.ff-theme-light .leftlegend .rivertoggle.on, body.ff-dark.ff-theme-light .leftlegend .isomodebtn.on { background: var(--l-accent-soft) !important; background-image: none !important; color: var(--l-accent-ink) !important; border-color: var(--l-accent) !important; } body.ff-dark.ff-theme-light .leftlegend .stationtoggle.off, body.ff-dark.ff-theme-light .leftlegend .rivertoggle.off, body.ff-dark.ff-theme-light .leftlegend .isomodebtn.off { background: var(--l-bg2) !important; background-image: none !important; color: var(--l-soft) !important; border-color: var(--l-faint) !important; } body.ff-dark.ff-theme-light .leftlegend .stationtoggle.historytoggle.on { background: var(--l-accent-soft) !important; color: var(--l-accent-ink) !important; border-color: var(--l-accent) !important; } body.ff-dark.ff-theme-light .leftlegend .stationtoggle.historytoggle.off { background: var(--l-bg2) !important; color: var(--l-soft) !important; border-color: var(--l-faint) !important; } /* ========================================================================= v20 — PANEL KIRI/KANAN saat slider: elemen baru ikut tema (mode terang) ========================================================================= */ body.ff-dark.ff-theme-light .leftcards, body.ff-dark.ff-theme-light .sumwrap, body.ff-dark.ff-theme-light .wsbox, body.ff-dark.ff-theme-light .impactbox, body.ff-dark.ff-theme-light .opgroup, body.ff-dark.ff-theme-light .opghead, body.ff-dark.ff-theme-light .rightimpact, body.ff-dark.ff-theme-light .sendbox, body.ff-dark.ff-theme-light .fdrop { background: var(--l-card) !important; background-image: none !important; border-color: var(--l-line) !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .leftcards :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .sumwrap :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .wsbox :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .impactbox :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .opgroup :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .rightimpact :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .sendbox :where(span,div,b,small,strong,label) { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .wsbox .dasrow span, body.ff-dark.ff-theme-light .impactbox span, body.ff-dark.ff-theme-light .rightimpact span { color: var(--l-mid) !important; } /* Mode gelap: panel baru ikut palet gelap kontras */ body.ff-dark .leftcards, body.ff-dark .sumwrap, body.ff-dark .wsbox, body.ff-dark .impactbox, body.ff-dark .opgroup, body.ff-dark .rightimpact, body.ff-dark .sendbox, body.ff-dark .fdrop { color: var(--d-muted) !important; } body.ff-dark .wsbox .dasrow span, body.ff-dark .rightimpact span { color: var(--d-muted) !important; } /* ========================================================================= v21 — MODE TERANG: SEMUA elemen rail kiri/kanan dipaksa kartu terang (menangkap kartu apa pun yang dirender ulang saat slider, class apa pun) Indikator warna (mini/wsl/riverleg/hsw/sw/risw/swatch/dot/adminline/ eventtablemini) di-EXCLUDE agar warnanya tidak hilang jadi putih. ========================================================================= */ body.ff-dark.ff-theme-light .rail :not(.pstat):not(.sstat):not(.stationtoggle):not(.rivertoggle):not(.isomodebtn):not(.lltgl):not(.mini):not(.wsl):not(.riverleg):not(.hsw):not(.sw):not(.risw):not(.swatch):not(.dot):not(.critbadge):not(.badge):not(.llsubhd):not(.llisohead):not(.llhead):not(.chip):not(.adminline):not(.eventtablemini) { background-color: var(--l-card) !important; background-image: none !important; border-color: var(--l-line) !important; } body.ff-dark.ff-theme-light .leftcards :not(.pstat):not(.sstat):not(.stationtoggle):not(.rivertoggle):not(.isomodebtn):not(.lltgl):not(.mini):not(.wsl):not(.riverleg):not(.hsw):not(.sw):not(.risw):not(.swatch):not(.dot):not(.critbadge):not(.badge):not(.llsubhd):not(.llisohead):not(.llhead):not(.chip):not(.adminline):not(.eventtablemini), body.ff-dark.ff-theme-light .sumwrap :not(.pstat):not(.sstat):not(.stationtoggle):not(.rivertoggle):not(.isomodebtn):not(.lltgl):not(.mini):not(.wsl):not(.riverleg):not(.hsw):not(.sw):not(.risw):not(.swatch):not(.dot):not(.critbadge):not(.badge):not(.llsubhd):not(.llisohead):not(.llhead):not(.chip):not(.adminline):not(.eventtablemini) { background-color: var(--l-card) !important; background-image: none !important; border-color: var(--l-line) !important; } /* Teks di dalamnya: gelap kontras (elemen yang di-:not tetap diatur aturan lain) */ body.ff-dark.ff-theme-light .rail :where(span,div,b,small,strong,label,td,th,li) { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .leftcards :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .sumwrap :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .rightimpact :where(span,div,b,small,strong,label), body.ff-dark.ff-theme-light .sendbox :where(span,div,b,small,strong,label) { color: var(--l-strong) !important; } /* ========================================================================= v22 — HALAMAN 06a (Operasional Bangunan Air): ikut tema penuh 06a = ff-dark; mode terang (ff-theme-light) -> semua kartu terang; mode gelap -> panel gelap kontras. ========================================================================= */ /* Mode terang */ body.ff-dark.ff-theme-light .card, body.ff-dark.ff-theme-light .card h3, body.ff-dark.ff-theme-light .metric, body.ff-dark.ff-theme-light .opunit, body.ff-dark.ff-theme-light .table th, body.ff-dark.ff-theme-light .table td, body.ff-dark.ff-theme-light .table tr:nth-child(even) td, body.ff-dark.ff-theme-light .sidebar, body.ff-dark.ff-theme-light .detail, body.ff-dark.ff-theme-light .top, body.ff-dark.ff-theme-light .kv, body.ff-dark.ff-theme-light .statusnote { background: var(--l-card) !important; background-image: none !important; border-color: var(--l-line) !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .card h3, body.ff-dark.ff-theme-light .kv .k, body.ff-dark.ff-theme-light .kv .v, body.ff-dark.ff-theme-light .kv .v b, body.ff-dark.ff-theme-light .metric span, body.ff-dark.ff-theme-light .metric small, body.ff-dark.ff-theme-light .opunit .desc, body.ff-dark.ff-theme-light .table th, body.ff-dark.ff-theme-light .table td, body.ff-dark.ff-theme-light .lab, body.ff-dark.ff-theme-light .val, body.ff-dark.ff-theme-light .sub, body.ff-dark.ff-theme-light .cond { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .card h3 { background: var(--l-bg2) !important; border-bottom-color: var(--l-line) !important; color: var(--l-headline) !important; } /* Mode gelap: pastikan teks kontras di panel gelap */ body.ff-dark .card h3 { color: var(--d-yellow) !important; } body.ff-dark .kv .k { color: var(--d-muted) !important; } body.ff-dark .kv .v, body.ff-dark .kv .v b { color: var(--d-text) !important; } body.ff-dark .table th { color: var(--d-text) !important; background: var(--d-panel3) !important; } body.ff-dark .table td { color: var(--d-muted) !important; } body.ff-dark .metric span, body.ff-dark .metric small { color: var(--d-muted) !important; } body.ff-dark .opunit .desc { color: var(--d-muted) !important; } /* ========================================================================= v23 — 06a: badge bangunan (PA/PM/BD/BW), judul, tombol status, bar ========================================================================= */ /* Mode terang: ikon & judul & kartu jadi terang */ body.ff-dark.ff-theme-light .itype, body.ff-dark.ff-theme-light .asset, body.ff-dark.ff-theme-light .arow, body.ff-dark.ff-theme-light .ameta, body.ff-dark.ff-theme-light .opunit, body.ff-dark.ff-theme-light .timeline, body.ff-dark.ff-theme-light .event, body.ff-dark.ff-theme-light .alert, body.ff-dark.ff-theme-light .bar { background: var(--l-card) !important; background-image: none !important; border-color: var(--l-line) !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .itype { background: var(--l-bg2) !important; color: var(--l-accent-ink) !important; border: 1px solid var(--l-line) !important; } body.ff-dark.ff-theme-light .aname, body.ff-dark.ff-theme-light .ameta b, body.ff-dark.ff-theme-light .opstate, body.ff-dark.ff-theme-light .opunit b, body.ff-dark.ff-theme-light .asub { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .asub, body.ff-dark.ff-theme-light .ameta, body.ff-dark.ff-theme-light .desc { color: var(--l-mid) !important; } /* Badge status (BUKA 65%, 2/4 Aktif) — mode terang: teks gelap di tint aksen */ body.ff-dark.ff-theme-light .badge.b-cyan { background: var(--l-accent-soft) !important; color: var(--l-accent-ink) !important; border-color: var(--l-accent) !important; } body.ff-dark.ff-theme-light .badge.b-green { background: var(--l-accent2-soft, rgba(52,201,154,.14)) !important; color: var(--l-accent2-ink) !important; border-color: var(--l-accent2) !important; } body.ff-dark.ff-theme-light .badge.b-red { background: #fdeaea !important; color: #c0392b !important; border-color: #e8a0a0 !important; } body.ff-dark.ff-theme-light .badge.b-yellow{ background: #fdf3d0 !important; color: #9b7600 !important; border-color: #e5cd7e !important; } body.ff-dark.ff-theme-light .badge.b-gray { background: var(--l-bg2) !important; color: var(--l-soft) !important; border-color: var(--l-faint) !important; } /* alert & good */ body.ff-dark.ff-theme-light .alert { background: #fdf3d0 !important; color: #7a5b08 !important; border-color: #e5cd7e !important; } body.ff-dark.ff-theme-light .good { background: #e6f6ee !important; color: #0d7a4f !important; border-color: #9fd8bd !important; } /* Mode gelap: badge tetap berwarna tapi teks kontras */ body.ff-dark .badge.b-cyan { color: #d7f6ff !important; } body.ff-dark .badge.b-green { color: #d5ffe9 !important; } body.ff-dark .badge.b-red { color: #ffc9cf !important; } /* ========================================================================= v24 — 06a PANEL DETAIL (kanan): header atas & tab menu ikut tema ========================================================================= */ /* Mode terang */ body.ff-dark.ff-theme-light .dhead { background: var(--l-bg2) !important; background-image: none !important; border-bottom-color: var(--l-line) !important; } body.ff-dark.ff-theme-light .dkicker { color: var(--l-accent-ink) !important; } body.ff-dark.ff-theme-light #d-name, body.ff-dark.ff-theme-light .detail h2 { color: var(--l-headline) !important; } body.ff-dark.ff-theme-light #d-sub, body.ff-dark.ff-theme-light .statusnote { color: var(--l-mid) !important; } body.ff-dark.ff-theme-light .tabs { background: var(--l-bg2) !important; background-image: none !important; border-bottom-color: var(--l-line) !important; } body.ff-dark.ff-theme-light .tab { color: var(--l-mid) !important; background: transparent !important; } body.ff-dark.ff-theme-light .tab.active { color: var(--l-accent-ink) !important; background: var(--l-accent-soft) !important; border-bottom-color: var(--l-accent) !important; } body.ff-dark.ff-theme-light .content, body.ff-dark.ff-theme-light .view, body.ff-dark.ff-theme-light .condgrid, body.ff-dark.ff-theme-light .metricgrid { background: transparent !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .bigstatus.b-cyan { background: var(--l-accent-soft) !important; color: var(--l-accent-ink) !important; border-color: var(--l-accent) !important; } /* Mode gelap: header tetap gelap-konsisten tapi teks kontras */ body.ff-dark .dkicker { color: var(--d-cyan) !important; } body.ff-dark .statusnote { color: var(--d-muted) !important; } body.ff-dark .tab { color: var(--d-muted) !important; } body.ff-dark .tab.active { color: var(--d-text) !important; background: var(--d-panel3) !important; border-bottom-color: var(--d-yellow) !important; } /* ========================================================================= v25 — POPDOWN FITUR (Total Fitur/Selesai/Dikerjakan/Backlog) di header ========================================================================= */ /* Mode terang: chip & popdown terang, label gelap */ body.ff-dark.ff-theme-light .feat .fchip { background: var(--l-card) !important; border-color: var(--l-line) !important; color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .feat .fchip .k { color: var(--l-strong) !important; text-shadow: none !important; } body.ff-dark.ff-theme-light .feat .fchip[data-s="total"] .v { color: var(--l-headline) !important; } body.ff-dark.ff-theme-light .feat .fchip[data-s="done"] .v, body.ff-dark.ff-theme-light .feat .fchip[data-s="doing"] .v, body.ff-dark.ff-theme-light .feat .fchip[data-s="back"] .v { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .feat .fchip .car { color: var(--l-mid) !important; } body.ff-dark.ff-theme-light .fdrop { background: var(--l-card) !important; border-color: var(--l-line) !important; box-shadow: 0 18px 50px rgba(20,40,70,.25) !important; } body.ff-dark.ff-theme-light .fdrop :where(span,div,b,small,strong,label,td,th) { color: var(--l-strong) !important; } body.ff-dark.ff-theme-light .fdrop .fh .tot { color: var(--l-accent-ink) !important; } body.ff-dark.ff-theme-light .fdrop .frow .mc { color: var(--l-accent-ink) !important; } body.ff-dark.ff-theme-light .frow:hover { background: var(--l-accent-soft) !important; } /* Mode gelap: label kuning tetap kontras di panel gelap */ body.ff-dark .feat .fchip .k { color: #ffd94a !important; } body.ff-dark .fdrop { background: var(--d-panel) !important; border-color: var(--d-border2) !important; } body.ff-dark .fdrop :where(span,div,b) { color: var(--d-muted) !important; } body.ff-dark .fdrop .fh .tot, body.ff-dark .fdrop .frow .mc { color: var(--d-cyan) !important; } /* ========================================================================= /* ========================================================================= v80 — KETERANGAN PETA & POS HIDROLOGI: box TERANG mengikuti tema, indikator warna TETAP BERWARNA (jangan jadi putih) (User: box harus terang seperti tema; hanya "warna2" (chip kriteria, garis sungai, ikon mini, toggle ON/OFF) yang harus tetap berwarna seperti saat tema Navy.) ========================================================================= */ /* Teks ikon mini PCH/PDA ("H"/"A") di mode terang → gelap agar terlihat */ body.ff-dark.ff-theme-light .leftlegend .mini.pch, body.ff-dark.ff-theme-light .leftlegend .mini.pda { color: var(--l-strong) !important; } /* Toggle ON/OFF: warna hijau/merah (versi terang Navy) agar tidak putih */ body.ff-dark.ff-theme-light .leftlegend .stationtoggle, body.ff-dark.ff-theme-light .leftlegend .rivertoggle, body.ff-dark.ff-theme-light .leftlegend .isomodebtn, body.ff-dark.ff-theme-light .leftlegend .lltgl { box-shadow: none !important; text-shadow: none !important; } body.ff-dark.ff-theme-light .leftlegend .stationtoggle.on, body.ff-dark.ff-theme-light .leftlegend .rivertoggle.on, body.ff-dark.ff-theme-light .leftlegend .isomodebtn.on, body.ff-dark.ff-theme-light .leftlegend .stationtoggle.historytoggle.on { background: #d5f4e6 !important; background-image: none !important; border-color: #1f9d6e !important; color: #0b3d2c !important; } body.ff-dark.ff-theme-light .leftlegend .stationtoggle.off, body.ff-dark.ff-theme-light .leftlegend .rivertoggle.off, body.ff-dark.ff-theme-light .leftlegend .isomodebtn.off, body.ff-dark.ff-theme-light .leftlegend .stationtoggle.historytoggle.off { background: #f8d8dc !important; background-image: none !important; border-color: #c94a56 !important; color: #5c1a21 !important; }