/* ========================================================= DARK MODE OVERRIDES Aktif saat . Dimuat PALING TERAKHIR di header.php supaya menang di atas CSS lain tanpa !important berlebihan. CATATAN JUJUR: file ini meng-cover semua komponen yang saya buat/edit sejauh ini (dashboard, navbar/header, kartu profil, halaman statis, ad carousel). Halaman/komponen yang CSS aslinya belum pernah saya lihat (mis. journal.css, footer.css, upload_journal_modal.css, token_wallet.css, toast.css, custom_alerts.css) BELUM ikut di-dark-mode-kan di sini — kalau ada bagian yang masih putih terang di dark mode, kirim isi file CSS itu dan saya tambahkan overridenya. ========================================================= */ :root[data-theme="dark"] { color-scheme: dark; } /* ----- Base ----- */ [data-theme="dark"] body { background: #0f172a; color: #e2e8f0; } /* ----- Header & Navbar ----- */ [data-theme="dark"] header { background-color: #111827; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } [data-theme="dark"] header.scrolled { background-color: rgba(17, 24, 39, 0.85) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .logo-text { color: #f1f5f9; } [data-theme="dark"] nav a { color: #94a3b8; } [data-theme="dark"] nav a:hover, [data-theme="dark"] .nav-link.has-caret:hover { background-color: #1e293b; color: #f1f5f9; } [data-theme="dark"] nav a.active { color: #60a5fa; } [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .user-profile-menu, [data-theme="dark"] .mobile-logout-dropdown { background: #1e293b; border-color: #334155; } [data-theme="dark"] .dropdown-menu a, [data-theme="dark"] .user-profile-menu-item { color: #cbd5e1; } [data-theme="dark"] .dropdown-menu a:hover, [data-theme="dark"] .user-profile-menu-item:hover { background: #334155; color: #f1f5f9; } [data-theme="dark"] .user-profile-menu-item--danger { border-top-color: #334155; } [data-theme="dark"] .user-profile-menu-header { border-bottom-color: #334155; } [data-theme="dark"] .user-profile-menu-header strong { color: #f1f5f9; } [data-theme="dark"] .user-profile-menu-header span { color: #94a3b8; } [data-theme="dark"] .user-profile-trigger { border-color: #475569; color: #e2e8f0; } [data-theme="dark"] .user-profile-trigger:hover { background: #1e293b; } [data-theme="dark"] .user-name { color: #f1f5f9; } [data-theme="dark"] .guest-profile { background: #1e293b; border-color: #334155; } [data-theme="dark"] .guest-avatar { background: #334155; color: #cbd5e1; } [data-theme="dark"] .guest-label { color: #94a3b8; } /* ----- Mobile header / drawer ----- Beberapa properti mobile di header.css sengaja memakai !important untuk mengatasi CSS halaman lama, jadi override tema di bawah perlu spesifisitas yang sama agar tidak menyisakan panel putih. */ [data-theme="dark"] body.menu-open header { background-color: #111827 !important; } [data-theme="dark"] .hamburger-menu { background: #1e293b; border-color: #334155; } [data-theme="dark"] .hamburger-menu span { background: #e2e8f0; } [data-theme="dark"] .nav-overlay { background: rgba(2, 6, 23, 0.72); } @media (max-width: 768px) { [data-theme="dark"] nav { background: #111827 !important; box-shadow: 15px 0 40px rgba(0, 0, 0, 0.45) !important; } [data-theme="dark"] nav > a.active { background: #1e293b; color: #60a5fa; } [data-theme="dark"] .nav-logo, [data-theme="dark"] .nav-auth-section { border-color: #334155 !important; } [data-theme="dark"] .mobile-auth-header .guest-avatar { background: #1e293b; border-color: #334155; color: #cbd5e1; } [data-theme="dark"] .mobile-header-avatar { border-color: #334155; } [data-theme="dark"] .mobile-logout-dropdown { background: #1e293b; border-color: #334155; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .dropdown-user-info { border-bottom-color: #334155; } [data-theme="dark"] .dropdown-user-info strong { color: #f1f5f9; } [data-theme="dark"] .dropdown-user-info span { color: #94a3b8; } [data-theme="dark"] .btn-logout-mobile { color: #cbd5e1; } [data-theme="dark"] .btn-logout-mobile:hover { background: #334155; } [data-theme="dark"] .btn-logout-mobile#btnMobileLogout { border-top-color: #334155; color: #f87171; } [data-theme="dark"] .btn-logout-mobile#btnMobileLogout:hover { background: rgba(239, 68, 68, 0.12); } } /* Search bar navbar sudah dihapus (lihat navbar.php) — override dark mode untuk .navbar-search-box tidak diperlukan lagi. */ /* ===== MAIN CONTAINER / GENERIC TEXT ===== */ [data-theme="dark"] .statistics h2, [data-theme="dark"] .articles-section h2, [data-theme="dark"] .categories-section h2, [data-theme="dark"] .articles-section-header h2, [data-theme="dark"] .account-page h2, [data-theme="dark"] .section-heading { color: #f1f5f9; } /* ===== STAT CARDS ===== */ [data-theme="dark"] .stat-card { background-color: #1e293b; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .stat-icon svg { color: #93c5fd; } [data-theme="dark"] .stat-number { color: #f1f5f9; } [data-theme="dark"] .stat-label { color: #94a3b8; } [data-theme="dark"] .ksm-token-card { background: #1e293b !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35); } /* ===== AD CAROUSEL ===== */ /* Sudah full-bleed foto + gradient gelap, jadi cukup dibiarkan apa adanya — sudah gelap secara alami. Hanya tombol CTA disesuaikan supaya tetap kontras. */ [data-theme="dark"] .ksm-ad-cta { background: #f1f5f9; color: #111827; } [data-theme="dark"] .ksm-ad-cta:hover { background: #e2e8f0; } /* ===== ARTIKEL SAYA + AKTIVITAS TERBARU ===== */ [data-theme="dark"] .activity-card { background: #1e293b; color: #e2e8f0; } [data-theme="dark"] .activity-text p { color: #cbd5e1; } [data-theme="dark"] .activity-time { color: #64748b; } [data-theme="dark"] .dtc-see-all-dark { color: #e2e8f0; border-color: #475569; } [data-theme="dark"] .dtc-see-all-dark:hover { background: #334155; } [data-theme="dark"] .activity-card .dtc-empty { color: #64748b; } /* my-articles-card sudah navy gelap secara desain, tidak perlu diubah */ /* ===== ARTICLE CARDS (Artikel Terbaru) ===== */ [data-theme="dark"] .article-card { background: #1e293b; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .article-content .article-title, [data-theme="dark"] .article-title { color: #f1f5f9; } [data-theme="dark"] .article-excerpt, [data-theme="dark"] .article-content .article-excerpt { color: #94a3b8; } [data-theme="dark"] .article-meta, [data-theme="dark"] .article-content .article-meta { color: #64748b; border-top-color: #334155; } [data-theme="dark"] .author-chip { color: #cbd5e1; } [data-theme="dark"] .article-tag { background: #334155; color: #cbd5e1; } [data-theme="dark"] .articles-wrapper::after { background: linear-gradient(to bottom, transparent, #0f172a 90%); } /* ===== KATEGORI ===== */ [data-theme="dark"] .category-card { background: #1e293b; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .category-name { color: #e2e8f0; } [data-theme="dark"] .category-count { color: #64748b; } [data-theme="dark"] .category-card:hover { background: #334155; } /* ===== BANNER CTA "PUNYA KARYA UNTUK DIBAGIKAN" ===== */ /* Sudah gradient navy gelap secara desain, tidak perlu diubah */ /* ===== HALAMAN PROFIL & PENGATURAN ===== */ [data-theme="dark"] .profile-card { background: #1e293b; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .profile-header-info h3, [data-theme="dark"] .profile-form-title { color: #f1f5f9; } [data-theme="dark"] .profile-email, [data-theme="dark"] .profile-stat-label, [data-theme="dark"] .form-hint, [data-theme="dark"] .settings-toggle-text p, [data-theme="dark"] .danger-zone-desc { color: #94a3b8; } [data-theme="dark"] .profile-join-badge { background: #334155; color: #cbd5e1; } [data-theme="dark"] .profile-stats-row { border-top-color: #334155; } [data-theme="dark"] .profile-stat-number { color: #f1f5f9; } [data-theme="dark"] .form-group label { color: #cbd5e1; } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group textarea:focus { border-color: #3b82f6; } [data-theme="dark"] .form-group input:disabled { background: #1e293b; color: #64748b; } [data-theme="dark"] .settings-toggle-row { border-bottom-color: #334155; } [data-theme="dark"] .settings-toggle-text strong { color: #f1f5f9; } [data-theme="dark"] .switch-slider { background-color: #475569; } [data-theme="dark"] .profile-card--danger { border-color: #7f1d1d; } /* ===== HALAMAN TENTANG / KONTAK ===== */ [data-theme="dark"] .static-hero-tag { background: rgba(96, 165, 250, 0.15); color: #93c5fd; } [data-theme="dark"] .static-hero h1 { color: #f1f5f9; } [data-theme="dark"] .static-hero p { color: #94a3b8; } [data-theme="dark"] .vm-card, [data-theme="dark"] .stat-highlight-card, [data-theme="dark"] .feature-card, [data-theme="dark"] .contact-info-card { background: #1e293b; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .vm-card h3, [data-theme="dark"] .feature-card h4, [data-theme="dark"] .contact-info-card h4, [data-theme="dark"] .stat-highlight-number { color: #f1f5f9; } [data-theme="dark"] .vm-card p, [data-theme="dark"] .vm-list li, [data-theme="dark"] .feature-card p, [data-theme="dark"] .contact-info-card p, [data-theme="dark"] .stat-highlight-label { color: #94a3b8; } [data-theme="dark"] .feature-icon { background: rgba(96, 165, 250, 0.12); } [data-theme="dark"] .contact-info-icon { background: rgba(96, 165, 250, 0.12); } [data-theme="dark"] .contact-social a { background: #1e293b; color: #cbd5e1; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .contact-social a:hover { background: #3b82f6; color: white; } /* static-cta sudah navy gradient gelap, tidak perlu diubah */ /* ===== BUTTON UMUM (btn-save-profile, btn-delete-account) ===== */ [data-theme="dark"] .btn-save-profile { background: #3b82f6; } [data-theme="dark"] .btn-save-profile:hover { background: #2563eb; } [data-theme="dark"] .btn-delete-account { border-color: #ef4444; color: #f87171; } [data-theme="dark"] .btn-delete-account:hover { background: #ef4444; color: white; } /* ===== SCROLLBAR (opsional, biar konsisten di dark mode) ===== */ [data-theme="dark"] .articles-wrapper::-webkit-scrollbar-track { background: #1e293b; } [data-theme="dark"] .articles-wrapper::-webkit-scrollbar-thumb { background: #475569; } [data-theme="dark"] .articles-wrapper::-webkit-scrollbar-thumb:hover { background: #64748b; }