/* ========================================================================== Admin panel DARK MODE Loaded AFTER application.min.css + mobile-friendly.css so these win by source order. Everything is scoped under html[data-theme="dark"]; the default light theme is completely untouched. Toggle lives in the top navbar. ========================================================================== */ /* --- Toggle button (both themes) --- */ .theme-toggle-admin { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 8px; border: 1.5px solid rgba(89, 51, 255, 0.35); border-radius: 50%; background: rgba(89, 51, 255, 0.10); color: #5933ff; font-size: 16px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .theme-toggle-admin:hover { background: rgba(89, 51, 255, 0.16); } /* Font Awesome 4 uses -o suffixed classes; show moon in light, sun in dark. */ .theme-toggle-admin .fa-sun-o { display: none; } .theme-toggle-admin .fa-moon-o { display: inline-block; } html[data-theme="dark"] .theme-toggle-admin { color: #FFD166; border-color: rgba(255, 209, 102, 0.45); background: rgba(255, 209, 102, 0.12); } html[data-theme="dark"] .theme-toggle-admin:hover { background: rgba(255, 209, 102, 0.20); } html[data-theme="dark"] .theme-toggle-admin .fa-moon-o { display: none; } html[data-theme="dark"] .theme-toggle-admin .fa-sun-o { display: inline-block; } /* ========================================================================== DARK THEME ========================================================================== */ /* Root gets the dark bg too, so there's no white flash while a page loads or during navigation (the browser paints the background before ). */ html[data-theme="dark"] { background-color: #0f0e17 !important; } html[data-theme="dark"] body, html[data-theme="dark"] #main, html[data-theme="dark"] main, html[data-theme="dark"] .tab-content, html[data-theme="dark"] .table-responsive { background-color: #0f0e17 !important; color: #e7e5f0; } /* Pastel status-row highlights (Users page etc.) → dark-tinted so they don't read as white blocks in the middle of a dark table; keep text readable. */ html[data-theme="dark"] .bg-danger { background-color: #3a1a20 !important; } html[data-theme="dark"] .bg-warning { background-color: #3a3210 !important; } html[data-theme="dark"] .bg-success { background-color: #123328 !important; } html[data-theme="dark"] .bg-danger td, html[data-theme="dark"] .bg-danger td a, html[data-theme="dark"] .bg-warning td, html[data-theme="dark"] .bg-warning td a, html[data-theme="dark"] .bg-success td, html[data-theme="dark"] .bg-success td a { color: #ece9f3 !important; } /* Headings & general text */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .page-header, html[data-theme="dark"] .page-header h1, html[data-theme="dark"] label, html[data-theme="dark"] .card-title, html[data-theme="dark"] strong, html[data-theme="dark"] b { color: #f2f0fa; } html[data-theme="dark"] .text-dark { color: #e7e5f0 !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] small.text-muted { color: #9a95ad !important; } html[data-theme="dark"] a { color: #b9a4ff; } html[data-theme="dark"] a:hover { color: #d3c4ff; } /* Top navbar */ html[data-theme="dark"] .modern-navbar, html[data-theme="dark"] .navbar.navbar-light { background-color: #17141f !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .modern-navbar .nav-link, html[data-theme="dark"] .modern-navbar .navbar-brand, html[data-theme="dark"] .modern-navbar .navbar-nav .nav-link { color: #d8d5e6 !important; } html[data-theme="dark"] .modern-navbar .nav-link:hover { color: #ffffff !important; } /* Desktop dropdown pills (Tools / Blog / Partners / Reports / account menu) are white in the compiled theme; on the dark navbar the light text on a white pill was unreadable. Make the pills dark with light text + a purple hover/open. */ html[data-theme="dark"] .modern-navbar .navbar-nav.d-md-flex .nav-item.dropdown > .nav-link { background-color: #221f31 !important; color: #e7e5f0 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .modern-navbar .navbar-nav.d-md-flex .nav-item.dropdown > .nav-link i { color: #c9a9ff !important; } html[data-theme="dark"] .modern-navbar .navbar-nav.d-md-flex .nav-item.dropdown.show > .nav-link, html[data-theme="dark"] .modern-navbar .navbar-nav.d-md-flex .nav-item.dropdown > .nav-link:hover { background: linear-gradient(135deg, #7c3aed, #d946c8) !important; color: #ffffff !important; border-color: transparent !important; } html[data-theme="dark"] .modern-navbar .navbar-nav.d-md-flex .nav-item.dropdown.show > .nav-link i, html[data-theme="dark"] .modern-navbar .navbar-nav.d-md-flex .nav-item.dropdown > .nav-link:hover i { color: #ffffff !important; } html[data-theme="dark"] .navbar-toggler { border-color: rgba(255, 255, 255, 0.2); } html[data-theme="dark"] .credits-display, html[data-theme="dark"] .btn-credits, html[data-theme="dark"] .credits-display-mobile { color: #e7e5f0 !important; } /* Sidebars */ html[data-theme="dark"] .sidebar-desktop, html[data-theme="dark"] .modern-sidebar-mobile, html[data-theme="dark"] .sidebar-body, html[data-theme="dark"] .sidebar-nav { background-color: #17141f !important; border-color: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] .sidebar-menu li a { color: #c7c3d6 !important; } html[data-theme="dark"] .sidebar-menu li a:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } html[data-theme="dark"] .sidebar-menu li a.active { background: linear-gradient(135deg, #ff34ff33, #5933ff44) !important; color: #ffffff !important; } html[data-theme="dark"] .sidebar-menu li a.active i { color: #c9a9ff !important; } html[data-theme="dark"] .menu-divider { border-color: rgba(255, 255, 255, 0.08) !important; background: rgba(255, 255, 255, 0.06); } /* Cards / panels */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-body, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .well, html[data-theme="dark"] .jumbotron, html[data-theme="dark"] .list-group-item { background-color: #1a1826 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #e7e5f0; } html[data-theme="dark"] .card-stats .card-title { color: #f2f0fa !important; } html[data-theme="dark"] .card-stats .card-text { color: #9a95ad !important; } /* Tables */ html[data-theme="dark"] .table { color: #e7e5f0; border-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .table thead th, html[data-theme="dark"] .table th, html[data-theme="dark"] .table td { border-color: rgba(255, 255, 255, 0.08) !important; color: #e7e5f0; } html[data-theme="dark"] .table thead th { background-color: #221f31 !important; color: #f2f0fa; } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered th, html[data-theme="dark"] .table-bordered td { border-color: rgba(255, 255, 255, 0.1) !important; } /* Forms */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="date"] { background-color: #221f31 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #e7e5f0 !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { background-color: #262238 !important; border-color: #7c5cff !important; box-shadow: 0 0 0 0.15rem rgba(124, 92, 255, 0.25) !important; color: #ffffff !important; } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder { color: #7f7a94 !important; } html[data-theme="dark"] .input-group-text { background-color: #262238 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #c7c3d6 !important; } /* Select2 (used across admin) */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: #221f31 !important; border-color: rgba(255, 255, 255, 0.14) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e7e5f0 !important; } html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .select2-search__field { background-color: #221f31 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #e7e5f0 !important; } html[data-theme="dark"] .select2-results__option { color: #e7e5f0; } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5933ff !important; } /* Dropdown menus */ html[data-theme="dark"] .dropdown-menu { background-color: #1a1826 !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .dropdown-item { color: #d8d5e6 !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } html[data-theme="dark"] .dropdown-item.text-danger { color: #ff8080 !important; } html[data-theme="dark"] .dropdown-header { color: #9a95ad !important; } html[data-theme="dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .dropdown-item-text { color: #9a95ad !important; } /* Modals */ html[data-theme="dark"] .modal-content { background-color: #1a1826 !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #e7e5f0; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .close { color: #e7e5f0; text-shadow: none; opacity: .8; } /* Tabs / nav / pagination */ html[data-theme="dark"] .nav-tabs { border-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .nav-tabs .nav-link { color: #c7c3d6; } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: #1a1826 !important; border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) #1a1826 !important; color: #ffffff !important; } html[data-theme="dark"] .page-link { background-color: #1a1826 !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #b9a4ff !important; } html[data-theme="dark"] .page-item.active .page-link { background-color: #5933ff !important; border-color: #5933ff !important; color: #fff !important; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: #17141f !important; color: #6b6780 !important; } /* Buttons that were light */ html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary { background-color: #262238 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #e7e5f0 !important; } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-light:hover { background-color: #302b45 !important; color: #fff !important; } /* Misc surfaces */ html[data-theme="dark"] .breadcrumb { background-color: #1a1826 !important; } html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #9a95ad; } html[data-theme="dark"] hr { border-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: #1a1826 !important; } html[data-theme="dark"] .border { border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] code { background-color: #262238; color: #ffb4de; } html[data-theme="dark"] .alert-info { background-color: #14202e; border-color: #1c3a52; color: #9ccdf0; } html[data-theme="dark"] .alert-success { background-color: #14251c; border-color: #205238; color: #8fe0ac; } html[data-theme="dark"] .alert-warning { background-color: #2a2410; border-color: #5a4a1a; color: #ffd98a; } html[data-theme="dark"] .alert-danger { background-color: #2a1717; border-color: #5a2020; color: #ff9a9a; } /* Logo: the wordmark's "Proxies" is black in the source image, which is unreadable on the dark navbar/card. invert+hue-rotate turns the black text white while keeping the pink/purple mark roughly its original colour. */ html[data-theme="dark"] .modern-navbar .navbar-brand img, html[data-theme="dark"] .mainequal .card-body .form-group img { filter: invert(1) hue-rotate(180deg); } /* ========================================================================== Fixes from live review ========================================================================== */ /* Logo: the navbar brand had a white container box in dark mode. Make it transparent so the (filtered) wordmark sits on the dark navbar. */ html[data-theme="dark"] .modern-navbar .navbar-brand, html[data-theme="dark"] .modern-navbar .navbar-brand img { background: transparent !important; } /* Footer bar */ html[data-theme="dark"] #footer { background-color: #0f0e17 !important; border-top: 1px solid rgba(255, 255, 255, 0.06); color: #9a95ad !important; } html[data-theme="dark"] #footer p { color: #9a95ad !important; } /* Growth & Tracking page custom widgets (KPI cards, presets, date inputs, today row) */ html[data-theme="dark"] .trk-card { background: #1a1826 !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } html[data-theme="dark"] .trk-card .val { color: #f2f0fa !important; } html[data-theme="dark"] .trk-card .lab { color: #c9a9ff !important; } html[data-theme="dark"] .trk-preset { background: #221f31 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #d8d5e6 !important; } html[data-theme="dark"] .trk-filter input[type=date] { background: #221f31 !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #e7e5f0 !important; } html[data-theme="dark"] .trk-tabs { border-bottom-color: rgba(255, 255, 255, 0.12) !important; } html[data-theme="dark"] .trk-tabbtn { color: #9a95ad; } html[data-theme="dark"] .trk-tabbtn.on { color: #b9a4ff; border-bottom-color: #b9a4ff; } html[data-theme="dark"] .trk-today { background: #221f31 !important; } /* Trumbowyg rich-text editor (Software Settings content fields) */ html[data-theme="dark"] .trumbowyg-box, html[data-theme="dark"] .trumbowyg-editor { background: #1a1826 !important; color: #e7e5f0 !important; border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .trumbowyg-button-pane { background: #221f31 !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .trumbowyg-button-pane::after { background: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .trumbowyg-button-pane button svg { fill: #c7c3d6 !important; } html[data-theme="dark"] .trumbowyg-button-pane button:hover, html[data-theme="dark"] .trumbowyg-button-pane button:focus, html[data-theme="dark"] .trumbowyg-button-pane .trumbowyg-active { background: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] .trumbowyg-editor a { color: #b9a4ff; } /* SweetAlert popups */ html[data-theme="dark"] .swal-modal { background-color: #1a1826 !important; } html[data-theme="dark"] .swal-title { color: #f2f0fa !important; } html[data-theme="dark"] .swal-text, html[data-theme="dark"] .swal-content { color: #c7c3d6 !important; } html[data-theme="dark"] .swal-button--cancel { background-color: #262238 !important; color: #e7e5f0 !important; } html[data-theme="dark"] .swal-footer { border-top-color: rgba(255, 255, 255, 0.08); }