/* ====================================================== NICE ADMIN 2.4.1 - FULL DARK MODE Gunakan: Letakkan PALING BAWAH file CSS ====================================================== */ :root { /* ===== BACKGROUND ===== */ --bg-main: #0A0A0A; --bg-card: #161616; /* #0D0D0D; */ --bg-soft: #121212; /* ===== TEXT ===== */ --text-main: #FFFFFF; --text-secondary: #9CA3AF; --text-muted: #6B7280; /* ===== ACCENT ===== */ --blue: #3B82F6; --green: #10B981; --orange: #F59E0B; --purple: #8B5CF6; --red: #EF4444; /* ===== UI ===== */ --border: #262c34; --hover: #1A2233; --hover-main: rgba(255,255,255,0.05); --bg-table: linear-gradient( 180deg, #141414 0%, #141313 40%, #161616 100% ) } /* ======================== BASE ======================== */ .dark-mode { background-color: var(--bg-main); color: var(--text-main); } .dark-mode body { background: var(--bg-main); } /* Link */ .dark-mode a { color: var(--blue); } .dark-mode a:hover { color: #60a5fa; /* versi lebih terang dari blue */ } /* Smooth transition */ html, body, #main, .card, .form-control, .input-group-text, .navbar, .section { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ======================== MAIN AREA ======================== */ .dark-mode #main { background-color: var(--bg-main) !important; } /* Optional: gradient halus biar premium */ .dark-mode body { background: radial-gradient( 1200px circle at 50% -10%, rgba(59,130,246,0.08), /* blue glow */ transparent 60% ), var(--bg-main); } /* Title */ .dark-mode .pagetitle h1 { color: var(--text-main); } /* ========================= HEADER (DARK MODE) ========================= */ .dark-mode .header { background: var(--bg-card); border-bottom: 1px solid var(--border); box-shadow: none; } /* ========================= SEARCH BAR ========================= */ /* Desktop & mobile */ .dark-mode .header .search-bar { background: transparent; } /* Mobile only */ @media (max-width: 1199px) { .dark-mode .header .search-bar { background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; } } /* Input */ .dark-mode .header .search-form input { background: var(--bg-soft); color: var(--text-main); border: 1px solid var(--border); } /* Focus (subtle, no neon glow) */ .dark-mode .header .search-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(59,130,246,0.25); } /* Icon */ .dark-mode .header .search-form button i { color: var(--text-secondary); } /* ========================= HEADER ICONS ========================= */ .dark-mode .header-nav .nav-icon { font-size: 22px; color: var(--text-main); margin-right: 25px; position: relative; } .dark-mode .header .toggle-sidebar-btn { font-size: 32px; padding-left: 10px; cursor: pointer; color: var(--text-secondary); } .dark-mode .header-time { color: var(--text-main); } /* ========================= BADGE (LEAD) ========================= */ .dark-mode #total_lead.badge { background: var(--bg-soft); color: var(--text-main); border: 1px solid var(--border); } /* ========================= SIDEBAR (DARK MODE) ========================= */ .dark-mode .sidebar { background: var(--bg-card); border-right: 1px solid var(--border); } /* Tetap konsisten saat toggle */ .dark-mode .toggle-sidebar .sidebar { background: var(--bg-card); } /* ========================= NAV LINK (ACTIVE) ========================= */ .dark-mode .sidebar-nav .nav-link { background: var(--hover-main); border-left: 3px solid var(--blue); color: var(--text-main); } .dark-mode .sidebar-nav .nav-link i { color: var(--blue); } /* ========================= NAV LINK (INACTIVE) ========================= */ .dark-mode .sidebar-nav .nav-link.collapsed { background: transparent; color: var(--text-secondary); border-left: 3px solid transparent; } .dark-mode .sidebar-nav .nav-link.collapsed i { color: var(--text-muted); } /* ========================= HOVER (SUBTLE) ========================= */ .dark-mode .sidebar-nav .nav-link.collapsed:hover { background: #121212; color: var(--text-main); } .dark-mode .sidebar-nav .nav-link.collapsed:hover i { color: var(--blue); } /* ========================= CARD (DARK MODE) ========================= */ .dark-mode .card { background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; border-radius: 12px; } /* Header & Footer */ .dark-mode .card-header, .dark-mode .card-footer { background: transparent; border-color: var(--border); color: var(--text-secondary); } /* Title */ .dark-mode .card-title { color: var(--text-main); } /* Body text */ .dark-mode .card-body p { color: var(--text-main); } /* Code */ .dark-mode .card-body code { color: var(--blue); background: var(--bg-soft); padding: 3px 6px; border-radius: 6px; } /* ========================= TABLE (DARK MODE) ========================= */ .dark-mode .table { color: var(--text-main); } /* ===== THEAD ===== */ .dark-mode .table thead { background: var(--bg-card); } .dark-mode .table thead th { border: none; color: var(--text-muted); font-weight: 500; } /* ===== TBODY ===== */ .dark-mode .table tbody tr { background: var(--bg-card); color: var(--text-secondary); border-bottom: 1px solid var(--border); } /* ===== STRIPED ===== */ .dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.02); } /* ===== HOVER (SUBTLE, NO PURPLE) ===== */ .dark-mode .table-hover > tbody > tr:hover { background: rgba(59,130,246,0.08); color: var(--text-main); } /* ========================= DATATABLES ========================= */ /* Filter input */ .dark-mode .dataTables_filter input { background: var(--bg-soft); color: var(--text-main); border: 1px solid var(--border); } .dark-mode .dataTables_filter input:focus { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(59,130,246,0.25); outline: none; } /* Info text */ .dark-mode .dataTables_info { color: var(--text-muted) !important; font-size: 13px; } /* Label */ .dark-mode .dataTables_filter label, .dark-mode .dataTables_length label { color: var(--text-main); } /* Select */ .dark-mode .dataTables_length select { background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-main); } /* Row border */ .dark-mode table.dataTable tbody tr { border-bottom: 1px solid var(--border); } /* ========================= PAGINATION ========================= */ .dark-mode .dataTables_paginate .paginate_button { background: var(--bg-soft) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; } .dark-mode .dataTables_paginate .paginate_button:hover { background: rgba(59,130,246,0.08) !important; color: var(--text-main) !important; } .dark-mode .dataTables_paginate .paginate_button.current { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; } /* ========================= SCROLLBAR ========================= */ .dark-mode .table-responsive::-webkit-scrollbar { height: 6px; } .dark-mode .table-responsive::-webkit-scrollbar-track { background: var(--bg-soft); } .dark-mode .table-responsive::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } /* ========================= GLOBAL FIX ========================= */ .table, #dataTable, #table_click, tr, td { transition: none !important; } td { vertical-align: middle !important; padding-top: 6px !important; padding-bottom: 6px !important; } /* ========================= DROPDOWN (DARK MODE) ========================= */ .dark-mode .dropdown-menu { background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; border-radius: 10px; } /* Header */ .dark-mode .dropdown-header h6 { color: var(--text-secondary); } /* Item */ .dark-mode .dropdown-item { color: var(--text-main); transition: background 0.2s ease, color 0.2s ease; } /* Hover (subtle, konsisten biru) */ .dark-mode .dropdown-item:hover { background: rgba(59,130,246,0.08); color: var(--text-main); } /* Active */ .dark-mode .dropdown-item:active { background: #181818; color: #fff; } /* Disabled */ .dark-mode .dropdown-item.disabled { color: var(--text-muted); } /* Arrow */ .dark-mode .dropdown-menu-arrow::before { background: var(--bg-card); border-color: var(--border); } /* ========================= NAV TABS (DARK MODE) ========================= */ .dark-mode .nav-tabs { border-bottom: 1px solid var(--border); } /* Default */ .dark-mode .nav-tabs .nav-link { color: var(--text-muted); background: transparent; border: none; padding: 10px 14px; } /* Hover (subtle) */ .dark-mode .nav-tabs .nav-link:hover { color: var(--text-main); background: transparent; } /* Active (underline style) */ .dark-mode .nav-tabs .nav-link.active { color: var(--text-main); background: transparent; border-bottom: 2px solid var(--blue); } /* ======================== ACCORDION ======================== */ .dark-mode .accordion-item { background: var(--bg-card); border: 1px solid var(--border); } .dark-mode .accordion-button { background: transparent; color: var(--text-main); } .dark-mode .accordion-button:not(.collapsed) { background: transparent; color: var(--text-main); box-shadow: none; } /* ======================== BREADCRUMB ======================== */ .dark-mode .breadcrumb, .dark-mode .breadcrumb a { color: var(--text-muted); } /* ======================== TABS (BORDERED) ======================== */ .dark-mode .nav-tabs-bordered { border-bottom: 1px solid var(--border); } .dark-mode .nav-tabs-bordered .nav-link { border: none; color: var(--text-muted); } .dark-mode .nav-tabs-bordered .nav-link.active { color: var(--text-main); border-bottom: 2px solid var(--blue); background: transparent; } /* ======================== FOOTER ======================== */ .dark-mode .footer { background: var(--bg-main); border-top: 1px solid var(--border); } .dark-mode .footer .copyright, .dark-mode .footer .credits { color: var(--text-muted); } /* ======================== FORM (FINAL CLEAN) ======================== */ .dark-mode .form-control, .dark-mode .form-select { background: var(--bg-soft); color: var(--text-main); border: 1px solid var(--border); border-radius: 8px; } .dark-mode .form-control::placeholder { color: var(--text-muted); } .dark-mode .form-control:focus, .dark-mode .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(59,130,246,0.25); outline: none; } .dark-mode .input-group-text { background: var(--bg-soft); color: var(--text-secondary); border: 1px solid var(--border); } .dark-mode .form-check-input:checked { background-color: #38bdf8; border-color: #6366f1; } .dark-mode .form-check-input { background-color: #b0bbbf; border: 1px solid #374151; } .dark-mode .form-check-label { color: var(--text-secondary); } .dark-mode .form-label { color: #9CA3AF; } /* ======================== BUTTON (CLEAN) ======================== */ .dark-mode .btn { border: none; border-radius: 8px; color: #fff; } .dark-mode .btn:hover { opacity: 0.9; } /* ======================== MODAL ======================== */ .dark-mode .modal-content { background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; } .dark-mode .modal-header, .dark-mode .modal-footer { border-color: var(--border); } .dark-mode .modal-title { color: var(--text-main); } .dark-mode .modal-body { color: var(--text-secondary); } /* ======================== TOOLTIP (TIPPY) ======================== */ .dark-mode .tippy-box { background-color: var(--bg-main) !important; color: #e2e8f0; border: 1px solid #1f2937; } /* Arrow tooltip */ .dark-mode .tippy-box[data-placement^="top"] > .tippy-arrow::before { border-top-color: #111827 !important; } .dark-mode .tippy-box[data-placement^="bottom"] > .tippy-arrow::before { border-bottom-color: #111827 !important; } .dark-mode .tippy-box[data-placement^="left"] > .tippy-arrow::before { border-left-color: #111827 !important; } .dark-mode .tippy-box[data-placement^="right"] > .tippy-arrow::before { border-right-color: #111827 !important; } /* Content text */ .dark-mode .tippy-content { color: #e2e8f0; } /* ======================== SWEETALERT ======================== */ .dark-mode .swal2-popup { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); } .dark-mode .swal2-title { color: var(--text-main); } .dark-mode .swal2-content { color: var(--text-secondary); } .dark-mode .swal2-confirm { background: var(--blue) !important; color: #fff !important; } .dark-mode .swal2-cancel { background: var(--bg-soft) !important; color: var(--text-main) !important; } /* ===== SCROLLBAR PREMIUM ===== */ .dark-mode ::-webkit-scrollbar{ width:8px; height:8px; } .dark-mode ::-webkit-scrollbar-track{ background: var(--bg-card); } .dark-mode ::-webkit-scrollbar-thumb{ background:#2f3e57; border-radius:10px; } .dark-mode ::-webkit-scrollbar-thumb:hover{ background:#3b4f73; } .dark-mode ::-webkit-scrollbar-thumb{ border:none; } /* ========================= FORCE REMOVE NICEADMIN COLORS (FINAL FIX) ========================= */ /* Fix semua card dashboard */ .dark-mode .dashboard .card, .dark-mode .dashboard .info-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; box-shadow: none !important; } /* ICON BULAT (penyebab warna biru/ijo/orange) */ .dark-mode .dashboard .card-icon { background: var(--bg-soft) !important; color: var(--text-main) !important; } /* MATIKAN SEMUA CLASS BG BOOTSTRAP */ .dark-mode .bg-primary, .dark-mode .bg-success, .dark-mode .bg-info, .dark-mode .bg-warning, .dark-mode .bg-danger { background: var(--bg-soft) !important; color: var(--text-main) !important; } .dark-mode [class*="bg-"] { background: var(--bg-soft) !important; } /* FIX KHUSUS NICEADMIN CARD WARNA */ .dark-mode .sales-card .card-icon, .dark-mode .revenue-card .card-icon, .dark-mode .customers-card .card-icon { background: var(--bg-soft) !important; color: var(--text-main) !important; } .dark-mode .logo span { color: #f8fafc; } /* ===== DATEPICKER FINAL CLEAN ===== */ .dark-mode .ui-datepicker { padding: 12px; border-radius: 14px; background: var(--bg-main); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 20px 60px rgba(0,0,0,0.7); color: var(--text-main); } /* HEADER */ .dark-mode .ui-datepicker-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; margin-bottom: 8px; } .dark-mode .ui-datepicker-title { color: var(--text-main); font-weight: 500; } /* PREV NEXT */ .dark-mode .ui-datepicker-prev, .dark-mode .ui-datepicker-next { filter: invert(1) brightness(1.5); opacity: 0.9; } .dark-mode .ui-datepicker-prev:hover, .dark-mode .ui-datepicker-next:hover { opacity: 1; transform: scale(1.15); } /* DAY HEADER */ .dark-mode .ui-datepicker-calendar thead th { color: var(--text-muted); font-size: 12px; } /* DATE CELL */ .dark-mode .ui-datepicker-calendar td a { display: block; text-align: center; height: 34px; width: 34px; line-height: 34px; border-radius: 8px; color: var(--text-secondary); transition: 0.15s; } /* HOVER (lebih jelas) */ .dark-mode .ui-datepicker-calendar td a:hover { background: rgba(255,255,255,0.12); color: #fff; } /* TODAY */ .dark-mode .ui-state-highlight { border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); border-radius: 8px; color: #fff; } /* SELECTED */ .dark-mode .ui-state-active { background: #1f2937; color: #fff !important; border-radius: 10px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } /* BUTTON AREA */ .dark-mode .ui-datepicker-buttonpane { border-top: 1px solid rgba(255,255,255,0.05); margin-top: 10px; padding-top: 8px; } .dark-mode .ui-datepicker-close, .dark-mode .ui-datepicker-current { background: transparent; color: var(--text-secondary); border: none; } .dark-mode .ui-datepicker-close:hover, .dark-mode .ui-datepicker-current:hover { color: #fff; } /* ===== HARD OVERRIDE JQUERY UI (WAJIB) ===== */ .dark-mode .ui-state-default, .dark-mode .ui-widget-content .ui-state-default, .dark-mode .ui-widget-header .ui-state-default, .dark-mode .ui-button { border: none !important; background: transparent !important; color: var(--text-secondary) !important; box-shadow: none !important; } #darkModeToggle { color: #facc15; /* kuning sun */ transition: 0.2s; } /* hover */ #darkModeToggle:hover { color: #fde047; } /* optional: saat dark mode (misal jadi moon) */ .dark-mode #darkModeToggle { color: #60a5fa; /* biru soft */ } .dark-mode #darkModeToggle:hover { color: #93c5fd; } .dark-mode #dataTable tbody tr, .dark-mode #table_click tbody tr { background: var(--bg-table); box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .dark-mode #dataTable tbody tr:hover, .dark-mode #table_click tbody tr:hover { background: var(--hover-main); } .dark-mode #dataTable tbody td, .dark-mode #table_click tbody td { color: #e6edf3; } .dark-mode #dataTable thead th, .dark-mode #table_click thead th { color: #8b949e; } /* NAME */ .dark-mode .user-name { font-size: 14px; color: #e6edf3; }