oxpoe
eaf05f2811
Aplikasi billing & manajemen ISP (fiber optic) — PWA pelanggan, portal teknisi & kolektor, admin panel lengkap, multi-vendor OLT, RADIUS, WhatsApp/Telegram, pembayaran QRIS. Kredit & lisensi (ISC): - Base kode & repo: alijayanet/billing-rtrw oleh Alijaya Net — terima kasih banyak atas base kode dan repo yang bermanfaat. - Add-on: GoWA, LibreSpeed/OpenSpeedTest, Uptime Kuma, notification-forwarder. - Dikembangkan menjadi OPEN-ISP oleh oxpoe — https://github.com/oxpoe/open-isp
722 lines
43 KiB
CSS
722 lines
43 KiB
CSS
/* ============================================================================
|
|
admin-theme.css — Overlay tema OPEN-ISP untuk Admin Panel
|
|
Dimuat SETELAH admin.css. TIDAK mengubah admin.css / view manapun.
|
|
Seluruh aturan dibungkus @media screen agar print stylesheet admin aman.
|
|
========================================================================== */
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
|
|
|
|
@media screen {
|
|
|
|
/* ── TOKEN DARK (OPEN-ISP) ───────────────────────────────────────────── */
|
|
:root {
|
|
--brand: #ADFF2F;
|
|
--brand-2: #9CE62A;
|
|
--brand-ink: #0A0D14;
|
|
|
|
--bg: #0A0D14;
|
|
--bg2: #111622;
|
|
--bg3: #1F293D;
|
|
--border: rgba(242, 245, 241, 0.10);
|
|
--card-border: var(--border);
|
|
/* Token yang dipakai sebagian halaman admin (mis. acs.ejs/GenieACS Pro) */
|
|
--card-bg: var(--bg2);
|
|
--sub-bg: var(--bg3);
|
|
--sidebar-bg: var(--bg2);
|
|
--hover-bg: rgba(173, 255, 47, 0.06);
|
|
--card-color: var(--primary);
|
|
--text: #F2F5F1;
|
|
--muted: #8A96A6;
|
|
|
|
--primary: #ADFF2F;
|
|
--pdim: rgba(173, 255, 47, 0.14);
|
|
|
|
--success: #34D399;
|
|
--sdim: rgba(52, 211, 153, 0.14);
|
|
--warning: #FBBF24;
|
|
--wdim: rgba(251, 191, 36, 0.14);
|
|
--danger: #FB7185;
|
|
--ddim: rgba(251, 113, 133, 0.14);
|
|
--info: #38BDF8;
|
|
--idim: rgba(56, 189, 248, 0.14);
|
|
|
|
--on-primary: #0A0D14; /* teks di atas latar --primary */
|
|
--overlay-bg: rgba(17, 22, 34, 0.72);
|
|
}
|
|
|
|
/* ── BASE / BACKGROUND ───────────────────────────────────────────────── */
|
|
body {
|
|
background-color: var(--bg) !important;
|
|
background-image:
|
|
radial-gradient(rgba(255, 255, 255, 0.11) 1.4px, transparent 1.4px),
|
|
radial-gradient(130% 130% at 50% 42%, transparent 38%, rgba(0, 0, 0, 0.55) 100%),
|
|
radial-gradient(1100px 620px at 8% -14%, rgba(173, 255, 47, 0.10), transparent 58%),
|
|
radial-gradient(950px 540px at 102% -6%, rgba(56, 189, 248, 0.085), transparent 55%),
|
|
radial-gradient(1100px 640px at 50% 122%, rgba(139, 92, 246, 0.075), transparent 60%),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 30%),
|
|
linear-gradient(180deg, #0C1017 0%, #080A0F 100%) !important;
|
|
background-size: 22px 22px, auto, auto, auto, auto, auto, auto !important;
|
|
background-attachment: fixed !important;
|
|
color: var(--text);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.mw { background: transparent; }
|
|
|
|
/* ── SIDEBAR ─────────────────────────────────────────────────────────── */
|
|
.sidebar {
|
|
background: linear-gradient(180deg, rgba(173, 255, 47, 0.035), transparent 180px), var(--bg2) !important;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.sb-brand { border-bottom: 1px solid var(--border); }
|
|
.sb-icon {
|
|
background: linear-gradient(135deg, var(--brand), #6fae12) !important;
|
|
color: var(--brand-ink) !important;
|
|
box-shadow: 0 6px 16px rgba(173, 255, 47, 0.28);
|
|
border-radius: 11px;
|
|
}
|
|
.sb-name { color: var(--text); letter-spacing: -0.01em; }
|
|
.sb-item { border-radius: 0 10px 10px 0; }
|
|
.sb-item:hover { background: rgba(255, 255, 255, 0.045); }
|
|
.sb-item.active {
|
|
color: var(--primary) !important;
|
|
background: var(--pdim);
|
|
border-left-color: var(--primary);
|
|
box-shadow: inset 0 0 0 1px rgba(173, 255, 47, 0.12);
|
|
}
|
|
.sb-item.active i { color: var(--primary); }
|
|
|
|
/* ── TOPBAR ──────────────────────────────────────────────────────────── */
|
|
.topbar {
|
|
background: rgba(17, 22, 34, 0.72) !important;
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.tb-title { font-weight: 600; }
|
|
.tb-title i { color: var(--primary); }
|
|
.adm-badge {
|
|
background: var(--pdim);
|
|
color: var(--primary);
|
|
border: 1px solid rgba(173, 255, 47, 0.22);
|
|
}
|
|
.realtime-bar { color: var(--muted); }
|
|
|
|
/* ── STAT CARDS ──────────────────────────────────────────────────────── */
|
|
.stat-grid { gap: 16px; }
|
|
.sc {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 55%),
|
|
var(--bg2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 18px 18px 16px;
|
|
}
|
|
.sc:hover {
|
|
transform: translateY(-2px);
|
|
border-color: rgba(173, 255, 47, 0.28);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
|
|
}
|
|
.sc::before { height: 3px; opacity: 0.9; }
|
|
.sc.p::before { background: linear-gradient(90deg, var(--brand), #d4ff7a); }
|
|
.sc.s::before { background: linear-gradient(90deg, #34D399, #6ee7b7); }
|
|
.sc.w::before { background: linear-gradient(90deg, #FBBF24, #fcd34d); }
|
|
.sc.d::before { background: linear-gradient(90deg, #FB7185, #fda4af); }
|
|
.sc.i::before { background: linear-gradient(90deg, #38BDF8, #7dd3fc); }
|
|
.sc-icon { opacity: 0.16; font-size: 30px; }
|
|
.sc-label { color: var(--muted); font-weight: 600; }
|
|
.sc-val { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
|
|
.sc-sub { color: var(--muted); }
|
|
|
|
/* ── CARDS ───────────────────────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--bg2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
}
|
|
.card-hd { border-bottom: 1px solid var(--border); }
|
|
.card-hd h6 { font-weight: 600; letter-spacing: -0.01em; }
|
|
.card-hd h6 i { color: var(--primary); }
|
|
|
|
/* ── TABLE ───────────────────────────────────────────────────────────── */
|
|
.dtbl th {
|
|
background: var(--bg3);
|
|
color: var(--muted);
|
|
font-weight: 700;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.dtbl td { border-bottom: 1px solid var(--border); }
|
|
.dtbl tbody tr:hover td { background: rgba(173, 255, 47, 0.035); }
|
|
.dtbl a { color: var(--primary); }
|
|
|
|
/* ── BADGES ──────────────────────────────────────────────────────────── */
|
|
.badge { font-weight: 700; letter-spacing: 0.01em; }
|
|
.bp { background: var(--pdim); color: var(--primary); }
|
|
|
|
/* ── BUTTONS ─────────────────────────────────────────────────────────── */
|
|
.btn { border-radius: 10px; font-weight: 600; }
|
|
.btn-p {
|
|
background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
|
|
color: var(--brand-ink) !important;
|
|
box-shadow: 0 6px 16px rgba(173, 255, 47, 0.22);
|
|
}
|
|
.btn-p:hover { opacity: 1; filter: brightness(1.05); }
|
|
.btn-p i, .btn-p span { color: var(--brand-ink); }
|
|
.btn-g {
|
|
background: rgba(255, 255, 255, 0.055);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.btn-g:hover { background: rgba(255, 255, 255, 0.09); }
|
|
|
|
/* ── FORMS ───────────────────────────────────────────────────────────── */
|
|
.fc, .fs {
|
|
background: var(--bg3);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
border-radius: 10px;
|
|
}
|
|
.fc:focus, .fs:focus {
|
|
border-color: rgba(173, 255, 47, 0.65);
|
|
box-shadow: 0 0 0 3px var(--pdim);
|
|
}
|
|
.fl { color: var(--muted); font-weight: 600; }
|
|
.fs option { background: var(--bg2); color: var(--text); }
|
|
|
|
/* ── MODAL ───────────────────────────────────────────────────────────── */
|
|
.mo { background: rgba(4, 7, 12, 0.72); backdrop-filter: blur(6px); }
|
|
.mb {
|
|
background: var(--bg2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
|
|
}
|
|
.mh, .mf { border-color: var(--border); }
|
|
.mt { font-weight: 600; }
|
|
|
|
/* ── ALERT / TABS / MISC ─────────────────────────────────────────────── */
|
|
.alert { border-radius: 12px; }
|
|
.tab-bar { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; }
|
|
.tab-btn { border-radius: 9px; font-weight: 600; }
|
|
.tab-btn.active { background: var(--pdim) !important; color: var(--primary) !important; box-shadow: none; }
|
|
.mtab.active, .tab.active { background: var(--primary) !important; color: var(--brand-ink) !important; }
|
|
.donut-num { font-family: 'Space Grotesk', 'Inter', sans-serif; }
|
|
.donut-lbl { color: var(--muted); }
|
|
|
|
/* ── TOMBOL/TAB "TERPILIH" (latar = --primary) → teks kontras ───────── */
|
|
.wa-tab.active, .mtab.active, .tab.active, .view-toggle-btn.active,
|
|
.bind-tag.active, .btn-action:hover, .chat-user-avatar, .msg-bubble.outbound {
|
|
color: var(--on-primary) !important;
|
|
}
|
|
[style*="var(--primary)"][style*="color:white"],
|
|
[style*="var(--primary)"][style*="color: white"],
|
|
[style*="var(--primary)"][style*="color:#fff"],
|
|
[style*="var(--primary)"][style*="color: #fff"] {
|
|
color: var(--on-primary) !important;
|
|
}
|
|
|
|
/* ══ HALAMAN MAP (komponen terang hardcode → token tema) ═════════════ */
|
|
#map { background: var(--bg3) !important; border-color: var(--border) !important; }
|
|
.map-toolbar { background: var(--bg2) !important; border-color: var(--border) !important; box-shadow: none !important; }
|
|
.msc { background: var(--bg2) !important; border-color: var(--border) !important; box-shadow: none !important; }
|
|
.msc-info .val { color: var(--text) !important; }
|
|
.msc-info .lbl { color: var(--muted) !important; }
|
|
.map-search-input { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; }
|
|
.map-search-input:focus { background: var(--bg2) !important; border-color: var(--primary) !important; }
|
|
.map-search-icon, .map-search-clear { color: var(--muted) !important; }
|
|
.map-search-dropdown { background: var(--bg2) !important; border-color: var(--border) !important; box-shadow: 0 12px 30px rgba(0,0,0,.4) !important; }
|
|
.ms-header { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--muted) !important; }
|
|
.ms-item { border-color: var(--border) !important; }
|
|
.ms-item:hover, .ms-item.selected { background: var(--pdim) !important; }
|
|
.ms-item-name { color: var(--text) !important; }
|
|
.ms-item-meta, .ms-empty { color: var(--muted) !important; }
|
|
.map-pill-btn { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; }
|
|
.map-pill-btn:hover { background: var(--bg2) !important; border-color: var(--primary) !important; }
|
|
.data-tabs-panel { background: var(--bg2) !important; border-color: var(--border) !important; box-shadow: none !important; }
|
|
.data-tabs-nav { background: var(--bg3) !important; border-color: var(--border) !important; }
|
|
.tab-btn { color: var(--muted) !important; }
|
|
.tab-btn:hover { color: var(--text) !important; background: var(--pdim) !important; }
|
|
.tab-btn.active { background: var(--bg2) !important; color: var(--primary) !important; border-color: var(--border) !important; }
|
|
.tab-badge { background: var(--bg3) !important; color: var(--text) !important; }
|
|
.tab-btn.active .tab-badge { background: var(--pdim) !important; color: var(--primary) !important; }
|
|
.table-search-input { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; }
|
|
.table-search-input:focus { background: var(--bg2) !important; border-color: var(--primary) !important; }
|
|
.table-wrap { border-color: var(--border) !important; }
|
|
.data-table th, .data-table td { border-color: var(--border) !important; color: var(--text) !important; }
|
|
.data-table th { background: var(--bg3) !important; color: var(--muted) !important; }
|
|
.data-table tr:hover td { background: var(--pdim) !important; }
|
|
#picker-map, #edit-picker-map, #cable-drawing-map { background: var(--bg3) !important; border-color: var(--border) !important; }
|
|
/* Leaflet popup pelanggan */
|
|
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg2) !important; color: var(--text) !important; box-shadow: 0 12px 30px rgba(0,0,0,.45) !important; }
|
|
.cp-head, .cp-traffic { border-color: var(--border) !important; }
|
|
.cp-name, .cp-traffic-head, .cp-chart-label { color: var(--text) !important; }
|
|
.cp-meta-item, .cp-meta-item i { color: var(--muted) !important; }
|
|
.cp-chip { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; }
|
|
.cp-chart { background: var(--bg3) !important; border-color: var(--border) !important; }
|
|
.cp-overlay { background: var(--overlay-bg) !important; color: var(--muted) !important; }
|
|
.cp-avatar { color: var(--text) !important; }
|
|
|
|
/* ══ HALAMAN OLTS (komponen terang hardcode → token tema) ════════════ */
|
|
.stat-card-v2 { background: var(--bg2) !important; border-color: var(--border) !important; box-shadow: none !important; }
|
|
.stat-card-v2 .details h3 { color: var(--text) !important; }
|
|
.stat-card-v2 .details p { color: var(--muted) !important; }
|
|
.system-info-bar { background: var(--bg3) !important; border-color: var(--border) !important; }
|
|
.info-item { color: var(--muted) !important; }
|
|
.olt-selector-container { background: var(--bg2) !important; border-color: var(--border) !important; }
|
|
.custom-select-v2 { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; }
|
|
.onu-main-card { background: var(--bg2) !important; border-color: var(--border) !important; box-shadow: none !important; }
|
|
.onu-main-card .card-header { background: var(--bg3) !important; border-color: var(--border) !important; }
|
|
.onu-table-v2 th { background: var(--bg3) !important; color: var(--muted) !important; border-color: var(--border) !important; }
|
|
.onu-table-v2 td { color: var(--text) !important; border-color: var(--border) !important; }
|
|
.onu-table-v2 tr:hover { background: var(--pdim) !important; }
|
|
.btn-action-v2 { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--muted) !important; }
|
|
.btn-action-v2:hover { background: var(--bg2) !important; color: var(--text) !important; border-color: var(--primary) !important; }
|
|
.empty-state { color: var(--muted) !important; }
|
|
.loading-overlay { background: var(--overlay-bg) !important; }
|
|
|
|
/* ══ PROMO-SLIDES: modal edit (style di body, butuh spesifisitas lebih) ═ */
|
|
.modal-wrapper .modal-content { background: var(--bg2) !important; color: var(--text) !important; border: 1px solid var(--border); }
|
|
.modal-wrapper .modal-header, .modal-wrapper .modal-footer { border-color: var(--border) !important; }
|
|
.modal-wrapper .modal-header h5 { color: var(--text) !important; }
|
|
.modal-wrapper .modal-close { color: var(--muted) !important; }
|
|
.modal-wrapper .modal-close:hover { color: var(--text) !important; }
|
|
.modal-wrapper .fl { color: var(--text) !important; }
|
|
.modal-wrapper .hint { color: var(--muted) !important; }
|
|
.modal-wrapper .fc { background: var(--bg3) !important; border-color: var(--border) !important; color: var(--text) !important; }
|
|
.modal-wrapper .fc:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--pdim) !important; }
|
|
|
|
/* ══════════════════════════════════════════════════════════════════════
|
|
LIGHT THEME — token (spesifisitas tinggi agar menang atas admin.css)
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
:root[data-theme="light"], :root.light-theme,
|
|
html[data-theme="light"], html.light-theme,
|
|
body[data-theme="light"], body.light-theme {
|
|
--bg: #E8EDE5;
|
|
--bg2: #FFFFFF;
|
|
--bg3: #DEE4DA;
|
|
--border: rgba(16, 20, 15, 0.15);
|
|
--card-border: rgba(16, 20, 15, 0.15);
|
|
--hover-bg: rgba(92, 154, 10, 0.08);
|
|
--text: #141A12;
|
|
--muted: #52604C;
|
|
|
|
--primary: #5C9A0A;
|
|
--pdim: rgba(92, 154, 10, 0.12);
|
|
|
|
--success: #0F9D6B;
|
|
--sdim: rgba(15, 157, 107, 0.12);
|
|
--warning: #C2740A;
|
|
--wdim: rgba(194, 116, 10, 0.12);
|
|
--danger: #DE3B5C;
|
|
--ddim: rgba(222, 59, 92, 0.12);
|
|
--info: #0A7BC2;
|
|
--idim: rgba(10, 123, 194, 0.12);
|
|
|
|
--on-primary: #FFFFFF;
|
|
--overlay-bg: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
/* ── LIGHT: base ─────────────────────────────────────────────────────── */
|
|
:is(html[data-theme="light"], html.light-theme) body,
|
|
:is(html[data-theme="light"], html.light-theme) body.light-theme {
|
|
background-color: var(--bg) !important;
|
|
background-image:
|
|
radial-gradient(rgba(16, 20, 15, 0.17) 1.4px, transparent 1.4px),
|
|
radial-gradient(130% 130% at 50% 42%, transparent 38%, rgba(16, 20, 15, 0.20) 100%),
|
|
radial-gradient(1100px 620px at 8% -14%, rgba(92, 154, 10, 0.10), transparent 58%),
|
|
radial-gradient(950px 540px at 102% -6%, rgba(10, 123, 194, 0.08), transparent 55%),
|
|
radial-gradient(1100px 640px at 50% 122%, rgba(124, 92, 246, 0.07), transparent 60%),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 30%),
|
|
linear-gradient(180deg, #E8EDE5 0%, #DEE4DA 100%) !important;
|
|
background-size: 22px 22px, auto, auto, auto, auto, auto, auto !important;
|
|
background-attachment: fixed !important;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── LIGHT: shell ────────────────────────────────────────────────────── */
|
|
:is(html[data-theme="light"], html.light-theme) .sidebar {
|
|
background: linear-gradient(180deg, rgba(173, 255, 47, 0.16), transparent 180px), var(--bg2) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .sb-icon {
|
|
background: linear-gradient(135deg, var(--brand), #7cc61a) !important;
|
|
color: var(--brand-ink) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .sb-name,
|
|
:is(html[data-theme="light"], html.light-theme) .tb-title,
|
|
:is(html[data-theme="light"], html.light-theme) .card-hd h6,
|
|
:is(html[data-theme="light"], html.light-theme) .sc-val { color: var(--text) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .sb-item { color: #4b5563 !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .sb-item:hover { background: rgba(0, 0, 0, 0.04) !important; color: var(--text) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .sb-item.active {
|
|
color: var(--primary) !important;
|
|
background: var(--pdim) !important;
|
|
border-left-color: var(--primary);
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .sb-item.active i { color: var(--primary); }
|
|
:is(html[data-theme="light"], html.light-theme) .sb-item.logout { color: var(--danger) !important; }
|
|
/* Biarkan pola/dot latar body terlihat (admin.css memaksa #f8fafc pada .mw/.page) */
|
|
:is(html[data-theme="light"], html.light-theme) .mw,
|
|
:is(html[data-theme="light"], html.light-theme) .page,
|
|
:is(html[data-theme="light"], html.light-theme) .main-content,
|
|
:is(html[data-theme="light"], html.light-theme) .content-wrapper { background: transparent !important; }
|
|
|
|
:is(html[data-theme="light"], html.light-theme) .topbar {
|
|
background: rgba(255, 255, 255, 0.82) !important;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .tb-title i,
|
|
:is(html[data-theme="light"], html.light-theme) .card-hd h6 i { color: var(--primary) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .adm-badge {
|
|
color: var(--primary) !important;
|
|
border-color: rgba(77, 124, 15, 0.25) !important;
|
|
}
|
|
|
|
/* ── LIGHT: surfaces ─────────────────────────────────────────────────── */
|
|
:is(html[data-theme="light"], html.light-theme) .sc,
|
|
:is(html[data-theme="light"], html.light-theme) .card,
|
|
:is(html[data-theme="light"], html.light-theme) .mb { background: var(--bg2) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .sc:hover { box-shadow: 0 10px 30px rgba(10, 13, 20, 0.10); }
|
|
:is(html[data-theme="light"], html.light-theme) .fc,
|
|
:is(html[data-theme="light"], html.light-theme) .fs { background: var(--bg3) !important; color: var(--text) !important; border-color: var(--border) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .fc:focus,
|
|
:is(html[data-theme="light"], html.light-theme) .fs:focus { border-color: rgba(77, 124, 15, 0.55) !important; box-shadow: 0 0 0 3px var(--pdim) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .btn-g { background: rgba(0, 0, 0, 0.045) !important; color: var(--text) !important; border-color: var(--border) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .btn-g:hover { background: rgba(0, 0, 0, 0.08) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .dtbl th { background: var(--bg3) !important; color: var(--muted) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .dtbl td { color: var(--text) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .dtbl tbody tr:hover td { background: rgba(120, 160, 0, 0.06) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .tab-bar { background: var(--bg3) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .tab-btn.active { background: var(--pdim) !important; color: var(--primary) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .badge.bp { color: var(--primary) !important; }
|
|
|
|
/* ── LIGHT: inline DARK backgrounds (kartu hardcode) ─────────────────── */
|
|
:is(html[data-theme="light"], html.light-theme) [style*="#0f172a"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="#1e293b"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="#0b132b"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="#111827"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="#0b1220"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="rgba(15,23,42"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="rgba(15, 23, 42"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="rgba(30,41,59"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="rgba(30, 41, 59"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="rgba(17,24,39"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="rgba(17, 24, 39"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="rgba(51,65,85"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="rgba(51, 65, 85"] {
|
|
background: #FFFFFF !important;
|
|
}
|
|
|
|
/* ── LIGHT: inline terang → gelap (teks) ─────────────────────────────── */
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#f8fafc"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color: #f8fafc"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#f1f5f9"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color: #f1f5f9"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#e2e8f0"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color: #e2e8f0"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:white"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color: white"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#fff"] {
|
|
color: #0A0D14 !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#94a3b8"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color: #94a3b8"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#cbd5e1"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#64748b"] {
|
|
color: #475569 !important;
|
|
}
|
|
/* aksen terang → versi gelap */
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#60a5fa"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#38bdf8"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#93c5fd"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#bfdbfe"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#e0e7ff"] { color: #1d4ed8 !important; }
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#4ade80"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#86efac"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#bbf7d0"] { color: #15803d !important; }
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#a5b4fc"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#818cf8"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#c7d2fe"] { color: #4338ca !important; }
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#fde68a"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#fbbf24"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#fcd34d"] { color: #b45309 !important; }
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#fecaca"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#fca5a5"],
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:#f87171"] { color: #dc2626 !important; }
|
|
:is(html[data-theme="light"], html.light-theme) [style*="color:var(--primary)"] { color: var(--primary) !important; }
|
|
|
|
/* table-dark (mis. OLT SNMP) */
|
|
:is(html[data-theme="light"], html.light-theme) .table-dark,
|
|
:is(html[data-theme="light"], html.light-theme) .table-dark > tbody > tr > td,
|
|
:is(html[data-theme="light"], html.light-theme) .table-dark > tbody > tr > th,
|
|
:is(html[data-theme="light"], html.light-theme) .table-dark > thead > tr > th {
|
|
background: transparent !important;
|
|
color: var(--text) !important;
|
|
border-color: var(--border) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) pre,
|
|
:is(html[data-theme="light"], html.light-theme) code { color: var(--text) !important; }
|
|
|
|
/* ── LIGHT: halaman ROUTERS (class hardcode) ─────────────────────────── */
|
|
:is(html[data-theme="light"], html.light-theme) .rc-card {
|
|
background: #FFFFFF !important;
|
|
border-color: var(--border) !important;
|
|
box-shadow: 0 10px 30px rgba(10, 13, 20, 0.08) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .rc-card:hover {
|
|
border-color: rgba(77, 124, 15, 0.45) !important;
|
|
box-shadow: 0 14px 34px rgba(10, 13, 20, 0.14) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .rc-icon {
|
|
color: #4d7c0f !important;
|
|
background: linear-gradient(135deg, rgba(173, 255, 47, 0.30), rgba(173, 255, 47, 0.12)) !important;
|
|
border-color: rgba(120, 160, 0, 0.35) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .rc-name { color: var(--text) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .rc-host { color: var(--muted) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .rc-status-pill.online { color: #15803d !important; background: rgba(34, 197, 94, 0.12) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .rc-status-pill.offline { color: #dc2626 !important; background: rgba(239, 68, 68, 0.10) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .rc-metrics {
|
|
background: var(--bg3) !important;
|
|
border-color: var(--border) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .rc-metric-head { color: var(--text) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .rc-progress { background: rgba(10, 13, 20, 0.08) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .rc-spec-box {
|
|
background: var(--bg3) !important;
|
|
border-color: var(--border) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .rc-spec-val { color: var(--text) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .rc-spec-lbl { color: var(--muted) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .rc-actions { border-top-color: var(--border) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .modal-tab-btn {
|
|
background: var(--bg3) !important;
|
|
color: var(--muted) !important;
|
|
border-color: var(--border) !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) .modal-tab-btn:hover { background: #e2e8e0 !important; color: var(--text) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .modal-tab-btn.active {
|
|
background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
|
|
color: var(--brand-ink) !important;
|
|
border-color: var(--brand-2) !important;
|
|
}
|
|
|
|
/* ── LIGHT: expense categories ───────────────────────────────────────── */
|
|
:is(html[data-theme="light"], html.light-theme) .cat-card { background: var(--bg2) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .cat-card:hover { border-color: var(--border) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .cat-name { color: var(--text) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .cat-desc { color: var(--muted) !important; }
|
|
:is(html[data-theme="light"], html.light-theme) .icon-box { background: rgba(10, 13, 20, 0.05) !important; }
|
|
|
|
}
|
|
|
|
/* ── MOBILE: fix overlap sidebar drawer vs bottom-nav (tab bawah sidebar terpotong) ── */
|
|
@media screen and (max-width: 768px) {
|
|
.sidebar { height: 100dvh; }
|
|
.sb-nav { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
|
|
.sidebar.open ~ .bottom-nav { display: none !important; }
|
|
}
|
|
|
|
|
|
/* ── Grup menu → tab bar (sidebar ringkas) ── */
|
|
.grp-tabs{display:flex;gap:8px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
|
|
.grp-tab{padding:8px 14px;border-radius:8px;color:var(--muted);transition:all .2s;font-weight:700;text-decoration:none;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
|
|
.grp-tab:hover{background:rgba(255,255,255,.06);color:var(--text)}
|
|
.grp-tab.active{background:var(--primary);color:#0A0D14}
|
|
@media(max-width:768px){.grp-tabs{font-size:13px}.grp-tab{padding:6px 10px;font-size:12px}}
|
|
|
|
/* Section switcher (grup menu) */
|
|
.grp-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:6px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg2,#111622);width:fit-content;max-width:100%}
|
|
.grp-nav-title{font-size:12px;font-weight:800;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
|
|
.grp-nav-select{background:transparent;border:none;color:var(--text);font-weight:800;font-size:13px;cursor:pointer;outline:none;max-width:60vw}
|
|
.grp-nav-select option{background:var(--bg2,#111622);color:var(--text)}
|
|
|
|
/* Sidebar accordion (grup menu) */
|
|
.sb-item.sb-parent .sb-caret{margin-left:auto;font-size:12px;opacity:.6;transition:transform .2s}
|
|
.sb-item.sb-parent.open .sb-caret{transform:rotate(180deg)}
|
|
.sb-sub{display:flex;flex-direction:column}
|
|
.sb-item.sb-child{padding-left:34px;font-size:12.5px}
|
|
.sb-item.sb-child i{font-size:13px;opacity:.85}
|
|
|
|
|
|
/* admin scroll fix */
|
|
html, body { height: 100dvh; min-height: 100dvh; }
|
|
/* .mw = area konten; jadikan block-scroll yang andal (bukan flex-column) */
|
|
.mw { display: block !important; height: 100dvh; overflow-y: auto !important; overflow-x: auto; }
|
|
.mw > .page, .page { flex: 0 0 auto; }
|
|
@media (max-width: 768px) { .mw { padding-bottom: 70px; } }
|
|
/* modal: satu scroll saja (hindari nested-scroll yang mengunci) */
|
|
.mo .mb { max-height: 92vh; overflow-y: auto; }
|
|
.mo .mb .mbody { max-height: none !important; overflow: visible !important; }
|
|
|
|
/* == UI HARDENING (audit ui-ux.md) - jangan hapus marker == */
|
|
@media screen {
|
|
/* #2 gambar & media responsif (admin) */
|
|
.mw img, .mo img, .card img, .alert img { max-width: 100%; height: auto; }
|
|
/* #2 anti-overlap: teks panjang tidak meluber */
|
|
.sb-name, .sb-sub, .tb-title, .card-hd h6, .alert { overflow-wrap: break-word; } /* break-word: cegah teks vertikal (min-content bukan 1 huruf) */
|
|
.dtbl td { overflow-wrap: break-word; } /* tabel: break-word agar kolom tidak menyusut jadi 1 huruf */
|
|
/* #2 flex/grid child tidak meluber ke luar parent */
|
|
.card-hd > *, .srow > *, .filter-bar > *, .form-row > *, .form-row2 > *, .form-row3 > * { min-width: 0; }
|
|
/* #1 tipografi fluid (metrik & judul) */
|
|
.sc-val { font-size: clamp(20px, 1.4vw + 14px, 30px); }
|
|
.tb-title { font-size: clamp(13px, 0.55vw + 11px, 17px); }
|
|
/* #4 tinggi fluid aman (mobile browser UI) */
|
|
.sidebar { height: 100vh; height: 100dvh; }
|
|
}
|
|
|
|
/* == DROPDOWN AKSI (kolom aksi tabel) == */
|
|
.act{position:relative;display:inline-block;text-align:left}
|
|
.act-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;display:inline-grid;place-items:center;font-size:17px;line-height:1;transition:.15s}
|
|
.act-btn:hover{border-color:var(--primary);color:var(--primary)}
|
|
.act.open .act-btn{border-color:var(--primary);color:var(--primary)}
|
|
.act-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;max-width:290px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:6px;z-index:1300;display:none}
|
|
.act.open .act-menu{display:block}
|
|
.act-menu.up{top:auto;bottom:calc(100% + 6px)}
|
|
.act-menu.fixed{position:fixed;right:auto;top:auto;bottom:auto;z-index:99999;display:block;background:var(--bg2);border:1px solid var(--border);box-shadow:0 18px 44px rgba(0,0,0,.55)}
|
|
.act-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:9px;background:transparent;border:none;color:var(--text);font-size:12.5px;font-weight:600;font-family:inherit;line-height:1.2;cursor:pointer;text-decoration:none;white-space:normal}
|
|
.act-item i{font-size:15px;width:18px;text-align:center;color:var(--muted);flex:0 0 auto}
|
|
.act-item:hover{background:rgba(255,255,255,.06)}
|
|
.act-item:hover i{color:var(--text)}
|
|
.act-item.primary i{color:var(--primary)} .act-item.success i{color:var(--success)}
|
|
.act-item.warn i{color:var(--warning)} .act-item.danger{color:var(--danger)} .act-item.danger i{color:var(--danger)}
|
|
.act-sep{height:1px;background:var(--border);margin:5px 4px}
|
|
html[data-theme="light"] .act-menu{background:#ffffff}
|
|
html[data-theme="light"] .act-item:hover{background:#f1f5f9}
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
UNIFIKASI TOMBOL TAB (semua varian) — ditempel paling akhir agar
|
|
menang atas gaya bawaan tiap halaman & admin-theme sebelumnya.
|
|
══════════════════════════════════════════════════════════════════ */
|
|
@media screen {
|
|
:is(.tab-bar,.grp-tabs,.mtabs,.wa-tabs,.inv-tabs,.set-tabs,.mt-tabs,.au-tabs,.tabs){
|
|
display:flex !important;
|
|
align-items:center;
|
|
gap:8px;
|
|
flex-wrap:nowrap !important;
|
|
overflow-x:auto;
|
|
overflow-y:hidden;
|
|
white-space:nowrap;
|
|
padding:0 0 2px 0 !important;
|
|
margin:0 0 14px 0 !important;
|
|
background:none !important;
|
|
border:none !important;
|
|
border-bottom:0 !important;
|
|
border-radius:0 !important;
|
|
-webkit-overflow-scrolling:touch;
|
|
scrollbar-width:none;
|
|
}
|
|
:is(.tab-bar,.grp-tabs,.mtabs,.wa-tabs,.inv-tabs,.set-tabs,.mt-tabs,.au-tabs,.tabs)::-webkit-scrollbar{ display:none; }
|
|
|
|
:is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a){
|
|
display:inline-flex !important;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:6px;
|
|
padding:7px 13px !important;
|
|
border-radius:9px !important;
|
|
background:var(--bg3) !important;
|
|
color:var(--muted) !important;
|
|
border:1px solid var(--border) !important;
|
|
font-weight:600 !important;
|
|
font-size:13px !important;
|
|
line-height:1.2;
|
|
text-decoration:none !important;
|
|
cursor:pointer;
|
|
white-space:nowrap;
|
|
transition:background .15s,color .15s,border-color .15s;
|
|
flex:0 0 auto;
|
|
}
|
|
:is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a) i{ color:inherit !important; }
|
|
|
|
:is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a):hover{ color:var(--text) !important; border-color:var(--primary) !important; background:var(--bg3) !important; }
|
|
|
|
:is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active, :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active:hover{
|
|
background:var(--primary) !important;
|
|
color:var(--on-primary,#0A0D14) !important;
|
|
border-color:var(--primary) !important;
|
|
box-shadow:none !important;
|
|
}
|
|
|
|
:is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active .tab-badge,
|
|
:is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active .mt-tab-badge{ background:rgba(0,0,0,.18) !important; color:inherit !important; }
|
|
}
|
|
html[data-theme="light"] :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active, html.light-theme :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active{ color:#ffffff !important; }
|
|
html[data-theme="light"] :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active .tab-badge, html[data-theme="light"] :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active .mt-tab-badge{ background:rgba(255,255,255,.22) !important; }
|
|
|
|
|
|
/* ── Kolom cari (filter bar) jangan menyusut kekecilan ── */
|
|
@media screen {
|
|
.srow > .sinput, .filter-bar > .sinput { min-width: 240px !important; }
|
|
}
|
|
/* Mobile: kolom cari full width, TINGGI auto (jangan ikut flex-basis -> ikon tidak nyasar) */
|
|
@media(max-width:576px){
|
|
.sinput, .srow > .sinput, .filter-bar > .sinput {
|
|
flex: 0 0 auto !important;
|
|
height: auto !important;
|
|
min-width: 0 !important;
|
|
width: 100% !important;
|
|
max-width: none !important;
|
|
}
|
|
/* jaga ikon kaca pembesar tetap sejajar di dalam kotak */
|
|
.sinput { position: relative !important; }
|
|
.sinput i { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; }
|
|
.sinput input { padding-left: 34px !important; }
|
|
}
|
|
|
|
/* ── Highlight kolom cari saat shortcut "/" ditekan ── */
|
|
@keyframes adminSearchPulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(173,255,47,.55); }
|
|
100% { box-shadow: 0 0 0 8px rgba(173,255,47,0); }
|
|
}
|
|
.admin-search-flash { border-radius: 8px; animation: adminSearchPulse .9s ease-out; }
|
|
.admin-search-flash input, .admin-search-flash .fc { outline: 2px solid #ADFF2F !important; outline-offset: 1px; }
|
|
|
|
|
|
/* ══════════════════════════════════════════════════════════════════
|
|
FIX: TOMBOL TAB AKTIF KONSISTEN (light mode)
|
|
Menang atas style lokal halaman (radius-settings biru, payroll pale,
|
|
onu-provision underline biru) -> semua seragam solid --primary + teks putih.
|
|
══════════════════════════════════════════════════════════════════ */
|
|
@media screen {
|
|
:is(html[data-theme="light"], html.light-theme) :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a,.view-toggle-btn).active,
|
|
:is(html[data-theme="light"], html.light-theme) :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a,.view-toggle-btn).active:hover {
|
|
background: var(--primary) !important;
|
|
color: #ffffff !important;
|
|
border-color: var(--primary) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active i {
|
|
color: #ffffff !important;
|
|
}
|
|
:is(html[data-theme="light"], html.light-theme) :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active .tab-badge,
|
|
:is(html[data-theme="light"], html.light-theme) :is(.tab-btn,.mtab,.grp-tab,.wa-tab,.au-tab,.set-tab,.mt-tab,.inv-tab,.tabs > .tab,.tab-bar > button,.tab-bar > a).active .mt-tab-badge {
|
|
background: rgba(255,255,255,.25) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* ── FLUID + ANTI-OVERLAP (ui-ux.md) ───────────────────────────────────── */
|
|
/* Tinggi viewport dinamis (mobile browser chrome) */
|
|
body { height: 100dvh; }
|
|
.mw { height: 100vh; height: 100dvh; }
|
|
|
|
/* Grid/flex children tidak meluber keluar kontainer */
|
|
.stat-grid > *, .settings-grid > *, .form-row > *, .form-row2 > *, .form-row3 > *,
|
|
.dash-main-grid > *, .quick-actions-grid > *, .sidebar-settings-save-grid > *,
|
|
.card-hd > *, .row > * { min-width: 0; }
|
|
|
|
/* Header kartu boleh wrap saat sempit (bukan tumpang tindih) */
|
|
.card-hd { flex-wrap: wrap; gap: 8px 12px; }
|
|
|
|
/* Teks/tautan panjang tidak menembus sel & kartu.
|
|
PENTING: gunakan break-word (BUKAN anywhere) — "anywhere" membuat min-content sel = 1 huruf
|
|
sehingga kolom tabel menyusut & teks jadi vertikal di layar sempit (1024px dsb). */
|
|
table td, .dtbl td, .table td, .tbl td, .sc-val, .sc-label, .sc-sub, .card-bd { overflow-wrap: break-word; }
|
|
|
|
/* Modal: cegah min-content 1 huruf (teks vertikal) di header & body modal */
|
|
.mo .mbody, .mo .mh .mt { overflow-wrap: break-word; }
|
|
|
|
/* Tipografi fluid untuk elemen utama (clamp) */
|
|
.page-title { font-size: clamp(17px, 16px + 0.6vw, 22px); }
|
|
.sc-val { font-size: clamp(17px, 16px + 0.7vw, 22px); line-height: 1.15; }
|
|
.card-hd { font-size: clamp(12.5px, 12px + 0.3vw, 14px); }
|
|
}
|