/* * CBT Campus - Theme System * 8 tema yang dapat diterapkan ke seluruh halaman (web + admin) * Menggunakan CSS Custom Properties pada [data-theme] di * ====================================================================== */ /* ================================================================ BASE VARIABLES (Default fallback) ================================================================ */ :root { --primary: #4361ee; --primary-dark: #3f37c9; --primary-light: rgba(67, 97, 238, 0.12); --primary-rgb: 67, 97, 238; --bg-page: #f8f9fa; --bg-card: #ffffff; --bg-input: #ffffff; --sidebar-bg: #ffffff; --sidebar-border: #eef0f2; --sidebar-text: #5a6478; --sidebar-icon: #8898aa; --sidebar-active-bg: rgba(67, 97, 238, 0.1); --sidebar-active-text:#4361ee; --sidebar-hover-bg: rgba(67, 97, 238, 0.06); --sidebar-header-text:#adb5bd; --sidebar-dark: 0; /* 0 = light sidebar, 1 = dark sidebar */ --navbar-bg: #ffffff; --navbar-border: rgba(0,0,0,0.06); --navbar-text: #2b2d42; --navbar-brand: #4361ee; --text-main: #1a1d2e; --text-muted: #6b7280; --text-heading: #0f1535; --border-color: #e9ecef; --card-shadow: 0 2px 12px rgba(0,0,0,0.06); --card-hover-shadow: 0 6px 24px rgba(0,0,0,0.10); --btn-radius: 8px; --card-radius: 12px; --sidebar-width: 260px; } /* ================================================================ 1. DEFAULT — Indigo Biru (existing, polished) ================================================================ */ [data-theme="default"] { --primary: #4361ee; --primary-dark: #3f37c9; --primary-light: rgba(67, 97, 238, 0.12); --primary-rgb: 67, 97, 238; --bg-page: #f4f6fb; --bg-card: #ffffff; --sidebar-bg: #ffffff; --sidebar-text: #5a6478; --sidebar-active-bg: rgba(67, 97, 238, 0.1); --sidebar-active-text:#4361ee; --sidebar-hover-bg: rgba(67, 97, 238, 0.06); --navbar-bg: #ffffff; --navbar-brand: #4361ee; --text-main: #1a1d2e; --text-heading: #0f1535; } /* ================================================================ 2. OCEAN — Samudra (Cyan / Teal profesional) ================================================================ */ [data-theme="ocean"] { --primary: #0891b2; --primary-dark: #0e7490; --primary-light: rgba(8, 145, 178, 0.12); --primary-rgb: 8, 145, 178; --bg-page: #f0f9ff; --bg-card: #ffffff; --sidebar-bg: #0c4a6e; --sidebar-border: rgba(255,255,255,0.08); --sidebar-text: rgba(224, 242, 254, 0.78); --sidebar-icon: rgba(186, 230, 253, 0.6); --sidebar-active-bg: rgba(255,255,255,0.14); --sidebar-active-text:#7dd3fc; --sidebar-hover-bg: rgba(255,255,255,0.08); --sidebar-header-text:rgba(186,230,253,0.5); --sidebar-dark: 1; --navbar-bg: #0c4a6e; --navbar-border: rgba(255,255,255,0.06); --navbar-text: #e0f2fe; --navbar-brand: #7dd3fc; --text-main: #0c2942; --text-heading: #073d60; } /* ================================================================ 3. EMERALD — Zamrud (Green natural) ================================================================ */ [data-theme="emerald"] { --primary: #059669; --primary-dark: #047857; --primary-light: rgba(5, 150, 105, 0.12); --primary-rgb: 5, 150, 105; --bg-page: #f0fdf4; --bg-card: #ffffff; --sidebar-bg: #064e3b; --sidebar-border: rgba(255,255,255,0.08); --sidebar-text: rgba(209, 250, 229, 0.78); --sidebar-icon: rgba(167, 243, 208, 0.6); --sidebar-active-bg: rgba(255,255,255,0.14); --sidebar-active-text:#6ee7b7; --sidebar-hover-bg: rgba(255,255,255,0.08); --sidebar-header-text:rgba(167,243,208,0.5); --sidebar-dark: 1; --navbar-bg: #064e3b; --navbar-border: rgba(255,255,255,0.06); --navbar-text: #d1fae5; --navbar-brand: #6ee7b7; --text-main: #022c22; --text-heading: #064e3b; } /* ================================================================ 4. CRIMSON — Krimson Merah (Power / Formal) ================================================================ */ [data-theme="crimson"] { --primary: #dc2626; --primary-dark: #b91c1c; --primary-light: rgba(220, 38, 38, 0.10); --primary-rgb: 220, 38, 38; --bg-page: #fff8f8; --bg-card: #ffffff; --sidebar-bg: #7f1d1d; --sidebar-border: rgba(255,255,255,0.08); --sidebar-text: rgba(254, 226, 226, 0.82); --sidebar-icon: rgba(252, 165, 165, 0.6); --sidebar-active-bg: rgba(255,255,255,0.14); --sidebar-active-text:#fca5a5; --sidebar-hover-bg: rgba(255,255,255,0.08); --sidebar-header-text:rgba(252,165,165,0.5); --sidebar-dark: 1; --navbar-bg: #7f1d1d; --navbar-border: rgba(255,255,255,0.06); --navbar-text: #fee2e2; --navbar-brand: #fca5a5; --text-main: #1c0707; --text-heading: #450a0a; } /* ================================================================ 5. MIDNIGHT — Malam Biru Gelap (Dark / Premium) ================================================================ */ [data-theme="midnight"] { --primary: #818cf8; --primary-dark: #6366f1; --primary-light: rgba(129, 140, 248, 0.18); --primary-rgb: 129, 140, 248; --bg-page: #0f172a; --bg-card: #1e293b; --bg-input: #0f172a; --sidebar-bg: #1e293b; --sidebar-border: rgba(255,255,255,0.06); --sidebar-text: rgba(203, 213, 225, 0.78); --sidebar-icon: rgba(148, 163, 184, 0.6); --sidebar-active-bg: rgba(129, 140, 248, 0.18); --sidebar-active-text:#a5b4fc; --sidebar-hover-bg: rgba(255,255,255,0.05); --sidebar-header-text:rgba(100,116,139,0.8); --sidebar-dark: 1; --navbar-bg: #1e293b; --navbar-border: rgba(255,255,255,0.06); --navbar-text: #cbd5e1; --navbar-brand: #a5b4fc; --text-main: #e2e8f0; --text-heading: #f1f5f9; --text-muted: #94a3b8; --border-color: rgba(255,255,255,0.08); --card-shadow: 0 2px 12px rgba(0,0,0,0.3); --card-hover-shadow: 0 6px 24px rgba(0,0,0,0.45); } /* ================================================================ 6. AMBER — Amber Hangat (Energik / Warm) ================================================================ */ [data-theme="amber"] { --primary: #d97706; --primary-dark: #b45309; --primary-light: rgba(217, 119, 6, 0.10); --primary-rgb: 217, 119, 6; --bg-page: #fffbf0; --bg-card: #ffffff; --sidebar-bg: #78350f; --sidebar-border: rgba(255,255,255,0.08); --sidebar-text: rgba(254, 243, 199, 0.82); --sidebar-icon: rgba(253, 211, 77, 0.6); --sidebar-active-bg: rgba(255,255,255,0.14); --sidebar-active-text:#fcd34d; --sidebar-hover-bg: rgba(255,255,255,0.08); --sidebar-header-text:rgba(253,211,77,0.5); --sidebar-dark: 1; --navbar-bg: #78350f; --navbar-border: rgba(255,255,255,0.06); --navbar-text: #fef3c7; --navbar-brand: #fcd34d; --text-main: #1c1207; --text-heading: #451a03; } /* ================================================================ 7. VIOLET — Violet Ungu (Creative / Elegant) ================================================================ */ [data-theme="violet"] { --primary: #7c3aed; --primary-dark: #6d28d9; --primary-light: rgba(124, 58, 237, 0.12); --primary-rgb: 124, 58, 237; --bg-page: #faf5ff; --bg-card: #ffffff; --sidebar-bg: #3b0764; --sidebar-border: rgba(255,255,255,0.08); --sidebar-text: rgba(233, 213, 255, 0.80); --sidebar-icon: rgba(196, 181, 253, 0.6); --sidebar-active-bg: rgba(255,255,255,0.14); --sidebar-active-text:#c4b5fd; --sidebar-hover-bg: rgba(255,255,255,0.08); --sidebar-header-text:rgba(196,181,253,0.5); --sidebar-dark: 1; --navbar-bg: #3b0764; --navbar-border: rgba(255,255,255,0.06); --navbar-text: #ede9fe; --navbar-brand: #c4b5fd; --text-main: #1a0830; --text-heading: #2e1065; } /* ================================================================ 8. SLATE — Abu Profesional (Monochrome / Corporate) ================================================================ */ [data-theme="slate"] { --primary: #475569; --primary-dark: #334155; --primary-light: rgba(71, 85, 105, 0.10); --primary-rgb: 71, 85, 105; --bg-page: #f1f5f9; --bg-card: #ffffff; --sidebar-bg: #1e293b; --sidebar-border: rgba(255,255,255,0.06); --sidebar-text: rgba(203, 213, 225, 0.82); --sidebar-icon: rgba(148, 163, 184, 0.6); --sidebar-active-bg: rgba(255,255,255,0.12); --sidebar-active-text:#e2e8f0; --sidebar-hover-bg: rgba(255,255,255,0.07); --sidebar-header-text:rgba(100,116,139,0.7); --sidebar-dark: 1; --navbar-bg: #1e293b; --navbar-border: rgba(255,255,255,0.06); --navbar-text: #cbd5e1; --navbar-brand: #e2e8f0; --text-main: #0f172a; --text-heading: #0f172a; } /* ================================================================ WEB DASHBOARD — Apply theme variables to actual elements ================================================================ */ /* Navbar */ .navbar { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--navbar-border); box-shadow: 0 2px 12px rgba(var(--primary-rgb, 67,97,238), 0.06); } .navbar-brand { color: var(--navbar-brand) !important; } .navbar .dropdown-toggle .fw-bold, .navbar .text-dark { color: var(--navbar-text) !important; } /* Sidebar (web) */ .sidebar { background-color: var(--sidebar-bg) !important; border-right: 1px solid var(--sidebar-border); } .sidebar .nav-link { color: var(--sidebar-text) !important; } .sidebar .nav-link i { color: var(--sidebar-icon); } .sidebar .nav-link:hover { background-color: var(--sidebar-hover-bg) !important; color: var(--sidebar-active-text) !important; } .sidebar .nav-link:hover i { color: var(--sidebar-active-text); } .sidebar .nav-link.active { background-color: var(--sidebar-active-bg) !important; color: var(--sidebar-active-text) !important; font-weight: 600; } .sidebar .nav-link.active i { color: var(--sidebar-active-text); } .sidebar .nav-section-label { color: var(--sidebar-header-text) !important; } /* For logout button acting as nav-link */ .sidebar button.nav-link { color: var(--sidebar-text) !important; } .sidebar button.nav-link:hover { background-color: rgba(220, 38, 38, 0.1) !important; color: #ef4444 !important; } /* Page background */ body { background-color: var(--bg-page); color: var(--text-main); } /* Cards */ .card { background-color: var(--bg-card); color: var(--text-main); box-shadow: var(--card-shadow); border: 1px solid var(--border-color); } .card:hover { box-shadow: var(--card-hover-shadow); } /* Buttons */ .btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; } .btn-outline-primary:hover { background-color: var(--primary) !important; color: #fff !important; } /* Text utilities */ .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } a { color: var(--primary); } /* Dark sidebar special adjustments */ [data-theme="ocean"] .sidebar-brand, [data-theme="emerald"] .sidebar-brand, [data-theme="crimson"] .sidebar-brand, [data-theme="midnight"] .sidebar-brand, [data-theme="amber"] .sidebar-brand, [data-theme="violet"] .sidebar-brand, [data-theme="slate"] .sidebar-brand { color: var(--navbar-brand) !important; } /* Midnight dark page cards */ [data-theme="midnight"] .card { border-color: rgba(255,255,255,0.07); } [data-theme="midnight"] .table { color: var(--text-main); } [data-theme="midnight"] .table-striped>tbody>tr:nth-of-type(odd) { --bs-table-striped-bg: rgba(255,255,255,0.04); } [data-theme="midnight"] .form-control, [data-theme="midnight"] .form-select { background-color: #0f172a; border-color: rgba(255,255,255,0.1); color: #e2e8f0; } /* ================================================================ ADMIN PANEL — Apply theme to Jazzmin / AdminLTE elements ================================================================ */ /* Navbar (top bar) */ .main-header.navbar { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--navbar-border) !important; } .main-header .nav-link, .main-header .navbar-nav > .nav-item > .nav-link { color: var(--navbar-text) !important; } .main-header .brand-link { color: var(--navbar-brand) !important; } /* Sidebar (admin) */ .main-sidebar, .main-sidebar .sidebar { background-color: var(--sidebar-bg) !important; } .main-sidebar .brand-link { background-color: var(--sidebar-bg) !important; border-bottom: 1px solid var(--sidebar-border) !important; color: var(--navbar-brand) !important; } .main-sidebar .brand-link:hover { background-color: var(--sidebar-hover-bg) !important; } .main-sidebar .sidebar .nav-link { color: var(--sidebar-text) !important; } .main-sidebar .sidebar .nav-link:hover, .main-sidebar .sidebar .nav-link:focus { background-color: var(--sidebar-hover-bg) !important; color: var(--sidebar-active-text) !important; } .main-sidebar .sidebar .nav-link.active, .main-sidebar .sidebar .nav-item.menu-open > .nav-link { background-color: var(--sidebar-active-bg) !important; color: var(--sidebar-active-text) !important; } .main-sidebar .sidebar .nav-link i, .main-sidebar .sidebar .nav-link p { color: inherit !important; } .main-sidebar .sidebar .nav-header { color: var(--sidebar-header-text) !important; font-size: 0.70rem !important; letter-spacing: 0.06em !important; font-weight: 700 !important; text-transform: uppercase !important; } .main-sidebar .sidebar .treeview-menu .nav-link { color: var(--sidebar-text) !important; padding-left: 2.5rem !important; } .main-sidebar .sidebar .treeview-menu .nav-link:hover { color: var(--sidebar-active-text) !important; } /* User panel in admin sidebar */ .main-sidebar .user-panel .info a { color: var(--sidebar-active-text) !important; } .main-sidebar .user-panel { border-bottom: 1px solid var(--sidebar-border) !important; } /* Content area */ .content-wrapper { background-color: var(--bg-page) !important; } /* Admin cards */ .card { border-radius: var(--card-radius) !important; box-shadow: var(--card-shadow) !important; border: 1px solid var(--border-color) !important; background-color: var(--bg-card) !important; } .card-header { border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0 !important; background-color: var(--bg-card) !important; border-bottom: 1px solid var(--border-color) !important; } .card.card-primary > .card-header, .card.card-info > .card-header { background-color: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } /* Buttons in admin */ .btn-primary, .btn-primary:visited { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } /* Midnight admin dark */ [data-theme="midnight"] .content-wrapper { background-color: #0f172a !important; } [data-theme="midnight"] .card { background-color: #1e293b !important; border-color: rgba(255,255,255,0.07) !important; } [data-theme="midnight"] .card-header { background-color: #263348 !important; border-color: rgba(255,255,255,0.07) !important; color: #e2e8f0 !important; } [data-theme="midnight"] .table { color: #cbd5e1 !important; } [data-theme="midnight"] .table thead th { color: #e2e8f0 !important; border-color: rgba(255,255,255,0.08) !important; } [data-theme="midnight"] .table td, [data-theme="midnight"] .table th { border-color: rgba(255,255,255,0.06) !important; } [data-theme="midnight"] .form-control { background-color: #0f172a !important; border-color: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; } [data-theme="midnight"] .small-box { background-color: #263348 !important; } [data-theme="midnight"] .info-box { background-color: #1e293b !important; } [data-theme="midnight"] .breadcrumb { background-color: transparent !important; } /* Small info boxes in admin dashboard */ .small-box { border-radius: var(--card-radius) !important; overflow: hidden; } /* ================================================================ ELEGANCE IMPROVEMENTS — Admin polish (applies to all themes) ================================================================ */ /* Smooth transitions on sidebar links */ .main-sidebar .sidebar .nav-link, .sidebar .nav-link { transition: background-color 0.18s ease, color 0.18s ease !important; border-radius: 0 30px 30px 0 !important; margin-right: 12px !important; } /* Admin sidebar width */ .main-sidebar { width: 250px !important; } .main-sidebar.sidebar-collapse { width: 0 !important; } @media (min-width: 992px) { .content-wrapper, .main-footer { margin-left: 250px !important; } .sidebar-collapse .content-wrapper { margin-left: 0 !important; } } /* Typography improvements */ body, .content-wrapper { font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* Table improvements */ .table th { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .table-hover tbody tr:hover { background-color: var(--primary-light) !important; } /* Change list improvements in admin */ #changelist-search { border-radius: 8px; } .change-list .actions select { border-radius: 6px; } /* Breadcrumb */ .breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 1rem; } .breadcrumb-item.active { color: var(--text-muted); } .breadcrumb-item a { color: var(--primary); } /* Form improvements */ .form-control, .form-select { border-radius: 8px !important; } .form-control:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.2) !important; } .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border-radius: 8px !important; border-color: var(--border-color) !important; } /* Content header */ .content-header h1 { font-size: 1.4rem !important; font-weight: 700 !important; color: var(--text-heading); } .content-header .breadcrumb { margin: 0 !important; } /* Footer */ .main-footer { border-top: 1px solid var(--border-color); background: var(--bg-card) !important; color: var(--text-muted) !important; } /* Scrollbar styling */ .main-sidebar ::-webkit-scrollbar { width: 4px; } .main-sidebar ::-webkit-scrollbar-track { background: transparent; } .main-sidebar ::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 4px; }