OPEN-ISP v0.5 (pickle-lime) — rilis open-source perdana
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
This commit is contained in:
oxpoe committed
commit
eaf05f2811
280 files changed
+123975
No files matched your search
@@ -0,0 +1,721 @@
|
||||
/* ============================================================================
|
||||
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); }
|
||||
}
|
||||
@@ -0,0 +1,895 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #0d1117;
|
||||
--bg2: #161b22;
|
||||
--bg3: #21262d;
|
||||
--border: rgba(240,246,252,0.1);
|
||||
--text: #e6edf3;
|
||||
--muted: #7d8590;
|
||||
--primary: #6366f1;
|
||||
--pdim: rgba(99,102,241,0.15);
|
||||
--success: #3fb950;
|
||||
--sdim: rgba(63,185,80,0.15);
|
||||
--warning: #d29922;
|
||||
--wdim: rgba(210,153,34,0.15);
|
||||
--danger: #f85149;
|
||||
--ddim: rgba(248,81,73,0.15);
|
||||
--info: #58a6ff;
|
||||
--idim: rgba(88,166,255,0.15);
|
||||
--panel2: #1c222c;
|
||||
--sw: 240px;
|
||||
}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;display:flex;font-size:14px}
|
||||
|
||||
/* ── SIDEBAR ── */
|
||||
.sidebar{width:var(--sw);height:100vh;background:var(--bg2);border-right:1px solid var(--border);position:fixed;left:0;top:0;display:flex;flex-direction:column;z-index:100;overflow-y:auto;scrollbar-width:thin}
|
||||
.sb-brand{padding:18px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
|
||||
.sb-icon{width:38px;height:38px;background:linear-gradient(135deg,#6366f1,#818cf8);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
|
||||
.sb-name{font-size:13px;font-weight:700;line-height:1.3;color:var(--text)}
|
||||
.sb-sub{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
|
||||
.sb-nav{flex:1;padding:12px 0 40px}
|
||||
.sb-section{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:1px;text-transform:uppercase;padding:14px 16px 5px}
|
||||
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 16px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:500;border-left:3px solid transparent;transition:all .2s;margin:1px 0}
|
||||
.sb-item:hover{color:var(--text);background:rgba(255,255,255,.04)}
|
||||
.sb-item.active{color:var(--primary);background:var(--pdim);border-left-color:var(--primary)}
|
||||
.sb-item.logout{color:var(--danger)}
|
||||
.sb-item.logout:hover{background:var(--ddim)}
|
||||
.sb-item i{font-size:15px;width:18px;text-align:center}
|
||||
|
||||
/* ── MAIN ── */
|
||||
.mw{margin-left:var(--sw);flex:1;height:100vh;overflow-y:auto;overflow-x:auto;display:flex;flex-direction:column}
|
||||
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:13px 22px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50}
|
||||
.tb-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
|
||||
.tb-title i{color:var(--primary)}
|
||||
.tb-right{display:flex;align-items:center;gap:10px}
|
||||
.adm-badge{background:var(--pdim);color:var(--primary);padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600}
|
||||
.page{padding:22px;flex:1}
|
||||
|
||||
/* ── STAT GRID ── */
|
||||
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
|
||||
.sc{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px;position:relative;overflow:hidden;transition:transform .2s}
|
||||
.sc:hover{transform:translateY(-2px)}
|
||||
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
|
||||
.sc.p::before{background:linear-gradient(90deg,#6366f1,#818cf8)}
|
||||
.sc.s::before{background:linear-gradient(90deg,#3fb950,#4ade80)}
|
||||
.sc.w::before{background:linear-gradient(90deg,#d29922,#f59e0b)}
|
||||
.sc.d::before{background:linear-gradient(90deg,#f85149,#fb7185)}
|
||||
.sc.i::before{background:linear-gradient(90deg,#58a6ff,#38bdf8)}
|
||||
.sc-icon{position:absolute;top:14px;right:14px;font-size:26px;opacity:.12}
|
||||
.sc-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
|
||||
.sc-val{font-size:26px;font-weight:700;line-height:1}
|
||||
.sc-sub{font-size:11px;color:var(--muted);margin-top:3px}
|
||||
|
||||
/* ── CARD ── */
|
||||
.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:18px}
|
||||
.card-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
|
||||
.card-hd h6{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;margin:0}
|
||||
.card-hd h6 i{color:var(--primary)}
|
||||
.card-bd{padding:18px}
|
||||
|
||||
/* ── TABLE ── */
|
||||
.tbl-wrap{overflow-x:auto}
|
||||
.dtbl{width:100%;border-collapse:collapse;font-size:13px}
|
||||
.dtbl th{background:var(--bg3);padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
|
||||
.dtbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
|
||||
.dtbl tr:hover td{background:rgba(255,255,255,.02)}
|
||||
.dtbl tr:last-child td{border-bottom:none}
|
||||
.dtbl .num{text-align:right}
|
||||
|
||||
/* ── BADGES ── */
|
||||
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
|
||||
.bs{background:var(--sdim);color:var(--success)}
|
||||
.bd{background:var(--ddim);color:var(--danger)}
|
||||
.bw{background:var(--wdim);color:var(--warning)}
|
||||
.bp{background:var(--pdim);color:var(--primary)}
|
||||
.bm{background:rgba(125,133,144,.12);color:var(--muted)}
|
||||
|
||||
/* ── BUTTONS ── */
|
||||
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .2s;text-decoration:none;font-family:inherit}
|
||||
.btn:hover{opacity:.85;transform:translateY(-1px)}
|
||||
.btn-p{background:var(--primary);color:#fff}
|
||||
.btn-s{background:var(--success);color:#fff}
|
||||
.btn-d{background:var(--danger);color:#fff}
|
||||
.btn-w{background:var(--warning);color:#fff}
|
||||
.btn-g{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border)}
|
||||
.btn-sm{padding:5px 10px;font-size:12px}
|
||||
.btn-icon{padding:6px 8px;border-radius:7px}
|
||||
|
||||
/* ── FORMS ── */
|
||||
.fg{margin-bottom:14px}
|
||||
.fl{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
|
||||
.fc,.fs{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 13px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border-color .2s}
|
||||
.fc:focus,.fs:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--pdim)}
|
||||
.fc::placeholder{color:var(--muted)}
|
||||
.fs option{background:var(--bg2)}
|
||||
textarea.fc{resize:vertical;min-height:75px}
|
||||
.form-row, .form-row2, .form-row3 {display:grid;gap:14px}
|
||||
.form-row{grid-template-columns:1fr 1fr}
|
||||
.form-row2{grid-template-columns:1fr 1fr}
|
||||
.form-row3{grid-template-columns:1fr 1fr 1fr}
|
||||
.settings-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
||||
.settings-span-2 {grid-column:span 2}
|
||||
.sidebar-settings-save-grid {display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:12px;align-items:end}
|
||||
|
||||
/* ── SEARCH ROW ── */
|
||||
.srow{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
|
||||
.sinput{position:relative;flex:1;min-width:180px}
|
||||
.sinput input{padding-left:34px}
|
||||
.sinput i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
|
||||
|
||||
/* ── MODAL ── */
|
||||
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;align-items:center;justify-content:center}
|
||||
.mo.show{display:flex}
|
||||
.mb{background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:90%;max-width:520px;max-height:90vh;overflow-y:auto}
|
||||
.mh{padding:18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
|
||||
.mt{font-size:14px;font-weight:600}
|
||||
.mc{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
|
||||
.mc:hover{color:var(--text)}
|
||||
.mbody{padding:18px}
|
||||
.mf{padding:14px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
|
||||
|
||||
/* ── ALERT ── */
|
||||
.alert{padding:11px 15px;border-radius:8px;margin-bottom:14px;font-size:13px;display:flex;align-items:center;gap:8px}
|
||||
.alert-s{background:var(--sdim);color:var(--success);border:1px solid rgba(63,185,80,.3)}
|
||||
.alert-d{background:var(--ddim);color:var(--danger);border:1px solid rgba(248,81,73,.3)}
|
||||
.alert-w{background:var(--wdim);color:var(--warning);border:1px solid rgba(210,153,34,.3)}
|
||||
.alert-i{background:var(--idim);color:var(--info);border:1px solid rgba(88,166,255,.3)}
|
||||
|
||||
/* ── MISC ── */
|
||||
.currency::before{content:'Rp '}
|
||||
.text-right{text-align:right}
|
||||
.text-center{text-align:center}
|
||||
.text-muted{color:var(--muted)}
|
||||
.fw6{font-weight:600}
|
||||
.mb16{margin-bottom:16px}
|
||||
.flex{display:flex}.gap{gap:10px}.ai-c{align-items:center}.jc-sb{justify-content:space-between}
|
||||
.text-danger{color:var(--danger) !important}
|
||||
.text-success{color:var(--success) !important}
|
||||
.text-warning{color:var(--warning) !important}
|
||||
|
||||
/* ── DASHBOARD RESPONSIVE GRIDS ── */
|
||||
.dash-main-grid{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-top:4px}
|
||||
.quick-actions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
|
||||
|
||||
@media(max-width:768px){
|
||||
.dash-main-grid{grid-template-columns:1fr}
|
||||
.quick-actions-grid{grid-template-columns:repeat(2,1fr)}
|
||||
}
|
||||
|
||||
/* ── MOBILE FIXES ── */
|
||||
*{-webkit-tap-highlight-color:transparent}
|
||||
html,body{width:100%}
|
||||
|
||||
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90;backdrop-filter:blur(2px)}
|
||||
.sidebar-overlay.show{display:block}
|
||||
.sb-close{display:none}
|
||||
.hb-menu{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:5px;line-height:1}
|
||||
|
||||
/* ── BOTTOM NAV ── */
|
||||
.bottom-nav{
|
||||
display:none;
|
||||
position:fixed;bottom:0;left:0;right:0;
|
||||
width:100%;
|
||||
background:var(--bg2);
|
||||
border-top:1px solid var(--border);
|
||||
z-index:300;
|
||||
padding:6px 0 calc(6px + env(safe-area-inset-bottom));
|
||||
gap:0;
|
||||
backdrop-filter:blur(20px);
|
||||
-webkit-backdrop-filter:blur(20px);
|
||||
}
|
||||
.bn-item{
|
||||
flex:1;display:flex;flex-direction:column;align-items:center;
|
||||
gap:3px;padding:6px 4px;
|
||||
color:var(--muted);text-decoration:none;
|
||||
font-size:9px;font-weight:600;letter-spacing:.3px;
|
||||
text-transform:uppercase;transition:color .2s;border:none;background:none;cursor:pointer;
|
||||
}
|
||||
.bn-item i{font-size:20px;line-height:1}
|
||||
.bn-item.active{color:var(--primary)}
|
||||
.bn-item:hover{color:var(--text)}
|
||||
|
||||
@media(max-width:992px){
|
||||
:root { --sw: 0px; }
|
||||
.sidebar{width:260px;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 10px 0 30px rgba(0,0,0,0.5);}
|
||||
.sidebar.open{transform:translateX(0);z-index:400}
|
||||
.sidebar.open ~ .bottom-nav{display:none !important}
|
||||
.mw{margin-left:0}
|
||||
.sb-close{display:flex}
|
||||
.hb-menu{display:block}
|
||||
.stat-grid{grid-template-columns:repeat(2,1fr)}
|
||||
.settings-grid{grid-template-columns:1fr;gap:16px}
|
||||
.settings-span-2{grid-column:span 1}
|
||||
}
|
||||
|
||||
@media(max-width:768px){
|
||||
.bottom-nav{display:flex}
|
||||
.mw{padding-bottom:70px}
|
||||
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
|
||||
.filter-bar{gap:8px}
|
||||
.form-row, .form-row2, .form-row3{grid-template-columns:1fr}
|
||||
.sidebar-settings-save-grid{grid-template-columns:1fr;align-items:stretch}
|
||||
}
|
||||
|
||||
@media(max-width:576px){
|
||||
.stat-grid{grid-template-columns:1fr 1fr}
|
||||
.topbar{padding:10px 14px}
|
||||
.page{padding:12px}
|
||||
.tb-title{font-size:13px}
|
||||
.adm-badge{display:none}
|
||||
.filter-bar{flex-direction:column;align-items:stretch}
|
||||
.filter-bar .sinput,.filter-bar select{max-width:none !important;width:100% !important}
|
||||
/* table font smaller on phone */
|
||||
.dtbl{font-size:12px}
|
||||
.dtbl th,.dtbl td{padding:9px 10px}
|
||||
/* modal full width */
|
||||
.mb{width:96%;border-radius:16px 16px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:92vh;margin:0 auto}
|
||||
.mo.show{align-items:flex-end}
|
||||
}
|
||||
|
||||
/* ── LIGHT THEME COMPREHENSIVE OVERRIDES ── */
|
||||
:root[data-theme="light"],
|
||||
html[data-theme="light"],
|
||||
html.light-theme,
|
||||
body.light-theme,
|
||||
[data-theme="light"] {
|
||||
--bg: #f8fafc;
|
||||
--bg2: #ffffff;
|
||||
--bg3: #f1f5f9;
|
||||
--border: rgba(0, 0, 0, 0.12);
|
||||
--text: #0f172a;
|
||||
--muted: #64748b;
|
||||
--primary: #4f46e5;
|
||||
--pdim: rgba(79, 70, 229, 0.12);
|
||||
--success: #16a34a;
|
||||
--sdim: rgba(22, 163, 74, 0.12);
|
||||
--warning: #d97706;
|
||||
--wdim: rgba(217, 119, 6, 0.12);
|
||||
--danger: #dc2626;
|
||||
--ddim: rgba(220, 38, 38, 0.12);
|
||||
--info: #0284c7;
|
||||
--idim: rgba(2, 132, 199, 0.12);
|
||||
--panel2: #f8fafc;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html[data-theme="light"] body,
|
||||
html[data-theme="light"] .mw,
|
||||
html[data-theme="light"] .page,
|
||||
html[data-theme="light"] .main-content,
|
||||
html[data-theme="light"] .content-wrapper,
|
||||
html[data-theme="light"] main {
|
||||
background-color: #f8fafc !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .sidebar,
|
||||
html[data-theme="light"] .topbar,
|
||||
html[data-theme="light"] .card,
|
||||
html[data-theme="light"] .mb,
|
||||
html[data-theme="light"] .mb-card,
|
||||
html[data-theme="light"] .bottom-nav,
|
||||
html[data-theme="light"] .modal-content,
|
||||
html[data-theme="light"] .modal-body,
|
||||
html[data-theme="light"] .modal-header,
|
||||
html[data-theme="light"] .modal-footer,
|
||||
html[data-theme="light"] .sc,
|
||||
html[data-theme="light"] .sc-card,
|
||||
html[data-theme="light"] .stat-card,
|
||||
html[data-theme="light"] .stat-card-v2,
|
||||
html[data-theme="light"] .box {
|
||||
background-color: #ffffff !important;
|
||||
color: #0f172a !important;
|
||||
border-color: rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .card-hd,
|
||||
html[data-theme="light"] .mh,
|
||||
html[data-theme="light"] .mf,
|
||||
html[data-theme="light"] .sb-brand,
|
||||
html[data-theme="light"] .topbar {
|
||||
border-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .sb-name,
|
||||
html[data-theme="light"] .tb-title,
|
||||
html[data-theme="light"] .card-hd h6,
|
||||
html[data-theme="light"] .mt,
|
||||
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
|
||||
html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6,
|
||||
html[data-theme="light"] .sc-val,
|
||||
html[data-theme="light"] strong,
|
||||
html[data-theme="light"] b {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .fc,
|
||||
html[data-theme="light"] .fs,
|
||||
html[data-theme="light"] input,
|
||||
html[data-theme="light"] select,
|
||||
html[data-theme="light"] textarea,
|
||||
html[data-theme="light"] .form-control,
|
||||
html[data-theme="light"] .form-select {
|
||||
background-color: #ffffff !important;
|
||||
color: #0f172a !important;
|
||||
border-color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] select option {
|
||||
background-color: #ffffff !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .dtbl,
|
||||
html[data-theme="light"] .table,
|
||||
html[data-theme="light"] table {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .dtbl th,
|
||||
html[data-theme="light"] .table th,
|
||||
html[data-theme="light"] table th {
|
||||
background-color: #f1f5f9 !important;
|
||||
color: #475569 !important;
|
||||
border-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .dtbl td,
|
||||
html[data-theme="light"] .table td,
|
||||
html[data-theme="light"] table td {
|
||||
background-color: #ffffff !important;
|
||||
color: #0f172a !important;
|
||||
border-color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .dtbl tr:hover td,
|
||||
html[data-theme="light"] .table tr:hover td,
|
||||
html[data-theme="light"] table tr:hover td {
|
||||
background-color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .router-selector,
|
||||
html[data-theme="light"] .filter-bar {
|
||||
background-color: #f1f5f9 !important;
|
||||
border-color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .btn-g {
|
||||
background-color: #f1f5f9 !important;
|
||||
color: #0f172a !important;
|
||||
border-color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .sb-item {
|
||||
color: #475569 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .sb-item:hover {
|
||||
color: #0f172a !important;
|
||||
background-color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .sb-item.active {
|
||||
color: #4f46e5 !important;
|
||||
background-color: rgba(79, 70, 229, 0.1) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .mo,
|
||||
html[data-theme="light"] .modal-backdrop {
|
||||
background: rgba(15, 23, 42, 0.5) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] pre,
|
||||
html[data-theme="light"] code {
|
||||
background-color: #f1f5f9 !important;
|
||||
color: #0f172a !important;
|
||||
border-color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
UNIVERSAL PRINT STYLESHEET (ADMIN & MANAGEMENT PORTALS)
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
@media print {
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 10mm 12mm 12mm 12mm;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
background: transparent !important;
|
||||
color: #000000 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
overflow: visible !important;
|
||||
display: block !important;
|
||||
background: #ffffff !important;
|
||||
color: #000000 !important;
|
||||
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
|
||||
font-size: 10pt !important;
|
||||
line-height: 1.35 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Hide Navigation, Sidebars, Action Buttons & Modals */
|
||||
.sidebar,
|
||||
.topbar,
|
||||
.hb-menu,
|
||||
.btn,
|
||||
.btn-p,
|
||||
.btn-s,
|
||||
.btn-d,
|
||||
.btn-w,
|
||||
.btn-g,
|
||||
.btn-icon,
|
||||
.srow,
|
||||
.sinput,
|
||||
.search-box,
|
||||
.pagination,
|
||||
.alert,
|
||||
.mo,
|
||||
.modal,
|
||||
.modal-backdrop,
|
||||
.no-print,
|
||||
.router-selector,
|
||||
.filter-bar,
|
||||
.filter-group,
|
||||
.nav-tabs,
|
||||
.tab-buttons,
|
||||
.floating-btn,
|
||||
.action-col,
|
||||
th.action-col,
|
||||
td.action-col,
|
||||
th:last-child:not(.print-keep),
|
||||
td:last-child:not(.print-keep),
|
||||
.card-hd .btn,
|
||||
.card-hd a,
|
||||
.adm-badge,
|
||||
.leaflet-control-container,
|
||||
#picker-map,
|
||||
form select,
|
||||
form input[type="text"]:not(.print-val),
|
||||
form button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Main Wrapper Expansion */
|
||||
.mw {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Card & Containers */
|
||||
.card {
|
||||
background: #ffffff !important;
|
||||
border: 1px solid #cbd5e1 !important;
|
||||
border-radius: 4px !important;
|
||||
box-shadow: none !important;
|
||||
margin-bottom: 14px !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
}
|
||||
|
||||
.card-hd {
|
||||
padding: 10px 14px !important;
|
||||
background: #f8fafc !important;
|
||||
border-bottom: 1.5px solid #cbd5e1 !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
.card-hd h6 {
|
||||
font-size: 11pt !important;
|
||||
font-weight: bold !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
.card-bd {
|
||||
padding: 12px 14px !important;
|
||||
}
|
||||
|
||||
/* Stat Grids */
|
||||
.stat-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(4, 1fr) !important;
|
||||
gap: 8px !important;
|
||||
margin-bottom: 14px !important;
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
}
|
||||
|
||||
.sc {
|
||||
background: #ffffff !important;
|
||||
border: 1px solid #cbd5e1 !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 10px !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sc::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sc-val {
|
||||
font-size: 14pt !important;
|
||||
font-weight: bold !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
.sc-label {
|
||||
font-size: 8.5pt !important;
|
||||
color: #475569 !important;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.tbl-wrap {
|
||||
overflow: visible !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
table, .dtbl, .table {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
border-collapse: collapse !important;
|
||||
font-size: 8.5pt !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
table th, .dtbl th, .table th {
|
||||
background: #f1f5f9 !important;
|
||||
color: #0f172a !important;
|
||||
border: 1px solid #cbd5e1 !important;
|
||||
padding: 6px 8px !important;
|
||||
font-size: 8pt !important;
|
||||
font-weight: bold !important;
|
||||
text-transform: uppercase !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
table td, .dtbl td, .table td {
|
||||
background: #ffffff !important;
|
||||
color: #0f172a !important;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
padding: 5px 8px !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
table thead, .dtbl thead {
|
||||
display: table-header-group !important;
|
||||
}
|
||||
|
||||
table tr, .dtbl tr {
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) td, .dtbl tr:nth-child(even) td {
|
||||
background: #f8fafc !important;
|
||||
}
|
||||
|
||||
/* Badges & Status */
|
||||
.badge, .status-badge {
|
||||
border: 1px solid #475569 !important;
|
||||
background: #ffffff !important;
|
||||
color: #000000 !important;
|
||||
font-size: 7.5pt !important;
|
||||
font-weight: bold !important;
|
||||
padding: 1px 6px !important;
|
||||
border-radius: 3px !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* Page Break Helpers */
|
||||
.page-break {
|
||||
page-break-before: always !important;
|
||||
break-before: page !important;
|
||||
}
|
||||
|
||||
.avoid-break {
|
||||
page-break-inside: avoid !important;
|
||||
break-inside: avoid !important;
|
||||
}
|
||||
|
||||
/* Auto Print Header */
|
||||
.print-only {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.print-only {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
Bootstrap-utility shim — app hanya memuat bootstrap-icons, bukan
|
||||
Bootstrap CSS. Ini melengkapi utilitas yang dipakai di view.
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-block{display:block}.d-inline{display:inline}
|
||||
.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}
|
||||
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}.justify-content-end{justify-content:flex-end}.justify-content-start{justify-content:flex-start}
|
||||
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}
|
||||
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:16px}
|
||||
.m-0{margin:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:16px}
|
||||
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
|
||||
.me-1{margin-right:4px}.me-2{margin-right:8px}.me-3{margin-right:16px}
|
||||
.ms-1{margin-left:4px}.ms-2{margin-left:8px}.ms-3{margin-left:16px}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.p-2{padding:8px}.p-3{padding:16px}
|
||||
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:16px;padding-right:16px}
|
||||
.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:4px;padding-bottom:4px}.py-2{padding-top:8px;padding-bottom:8px}
|
||||
.w-100{width:100%}
|
||||
.fw-bold,.font-weight-bold{font-weight:700}
|
||||
.text-start{text-align:left}.text-end{text-align:right}
|
||||
.text-primary{color:var(--primary)!important}.text-info{color:var(--info)!important}
|
||||
.row{display:flex;flex-wrap:wrap}
|
||||
.col-4{flex:0 0 33.3333%;max-width:33.3333%}.col-6{flex:0 0 50%;max-width:50%}.col-12{flex:0 0 100%;max-width:100%}
|
||||
@media(max-width:560px){.col-6{flex:0 0 100%;max-width:100%}}
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
Modal global — rapi & responsif (berlaku untuk semua .mo)
|
||||
Header & footer sticky, isi (.mbody) scroll, mobile = bottom-sheet.
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.mo .mb{display:flex;flex-direction:column;overflow-x:hidden}
|
||||
.mo .mh{position:sticky;top:0;z-index:6;background:var(--bg2);gap:10px;flex-wrap:nowrap;align-items:center}
|
||||
.mo .mh .mt{line-height:1.3;min-width:0;flex:1;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px}
|
||||
.mo .mh .mc{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
|
||||
.mo .mh .mc:hover{background:var(--bg3);color:var(--text)}
|
||||
.mo .mf{position:sticky;bottom:0;z-index:6;background:var(--bg2);flex-wrap:wrap}
|
||||
.mo .mbody{overflow-wrap:anywhere}
|
||||
.mo .mbody img{max-width:100%;height:auto}
|
||||
.mo .mb .card{box-shadow:none}
|
||||
|
||||
@media(max-width:768px){
|
||||
.mo{align-items:flex-end}
|
||||
.mo .mb{width:100%;max-width:100% !important;border-radius:18px 18px 0 0;max-height:94vh;padding-bottom:env(safe-area-inset-bottom,0)}
|
||||
.mo .mh{border-radius:18px 18px 0 0;padding:15px 16px}
|
||||
.mo .mbody{padding:14px 16px}
|
||||
.mo .mf{padding:12px 16px;flex-direction:column;align-items:stretch;gap:8px;border-radius:0}
|
||||
.mo .mf form{width:100%;display:block}
|
||||
.mo .mf .btn,.mo .mf button,.mo .mf a{width:100%;justify-content:center;text-align:center}
|
||||
.mo .mh .mt{font-size:13.5px}
|
||||
}
|
||||
|
||||
/* modal: hilangkan gap sticky footer (safe-area dipindah ke footer) */
|
||||
.mo .mb{padding:0}
|
||||
@media(max-width:768px){ .mo .mf{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0))} }
|
||||
|
||||
/* paksa: tidak ada padding pada kontainer modal (footer flush ke dasar) */
|
||||
.mo .mb{padding:0 !important}
|
||||
@media(max-width:768px){ .mo .mb{padding-bottom:0 !important} .mo .mf{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0)) !important} }
|
||||
|
||||
|
||||
/* ══ Bagian A: teks panjang & tabel di mobile ═══════════════════════
|
||||
- .dtbl td: break-word (bukan anywhere) → kolom tak menyusut 1 huruf
|
||||
- tabel mobile: min-width + wrapper scroll horizontal (geser kanan-kiri)
|
||||
- kolom kode/status/angka: nowrap agar tidak pecah
|
||||
- kartu KPI: beri ruang ikon + angka panjang tidak terpotong
|
||||
═══════════════════════════════════════════════════════════════════ */
|
||||
.dtbl td{overflow-wrap:break-word}
|
||||
.dtbl td code,.dtbl td .badge,.dtbl td.num,.dtbl td .mono,.dtbl td .text-nowrap{white-space:nowrap}
|
||||
.dtbl th{white-space:nowrap}
|
||||
|
||||
.sc{padding-right:46px}
|
||||
.sc-val{overflow-wrap:break-word;line-height:1.15}
|
||||
|
||||
@media(max-width:768px){
|
||||
.dtbl{min-width:680px}
|
||||
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
|
||||
.tbl-wrap::-webkit-scrollbar{height:8px}
|
||||
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
|
||||
}
|
||||
@media(max-width:576px){
|
||||
.sc{padding:16px 42px 16px 16px}
|
||||
.sc-icon{font-size:22px;top:12px;right:12px}
|
||||
.sc-val{font-size:22px}
|
||||
.dtbl{min-width:640px}
|
||||
}
|
||||
|
||||
|
||||
/* Bagian A lanjutan: semua wrapper tabel + min-width (geser horizontal) */
|
||||
.tbl-wrap,.table-container,.table-responsive,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
|
||||
@media(max-width:768px){
|
||||
.dtbl,
|
||||
.tbl-wrap > table,
|
||||
.table-container > table,
|
||||
.table-responsive > table,
|
||||
.table-wrap > table{min-width:680px}
|
||||
}
|
||||
|
||||
|
||||
/* Bagian A lanjutan: topbar & kartu KPI di mobile */
|
||||
@media(max-width:768px){
|
||||
.topbar{flex-wrap:wrap;gap:8px 10px;row-gap:8px}
|
||||
.tb-title{min-width:0;flex:1 1 100%;order:-1}
|
||||
.tb-right{flex-wrap:wrap;justify-content:flex-start;gap:8px;flex:1 1 100%}
|
||||
.realtime-bar{display:none}
|
||||
.stat-grid,.stat-grid-3,.stat-grid-4{grid-template-columns:repeat(2,1fr) !important}
|
||||
}
|
||||
|
||||
|
||||
/* ══ Bagian B: kolom pertama sticky saat tabel digeser (mobile) ══════ */
|
||||
@media(max-width:768px){
|
||||
.dtbl th:first-child, .dtbl td:first-child{
|
||||
position:sticky; left:0; z-index:3;
|
||||
background:var(--bg2);
|
||||
box-shadow:1px 0 0 var(--border);
|
||||
}
|
||||
.dtbl th:first-child{ background:var(--bg3); z-index:4; }
|
||||
.dtbl tr:hover td:first-child{ background:var(--bg2); }
|
||||
/* tabel di dalam wrapper khusus (non-.dtbl) */
|
||||
.tbl-wrap > table th:first-child, .tbl-wrap > table td:first-child{
|
||||
position:sticky; left:0; z-index:3; background:var(--bg2); box-shadow:1px 0 0 var(--border);
|
||||
}
|
||||
}
|
||||
html[data-theme="light"] .dtbl td:first-child,
|
||||
html.light-theme .dtbl td:first-child{ background:#fff; }
|
||||
html[data-theme="light"] .dtbl th:first-child,
|
||||
html.light-theme .dtbl th:first-child{ background:#f1f5f9; }
|
||||
|
||||
/* Bagian B2: Pelanggan -> sembunyikan # , sticky kolom Nama */
|
||||
@media(max-width:768px){
|
||||
.stick-name-mobile th:first-child, .stick-name-mobile td:first-child{ display:none !important; }
|
||||
.stick-name-mobile th:nth-child(2), .stick-name-mobile td:nth-child(2){
|
||||
position:sticky; left:0; z-index:3; background:var(--bg2); box-shadow:1px 0 0 var(--border);
|
||||
}
|
||||
.stick-name-mobile th:nth-child(2){ background:var(--bg3); z-index:4; }
|
||||
}
|
||||
html[data-theme="light"] .stick-name-mobile td:nth-child(2),html.light-theme .stick-name-mobile td:nth-child(2){background:#fff}
|
||||
|
||||
|
||||
/* ══ Bagian B3: sticky kolom pertama utk tabel non-.dtbl (ACS, Routers live) ══ */
|
||||
@media(max-width:768px){
|
||||
.table-container > table > thead > tr > th:first-child,
|
||||
.table-container > table > tbody > tr > td:first-child,
|
||||
.mt-tablewrap > table > thead > tr > th:first-child,
|
||||
.mt-tablewrap > table > tbody > tr > td:first-child{
|
||||
position:sticky !important; left:0; z-index:3;
|
||||
background:var(--bg2); box-shadow:1px 0 0 var(--border);
|
||||
}
|
||||
.table-container > table > thead > tr > th:first-child,
|
||||
.mt-tablewrap > table > thead > tr > th:first-child{ background:var(--bg3); z-index:4; }
|
||||
.mt-tablewrap > table{ min-width:680px; }
|
||||
}
|
||||
html[data-theme="light"] .table-container > table > tbody > tr > td:first-child,
|
||||
html.light-theme .table-container > table > tbody > tr > td:first-child{ background:#fff; }
|
||||
html[data-theme="light"] .table-container > table > thead > tr > th:first-child,
|
||||
html.light-theme .table-container > table > thead > tr > th:first-child{ background:#f1f5f9; }
|
||||
|
||||
|
||||
/* ══ Sticky cell: latar SOLID (juga saat hover/highlight) ══════════════
|
||||
Hover baris = rgba(173,255,47,.035) di atas --bg2 → warna solid #161e22
|
||||
(terang: rgba(120,160,0,.06) di atas #fff → #f7f9f0). Sel sticky harus
|
||||
opak agar konten di bawahnya tidak tembus. */
|
||||
:root{ --row-hover-bg:#161e22; }
|
||||
html[data-theme="light"], html.light-theme, [data-theme="light"], body.light-theme{ --row-hover-bg:#f7f9f0; }
|
||||
|
||||
@media(max-width:768px){
|
||||
.dtbl tbody tr:hover > td:first-child,
|
||||
.dtbl tbody tr:hover > td:first-child,
|
||||
.stick-name-mobile tbody tr:hover > td:nth-child(2),
|
||||
.tbl-wrap > table > tbody > tr:hover > td:first-child,
|
||||
.table-container > table > tbody > tr:hover > td:first-child,
|
||||
.mt-tablewrap > table > tbody > tr:hover > td:first-child{
|
||||
background: var(--row-hover-bg) !important;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
}
|
||||
/* desktop juga: sel sticky (mis. Pelanggan nama) solid saat hover */
|
||||
.stick-name-mobile tbody tr:hover > td:nth-child(2){ background: var(--row-hover-bg) !important; }
|
||||
|
||||
|
||||
/* ══ Baris tercentang (checkbox baris pertama) → warna beda ═══════════
|
||||
Dark: lebih TERANG (2–3x). Light: lebih GELAP. Termasuk sel sticky. */
|
||||
:root{ --row-checked-bg:#2f3b4a; } /* lebih terang dari --bg2 #161b22 */
|
||||
html[data-theme="light"], html.light-theme, [data-theme="light"], body.light-theme{ --row-checked-bg:#d7dfe7; } /* lebih gelap dari #fff */
|
||||
|
||||
.dtbl tbody tr:has(> td:first-child input[type="checkbox"]:checked) > td,
|
||||
.tbl-wrap > table > tbody > tr:has(> td:first-child input[type="checkbox"]:checked) > td,
|
||||
.table-container > table > tbody > tr:has(> td:first-child input[type="checkbox"]:checked) > td,
|
||||
.table-responsive > table > tbody > tr:has(> td:first-child input[type="checkbox"]:checked) > td,
|
||||
.table-wrap > table > tbody > tr:has(> td:first-child input[type="checkbox"]:checked) > td{
|
||||
background: var(--row-checked-bg) !important;
|
||||
}
|
||||
/* pastikan sel sticky ikut (menang atas aturan sticky/hover) */
|
||||
.dtbl tbody tr:has(> td:first-child input[type="checkbox"]:checked) > td:first-child,
|
||||
.tbl-wrap > table > tbody > tr:has(> td:first-child input[type="checkbox"]:checked) > td:first-child,
|
||||
.table-container > table > tbody > tr:has(> td:first-child input[type="checkbox"]:checked) > td:first-child{
|
||||
background: var(--row-checked-bg) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ══ Topbar mobile: tinggi KONSISTEN (judul 1 baris + aksi 1 baris scroll) ══ */
|
||||
@media(max-width:768px){
|
||||
.topbar{
|
||||
flex-wrap: wrap;
|
||||
row-gap: 8px;
|
||||
column-gap: 10px;
|
||||
padding: 9px 14px;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
}
|
||||
.topbar .tb-title{
|
||||
flex: 1 1 100%;
|
||||
order: -1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.topbar .tb-title .hb-menu{ flex: 0 0 auto; }
|
||||
.topbar .tb-right{
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
padding-bottom: 2px;
|
||||
min-height: 0;
|
||||
}
|
||||
.topbar .tb-right::-webkit-scrollbar{ display: none; }
|
||||
.topbar .tb-right > *{ flex: 0 0 auto; }
|
||||
.topbar .realtime-bar{ display: none; }
|
||||
}
|
||||
|
||||
|
||||
/* Topbar mobile: paksa 1 baris & tinggi seragam antar halaman */
|
||||
@media(max-width:768px){
|
||||
.topbar .tb-title{ min-height:34px; }
|
||||
.topbar .tb-right{
|
||||
flex-wrap: nowrap !important;
|
||||
overflow-x: auto !important;
|
||||
overflow-y: hidden;
|
||||
min-height: 34px;
|
||||
align-items: center;
|
||||
}
|
||||
.topbar .tb-right::-webkit-scrollbar{ display:none; }
|
||||
.topbar .tb-right > *{ flex: 0 0 auto; margin: 0; }
|
||||
/* seragamkan tinggi elemen aksi (tombol, select/router-selector, badge) */
|
||||
.topbar .tb-right .btn,
|
||||
.topbar .tb-right .sn-badge,
|
||||
.topbar .tb-right .router-selector{ height: 34px !important; box-sizing: border-box; display: inline-flex; align-items: center; }
|
||||
.topbar .tb-right .router-selector{ padding-top: 0 !important; padding-bottom: 0 !important; }
|
||||
.topbar .tb-right .fs{ height: 30px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
|
||||
}
|
||||
|
||||
|
||||
/* ══ ACS (GenieACS) header & tab: rapi di mobile ══ */
|
||||
.acs-box .tab-bar{ padding:14px 14px 0 !important; margin:0 0 4px 0 !important; }
|
||||
@media(max-width:768px){
|
||||
.acs-head{ flex-wrap:wrap !important; gap:10px; margin-bottom:16px !important; }
|
||||
.acs-head .page-title{ font-size:22px !important; line-height:1.15; width:100%; }
|
||||
.acs-head > div:last-child{ display:flex; flex-wrap:wrap; gap:8px; width:100%; }
|
||||
.acs-head > div:last-child .btn{ flex:1 1 auto; justify-content:center; }
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
auth.css — Halaman autentikasi & publik (login, register, OTP, cek tagihan)
|
||||
Memakai token/warna dari landing.css (dimuat lebih dulu).
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── LAYOUT LOGIN ── */
|
||||
.auth-hero{padding:clamp(18px,3vw,42px) 0;min-height:calc(100vh - var(--nav-h));min-height:calc(100dvh - var(--nav-h));display:flex;align-items:center}
|
||||
.auth-hero > .container{width:min(1180px,92vw);margin-inline:auto}
|
||||
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
|
||||
.auth-copy h1{font-size:clamp(30px,4.6vw,50px);margin:16px 0 12px}
|
||||
.auth-copy h1 .hl{color:var(--primary)}
|
||||
.auth-copy p.lead{color:var(--muted);font-size:clamp(15px,1.6vw,17px);max-width:52ch}
|
||||
.auth-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
|
||||
.auth-points li{display:flex;gap:10px;color:var(--muted);font-size:14.5px}
|
||||
.auth-points li i{color:var(--primary);margin-top:3px}
|
||||
.auth-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px;padding-top:24px;border-top:1px solid var(--border)}
|
||||
.auth-stats .st b{display:block;font-family:var(--font-display);font-size:22px;line-height:1}
|
||||
.auth-stats .st span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
|
||||
|
||||
/* ── KARTU LOGIN ── */
|
||||
.auth-card{background:var(--glass-2);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius);
|
||||
padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-3);position:relative;overflow:hidden;max-width:430px;margin:0 auto;width:100%}
|
||||
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
|
||||
background:linear-gradient(90deg,var(--primary),transparent 70%)}
|
||||
.auth-logo{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin:0 auto 10px;
|
||||
background:var(--pdim);border:1px solid var(--primary-glow)}
|
||||
.auth-logo img{width:32px;height:32px;object-fit:contain}
|
||||
.auth-card h2{font-size:19px;text-align:center}
|
||||
.auth-card .sub{text-align:center;color:var(--muted);font-size:13px;margin-top:3px}
|
||||
|
||||
/* ── FORM ── */
|
||||
.field{margin-top:14px}
|
||||
.field label{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;text-transform:uppercase;
|
||||
letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
|
||||
.field .wrap{position:relative;display:flex;align-items:center}
|
||||
.field .wrap > i.lead-ic{position:absolute;left:14px;color:var(--muted);font-size:16px;pointer-events:none}
|
||||
.inp{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px 12px 42px;
|
||||
color:var(--text);font:inherit;font-size:15px;outline:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
|
||||
.inp::placeholder{color:var(--muted)}
|
||||
.inp:hover{border-color:var(--primary-glow)}
|
||||
.inp:focus{border-color:var(--primary);box-shadow:var(--ring);background:var(--bg2)}
|
||||
.hint-line{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;margin-top:8px;justify-content:center}
|
||||
|
||||
.btn-auth{width:100%;margin-top:16px;padding:13px;font-size:15px;border-radius:12px}
|
||||
|
||||
/* ── ALERT ── */
|
||||
.auth-alert{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:11px;font-size:13px;margin-top:14px;border:1px solid transparent;font-weight:600}
|
||||
.auth-alert.err{background:var(--ddim);color:var(--danger);border-color:var(--danger-glow)}
|
||||
.auth-alert.ok{background:var(--sdim);color:var(--success);border-color:var(--success-glow)}
|
||||
.auth-alert.info{background:var(--idim);color:var(--info);border-color:rgba(56,189,248,.3)}
|
||||
|
||||
/* ── QUICK TOOLS ── */
|
||||
.quick-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
|
||||
.qtool{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:12px;
|
||||
background:var(--ghost);border:1px solid var(--border);color:var(--text);font-size:12.5px;font-weight:600;
|
||||
text-decoration:none;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
|
||||
.qtool:hover{transform:translateY(-2px);border-color:var(--primary-glow);background:var(--ghost-h)}
|
||||
.qtool i{font-size:20px;color:var(--primary)}
|
||||
|
||||
.auth-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--muted)}
|
||||
.auth-foot a{font-weight:700}
|
||||
|
||||
/* anchor di halaman ini jangan tertutup header */
|
||||
#packages,#features,#login-section{scroll-margin-top:84px}
|
||||
|
||||
/* ── Sembunyikan statistik pada mode aplikasi (PWA/standalone) ── */
|
||||
html.is-pwa .auth-stats{display:none!important}
|
||||
@media(display-mode:standalone){ .auth-stats{display:none!important} }
|
||||
|
||||
/* ── FORM UMUM (register, dll) ── */
|
||||
.form-card{background:var(--glass-2);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(20px,3vw,30px);box-shadow:var(--shadow-2)}
|
||||
.form-grid{display:grid;gap:14px}
|
||||
.form-grid.cols-2{grid-template-columns:1fr 1fr}
|
||||
.inp-plain{border-radius:12px;padding:12px 14px}
|
||||
textarea.inp,textarea.inp-plain{padding-left:14px;min-height:84px;resize:vertical}
|
||||
select.inp,select.inp-plain{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%238A96A6'%3E%3Cpath d='M1.5 5.5 8 12l6.5-6.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
|
||||
.form-note{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.4}
|
||||
.reg-wrap{padding:clamp(24px,4vw,52px) 0;display:flex;justify-content:center}
|
||||
.reg-wrap .form-card{width:100%;max-width:560px}
|
||||
.reg-head{text-align:center;margin-bottom:20px}
|
||||
.reg-head .auth-logo{margin-bottom:12px}
|
||||
.reg-head h1{font-size:22px}
|
||||
.reg-head p{color:var(--muted);font-size:13px;margin-top:3px}
|
||||
.loc-btns{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.chip-note{font-size:11.5px;color:var(--muted);margin-top:8px}
|
||||
|
||||
/* ── MODAL (auth) ── */
|
||||
.mo{display:none;position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:16px}
|
||||
.mo.show{display:flex;animation:fadein .18s var(--ease)}
|
||||
.mb{background:var(--bg2);border:1px solid var(--border);border-radius:16px;width:100%;max-width:660px;max-height:90vh;overflow:auto;color:var(--text);box-shadow:var(--shadow-3)}
|
||||
.mh{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
|
||||
.mh h3{font-size:15px;font-family:var(--font-display)}
|
||||
.mc{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1}
|
||||
.mc:hover{color:var(--danger)}
|
||||
.mbody{padding:18px}
|
||||
.mf{padding:14px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}
|
||||
#picker-map{height:320px;width:100%;border-radius:12px;overflow:hidden;background:var(--bg3)}
|
||||
|
||||
/* ── CEK TAGIHAN / PEMBAYARAN ── */
|
||||
.bill-wrap{padding:clamp(20px,3vw,40px) 0;display:flex;justify-content:center}
|
||||
.bill-card{width:100%;max-width:800px;background:var(--glass-2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);overflow:hidden}
|
||||
.bill-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--ghost)}
|
||||
.bill-head h1{font-size:17px}
|
||||
.bill-head .sub{color:var(--muted);font-size:12.5px}
|
||||
.bill-body{padding:20px}
|
||||
.search-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
|
||||
.search-row .field{flex:1;min-width:220px;margin-top:0}
|
||||
.btbl{width:100%;border-collapse:collapse;font-size:13px;color:var(--text)}
|
||||
.btbl th{padding:10px 12px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--ghost);border-bottom:1px solid var(--border);white-space:nowrap}
|
||||
.btbl td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
|
||||
.btbl tr:hover td{background:var(--ghost)}
|
||||
.btbl .num{text-align:right;font-variant-numeric:tabular-nums}
|
||||
.btbl tr:last-child td{border-bottom:none}
|
||||
.bill-sub{color:var(--muted);font-size:12px}
|
||||
.sec-title{font-weight:700;margin:18px 0 4px;display:flex;align-items:center;gap:8px}
|
||||
.sec-title i{color:var(--primary)}
|
||||
.srch-wrap{overflow-x:auto}
|
||||
.inv-radio{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
|
||||
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
|
||||
@media(max-width:430px){.pay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||||
.pay-scroll{max-height:230px;overflow:auto;padding-right:4px}
|
||||
.pay-radio{position:absolute;opacity:0;pointer-events:none}
|
||||
.pay-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--ghost);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);height:100%;min-width:0;overflow:hidden}
|
||||
.pay-item:hover{transform:translateY(-1px);border-color:var(--primary-glow)}
|
||||
.pay-radio:checked + .pay-item{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-glow)}
|
||||
.pay-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--border);flex:0 0 auto;overflow:hidden;font-size:19px;color:var(--primary)}
|
||||
.pay-logo{width:100%;height:100%;object-fit:contain;padding:7px;background:#fff}
|
||||
.pay-info{display:flex;flex-direction:column;min-width:0;flex:1}
|
||||
.pay-name{font-size:13.5px;font-weight:700;color:var(--text);word-break:break-word;line-height:1.25}
|
||||
.pay-sub{display:flex;flex-wrap:wrap;gap:5px;font-size:11px;color:var(--muted);margin-top:4px;min-width:0}
|
||||
.pay-chip{padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:11px;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
|
||||
.pay-chip.off{background:var(--ddim);color:var(--danger);border-color:var(--danger-glow)}
|
||||
@media(max-width:576px){
|
||||
.pay-item{flex-direction:column;align-items:center;text-align:center;gap:8px}
|
||||
.pay-info{align-items:center}
|
||||
.pay-sub{justify-content:center}
|
||||
.pay-name{font-size:13px}
|
||||
}
|
||||
.chk{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);margin:14px 0}
|
||||
.chk input{width:18px;height:18px;accent-color:var(--primary);margin-top:2px;flex:0 0 auto}
|
||||
.stack{display:grid;gap:10px}
|
||||
.auth-alert.warn{background:var(--wdim);color:var(--warning);border-color:var(--warning-glow)}
|
||||
.bill-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}
|
||||
|
||||
/* ── OTP ── */
|
||||
.otp-wrap{padding:clamp(24px,4vw,52px) 0;display:flex;justify-content:center}
|
||||
.otp-card{width:100%;max-width:420px;background:var(--glass-2);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-3);padding:clamp(22px,3vw,32px);text-align:center}
|
||||
.otp-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin:0 auto 14px;background:var(--pdim);border:1px solid var(--primary-glow);color:var(--primary);font-size:28px}
|
||||
.otp-card h1{font-size:20px}
|
||||
.otp-card .sub{color:var(--muted);font-size:13.5px;margin-top:6px}
|
||||
.otp-input{letter-spacing:16px;font-size:28px;font-weight:800;text-align:center;font-family:var(--font-mono);padding-left:16px;padding-right:6px}
|
||||
.otp-card form{margin-top:18px}
|
||||
.otp-back{margin-top:16px;font-size:13px}
|
||||
|
||||
/* ── VOUCHER ── */
|
||||
.vform{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
|
||||
@media(max-width:820px){.vform{grid-template-columns:1fr}}
|
||||
.voucher-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
|
||||
@media(max-width:576px){.voucher-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}}
|
||||
.voucher-radio{position:absolute;opacity:0;pointer-events:none}
|
||||
.voucher-card{display:block;border:1px solid var(--border);background:var(--ghost);border-radius:14px;padding:12px;cursor:pointer;transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
|
||||
.voucher-card:hover{transform:translateY(-1px);border-color:var(--primary-glow)}
|
||||
.voucher-radio:checked + .voucher-card{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-glow)}
|
||||
.voucher-title{font-weight:800;font-size:14px;display:flex;justify-content:space-between;gap:10px;align-items:center}
|
||||
.voucher-price{color:var(--primary);font-weight:800;white-space:nowrap}
|
||||
.voucher-meta{color:var(--muted);font-size:12px;margin-top:5px}
|
||||
.voucher-code{background:var(--bg);border:1px dashed var(--primary-glow);border-radius:12px;padding:12px;margin-top:12px}
|
||||
.voucher-code .row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:14px}
|
||||
.voucher-code .row b{font-family:var(--font-mono);color:var(--text);letter-spacing:.5px}
|
||||
.label-cap{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:7px}
|
||||
|
||||
/* ── PWA BANNER / MODAL ── */
|
||||
.pwa-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:200;display:none;align-items:center;gap:12px;
|
||||
background:var(--glass-2);backdrop-filter:blur(14px);border:1px solid var(--primary-glow);border-radius:14px;
|
||||
padding:12px 14px;box-shadow:var(--shadow-3)}
|
||||
.pwa-banner.show{display:flex}
|
||||
.pwa-banner .txt{flex:1;font-size:13px}
|
||||
.pwa-banner .txt b{display:block;font-size:13.5px}
|
||||
.pwa-banner .txt span{color:var(--muted);font-size:12px}
|
||||
|
||||
/* ── RESPONSIVE ── */
|
||||
@media(max-width:900px){
|
||||
.auth-grid{grid-template-columns:1fr}
|
||||
.auth-hero{min-height:auto;display:block}
|
||||
.auth-card{order:-1;margin-bottom:16px}
|
||||
.auth-copy{padding-top:0;display:flex;flex-direction:column}
|
||||
/* statistik (Pilihan Paket · Dukungan · Fiber Optic) tampil tepat di bawah kartu */
|
||||
.auth-stats{order:-1;margin:0 0 22px;padding:0;border-top:none;justify-content:center;gap:24px}
|
||||
.auth-stats .st{text-align:center}
|
||||
.auth-card{margin-inline:auto}
|
||||
}
|
||||
@media(max-width:560px){
|
||||
.form-grid.cols-2{grid-template-columns:1fr}
|
||||
.quick-tools{grid-template-columns:1fr 1fr}
|
||||
}
|
||||
|
||||
/* ── Rapatkan teks (line-height) agar tidak terlalu renggang ── */
|
||||
body{line-height:1.42}
|
||||
.auth-copy h1{line-height:1.12;margin:14px 0 10px}
|
||||
.auth-copy p.lead{line-height:1.5;font-size:clamp(14.5px,1.55vw,16.5px)}
|
||||
.auth-points{gap:8px;margin-top:18px}
|
||||
.auth-points li{line-height:1.4}
|
||||
.auth-stats{margin-top:24px;padding-top:18px}
|
||||
.auth-card .sub{line-height:1.35}
|
||||
.hint-line{line-height:1.35}
|
||||
.section-head{max-width:620px;margin-bottom:clamp(22px,3vw,34px)}
|
||||
.section-head p{line-height:1.5;margin-top:9px}
|
||||
.feature h3{margin-bottom:5px}
|
||||
.feature p{line-height:1.45}
|
||||
.price-card li{line-height:1.4}
|
||||
.foot-links{gap:7px}
|
||||
.foot-links a{line-height:1.4}
|
||||
|
||||
/* == UI HARDENING (audit ui-ux.md) - jangan hapus marker == */
|
||||
img { max-width: 100%; height: auto; }
|
||||
@@ -0,0 +1,209 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
dashboard.css — Dashboard Pelanggan (PWA)
|
||||
Dipakai setelah landing.css + auth.css (token & komponen dasar dari sana).
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── APP BAR ── */
|
||||
.app-bar{position:sticky;top:0;z-index:100;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
|
||||
.app-bar .inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;flex-wrap:wrap}
|
||||
.app-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:16px}
|
||||
.app-brand img{width:28px;height:28px;border-radius:8px}
|
||||
.app-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
|
||||
.chip-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;border:1px solid var(--border);background:var(--ghost);color:var(--text);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;transition:.18s var(--ease)}
|
||||
.chip-btn:hover{border-color:var(--primary-glow);transform:translateY(-1px)}
|
||||
.chip-btn.ok{border-color:var(--success-glow);color:var(--success)}
|
||||
.chip-btn.danger{border-color:var(--danger-glow);color:var(--danger)}
|
||||
.chip-btn.wallet{border-color:var(--success-glow);color:var(--success)}
|
||||
|
||||
.status-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid var(--border)}
|
||||
.status-pill.online{background:var(--sdim);color:var(--success);border-color:var(--success-glow)}
|
||||
.status-pill.offline,.status-pill.suspended{background:var(--ddim);color:var(--danger);border-color:var(--danger-glow)}
|
||||
.pulse-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
|
||||
.pulse-dot.green{background:var(--success);animation:pulse-dot 1.8s infinite}
|
||||
.pulse-dot.red{background:var(--danger);animation:pulse-dot2 1.8s infinite}
|
||||
@keyframes pulse-dot2{0%{box-shadow:0 0 0 0 rgba(251,113,133,.55)}70%{box-shadow:0 0 0 7px rgba(251,113,133,0)}100%{box-shadow:0 0 0 0 rgba(251,113,133,0)}}
|
||||
|
||||
.notif-bell-btn{position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:var(--ghost);color:var(--text);cursor:pointer;font-size:16px}
|
||||
.notif-bell-btn:hover{border-color:var(--primary-glow);color:var(--primary)}
|
||||
.notif-badge-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
|
||||
|
||||
/* ── LAYOUT ── */
|
||||
.dash-wrap{padding:18px 0 96px}
|
||||
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||||
@media(max-width:860px){.dash-grid{grid-template-columns:1fr}}
|
||||
|
||||
/* ── PROMO (auto-rotate) ── */
|
||||
.promo-rot{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-2);background:var(--glass-2);margin-bottom:18px;min-height:130px}
|
||||
.promo-rot img{width:100%;aspect-ratio:16/6;object-fit:cover;display:block}
|
||||
.promo-rot a{display:block}
|
||||
.promo-rot .welcome{aspect-ratio:16/6;min-height:130px;display:flex;align-items:center;justify-content:center;gap:10px;color:#0A0D14;font-family:var(--font-display);font-weight:700;font-size:clamp(15px,2.4vw,20px);background:linear-gradient(135deg,var(--primary),#7BC21F)}
|
||||
.promo-rot .dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
|
||||
.promo-rot .dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5)}
|
||||
.promo-rot .dots span.on{background:var(--primary)}
|
||||
|
||||
/* ── HERO ── */
|
||||
.hero-banner{position:relative;border-radius:var(--radius);padding:18px;margin-bottom:16px;background:linear-gradient(135deg,var(--pdim),transparent 60%),var(--glass-2);border:1px solid var(--border);overflow:hidden}
|
||||
.hero-banner h3{font-size:clamp(17px,2.6vw,22px)}
|
||||
.id-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:var(--pdim);border:1px solid var(--primary-glow);color:var(--primary);font-size:11px;font-weight:700}
|
||||
|
||||
/* ── BILL HERO ── */
|
||||
.bill-hero-card{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;border:1px solid var(--danger-glow);background:linear-gradient(135deg,var(--ddim),transparent 65%),var(--glass-2)}
|
||||
.bill-hero-card.paid{border-color:var(--success-glow);background:linear-gradient(135deg,var(--sdim),transparent 65%),var(--glass-2)}
|
||||
.bill-hero-card .bico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;flex:0 0 auto}
|
||||
.bill-hero-card.unpaid .bico{background:var(--wdim);color:var(--warning);border:1px solid var(--warning-glow)}
|
||||
.bill-hero-card .bico{background:var(--sdim);color:var(--success);border:1px solid var(--success-glow)}
|
||||
.bill-hero-card h5{font-family:var(--font-display);font-size:20px;margin:0}
|
||||
|
||||
/* ── ACTION GRID ── */
|
||||
.action-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
|
||||
@media(max-width:760px){.action-grid{grid-template-columns:repeat(3,1fr)}}
|
||||
.action-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;background:var(--glass-2);border:1px solid var(--border);cursor:pointer;text-decoration:none;transition:transform .18s var(--ease),border-color .18s var(--ease)}
|
||||
.action-item:hover{transform:translateY(-3px);border-color:var(--primary-glow)}
|
||||
.action-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:var(--ghost);color:var(--primary)}
|
||||
.action-icon.ai-ssid{color:var(--info)} .action-icon.ai-pass{color:var(--success)}
|
||||
.action-icon.ai-reboot{color:var(--warning)} .action-icon.ai-pay{color:var(--primary)}
|
||||
.action-icon.ai-ppob{color:#c084fc} .action-icon.ai-ticket{color:var(--danger)}
|
||||
.action-label{font-size:11.5px;font-weight:600;color:var(--text);text-align:center;line-height:1.25}
|
||||
|
||||
/* ── CARD (glass) ── */
|
||||
.glass-card{background:var(--glass-2);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden;height:100%}
|
||||
.glass-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--card-hd-bg)}
|
||||
.glass-header h5{font-size:14px;display:flex;align-items:center;gap:8px}
|
||||
.glass-body{padding:16px}
|
||||
.badge-soft{display:inline-flex;align-items:center;padding:3px 9px;border-radius:8px;font-size:10.5px;font-weight:700;background:var(--pdim);color:var(--primary);border:1px solid var(--primary-glow)}
|
||||
|
||||
/* ── STAT CARDS ── */
|
||||
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
|
||||
.stat-card{background:var(--ghost);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
|
||||
.stat-icon{width:38px;height:38px;margin:0 auto 8px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:var(--pdim);color:var(--primary)}
|
||||
.stat-icon.online{background:var(--sdim);color:var(--success)} .stat-icon.offline{background:var(--ddim);color:var(--danger)}
|
||||
.stat-icon.activity{background:var(--idim);color:var(--info)} .stat-icon.people{background:rgba(192,132,252,.14);color:#c084fc}
|
||||
.stat-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
|
||||
.stat-value{font-weight:800;font-size:14px;color:var(--text);margin-top:2px;word-break:break-word}
|
||||
|
||||
/* ── WIFI BOX ── */
|
||||
.wifi-box{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:14px}
|
||||
.wifi-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
|
||||
.wifi-label{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
|
||||
.wifi-val{font-weight:800;font-size:15px;color:var(--text);word-break:break-word}
|
||||
.link-btn{background:none;border:none;color:var(--primary);font-weight:700;font-size:12px;cursor:pointer;padding:2px 4px}
|
||||
.link-btn:hover{text-decoration:underline}
|
||||
|
||||
/* ── DEVICE LIST ── */
|
||||
.dev-list{display:flex;flex-direction:column;gap:8px;max-height:190px;overflow-y:auto}
|
||||
.dev-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;background:var(--ghost);border:1px solid var(--border);font-size:12px}
|
||||
.dev-empty{text-align:center;padding:12px;border-radius:10px;background:var(--ghost);color:var(--muted);font-size:12px}
|
||||
|
||||
/* ── TRAFFIC GAUGE ── */
|
||||
.traffic-gauge{position:relative;display:inline-block;margin-top:8px}
|
||||
.traffic-gauge canvas{max-width:100%}
|
||||
.traffic-gauge-center{position:absolute;left:0;right:0;bottom:18px;text-align:center}
|
||||
.traffic-gauge-value{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1}
|
||||
.traffic-gauge-unit{font-size:11px;color:var(--muted)}
|
||||
.traffic-gauge-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:-6px}
|
||||
|
||||
/* ── SECTION TITLE ── */
|
||||
.sec-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:15px;margin:0 0 12px}
|
||||
.sec-title i{color:var(--primary)}
|
||||
|
||||
/* ── INVOICE CARD (mobile) ── */
|
||||
.inv-card{background:var(--ghost);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px}
|
||||
.inv-card .inv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
|
||||
.inv-card .inv-name{font-weight:700;color:var(--text)}
|
||||
.inv-card .inv-amt{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--primary)}
|
||||
.inv-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
|
||||
|
||||
/* ── NOTIF ITEM ── */
|
||||
.notif-item{padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--ghost);margin-bottom:10px}
|
||||
.notif-item.unread{border-color:var(--primary-glow);background:var(--pdim)}
|
||||
.notif-item .n-title{font-weight:700;font-size:13px}
|
||||
.notif-item .n-msg{color:var(--muted);font-size:12px;margin-top:3px}
|
||||
.notif-item .n-time{color:var(--muted);font-size:10.5px;margin-top:5px}
|
||||
|
||||
/* ── ACCORDION (details) ── */
|
||||
.acc{background:var(--glass-2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
|
||||
.acc summary{list-style:none;cursor:pointer;padding:15px 16px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
|
||||
.acc summary::-webkit-details-marker{display:none}
|
||||
.acc summary .chev{transition:transform .25s var(--ease);color:var(--primary)}
|
||||
.acc[open] summary .chev{transform:rotate(180deg)}
|
||||
.acc .acc-body{padding:0 16px 16px}
|
||||
|
||||
/* ── BOTTOM NAV (partial kompatibel) ── */
|
||||
.customer-bottom-nav{display:none} /* diatur partial */
|
||||
|
||||
/* ── INFO LAYANAN ── */
|
||||
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
|
||||
@media(max-width:860px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
|
||||
.svc-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;background:var(--glass-2);border:1px solid var(--border);min-width:0}
|
||||
.svc-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:var(--pdim);color:var(--primary);flex:0 0 auto}
|
||||
.svc-tx{min-width:0}
|
||||
.svc-tx > span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
|
||||
.svc-tx b{display:block;font-size:14.5px;color:var(--text);margin-top:2px}
|
||||
.svc-tx b.ok{color:var(--success)} .svc-tx b.warn{color:var(--warning)} .svc-tx b.off{color:var(--danger)}
|
||||
.svc-tx small{display:block;font-size:11px;color:var(--muted);margin-top:2px;word-break:break-word}
|
||||
|
||||
/* ── ONU TIDAK DITEMUKAN ── */
|
||||
.onu-missing{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;margin-bottom:16px;background:var(--wdim);border:1px solid var(--warning-glow);color:var(--text)}
|
||||
.onu-missing i{color:var(--warning);font-size:20px;margin-top:2px}
|
||||
.onu-missing b{display:block;font-size:14px}
|
||||
.onu-missing span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
|
||||
|
||||
/* ── FLOATING THEME TOGGLE ── */
|
||||
.theme-fab{position:fixed;right:16px;bottom:84px;z-index:1060;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--primary-glow);background:var(--glass-2);color:var(--primary);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-2);cursor:pointer;font-size:20px;transition:transform .18s var(--ease),box-shadow .2s var(--ease)}
|
||||
.theme-fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--primary-glow)}
|
||||
@media(min-width:992px){.theme-fab{bottom:20px}}
|
||||
|
||||
/* ── BILL HERO MENCOLOK ── */
|
||||
.bill-hero-card{position:relative;overflow:hidden}
|
||||
.bill-hero-card.unpaid{border-color:rgba(251,191,36,0.55);background:linear-gradient(135deg,rgba(251,191,36,0.20),rgba(251,191,36,0.04) 62%),var(--bg2);box-shadow:0 0 0 1px rgba(251,191,36,0.30),0 16px 38px rgba(251,191,36,0.16)}
|
||||
.bill-hero-card.unpaid::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--warning),#FDE68A)}
|
||||
.bill-hero-card.paid{border-color:var(--success-glow);background:linear-gradient(135deg,rgba(52,211,153,0.14),rgba(52,211,153,0.03) 62%),var(--bg2)}
|
||||
.bill-hero-card.paid::after{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--success),#6EE7B7)}
|
||||
.bill-hero-card h5{font-size:clamp(21px,3.2vw,28px);letter-spacing:-0.01em}
|
||||
.bill-hero-card.unpaid .bico{background:var(--wdim);color:var(--warning);border:1px solid var(--warning-glow)}
|
||||
.lbtn-lg{padding:14px 22px;font-size:15px;border-radius:12px}
|
||||
|
||||
/* ── POPUP ONU ── */
|
||||
.onu-pop-ic{width:66px;height:66px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:30px;background:var(--wdim);color:var(--warning);border:1px solid var(--warning-glow)}
|
||||
|
||||
/* ── NOTIFIKASI (desain lebih jelas) ── */
|
||||
.notif-item{position:relative;padding:14px 14px 14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg);margin-bottom:10px;border-left:4px solid var(--info)}
|
||||
.notif-item.unread{border-color:var(--primary-glow);background:var(--pdim);border-left-color:var(--primary)}
|
||||
.notif-item .n-title{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px;color:var(--text)}
|
||||
.notif-item .n-msg{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.5}
|
||||
.notif-item .n-time{color:var(--muted);font-size:10.5px;margin-top:8px;display:inline-flex;align-items:center;gap:5px}
|
||||
|
||||
/* ── COPY ID & CHIP ONU ── */
|
||||
.copy-mini{background:none;border:none;color:var(--primary);cursor:pointer;padding:1px 4px;font-size:12px;line-height:1;border-radius:6px}
|
||||
.copy-mini:hover{color:var(--primary-dark);background:var(--ghost)}
|
||||
.onu-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--wdim);border:1px solid var(--warning-glow);color:var(--warning);font-size:11.5px;font-weight:700;cursor:pointer}
|
||||
.onu-chip:hover{filter:brightness(1.08)}
|
||||
|
||||
/* ── POPUP STATUS WIFI ── */
|
||||
.wifi-status-ic{width:66px;height:66px;border-radius:50%;margin:6px auto 12px;display:grid;place-items:center;font-size:30px}
|
||||
.wifi-status-ic.loading{background:var(--pdim);color:var(--primary)}
|
||||
.wifi-status-ic.success{background:var(--sdim);color:var(--success)}
|
||||
.wifi-status-ic.error{background:var(--ddim);color:var(--danger)}
|
||||
.spin{animation:spin 1s linear infinite;display:inline-block}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
|
||||
/* ── TOAST ── */
|
||||
.toast-wrap{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1200;display:flex;flex-direction:column;gap:8px;width:min(420px,92vw);pointer-events:none}
|
||||
.toast{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:12px;background:var(--glass-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);box-shadow:var(--shadow-2);font-size:13px;font-weight:600;color:var(--text);animation:toastin .25s var(--ease);pointer-events:auto}
|
||||
.toast i{font-size:17px}
|
||||
.toast.success{border-color:var(--success-glow)} .toast.success i{color:var(--success)}
|
||||
.toast.error{border-color:var(--danger-glow)} .toast.error i{color:var(--danger)}
|
||||
.toast.info i{color:var(--info)}
|
||||
.toast.out{opacity:0;transform:translateY(-6px)}
|
||||
@keyframes toastin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
|
||||
|
||||
/* ── PEMBEDA: KARTU/INFO ↔ TOMBOL/TOGGLE ── */
|
||||
/* Kartu/info: permukaan tenang, bukan tombol */
|
||||
.glass-card, .svc-card, .stat-card{ box-shadow: var(--shadow-1); }
|
||||
.svc-card{ border-left: 3px solid var(--primary-glow); }
|
||||
/* Tombol/toggle/tile aksi: tegas, aksen lime, jelas bisa ditekan */
|
||||
.action-item{ background: var(--ghost); border: 1px solid var(--primary-glow); }
|
||||
.action-item .action-icon{ background: var(--pdim); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary-glow); }
|
||||
.action-item:hover{ background: var(--pdim); border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.28); }
|
||||
.chip-btn, .lbtn{ cursor: pointer; }
|
||||
.chip-btn:active, .lbtn:active, .action-item:active{ transform: translateY(0) scale(.98); }
|
||||
@@ -0,0 +1,85 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
isolated.css — Halaman Isolir (redirect MikroTik)
|
||||
Dipakai setelah landing.css + auth.css (token dasar).
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
.iso-wrap{padding:20px 0 44px;display:flex;flex-direction:column;align-items:center}
|
||||
.iso-card{width:100%;max-width:540px;background:var(--glass-2);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:22px;position:relative;overflow:hidden}
|
||||
.iso-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
|
||||
.iso-card.iso-danger::before{background:linear-gradient(90deg,var(--danger),#FDA4AF)}
|
||||
.iso-card.iso-success::before{background:linear-gradient(90deg,var(--success),#6EE7B7)}
|
||||
|
||||
.iso-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:16px}
|
||||
.iso-brand img{height:34px;width:34px;border-radius:9px}
|
||||
.iso-brand .t{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.01em}
|
||||
|
||||
.iso-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700}
|
||||
.iso-badge.danger{background:var(--ddim);color:var(--danger);border:1px solid var(--danger-glow)}
|
||||
.iso-badge.success{background:var(--sdim);color:var(--success);border:1px solid var(--success-glow)}
|
||||
.iso-card h1{font-size:clamp(20px,3.2vw,26px);margin:14px 0 8px}
|
||||
.iso-sub{color:var(--muted);font-size:14px;line-height:1.55}
|
||||
|
||||
.iso-info{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:16px 0}
|
||||
.iso-info .row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px}
|
||||
.iso-info .row .label{color:var(--muted)}
|
||||
.iso-info .row .val{font-weight:700;color:var(--text);text-align:right;word-break:break-word}
|
||||
|
||||
.iso-sec{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin:18px 0 10px}
|
||||
.iso-sec i{color:var(--primary)}
|
||||
|
||||
.iso-inv{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--ghost)}
|
||||
.iso-inv .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
|
||||
.iso-inv .period{font-size:13px;font-weight:700;color:var(--text)}
|
||||
.iso-inv .id{font-size:11.5px;color:var(--muted);margin-top:2px}
|
||||
.iso-inv .amt{font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--primary);margin:12px 0}
|
||||
|
||||
.iso-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:transform .16s var(--ease),filter .16s var(--ease),border-color .16s var(--ease)}
|
||||
.iso-btn:active{transform:translateY(1px)}
|
||||
.iso-btn.primary{background:var(--primary);color:var(--on-primary);box-shadow:0 6px 20px var(--primary-glow)}
|
||||
.iso-btn.primary:hover{filter:brightness(1.05)}
|
||||
.iso-btn.success{background:var(--success);color:#04231a}
|
||||
.iso-btn.success:hover{filter:brightness(1.05)}
|
||||
.iso-btn.ghost{background:var(--ghost);color:var(--text);border-color:var(--border)}
|
||||
.iso-btn.ghost:hover{border-color:var(--primary-glow)}
|
||||
.iso-btn.wa{background:rgba(37,211,102,.14);color:#25D366;border-color:rgba(37,211,102,.3)}
|
||||
.iso-btn.wa:hover{background:rgba(37,211,102,.22)}
|
||||
.iso-space{margin-top:10px}
|
||||
.iso-card form > .iso-btn{margin-top:14px}
|
||||
.iso-inv .iso-btn.primary{margin-top:4px}
|
||||
.iso-error{color:var(--danger);font-size:12.5px;margin-top:8px}
|
||||
.iso-foot{color:var(--muted);font-size:12px;text-align:center;margin-top:22px;line-height:1.55}
|
||||
|
||||
/* ── MODAL QRIS ── */
|
||||
.iso-mo{display:none;position:fixed;inset:0;background:var(--overlay-bg);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:1100;align-items:center;justify-content:center;padding:16px}
|
||||
.iso-mo.active{display:flex;animation:fadein .18s var(--ease)}
|
||||
.iso-mc{background:var(--bg2);border:1px solid var(--border);border-radius:18px;width:100%;max-width:420px;padding:24px 20px;box-shadow:var(--shadow-3);text-align:center;position:relative;max-height:92vh;overflow:auto}
|
||||
.iso-mc-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
|
||||
.iso-mc-close:hover{color:var(--danger)}
|
||||
.iso-mc .gt{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--primary);font-size:13px;font-weight:800;text-transform:uppercase}
|
||||
.iso-mc .per{font-size:12px;color:var(--muted);margin-top:3px}
|
||||
.iso-qr{border-radius:14px;background:#fff;padding:10px;margin:14px auto;width:230px;max-width:82%}
|
||||
.iso-qr img{width:100%;display:block}
|
||||
.iso-amt-box{background:var(--bg);border:1px solid var(--primary-glow);border-radius:12px;padding:12px;margin-top:12px}
|
||||
.iso-amt-box .l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
|
||||
.iso-amt-box .v{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--primary)}
|
||||
.iso-unique{display:inline-block;font-size:11px;font-weight:700;color:var(--warning);background:var(--wdim);border:1px solid var(--warning-glow);border-radius:999px;padding:3px 10px;margin-top:8px}
|
||||
.iso-poll{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;color:var(--muted);font-size:12.5px}
|
||||
.spin-pulse{width:16px;height:16px;border-radius:50%;background:var(--primary);animation:pulse-dot 1.4s infinite;flex:0 0 auto}
|
||||
.iso-success-ic{font-size:58px;color:var(--success);display:block;margin-bottom:10px}
|
||||
.iso-mc h2{font-size:22px;color:var(--success)}
|
||||
.iso-actions{display:flex;gap:8px;margin-top:14px}
|
||||
.iso-actions .iso-btn{flex:1}
|
||||
.iso-help{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5}
|
||||
|
||||
/* ── DONASI ── */
|
||||
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
|
||||
.preset-btn{padding:10px 6px;border-radius:10px;border:1px solid var(--border);background:var(--ghost);color:var(--text);font-weight:700;font-size:13px;cursor:pointer;transition:.15s var(--ease)}
|
||||
.preset-btn:hover{border-color:var(--primary-glow)}
|
||||
.preset-btn.active{background:var(--pdim);border-color:var(--primary);color:var(--primary)}
|
||||
.activation-card{border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:16px;background:var(--ghost)}
|
||||
.code-box{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px dashed var(--primary-glow);border-radius:12px;padding:12px;margin:10px 0;flex-wrap:wrap}
|
||||
.code-text{font-family:var(--font-mono);font-weight:800;font-size:18px;letter-spacing:1px;color:var(--primary)}
|
||||
.step-item{display:flex;gap:10px;font-size:13px;color:var(--muted);margin-bottom:6px}
|
||||
.step-num{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--pdim);color:var(--primary);font-size:11px;font-weight:800;display:grid;place-items:center;margin-top:1px}
|
||||
.heart-badge{width:60px;height:60px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:26px;background:var(--ddim);color:var(--danger);border:1px solid var(--danger-glow)}
|
||||
.donate-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
|
||||
@media(max-width:820px){.donate-grid{grid-template-columns:1fr}}
|
||||
@@ -0,0 +1,346 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
landing.css — Halaman Depan (Landing Page) Billing RT/RW
|
||||
Mandiri (tidak memuat ui.css) agar bisa scroll normal & tetap ringan.
|
||||
Tema: Halogen — Dark #0A0D14 + Lime #ADFF2F. Font: Space Grotesk + Plus Jakarta Sans.
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root{
|
||||
color-scheme: dark;
|
||||
--font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
|
||||
--font-display:'Space Grotesk','Plus Jakarta Sans',sans-serif;
|
||||
--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
|
||||
|
||||
--bg:#0A0D14; --bg2:#111622; --bg3:#1F293D;
|
||||
--text:#F2F5F1; --muted:#8A96A6;
|
||||
--border:rgba(242,245,241,0.10);
|
||||
--primary:#ADFF2F; --primary-dark:#9CE62A; --on-primary:#0A0D14;
|
||||
--primary-glow:rgba(173,255,47,0.35); --pdim:rgba(173,255,47,0.14);
|
||||
--success:#34D399; --warning:#FBBF24; --danger:#FB7185; --info:#38BDF8;
|
||||
|
||||
--glass:rgba(17,22,34,0.72);
|
||||
--glass-2:linear-gradient(180deg,rgba(23,29,42,0.80),rgba(14,18,26,0.86));
|
||||
--ghost:rgba(242,245,241,0.06); --ghost-h:rgba(242,245,241,0.11);
|
||||
|
||||
--page-1:#0C1017; --page-2:#080A0F;
|
||||
--dot:rgba(255,255,255,0.11); --dot-size:1.4px; --dot-gap:22px;
|
||||
--glow-lime:rgba(173,255,47,0.10); --glow-cyan:rgba(56,189,248,0.085); --glow-violet:rgba(139,92,246,0.075);
|
||||
--vignette:rgba(0,0,0,0.55); --sheen:rgba(255,255,255,0.018);
|
||||
|
||||
--radius:16px; --radius-sm:10px; --pill:999px;
|
||||
--shadow-1:0 1px 2px rgba(0,0,0,.3); --shadow-2:0 10px 30px rgba(0,0,0,.4); --shadow-3:0 22px 60px rgba(0,0,0,.5);
|
||||
--ring:0 0 0 3px rgba(173,255,47,.28);
|
||||
--ease:cubic-bezier(.4,0,.2,1);
|
||||
--nav-h:66px;
|
||||
}
|
||||
:root[data-theme="light"],html[data-theme="light"]{
|
||||
color-scheme:light;
|
||||
--bg:#E8EDE5; --bg2:#FFFFFF; --bg3:#DEE4DA;
|
||||
--text:#141A12; --muted:#52604C; --border:rgba(16,20,15,0.15);
|
||||
--primary:#5C9A0A; --primary-dark:#4A7D08; --on-primary:#FFFFFF;
|
||||
--primary-glow:rgba(92,154,10,0.30); --pdim:rgba(92,154,10,0.12);
|
||||
--success:#0F9D6B; --warning:#C2740A; --danger:#DE3B5C; --info:#0A7BC2;
|
||||
--glass:rgba(255,255,255,0.82); --glass-2:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(255,255,255,0.96));
|
||||
--ghost:rgba(16,20,15,0.05); --ghost-h:rgba(16,20,15,0.09);
|
||||
--page-1:#E8EDE5; --page-2:#DEE4DA;
|
||||
--dot:rgba(16,20,15,0.17);
|
||||
--glow-lime:rgba(92,154,10,0.10); --glow-cyan:rgba(10,123,194,0.08); --glow-violet:rgba(124,92,246,0.07);
|
||||
--vignette:rgba(16,20,15,0.20); --sheen:rgba(255,255,255,0.35);
|
||||
--shadow-1:0 1px 2px rgba(16,20,15,.10); --shadow-2:0 10px 30px rgba(16,20,15,.13); --shadow-3:0 22px 60px rgba(16,20,15,.18);
|
||||
--ring:0 0 0 3px rgba(92,154,10,.22);
|
||||
}
|
||||
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
|
||||
body{
|
||||
margin:0;font-family:var(--font-sans);color:var(--text);line-height:1.5;
|
||||
background-color:var(--bg);
|
||||
background-image:
|
||||
radial-gradient(var(--dot) var(--dot-size),transparent var(--dot-size)),
|
||||
radial-gradient(130% 130% at 50% 42%,transparent 38%,var(--vignette) 100%),
|
||||
radial-gradient(1100px 620px at 8% -14%,var(--glow-lime),transparent 58%),
|
||||
radial-gradient(950px 540px at 102% -6%,var(--glow-cyan),transparent 55%),
|
||||
radial-gradient(1100px 640px at 50% 122%,var(--glow-violet),transparent 60%),
|
||||
linear-gradient(180deg,var(--sheen),transparent 30%),
|
||||
linear-gradient(180deg,var(--page-1) 0%,var(--page-2) 100%);
|
||||
background-size:var(--dot-gap) var(--dot-gap),auto,auto,auto,auto,auto,auto;
|
||||
background-attachment:fixed;
|
||||
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
|
||||
}
|
||||
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.15;margin:0}
|
||||
p{margin:0}
|
||||
a{color:var(--primary);text-decoration:none}
|
||||
img{max-width:100%;display:block}
|
||||
.container{width:min(1180px,92vw);margin-inline:auto}
|
||||
.mono{font-family:var(--font-mono)}
|
||||
.muted{color:var(--muted)}
|
||||
.center{text-align:center}
|
||||
|
||||
/* ── BUTTONS ── */
|
||||
.lbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;
|
||||
font:inherit;font-weight:700;font-size:14px;cursor:pointer;border:1px solid transparent;text-decoration:none;white-space:nowrap;
|
||||
transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
|
||||
.lbtn:active{transform:translateY(1px)}
|
||||
.lbtn:focus-visible{outline:none;box-shadow:var(--ring)}
|
||||
.lbtn-primary{background:var(--primary);color:var(--on-primary);box-shadow:0 6px 22px var(--primary-glow)}
|
||||
.lbtn-primary:hover{background:var(--primary-dark);color:var(--on-primary);transform:translateY(-2px);box-shadow:0 10px 30px var(--primary-glow)}
|
||||
.lbtn-ghost{background:var(--ghost);color:var(--text);border-color:var(--border)}
|
||||
.lbtn-ghost:hover{background:var(--ghost-h);border-color:var(--primary-glow);transform:translateY(-2px)}
|
||||
.lbtn-wa{background:rgba(37,211,102,.14);color:#25D366;border-color:rgba(37,211,102,.3)}
|
||||
.lbtn-wa:hover{background:rgba(37,211,102,.22);transform:translateY(-2px)}
|
||||
.lbtn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
|
||||
.lbtn-block{width:100%}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.site-header{position:sticky;top:0;z-index:100;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
|
||||
border-bottom:1px solid var(--border)}
|
||||
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h)}
|
||||
.brand{display:flex;align-items:center;gap:10px}
|
||||
.brand img,.brand .bmark{height:30px;width:30px;border-radius:8px;object-fit:contain}
|
||||
.brand .bname{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.02em}
|
||||
.nav{display:flex;align-items:center;gap:4px}
|
||||
.nav a{padding:9px 13px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:600;transition:color .18s var(--ease),background .18s var(--ease)}
|
||||
.nav a:hover{color:var(--text);background:var(--ghost)}
|
||||
.header-actions{display:flex;align-items:center;gap:8px}
|
||||
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:var(--ghost);color:var(--text);cursor:pointer;font-size:16px;transition:.2s var(--ease)}
|
||||
.icon-btn:hover{border-color:var(--primary-glow);color:var(--primary)}
|
||||
.hamburger{display:none}
|
||||
.mobile-menu{display:none}
|
||||
.hide-sm{display:inline-flex}
|
||||
.logo-on-light{display:none}
|
||||
html[data-theme="light"] .logo-on-dark{display:none}
|
||||
html[data-theme="light"] .logo-on-light{display:block}
|
||||
|
||||
/* ── HERO ── */
|
||||
.hero{padding:clamp(36px,6vw,80px) 0 20px}
|
||||
.hero .grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(24px,4vw,56px);align-items:center}
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--pill);background:var(--pdim);
|
||||
border:1px solid var(--primary-glow);color:var(--primary);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
|
||||
.hero h1{font-size:clamp(32px,5.4vw,58px);margin:18px 0 14px}
|
||||
.hero h1 .hl{color:var(--primary)}
|
||||
.hero p.lead{font-size:clamp(15px,1.7vw,18px);color:var(--muted);max-width:56ch}
|
||||
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
|
||||
.hero-stats{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px;padding-top:26px;border-top:1px solid var(--border)}
|
||||
.hero-stats .st b{display:block;font-family:var(--font-display);font-size:clamp(22px,3vw,30px);line-height:1}
|
||||
.hero-stats .st span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
|
||||
.hero-media{position:relative;max-width:420px;margin-left:auto;width:100%}
|
||||
.hero-media img{border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-2);width:100%;aspect-ratio:4/3;max-height:330px;object-fit:cover}
|
||||
.hero-media::after{content:'';position:absolute;inset:0;border-radius:var(--radius);background:linear-gradient(180deg,transparent 55%,rgba(8,10,15,.45));pointer-events:none}
|
||||
.hero-media .float-card{position:absolute;left:-14px;bottom:-18px;z-index:2;background:var(--glass-2);backdrop-filter:blur(12px);
|
||||
border:1px solid var(--border);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-2);display:flex;align-items:center;gap:10px}
|
||||
.hero-media .float-card i{color:var(--primary);font-size:20px}
|
||||
.hero-media .float-card b{font-size:14px}
|
||||
.hero-media .float-card span{display:block;font-size:11px;color:var(--muted)}
|
||||
|
||||
/* ── SECTIONS ── */
|
||||
.section{padding:clamp(48px,7vw,86px) 0}
|
||||
.section-head{max-width:640px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
|
||||
.section-head .eyebrow{margin-bottom:14px}
|
||||
.section-head h2{font-size:clamp(26px,3.6vw,38px)}
|
||||
.section-head p{color:var(--muted);margin-top:12px;font-size:15px}
|
||||
.card-surface{background:var(--glass-2);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1)}
|
||||
|
||||
/* FEATURES */
|
||||
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
|
||||
.feature{padding:24px;border-radius:var(--radius);background:var(--glass-2);border:1px solid var(--border);transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
|
||||
.feature:hover{transform:translateY(-4px);border-color:var(--primary-glow);box-shadow:var(--shadow-2)}
|
||||
.feature .ficon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:22px;color:var(--primary);
|
||||
background:var(--pdim);border:1px solid var(--primary-glow);margin-bottom:14px}
|
||||
.feature h3{font-size:17px;margin-bottom:7px}
|
||||
.feature p{color:var(--muted);font-size:14px}
|
||||
|
||||
/* PRICING */
|
||||
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:stretch}
|
||||
.price-card{display:flex;flex-direction:column;padding:26px 22px;border-radius:var(--radius);background:var(--glass-2);
|
||||
border:1px solid var(--border);position:relative;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
|
||||
.price-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
|
||||
.price-card.featured{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-glow),var(--shadow-2)}
|
||||
.price-card .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--on-primary);
|
||||
font-size:11px;font-weight:700;padding:4px 12px;border-radius:var(--pill);letter-spacing:.04em;text-transform:uppercase}
|
||||
.price-card h3{font-size:16px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-sans);font-weight:700}
|
||||
.price-card .speed{font-family:var(--font-display);font-size:38px;font-weight:700;line-height:1;margin:12px 0 2px}
|
||||
.price-card .speed small{font-size:15px;color:var(--muted);font-weight:600}
|
||||
.price-card .price{color:var(--muted);font-size:14px;margin-bottom:16px}
|
||||
.price-card .price b{color:var(--text);font-size:20px;font-family:var(--font-display)}
|
||||
.price-card ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px}
|
||||
.price-card li{display:flex;gap:9px;font-size:13.5px;color:var(--muted)}
|
||||
.price-card li i{color:var(--primary);margin-top:2px}
|
||||
.price-card .lbtn{margin-top:auto}
|
||||
|
||||
/* STEPS */
|
||||
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:s}
|
||||
.step{padding:24px;border-radius:var(--radius);background:var(--glass-2);border:1px solid var(--border);position:relative}
|
||||
.step .num{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;
|
||||
font-size:18px;color:var(--on-primary);background:var(--primary);margin-bottom:14px;box-shadow:0 0 18px var(--primary-glow)}
|
||||
.step h3{font-size:16px;margin-bottom:6px}
|
||||
.step p{color:var(--muted);font-size:13.5px}
|
||||
|
||||
/* AREA / MAP */
|
||||
.area-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
|
||||
.area-list{display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start}
|
||||
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--pill);background:var(--ghost);
|
||||
border:1px solid var(--border);font-size:13px;color:var(--text)}
|
||||
.chip i{color:var(--primary);font-size:13px}
|
||||
#coverage-map{min-height:320px;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;background:var(--bg2)}
|
||||
.map-fallback{display:grid;place-items:center;height:100%;min-height:320px;color:var(--muted);text-align:center;padding:20px}
|
||||
|
||||
/* TESTIMONIALS */
|
||||
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
|
||||
.testi{padding:22px;border-radius:var(--radius);background:var(--glass-2);border:1px solid var(--border)}
|
||||
.testi .stars{color:var(--primary);font-size:13px;margin-bottom:10px;letter-spacing:2px}
|
||||
.testi p{font-size:14px;color:var(--muted);margin-bottom:16px}
|
||||
.testi .who{display:flex;align-items:center;gap:11px}
|
||||
.testi .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--pdim);color:var(--primary);
|
||||
font-weight:700;font-family:var(--font-display)}
|
||||
.testi .who b{font-size:14px;display:block}
|
||||
.testi .who span{font-size:12px;color:var(--muted)}
|
||||
|
||||
/* FAQ */
|
||||
.faq{max-width:800px;margin-inline:auto;display:grid;gap:12px}
|
||||
.faq details{background:var(--glass-2);border:1px solid var(--border);border-radius:14px;padding:0 18px;transition:border-color .2s var(--ease)}
|
||||
.faq details[open]{border-color:var(--primary-glow)}
|
||||
.faq summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:600;font-size:15px;display:flex;justify-content:space-between;gap:14px;align-items:center}
|
||||
.faq summary::-webkit-details-marker{display:none}
|
||||
.faq summary .chev{color:var(--primary);transition:transform .25s var(--ease)}
|
||||
.faq details[open] summary .chev{transform:rotate(180deg)}
|
||||
.faq .ans{padding:0 0 16px;color:var(--muted);font-size:14px}
|
||||
|
||||
/* ADS / IKLAN */
|
||||
.adsbox{border:1.5px dashed var(--border);border-radius:var(--radius);padding:34px 24px;text-align:center;background:var(--glass)}
|
||||
.adsbox .badge-soon{display:inline-flex;align-items:center;gap:7px;background:var(--pdim);border:1px solid var(--primary-glow);
|
||||
color:var(--primary);padding:6px 14px;border-radius:var(--pill);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
|
||||
.adsbox h3{margin:14px 0 6px;font-size:19px}
|
||||
.adsbox p{color:var(--muted);font-size:14px;max-width:52ch;margin:0 auto}
|
||||
|
||||
/* CTA BAND */
|
||||
.cta-band{border-radius:var(--radius);padding:clamp(30px,5vw,54px);text-align:center;
|
||||
background:linear-gradient(135deg,var(--pdim),transparent 60%),var(--glass-2);border:1px solid var(--primary-glow)}
|
||||
.cta-band h2{font-size:clamp(24px,3.4vw,34px)}
|
||||
.cta-band p{color:var(--muted);margin:12px auto 24px;max-width:54ch}
|
||||
.cta-band .cta-row{justify-content:center}
|
||||
|
||||
/* FOOTER */
|
||||
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:48px 0 30px;background:var(--glass)}
|
||||
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:26px}
|
||||
.foot-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px;font-family:var(--font-sans);font-weight:700}
|
||||
.foot-links{display:grid;gap:9px}
|
||||
.foot-links a{color:var(--muted);font-size:14px}
|
||||
.foot-links a:hover{color:var(--primary)}
|
||||
.foot-contact{display:grid;gap:12px}
|
||||
.foot-contact .ci{display:flex;gap:10px;font-size:14px;color:var(--muted)}
|
||||
.foot-contact .ci i{color:var(--primary);margin-top:3px}
|
||||
.foot-bottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
|
||||
|
||||
/* REVEAL (aktif hanya bila JS ada agar konten tetap tampil tanpa JS) */
|
||||
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
|
||||
.js .reveal.in{opacity:1;transform:none}
|
||||
|
||||
/* ── ANIMASI ── */
|
||||
/* stagger masuk untuk kartu-kartu */
|
||||
.feature-grid .reveal:nth-child(2),.pricing-grid .reveal:nth-child(2),.testi-grid .reveal:nth-child(2),.steps .reveal:nth-child(2){transition-delay:.06s}
|
||||
.feature-grid .reveal:nth-child(3),.pricing-grid .reveal:nth-child(3),.testi-grid .reveal:nth-child(3),.steps .reveal:nth-child(3){transition-delay:.12s}
|
||||
.feature-grid .reveal:nth-child(4),.pricing-grid .reveal:nth-child(4),.testi-grid .reveal:nth-child(4){transition-delay:.18s}
|
||||
.feature-grid .reveal:nth-child(5),.pricing-grid .reveal:nth-child(5){transition-delay:.24s}
|
||||
.feature-grid .reveal:nth-child(6),.pricing-grid .reveal:nth-child(6){transition-delay:.30s}
|
||||
|
||||
/* teks highlight hero berdenyut halus */
|
||||
.hero h1 .hl{animation:hlglow 2.8s ease-in-out infinite}
|
||||
@keyframes hlglow{0%,100%{text-shadow:0 0 16px var(--primary-glow)}50%{text-shadow:0 0 34px var(--primary-glow)}}
|
||||
|
||||
/* kartu melayang pada media hero */
|
||||
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
|
||||
.hero-media .float-card{animation:floaty 4.5s ease-in-out infinite}
|
||||
.hero-media .float-card i{animation:pulse-ic 2.2s ease-in-out infinite}
|
||||
@keyframes pulse-ic{0%,100%{opacity:1}50%{opacity:.5}}
|
||||
|
||||
/* kilau pada tombol utama */
|
||||
.lbtn-primary{position:relative;overflow:hidden}
|
||||
.lbtn-primary::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
|
||||
background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:shinebtn 3.4s ease-in-out infinite}
|
||||
@keyframes shinebtn{0%{left:-130%}55%,100%{left:150%}}
|
||||
|
||||
/* titik berdenyut pada eyebrow */
|
||||
.eyebrow i{animation:pulse-ic 2s ease-in-out infinite}
|
||||
|
||||
/* header bayangan saat di-scroll */
|
||||
.site-header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.35)}
|
||||
:root[data-theme="light"] .site-header.scrolled{box-shadow:0 8px 30px rgba(16,20,15,.12)}
|
||||
|
||||
/* ikon fitur berputar saat hover */
|
||||
.feature:hover .ficon{transform:rotate(-6deg) scale(1.06);transition:transform .3s var(--ease)}
|
||||
.feature .ficon{transition:transform .3s var(--ease)}
|
||||
|
||||
/* chip area muncul bertahap */
|
||||
@keyframes chipin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
|
||||
.area-list .chip{animation:chipin .5s var(--ease) both}
|
||||
.area-list .chip{animation-delay:calc(var(--i,0)*0.05s)}
|
||||
|
||||
/* FAQ jawaban */
|
||||
.faq details[open] .ans{animation:fadein .3s var(--ease)}
|
||||
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
|
||||
|
||||
/* angka statistik */
|
||||
.hero-stats .st b{transition:color .3s var(--ease)}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media(max-width:900px){
|
||||
.hide-sm{display:none!important}
|
||||
.hero .grid{grid-template-columns:1fr}
|
||||
.hero-media{order:-1;max-width:520px;margin-inline:auto}
|
||||
.hero-media img{max-height:280px}
|
||||
.area-wrap{grid-template-columns:1fr}
|
||||
.foot-grid{grid-template-columns:1fr 1fr}
|
||||
}
|
||||
@media(max-width:720px){
|
||||
.nav{display:none}
|
||||
.hamburger{display:grid}
|
||||
.mobile-menu{display:block;overflow:hidden;max-height:0;transition:max-height .3s var(--ease)}
|
||||
.mobile-menu.open{max-height:420px;border-top:1px solid var(--border)}
|
||||
.mobile-menu .inner{display:grid;gap:2px;padding:12px 0 18px}
|
||||
.mobile-menu a{padding:12px 10px;border-radius:10px;color:var(--text);font-weight:600}
|
||||
.mobile-menu a:hover{background:var(--ghost)}
|
||||
.foot-grid{grid-template-columns:1fr}
|
||||
.hero-media .float-card{left:8px;bottom:-14px}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce){
|
||||
*{animation:none!important;transition:none!important}
|
||||
.reveal{opacity:1;transform:none}
|
||||
}
|
||||
|
||||
/* PROMO / IKLAN (sinkron dengan promo_slides) */
|
||||
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
|
||||
.promo-card{display:block;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--glass-2);box-shadow:var(--shadow-1);transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
|
||||
.promo-card:hover{transform:translateY(-4px);border-color:var(--primary-glow);box-shadow:var(--shadow-2)}
|
||||
.promo-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
|
||||
.promo-cap{padding:12px 14px}
|
||||
.promo-cap b{display:block;font-size:14px;color:var(--text)}
|
||||
.promo-cap span{color:var(--muted);font-size:12.5px;display:block;margin-top:3px}
|
||||
@media(max-width:480px){.promo-grid{grid-template-columns:1fr}}
|
||||
|
||||
/* ═══ SERVICE NOTICE (Gangguan Masal / Perbaikan Sistem) ═══ */
|
||||
.service-notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;margin:0 0 18px;border:1px solid var(--border);background:var(--glass-2);position:relative;overflow:hidden}
|
||||
.service-notice::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--primary)}
|
||||
.service-notice .sn-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;flex:0 0 auto;background:var(--pdim);color:var(--primary)}
|
||||
.service-notice .sn-main{min-width:0}
|
||||
.service-notice .sn-title{font-weight:800;font-family:var(--font-display);font-size:14.5px;color:var(--text);letter-spacing:.2px}
|
||||
.service-notice .sn-text{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.5}
|
||||
.service-notice .sn-eta{font-size:12.5px;margin-top:9px;color:var(--text);display:flex;flex-wrap:wrap;gap:5px;align-items:center}
|
||||
.service-notice .sn-eta .sn-since{color:var(--muted)}
|
||||
.service-notice[data-tone="danger"]{border-color:rgba(251,113,133,.38)}
|
||||
.service-notice[data-tone="danger"]::before{background:var(--danger)}
|
||||
.service-notice[data-tone="danger"] .sn-ico{background:rgba(251,113,133,.16);color:var(--danger)}
|
||||
html[data-theme="light"] .service-notice[data-tone="danger"] .sn-ico{background:rgba(222,59,92,.14)}
|
||||
@media(max-width:480px){.service-notice{padding:14px}.service-notice .sn-ico{width:38px;height:38px;font-size:18px}}
|
||||
|
||||
/* == UI HARDENING (audit playwright) - header responsif == */
|
||||
.brand{min-width:0}
|
||||
.brand .bname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.header-actions{flex:0 0 auto;gap:6px}
|
||||
@media(max-width:900px){
|
||||
.nav{display:none}
|
||||
.hamburger{display:grid}
|
||||
.site-header .inner{gap:10px}
|
||||
}
|
||||
@media(max-width:480px){
|
||||
.header-actions .lbtn-ghost{display:none}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/* page-loader.css — Animasi saat berpindah halaman (progress bar + spinner).
|
||||
Netral terhadap tema (pakai CSS var landing.css bila ada, fallback bila tidak). */
|
||||
#pgbar{
|
||||
position:fixed;top:0;left:0;height:3px;width:0;z-index:2147483000;opacity:0;pointer-events:none;
|
||||
background:linear-gradient(90deg,var(--primary,#ADFF2F),#7cc61a);
|
||||
box-shadow:0 0 12px rgba(173,255,47,.6);
|
||||
transition:width .25s ease,opacity .3s ease;
|
||||
}
|
||||
#pgbar.on{opacity:1}
|
||||
#pgload{
|
||||
position:fixed;inset:0;z-index:2147482999;display:flex;align-items:center;justify-content:center;
|
||||
background:rgba(10,13,20,.66);
|
||||
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
|
||||
opacity:0;pointer-events:none;transition:opacity .25s ease;
|
||||
}
|
||||
#pgload.on{opacity:1;pointer-events:auto}
|
||||
#pgload .pgbox{display:flex;flex-direction:column;align-items:center;gap:14px}
|
||||
#pgload .pgspin{
|
||||
width:46px;height:46px;border-radius:50%;
|
||||
border:3px solid rgba(242,245,241,.18);border-top-color:var(--primary,#ADFF2F);
|
||||
animation:pgspin .8s linear infinite;
|
||||
}
|
||||
#pgload .pgtxt{
|
||||
font:700 11px/1.2 system-ui,-apple-system,'Segoe UI',sans-serif;
|
||||
letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#8A96A6);
|
||||
}
|
||||
[data-theme="light"] #pgload{background:rgba(232,237,229,.78)}
|
||||
[data-theme="light"] #pgload .pgspin{border-color:rgba(20,26,18,.15);border-top-color:var(--primary,#5C9A0A)}
|
||||
[data-theme="light"] #pgload .pgtxt{color:#52604C}
|
||||
@media print{ #pgbar,#pgload{display:none !important} }
|
||||
@keyframes pgspin{to{transform:rotate(360deg)}}
|
||||
@@ -0,0 +1,28 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
pages.css — Halaman konten (Tentang, Kontak, Privasi, S&K)
|
||||
Dipakai setelah landing.css + auth.css.
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
.page-hero{padding:clamp(30px,5.5vw,64px) 0 8px;text-align:center}
|
||||
.page-hero h1{font-size:clamp(27px,4.4vw,44px)}
|
||||
.page-hero p{color:var(--muted);font-size:16px;margin-top:12px;max-width:60ch;margin-inline:auto}
|
||||
.prose{max-width:900px;margin:22px auto 0;background:var(--glass-2);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:clamp(22px,4vw,46px)}
|
||||
.prose h2,.prose h3,.prose h4{color:var(--primary);display:flex;align-items:center;gap:10px;margin:28px 0 8px;font-size:20px}
|
||||
.prose h2:first-child,.prose h3:first-child,.prose h4:first-child{margin-top:0}
|
||||
.prose p,.prose li{font-size:15.5px;line-height:1.75;color:var(--text)}
|
||||
.prose p{margin:12px 0}
|
||||
.prose ul{margin:12px 0 12px 20px;padding:0}
|
||||
.prose ul li{margin-bottom:8px}
|
||||
.prose strong{color:var(--text);font-weight:700}
|
||||
.prose .lead{font-size:17px}
|
||||
.prose-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:22px 0}
|
||||
.pcard{background:var(--ghost);border:1px solid var(--border);border-radius:14px;padding:20px;text-align:center}
|
||||
.pcard i{font-size:30px;color:var(--primary);display:block;margin-bottom:12px}
|
||||
.pcard h5{font-size:15px;font-weight:700;margin-bottom:6px}
|
||||
.pcard p{color:var(--muted);font-size:13.5px;margin:0}
|
||||
.contact-list{display:grid;gap:14px;margin-top:8px}
|
||||
.contact-item{display:flex;align-items:center;gap:16px;padding:18px;border-radius:14px;background:var(--ghost);border:1px solid var(--border);text-decoration:none;color:inherit;transition:transform .18s var(--ease),border-color .18s var(--ease)}
|
||||
.contact-item:hover{transform:translateY(-2px);border-color:var(--primary-glow)}
|
||||
.contact-ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:22px;background:var(--pdim);color:var(--primary);flex:0 0 auto}
|
||||
.contact-item h6{font-size:15px;font-weight:700;margin:0 0 2px}
|
||||
.contact-item p{color:var(--muted);font-size:13.5px;margin:0;word-break:break-word}
|
||||
.page-foot{text-align:center;color:var(--muted);font-size:13px;padding:28px 0 10px}
|
||||
@@ -0,0 +1,134 @@
|
||||
/* portal-theme.css — override Bootstrap ke design system (dark + lime)
|
||||
Dipakai pada portal teknisi (dan halaman lama yang masih memakai Bootstrap). */
|
||||
[data-bs-theme="dark"]{
|
||||
color-scheme: dark;
|
||||
--bs-body-bg: var(--bg);
|
||||
--bs-body-color: var(--text);
|
||||
--bs-border-color: var(--border);
|
||||
--bs-secondary-color: var(--muted);
|
||||
--bs-emphasis-color: var(--text);
|
||||
--bs-link-color: var(--primary);
|
||||
--bs-link-hover-color: var(--primary-dark);
|
||||
}
|
||||
body{ background-color: var(--bg) !important; color: var(--text) !important; }
|
||||
|
||||
.card, .offcanvas, .list-group-item, .accordion-item, .dropdown-menu{
|
||||
background: var(--bg2, #111622) !important; border-color: var(--border) !important; color: var(--text) !important;
|
||||
}
|
||||
.modal-header, .modal-footer, .accordion-button{ border-color: var(--border) !important; background: transparent !important; color: var(--text) !important; }
|
||||
.accordion-button:not(.collapsed){ background: var(--pdim) !important; color: var(--primary) !important; }
|
||||
|
||||
.form-control, .form-select{
|
||||
background: var(--bg) !important; border-color: var(--border) !important; color: var(--text) !important;
|
||||
}
|
||||
.form-control::placeholder{ color: var(--muted) !important; }
|
||||
.form-control:focus, .form-select:focus{ border-color: var(--primary) !important; box-shadow: var(--ring) !important; }
|
||||
.form-select option{ background: var(--bg2); color: var(--text); }
|
||||
.input-group-text{ background: var(--bg) !important; border-color: var(--border) !important; color: var(--muted) !important; }
|
||||
|
||||
.btn-primary{ --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-hover-color: var(--on-primary); --bs-btn-active-bg: var(--primary-dark); --bs-btn-disabled-bg: var(--bg3); --bs-btn-disabled-border-color: var(--border); }
|
||||
.btn-success{ --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-color: #04231a; --bs-btn-hover-bg: #2bb988; --bs-btn-hover-border-color: #2bb988; --bs-btn-hover-color: #04231a; }
|
||||
.btn-outline-light{ --bs-btn-color: var(--text); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--ghost); --bs-btn-hover-border-color: var(--primary-glow); --bs-btn-hover-color: var(--text); }
|
||||
.btn-outline-primary{ --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary-glow); --bs-btn-hover-bg: var(--pdim); --bs-btn-hover-color: var(--primary); --bs-btn-hover-border-color: var(--primary); }
|
||||
.btn-outline-info{ --bs-btn-color: var(--info); --bs-btn-border-color: var(--info); --bs-btn-hover-bg: var(--idim); --bs-btn-hover-color: var(--info); }
|
||||
.btn-outline-warning{ --bs-btn-color: var(--warning); --bs-btn-border-color: var(--warning); --bs-btn-hover-bg: var(--wdim); --bs-btn-hover-color: var(--warning); }
|
||||
.btn-outline-success{ --bs-btn-color: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: var(--sdim); --bs-btn-hover-color: var(--success); }
|
||||
.btn-secondary{ --bs-btn-bg: var(--bg3); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text); }
|
||||
|
||||
.badge.bg-primary{ background: var(--primary) !important; color: var(--on-primary) !important; }
|
||||
.badge.bg-success{ background: var(--success) !important; color: #04231a !important; }
|
||||
.badge.bg-danger{ background: var(--danger) !important; color: #2b0714 !important; }
|
||||
.badge.bg-warning{ background: var(--warning) !important; color: #2b1c00 !important; }
|
||||
.badge.bg-info{ background: var(--info) !important; color: #04222e !important; }
|
||||
.badge.bg-secondary{ background: var(--bg3) !important; color: var(--muted) !important; }
|
||||
|
||||
.text-secondary{ color: var(--muted) !important; }
|
||||
.text-muted{ color: var(--muted) !important; }
|
||||
.text-primary{ color: var(--primary) !important; }
|
||||
.text-success{ color: var(--success) !important; }
|
||||
.text-warning{ color: var(--warning) !important; }
|
||||
.text-danger{ color: var(--danger) !important; }
|
||||
.text-info{ color: var(--info) !important; }
|
||||
.text-light, .text-white{ color: var(--text) !important; }
|
||||
.bg-dark{ background: var(--bg) !important; }
|
||||
.bg-primary{ background: var(--primary) !important; }
|
||||
.border-secondary, .border-top, .border-bottom, .border{ border-color: var(--border) !important; }
|
||||
.table{ --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); color: var(--text); }
|
||||
.table thead th{ color: var(--muted) !important; border-color: var(--border) !important; }
|
||||
.table td, .table th{ border-color: var(--border) !important; }
|
||||
|
||||
.alert{ border-radius: 12px; border: 1px solid transparent !important; }
|
||||
.alert-danger{ background: var(--ddim) !important; color: var(--danger) !important; border-color: var(--danger-glow) !important; }
|
||||
.alert-success{ background: var(--sdim) !important; color: var(--success) !important; border-color: var(--success-glow) !important; }
|
||||
.alert-info{ background: var(--idim) !important; color: var(--info) !important; border-color: rgba(56,189,248,.3) !important; }
|
||||
.alert-warning{ background: var(--wdim) !important; color: var(--warning) !important; border-color: var(--warning-glow) !important; }
|
||||
|
||||
.modal-backdrop{ background: rgba(0,0,0,.6); }
|
||||
.nav-tabs, .nav-pills{ border-color: var(--border); }
|
||||
.nav-tabs .nav-link{ color: var(--muted); }
|
||||
.nav-tabs .nav-link.active{ color: var(--primary) !important; background: transparent !important; border-color: var(--border) var(--border) transparent !important; }
|
||||
|
||||
/* ── LIGHT MODE ── */
|
||||
html[data-theme="light"]{
|
||||
--bg:#E8EDE5; --bg2:#FFFFFF; --bg3:#DEE4DA;
|
||||
--panel:#FFFFFF; --panel2:#F6F8F4; --panel2b:#F6F8F4;
|
||||
--text:#141A12; --muted:#52604C; --border:rgba(16,20,15,.15);
|
||||
--glass-2:linear-gradient(180deg,#FFFFFF,#FFFFFF);
|
||||
}
|
||||
html[data-theme="light"] body{ background-color: var(--bg) !important; color: var(--text) !important; }
|
||||
html[data-theme="light"] .card,
|
||||
html[data-theme="light"] .t-card,
|
||||
html[data-theme="light"] .p-card,
|
||||
html[data-theme="light"] .cardx,
|
||||
html[data-theme="light"] .accordion-item,
|
||||
html[data-theme="light"] .list-group-item,
|
||||
html[data-theme="light"] .dropdown-menu{ background: var(--bg2) !important; color: var(--text) !important; border-color: var(--border) !important; }
|
||||
html[data-theme="light"] .form-control,
|
||||
html[data-theme="light"] .form-select{ background: var(--bg) !important; color: var(--text) !important; border-color: var(--border) !important; }
|
||||
html[data-theme="light"] .input-group-text{ background: var(--bg3) !important; color: var(--muted) !important; }
|
||||
html[data-theme="light"] .text-secondary,
|
||||
html[data-theme="light"] .text-muted{ color: var(--muted) !important; }
|
||||
html[data-theme="light"] .bg-dark{ background: var(--bg3) !important; }
|
||||
html[data-theme="light"] .border-secondary,
|
||||
html[data-theme="light"] .border-top,
|
||||
html[data-theme="light"] .border-bottom,
|
||||
html[data-theme="light"] .border{ border-color: var(--border) !important; }
|
||||
html[data-theme="light"] .leaflet-popup-content-wrapper,
|
||||
html[data-theme="light"] .leaflet-popup-tip{ background: var(--bg2) !important; color: var(--text) !important; }
|
||||
|
||||
/* collector: topbar sticky + bottom nav light + chip/pill agen */
|
||||
.collector-top{position:sticky;top:0;z-index:950;background:var(--bg);border-bottom:1px solid var(--border);padding:8px 0;margin-bottom:12px}
|
||||
html[data-theme="light"] .bn{ background: rgba(255,255,255,.95) !important; border-top-color: var(--border) !important; }
|
||||
html[data-theme="light"] .bni{ background: rgba(0,0,0,.03) !important; color: var(--muted) !important; border-color: var(--border) !important; }
|
||||
html[data-theme="light"] .bni.active{ background: var(--pdim) !important; color: var(--primary) !important; border-color: var(--primary-glow) !important; }
|
||||
html[data-theme="light"] .bni.active i{ color: var(--primary) !important; }
|
||||
html[data-theme="light"] .chip.b{ color:#4338ca !important; }
|
||||
html[data-theme="light"] .chip.r{ color:#b91c1c !important; }
|
||||
html[data-theme="light"] .chip.g{ color:#15803d !important; }
|
||||
html[data-theme="light"] .pill{ color: var(--text) !important; }
|
||||
|
||||
/* agent: warna berbeda tiap KPI Ringkasan */
|
||||
.kpi .k:nth-child(1) .val{ color: var(--primary); }
|
||||
.kpi .k:nth-child(2) .val{ color: var(--info); }
|
||||
.kpi .k:nth-child(3) .val{ color: var(--success); }
|
||||
.kpi .k:nth-child(4) .val{ color: var(--warning); }
|
||||
|
||||
/* agent: bottom nav (5 item) — susun vertikal agar tidak terpotong */
|
||||
.bn-wrap{ gap: 6px !important; }
|
||||
.bn-item{ flex-direction: column !important; gap: 3px !important; font-size: 10px !important; padding: 8px 4px !important; min-height: 46px; }
|
||||
.bn-item i{ font-size: 17px !important; }
|
||||
|
||||
/* agent/collector: topbar & bottom-nav mengikuti tema */
|
||||
html[data-theme="light"] .topbar{ background: rgba(255,255,255,.9) !important; border-bottom-color: var(--border) !important; }
|
||||
html[data-theme="light"] .bottom-nav{ background: rgba(255,255,255,.95) !important; border-top-color: var(--border) !important; }
|
||||
html[data-theme="light"] .bn-item{ border-color: var(--border) !important; color: var(--muted) !important; }
|
||||
html[data-theme="light"] .bn-item.active{ border-color: var(--primary-glow) !important; background: var(--pdim) !important; color: var(--primary) !important; }
|
||||
html[data-theme="light"] .bn-item.active i, html[data-theme="light"] .bn-item i{ color: var(--muted) !important; }
|
||||
html[data-theme="light"] .bn-item.active i{ color: var(--primary) !important; }
|
||||
html[data-theme="light"] .brand .icon{ background: var(--pdim) !important; border-color: var(--primary-glow) !important; color: var(--primary) !important; }
|
||||
|
||||
/* agent: kartu metode pembayaran (QRIS/Transfer) di light mode */
|
||||
html[data-theme="light"] .payment-name-agent{ color: var(--text) !important; }
|
||||
html[data-theme="light"] .payment-card-agent{ background: var(--bg) !important; border-color: var(--border) !important; }
|
||||
html[data-theme="light"] .payment-radio-agent:checked + .payment-card-agent{ background: var(--pdim) !important; border-color: var(--primary) !important; }
|
||||
html[data-theme="light"] .payment-fee-agent{ color: var(--muted) !important; }
|
||||
@@ -0,0 +1,61 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════════════
|
||||
portal.css — Portal Teknisi / Agen / Kolektor (tema baru)
|
||||
Dipakai setelah landing.css + auth.css.
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
.portal-body{background-color:var(--bg);color:var(--text);padding-top:64px;padding-bottom:84px;min-height:100vh;min-height:100dvh}
|
||||
|
||||
.portal-topnav{position:fixed;top:0;left:0;right:0;height:60px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;z-index:1000}
|
||||
.portal-topnav .t{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text);display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.portal-topnav .actions{display:flex;gap:6px;align-items:center}
|
||||
.portal-topnav .nav-btn{background:none;border:none;color:var(--text);font-size:19px;padding:7px;cursor:pointer;border-radius:9px;text-decoration:none;line-height:1;display:inline-flex;align-items:center}
|
||||
.portal-topnav .nav-btn:hover{background:var(--ghost);color:var(--primary)}
|
||||
.portal-topnav .lang-btn{font-size:12px;font-weight:700;padding:5px 8px}
|
||||
|
||||
.portal-bottomnav{position:fixed;bottom:0;left:0;right:0;height:66px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;z-index:1000;padding-bottom:env(safe-area-inset-bottom)}
|
||||
.portal-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);text-decoration:none;font-size:10.5px;font-weight:600;flex:1}
|
||||
.portal-nav-item i{font-size:21px}
|
||||
.portal-nav-item.active{color:var(--primary)}
|
||||
|
||||
.p-card{background:var(--bg2, #111622);border:1px solid var(--border);border-radius:16px;padding:15px;margin-bottom:14px}
|
||||
/* alias kompatibilitas halaman lama */
|
||||
.t-card{background:var(--bg2, #111622);border:1px solid var(--border);border-radius:16px;padding:15px;margin-bottom:14px;color:var(--text)}
|
||||
.p-card h6{font-size:14px;font-weight:700}
|
||||
.p-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
|
||||
.p-stat{background:var(--glass-2);border:1px solid var(--border);border-radius:16px;padding:15px;text-align:center}
|
||||
.p-stat .val{font-family:var(--font-display);font-size:27px;font-weight:800;margin-top:5px}
|
||||
.p-stat .lbl{font-size:12px;color:var(--muted)}
|
||||
.p-sec{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px;display:flex;align-items:center;gap:7px}
|
||||
.p-sec i{color:var(--primary)}
|
||||
|
||||
.badge-status{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid transparent}
|
||||
.badge-status.badge-open{background:var(--ddim);color:var(--danger);border-color:var(--danger-glow)}
|
||||
.badge-status.badge-in_progress{background:var(--wdim);color:var(--warning);border-color:var(--warning-glow)}
|
||||
.badge-status.badge-resolved{background:var(--sdim);color:var(--success);border-color:var(--success-glow)}
|
||||
|
||||
.ticket-msg{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:13px;margin:10px 0}
|
||||
.ticket-msg .subj{font-weight:700;color:var(--primary)}
|
||||
.p-img{width:100%;height:56px;object-fit:cover;border:1px solid var(--primary-glow);border-radius:8px}
|
||||
.p-empty{text-align:center;padding:40px 16px;color:var(--muted)}
|
||||
.p-empty i{font-size:40px;display:block;margin-bottom:10px;opacity:.5}
|
||||
.p-list{display:flex;flex-direction:column;gap:10px}
|
||||
|
||||
.p-field{margin-bottom:14px}
|
||||
.p-field label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
|
||||
.p-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:12px 14px;color:var(--text);font-size:14px;font-family:inherit;outline:none}
|
||||
.p-input:focus{border-color:var(--primary);box-shadow:var(--ring)}
|
||||
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:.16s var(--ease)}
|
||||
.p-btn.primary{background:var(--primary);color:var(--on-primary)}
|
||||
.p-btn.success{background:var(--success);color:#04231a}
|
||||
.p-btn.ghost{background:var(--ghost);color:var(--text);border-color:var(--border)}
|
||||
.p-btn.sm{padding:8px 12px;font-size:12.5px;width:auto}
|
||||
.p-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
||||
@media(max-width:480px){.p-grid2{grid-template-columns:1fr}}
|
||||
.p-sub{font-size:13px;font-weight:700;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
|
||||
.p-sub i{color:var(--primary)}
|
||||
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
|
||||
.stat-box{background:var(--bg2, #111622);border:1px solid var(--border);border-radius:16px;padding:15px}
|
||||
.stat-box .val{font-family:var(--font-display);font-size:24px;font-weight:800}
|
||||
.stat-box .lbl{font-size:11.5px;color:var(--muted)}
|
||||
|
||||
/* == UI HARDENING (audit ui-ux.md) - jangan hapus marker == */
|
||||
img { max-width: 100%; height: auto; }
|
||||
@@ -0,0 +1,13 @@
|
||||
/* service-notice-badge.css — badge mode status layanan di topbar admin */
|
||||
.sn-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;border:1px solid transparent;line-height:1.1;transition:filter .15s ease,transform .15s ease}
|
||||
.sn-badge i{font-size:13px;line-height:1}
|
||||
.sn-badge:hover{filter:brightness(1.12);text-decoration:none}
|
||||
.sn-badge-primary{background:rgba(173,255,47,.14);color:#ADFF2F;border-color:rgba(173,255,47,.42)}
|
||||
.sn-badge-danger{background:rgba(251,113,133,.16);color:#FB7185;border-color:rgba(251,113,133,.45)}
|
||||
.sn-badge-normal{background:rgba(148,163,184,.14);color:var(--muted,#94a3b8);border-color:rgba(148,163,184,.3)}
|
||||
.sn-badge-pulse{animation:snPulse 2s ease-in-out infinite}
|
||||
@keyframes snPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,113,133,.45)}50%{box-shadow:0 0 0 6px rgba(251,113,133,0)}}
|
||||
html[data-theme="light"] .sn-badge-primary{color:#4A7D08;background:rgba(92,154,10,.12);border-color:rgba(92,154,10,.35)}
|
||||
html[data-theme="light"] .sn-badge-danger{color:#DE3B5C;background:rgba(222,59,92,.12);border-color:rgba(222,59,92,.35)}
|
||||
html[data-theme="light"] .sn-badge-normal{color:#52604C;background:rgba(82,96,76,.10);border-color:rgba(82,96,76,.25)}
|
||||
@media(max-width:640px){.sn-badge{padding:5px 9px;font-size:11px;gap:5px;flex:0 0 auto}.sn-badge i{font-size:12px}}
|
||||
@@ -0,0 +1,16 @@
|
||||
/* theme-toggle.css — tombol switch tema global (floating) */
|
||||
.theme-fab{
|
||||
position:fixed;right:16px;bottom:84px;z-index:2200;
|
||||
width:48px;height:48px;border-radius:50%;
|
||||
display:grid;place-items:center;
|
||||
border:1px solid var(--primary-glow, rgba(173,255,47,.35));
|
||||
background:var(--glass-2, rgba(17,22,34,.9));
|
||||
color:var(--primary, #ADFF2F);
|
||||
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
|
||||
box-shadow:0 6px 20px rgba(0,0,0,.35);
|
||||
cursor:pointer;font-size:20px;line-height:1;
|
||||
transition:transform .18s ease, box-shadow .2s ease;
|
||||
}
|
||||
.theme-fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--primary-glow, rgba(173,255,47,.35))}
|
||||
.theme-fab:active{transform:translateY(0)}
|
||||
@media(min-width:992px){.theme-fab{bottom:20px}}
|
||||
Reference in new issue
Block a user