/* * theme.css * Dark / Light mode overrides. * Aktif saat — tidak menyentuh rule apapun di index.html. * * Strategi: CSS custom properties di :root[data-theme="dark"] * di-override lalu semua komponen memakai variabel tersebut. */ /* ── Transisi halus saat toggle ── */ *, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.2s ease; } /* ── Token warna dark mode ── */ :root[data-theme="dark"] { --dm-bg: #0f1117; --dm-bg-card: #1a1f2e; --dm-bg-card-alt: #1e2436; --dm-bg-input: #252b3b; --dm-border: #2d3448; --dm-text: #e2e8f0; --dm-text-muted: #7b8db0; --dm-text-label: #94a3b8; --dm-primary: #4299e1; --dm-shadow: rgba(0, 0, 0, 0.45); } /* ──────────────────────────────────────────── BODY & PAGE ──────────────────────────────────────────── */ [data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } [data-theme="dark"] .page-wrapper { background-color: var(--dm-bg); } /* ──────────────────────────────────────────── STAT CARDS ──────────────────────────────────────────── */ [data-theme="dark"] .stat-card { background: var(--dm-bg-card); box-shadow: 0 2px 12px var(--dm-shadow); } [data-theme="dark"] .stat-card:hover { box-shadow: 0 8px 28px var(--dm-shadow); } [data-theme="dark"] .stat-card .stat-label { color: var(--dm-text-muted); } [data-theme="dark"] .stat-success .stat-icon { background: #1a3d26; color: #4ade80; } [data-theme="dark"] .stat-success .stat-value { color: #4ade80; } [data-theme="dark"] .stat-info .stat-icon { background: #1a2f45; color: #60a5fa; } [data-theme="dark"] .stat-info .stat-value { color: #60a5fa; } [data-theme="dark"] .stat-warning .stat-icon { background: #3d2310; color: #fb923c; } [data-theme="dark"] .stat-warning .stat-value { color: #fb923c; } [data-theme="dark"] .stat-secondary .stat-icon { background: #252b3b; color: #94a3b8; } [data-theme="dark"] .stat-secondary .stat-value { color: #94a3b8; } /* ──────────────────────────────────────────── TABLE CARD ──────────────────────────────────────────── */ [data-theme="dark"] .table-card { background: var(--dm-bg-card); border-color: var(--dm-border); box-shadow: 0 2px 12px var(--dm-shadow); } [data-theme="dark"] .table-card .card-header, [data-theme="dark"] .table-card .card-title { background: var(--dm-bg-card); color: var(--dm-text); border-bottom-color: var(--dm-border); } [data-theme="dark"] .table { color: var(--dm-text); --tblr-table-color: var(--dm-text); --tblr-table-bg: transparent; --tblr-table-border-color: var(--dm-border); } [data-theme="dark"] .table thead th { background: var(--dm-bg-card) !important; color: var(--dm-text-label); border-bottom-color: var(--dm-border); } [data-theme="dark"] .table tbody tr { border-bottom-color: var(--dm-border); } [data-theme="dark"] .table-hover tbody tr:hover td { background-color: #252b3b; } [data-theme="dark"] .table tbody tr.table-primary td { background-color: #1a2f45 !important; color: #93c5fd; } [data-theme="dark"] .text-primary { color: #60a5fa !important; } [data-theme="dark"] .text-azure { color: #7dd3fc !important; } [data-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; } /* Badges */ [data-theme="dark"] .badge.bg-blue-lt { background: #1a2f45 !important; color: #60a5fa !important; } [data-theme="dark"] .badge.bg-orange-lt { background: #3d2310 !important; color: #fb923c !important; } [data-theme="dark"] .text-orange { color: #fb923c !important; } /* ──────────────────────────────────────────── LOG CARD ──────────────────────────────────────────── */ [data-theme="dark"] .log-card { background: var(--dm-bg-card); border-color: var(--dm-border); } [data-theme="dark"] .log-card .card-header { background: var(--dm-bg-card); color: var(--dm-text); border-bottom-color: var(--dm-border); } [data-theme="dark"] .log-item { border-bottom-color: var(--dm-border); } [data-theme="dark"] .log-title { color: #e2e8f0; } [data-theme="dark"] .log-desc { color: var(--dm-text-muted); } [data-theme="dark"] .log-timestamp { color: #60a5fa; } /* ──────────────────────────────────────────── JOURNEY CARD ──────────────────────────────────────────── */ [data-theme="dark"] .journey-card { background: var(--dm-bg-card); box-shadow: 0 4px 24px var(--dm-shadow); } [data-theme="dark"] .journey-card .card-header { background: #111827; border-bottom-color: var(--dm-border); } [data-theme="dark"] .journey-card .card-body { background: var(--dm-bg-card); color: var(--dm-text); } [data-theme="dark"] .border-top { border-top-color: var(--dm-border) !important; } /* ──────────────────────────────────────────── STEPS ──────────────────────────────────────────── */ [data-theme="dark"] .step-item:not(:last-child)::after { background: #2d3448; } [data-theme="dark"] .step-label { color: var(--dm-text-muted); } [data-theme="dark"] .step-item.done .step-label { color: #4ade80; } [data-theme="dark"] .step-item.active .step-label { color: #60a5fa; } [data-theme="dark"] .step-status-badge.pending { background: #252b3b; color: #64748b; } /* ──────────────────────────────────────────── FLOOR MAP ──────────────────────────────────────────── */ [data-theme="dark"] .floor-cell { border-color: var(--dm-border); background: var(--dm-bg-card-alt); color: var(--dm-text); } [data-theme="dark"] .floor-selesai { background: #1a3d26; border-color: #4ade80; color: #a7f3d0; } [data-theme="dark"] .floor-aktif { background: #3d2310; border-color: #fb923c; color: #fed7aa; } /* ──────────────────────────────────────────── SCROLLBAR ──────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #374151; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1f2e; } /* ──────────────────────────────────────────── GENERAL CARD / TABLER OVERRIDES ──────────────────────────────────────────── */ [data-theme="dark"] .card { background: var(--dm-bg-card); border-color: var(--dm-border); } [data-theme="dark"] .card-header { background: var(--dm-bg-card-alt); color: var(--dm-text); border-bottom-color: var(--dm-border); } [data-theme="dark"] .card-title { color: var(--dm-text) !important; } [data-theme="dark"] .btn-ghost-secondary { color: var(--dm-text-muted); } [data-theme="dark"] .btn-ghost-secondary:hover { background: var(--dm-bg-input); color: var(--dm-text); } [data-theme="dark"] .btn-ghost-light { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.2); } [data-theme="dark"] .btn-ghost-light:hover { background: rgba(255,255,255,0.1); } /* ──────────────────────────────────────────── TOGGLE BUTTON (tombol di hero-card) ──────────────────────────────────────────── */ #theme-toggle { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3); border-radius: 30px; color: #fff; padding: 0.45rem 1rem; font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: background 0.2s, border 0.2s; white-space: nowrap; } #theme-toggle:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.6); } #theme-toggle .toggle-icon { font-size: 1rem; line-height: 1; } #theme-toggle .toggle-label { display: none; } @media (min-width: 576px) { #theme-toggle .toggle-label { display: inline; } } /* ──────────────────────────────────────────── STAT CARD — Petunjuk "Klik untuk Detail" Murni CSS ::after, tidak menyentuh index.html ──────────────────────────────────────────── */ /* Label hint bawah card — light mode */ .stat-card::after { content: "✦ Klik disini Untuk Detail! ✦"; display: block; text-align: center; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.75rem 0.45rem; border-top: 1px dashed rgba(0, 0, 0, 0.07); color: #a0aec0; background: linear-gradient(90deg, transparent 0%, rgba(26,111,196,0.04) 50%, transparent 100%); opacity: 0; transform: translateY(4px); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; border-radius: 0 0 12px 12px; } /* Tampil saat hover */ .stat-card:hover::after { opacity: 1; transform: translateY(0); } /* Warna hint per varian card */ .stat-success::after { color: #2fb344; border-top-color: rgba(47,179,68,0.18); background: linear-gradient(90deg, transparent, rgba(47,179,68,0.05), transparent); } .stat-info::after { color: #4299e1; border-top-color: rgba(66,153,225,0.18); background: linear-gradient(90deg, transparent, rgba(66,153,225,0.05), transparent); } .stat-warning::after { color: #f76707; border-top-color: rgba(247,103,7,0.18); background: linear-gradient(90deg, transparent, rgba(247,103,7,0.05), transparent); } .stat-secondary::after{ color: #6c7a9c; border-top-color: rgba(108,122,156,0.18);background: linear-gradient(90deg, transparent, rgba(108,122,156,0.05),transparent); } /* Card yang sedang aktif — hint selalu terlihat */ .stat-card.active-kategori::after { opacity: 1; transform: translateY(0); font-weight: 800; } /* ── Dark mode override ── */ [data-theme="dark"] .stat-card::after { border-top-color: rgba(255,255,255,0.06); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent); color: #4a5568; } [data-theme="dark"] .stat-success::after { color: #4ade80; border-top-color: rgba(74,222,128,0.15); background: linear-gradient(90deg, transparent, rgba(74,222,128,0.04), transparent); } [data-theme="dark"] .stat-info::after { color: #60a5fa; border-top-color: rgba(96,165,250,0.15); background: linear-gradient(90deg, transparent, rgba(96,165,250,0.04), transparent); } [data-theme="dark"] .stat-warning::after { color: #fb923c; border-top-color: rgba(251,146,60,0.15); background: linear-gradient(90deg, transparent, rgba(251,146,60,0.04), transparent); } [data-theme="dark"] .stat-secondary::after{ color: #94a3b8; border-top-color: rgba(148,163,184,0.15);background: linear-gradient(90deg, transparent, rgba(148,163,184,0.04), transparent); }