/** * Theme Mode Toggle - shared styles. * Loaded in both the admin area and the customers area. * * Everything related to dark mode is scoped under `html.theme-dark`. */ /* ---------------------------------------------------------------------------- * Theme palettes (available in dark mode only) * * The active palette is selected with the `data-tt-dark` attribute on , * set by the module based on the "Dark style" option in the settings page. * Valid values: deep (default) | midnight | slate * ------------------------------------------------------------------------- */ html.theme-dark { color-scheme: dark; --tt-bg: #0f1115; --tt-surface: #1a1f27; --tt-surface-2: #232a35; --tt-surface-3: #2e3744; --tt-header: #12151b; --tt-sidebar: #14181f; --tt-border: #2b323e; --tt-border-soft: rgba(255, 255, 255, 0.08); --tt-text: #d6dbe2; --tt-text-strong: #f2f5f9; --tt-text-muted: #9aa3b0; --tt-accent: #3b82f6; --tt-link: #8fb4f6; --tt-scrollbar: #3a4351; } html.theme-dark[data-tt-dark="midnight"] { --tt-bg: #0a1122; --tt-surface: #111c36; --tt-surface-2: #182644; --tt-surface-3: #22345e; --tt-header: #0d1529; --tt-sidebar: #0e1730; --tt-border: #283962; --tt-border-soft: rgba(147, 197, 253, 0.12); --tt-text: #c8d4f0; --tt-text-strong: #eef2fd; --tt-text-muted: #a4b4d9; --tt-accent: #60a5fa; --tt-link: #93c5fd; --tt-scrollbar: #2f4270; } html.theme-dark[data-tt-dark="slate"] { --tt-bg: #15181d; --tt-surface: #21252c; --tt-surface-2: #2a2f38; --tt-surface-3: #363c47; --tt-header: #1a1d23; --tt-sidebar: #1c2026; --tt-border: #32373f; --tt-border-soft: rgba(255, 255, 255, 0.07); --tt-text: #d3d7dc; --tt-text-strong: #f0f2f5; --tt-text-muted: #a7adb5; --tt-accent: #64748b; --tt-link: #9aa7bb; --tt-scrollbar: #363c47; } /* ---------------------------------------------------------------------------- * Toggle button * ------------------------------------------------------------------------- */ .themetoggler-wrap { position: relative; } .themetoggler-wrap .themetoggler-trigger { display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: 0.85; padding: 0 9px; text-decoration: none; } .themetoggler-wrap .themetoggler-trigger:hover, .themetoggler-wrap .themetoggler-trigger:focus, .themetoggler-wrap .themetoggler-trigger:active { opacity: 1; color: inherit; } .themetoggler-wrap .themetoggler-trigger .themetoggler-trigger-icon { display: none; font-size: 16px; } /* Show only the icon that matches the active mode (set on ) */ html[data-themetoggler="light"] .themetoggler-wrap .themetoggler-trigger [data-themetoggler-icon="light"], html[data-themetoggler="dark"] .themetoggler-wrap .themetoggler-trigger [data-themetoggler-icon="dark"], html[data-themetoggler="system"] .themetoggler-wrap .themetoggler-trigger [data-themetoggler-icon="system"] { display: inline-flex; } .themetoggler-wrap .dropdown-menu { min-width: 180px; padding: 6px 0; } .themetoggler-wrap .dropdown-menu > li > a { display: flex; align-items: center; padding: 7px 16px; } .themetoggler-wrap .dropdown-menu > li > a i { width: 20px; text-align: center; margin-right: 9px; font-size: 14px; } .themetoggler-wrap .dropdown-menu > li.active > a { font-weight: 600; } .themetoggler-wrap .dropdown-menu > li.active > a i { color: #2563eb; } /* Active item driven by the mode stored on */ html[data-themetoggler="light"] .themetoggler-wrap [data-themetoggler-value="light"], html[data-themetoggler="dark"] .themetoggler-wrap [data-themetoggler-value="dark"], html[data-themetoggler="system"] .themetoggler-wrap [data-themetoggler-value="system"] { background-color: #eff6ff; font-weight: 600; } html[data-themetoggler="light"] .themetoggler-wrap [data-themetoggler-value="light"] > a, html[data-themetoggler="dark"] .themetoggler-wrap [data-themetoggler-value="dark"] > a, html[data-themetoggler="system"] .themetoggler-wrap [data-themetoggler-value="system"] > a { color: #1d4ed8; } /* Admin top bar sizing */ #header .themetoggler-wrap .themetoggler-trigger { height: 57px; line-height: 57px; padding: 0 12px; } /* Customers top bar sizing */ .navbar-default .themetoggler-wrap .themetoggler-trigger { line-height: 60px; padding: 0 12px; margin-top: 0; } /* ---------------------------------------------------------------------------- * Dark mode base * ------------------------------------------------------------------------- */ html.theme-dark body { background: var(--tt-bg) !important; color: var(--tt-text); } html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6 { color: var(--tt-text-strong); } html.theme-dark .text-muted { color: var(--tt-text-muted); } html.theme-dark .text-info { color: #93c5fd; } html.theme-dark .text-primary { color: #93c5fd; } html.theme-dark .text-success { color: #6ee7b7; } html.theme-dark .text-warning { color: #fcd34d; } html.theme-dark .text-danger { color: #fca5a5; } html.theme-dark a:not(.btn):not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger) { color: var(--tt-link); } /* Scrollbars */ html.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.theme-dark ::-webkit-scrollbar-track { background: var(--tt-bg); } html.theme-dark ::-webkit-scrollbar-thumb { background: var(--tt-scrollbar); border-radius: 6px; } html.theme-dark ::-webkit-scrollbar-thumb:hover { background: #4a5463; } /* ---------------------------------------------------------------------------- * Panels * In this Perfex build the panel surfaces (.panel, .panel-body, .panel_s) * are styled by Tailwind component rules as white, so every surface override * uses !important to guarantee the dark palette wins. * ------------------------------------------------------------------------- */ html.theme-dark .panel, html.theme-dark .panel-default, html.theme-dark .panel_s, html.theme-dark .panel-body { background: var(--tt-surface) !important; border-color: var(--tt-border) !important; color: var(--tt-text); } html.theme-dark .panel-default > .panel-heading, html.theme-dark .panel-heading { background: var(--tt-surface-2) !important; border-color: var(--tt-border) !important; color: var(--tt-text-strong); } html.theme-dark .panel-footer { background: var(--tt-surface-2) !important; border-top-color: var(--tt-border) !important; color: var(--tt-text); } html.theme-dark .panel-title { color: var(--tt-text-strong); } /* ---------------------------------------------------------------------------- * Tailwind utility overrides (applied to both admin and customers areas) * ------------------------------------------------------------------------- */ html.theme-dark .tw-bg-white { background-color: var(--tt-surface) !important; } /* Important (suffixed) variants used in the templates, e.g. class="!tw-bg-white" */ html.theme-dark .\!tw-bg-white { background-color: var(--tt-surface) !important; } html.theme-dark .\!tw-bg-neutral-50, html.theme-dark .\!tw-bg-neutral-100, html.theme-dark .\!tw-bg-neutral-200 { background-color: var(--tt-surface-2) !important; } html.theme-dark .tw-bg-neutral-50, html.theme-dark .tw-bg-neutral-100, html.theme-dark .tw-bg-neutral-200, html.theme-dark .tw-bg-neutral-300 { background-color: var(--tt-surface-2) !important; } html.theme-dark .tw-bg-neutral-700, html.theme-dark .tw-bg-neutral-800, html.theme-dark .tw-bg-neutral-900, html.theme-dark .tw-bg-slate-700, html.theme-dark .tw-bg-slate-800, html.theme-dark .tw-bg-slate-900 { background-color: var(--tt-surface-2) !important; } html.theme-dark .tw-text-neutral-700, html.theme-dark .tw-text-neutral-800, html.theme-dark .tw-text-neutral-900, html.theme-dark .tw-text-slate-700, html.theme-dark .tw-text-slate-800, html.theme-dark .tw-text-slate-900, html.theme-dark .tw-text-gray-700, html.theme-dark .tw-text-gray-800, html.theme-dark .tw-text-gray-900 { color: var(--tt-text-strong) !important; } html.theme-dark .\!tw-text-neutral-600, html.theme-dark .\!tw-text-neutral-700, html.theme-dark .\!tw-text-neutral-800 { color: var(--tt-text-strong) !important; } html.theme-dark .tw-text-neutral-400, html.theme-dark .tw-text-neutral-500, html.theme-dark .tw-text-neutral-600, html.theme-dark .tw-text-slate-400, html.theme-dark .tw-text-slate-500, html.theme-dark .tw-text-slate-600, html.theme-dark .tw-text-gray-400, html.theme-dark .tw-text-gray-500, html.theme-dark .tw-text-gray-600 { color: var(--tt-text-muted) !important; } html.theme-dark .text-gray-900, html.theme-dark .text-dark { color: var(--tt-text-strong) !important; } html.theme-dark .tw-border-neutral-200, html.theme-dark .tw-border-neutral-300, html.theme-dark .tw-border-slate-200, html.theme-dark .tw-border-slate-300, html.theme-dark .tw-divide-neutral-200 > * + * { border-color: var(--tt-border) !important; } html.theme-dark .tw-divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--tt-border) !important; } html.theme-dark .tw-placeholder-neutral-400::placeholder, html.theme-dark .tw-placeholder-neutral-500::placeholder { color: var(--tt-text-muted) !important; } html.theme-dark .tw-shadow-xs, html.theme-dark .tw-shadow-sm, html.theme-dark .tw-shadow, html.theme-dark .tw-shadow-md { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4) !important; } /* Opacity-suffixed variants, e.g. tw-bg-neutral-900/10, tw-border-neutral-300/80 */ html.theme-dark .tw-bg-neutral-50\/30, html.theme-dark .tw-bg-neutral-200\/60, html.theme-dark .tw-bg-neutral-300\/50 { background-color: rgba(255, 255, 255, 0.05) !important; } html.theme-dark .tw-bg-neutral-500\/30, html.theme-dark .tw-bg-neutral-600\/10, html.theme-dark .tw-bg-neutral-900\/10, html.theme-dark .tw-bg-neutral-900\/5 { background-color: rgba(255, 255, 255, 0.04) !important; } html.theme-dark .tw-border-neutral-300\/80 { border-color: var(--tt-border) !important; } html.theme-dark .tw-border-neutral-600\/20, html.theme-dark .tw-border-neutral-900\/10 { border-color: var(--tt-border-soft) !important; } /* Hover (interactive) variants used across the templates */ html.theme-dark .hover\:tw-bg-neutral-50:hover, html.theme-dark .hover\:tw-bg-neutral-100:hover, html.theme-dark .hover\:tw-bg-neutral-200:hover, html.theme-dark .hover\:tw-bg-neutral-300:hover { background-color: var(--tt-surface-3) !important; } html.theme-dark .hover\:tw-bg-neutral-600:hover, html.theme-dark .hover\:tw-bg-neutral-900:hover { background-color: var(--tt-surface-2) !important; } html.theme-dark .hover\:tw-text-primary-600:hover, html.theme-dark .tw-text-primary-600 { color: var(--tt-link) !important; } html.theme-dark .group:hover .group-hover\:tw-text-primary-600 { color: var(--tt-link) !important; } html.theme-dark .hover\:tw-text-neutral-700:hover, html.theme-dark .hover\:tw-text-neutral-800:hover, html.theme-dark .hover\:tw-text-neutral-900:hover { color: var(--tt-text-strong) !important; } html.theme-dark .hover\:tw-text-neutral-200:hover, html.theme-dark .hover\:tw-text-neutral-500:hover, html.theme-dark .hover\:tw-text-neutral-600:hover { color: var(--tt-text) !important; } /* ---------------------------------------------------------------------------- * Tables * ------------------------------------------------------------------------- */ html.theme-dark .table { color: var(--tt-text); } html.theme-dark .table > thead > tr > th { color: var(--tt-text-strong); border-color: var(--tt-border) !important; } html.theme-dark .table > tbody > tr > td, html.theme-dark .table > tbody > tr > th { border-top-color: var(--tt-border-soft) !important; } html.theme-dark .table-bordered, html.theme-dark .table-bordered > thead > tr > th, html.theme-dark .table-bordered > thead > tr > td, html.theme-dark .table-bordered > tbody > tr > td, html.theme-dark .table-bordered > tbody > tr > th, html.theme-dark .table-bordered > tfoot > tr > td, html.theme-dark .table-bordered > tfoot > tr > th { border-color: var(--tt-border) !important; } html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } html.theme-dark .table-hover > tbody > tr:hover, html.theme-dark .table > tbody > tr:hover { background-color: rgba(255, 255, 255, 0.05); } html.theme-dark .table > tbody > tr:hover > td, html.theme-dark .table > tbody > tr:hover > th { background-color: transparent; } /* DataTables */ html.theme-dark table.dataTable { color: var(--tt-text); } html.theme-dark table.dataTable thead th, html.theme-dark table.dataTable thead td { border-bottom-color: var(--tt-border); } html.theme-dark table.dataTable tbody td { border-top-color: var(--tt-border-soft); } html.theme-dark table.dataTable.stripe tbody tr.odd, html.theme-dark table.dataTable.display tbody tr.odd { background-color: rgba(255, 255, 255, 0.03); } html.theme-dark table.dataTable.hover tbody tr:hover, html.theme-dark table.dataTable.display tbody tr:hover { background-color: rgba(255, 255, 255, 0.06); } html.theme-dark .dataTables_wrapper .dataTables_info, html.theme-dark .dataTables_wrapper .dataTables_length, html.theme-dark .dataTables_wrapper .dataTables_filter { color: var(--tt-text-muted); } html.theme-dark .dataTables_wrapper .dataTables_filter input, html.theme-dark .dataTables_wrapper .dataTables_length select { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); } /* This build styles DataTable headers/rows with light gray surfaces (rgba(243,244,246,.7) etc.) */ html.theme-dark table.dataTable thead > tr > th, html.theme-dark table.dataTable thead > tr > td { background-color: var(--tt-surface-2) !important; color: var(--tt-text-strong); border-color: var(--tt-border) !important; } html.theme-dark table.dataTable thead > tr > th.sorting_asc, html.theme-dark table.dataTable thead > tr > th.sorting_desc, html.theme-dark table.dataTable thead > tr > td.sorting_asc, html.theme-dark table.dataTable thead > tr > td.sorting_desc { background-color: var(--tt-surface-3) !important; color: var(--tt-text-strong); } html.theme-dark table.dataTable tbody td { border-color: var(--tt-border-soft) !important; } /* Marked/selected rows (e.g. archived clients) use the Bootstrap ".secondary" state */ html.theme-dark .table > tbody > tr.secondary > td, html.theme-dark .table > tbody > tr.secondary > th, html.theme-dark .table > tbody > tr > td.secondary, html.theme-dark .table > tbody > tr > th.secondary, html.theme-dark .table > tfoot > tr.secondary > td, html.theme-dark .table > tfoot > tr.secondary > th, html.theme-dark .table > thead > tr.secondary > td, html.theme-dark .table > thead > tr.secondary > th { background-color: var(--tt-surface-2) !important; color: var(--tt-text); } html.theme-dark .table-hover > tbody > tr.secondary:hover > td, html.theme-dark .table-hover > tbody > tr.secondary:hover > th { background-color: var(--tt-surface-3) !important; } /* Bootstrap contextual row states (e.g. enabled modules, flagged records) */ html.theme-dark .table > tbody > tr.info > td, html.theme-dark .table > tbody > tr.info > th, html.theme-dark .table > tbody > tr > td.info, html.theme-dark .table > tbody > tr > th.info, html.theme-dark .table > tfoot > tr.info > td, html.theme-dark .table > tfoot > tr.info > th, html.theme-dark .table > thead > tr.info > td, html.theme-dark .table > thead > tr.info > th { background-color: rgba(59, 130, 246, 0.14) !important; color: #93c5fd !important; } html.theme-dark .table > tbody > tr.warning > td, html.theme-dark .table > tbody > tr.warning > th, html.theme-dark .table > tbody > tr > td.warning, html.theme-dark .table > tbody > tr > th.warning, html.theme-dark .table > tfoot > tr.warning > td, html.theme-dark .table > tfoot > tr.warning > th, html.theme-dark .table > thead > tr.warning > td, html.theme-dark .table > thead > tr.warning > th { background-color: rgba(245, 158, 11, 0.12) !important; color: #fcd34d !important; } html.theme-dark .table > tbody > tr.success > td, html.theme-dark .table > tbody > tr.success > th, html.theme-dark .table > tbody > tr > td.success, html.theme-dark .table > tbody > tr > th.success, html.theme-dark .table > tfoot > tr.success > td, html.theme-dark .table > tfoot > tr.success > th, html.theme-dark .table > thead > tr.success > td, html.theme-dark .table > thead > tr.success > th { background-color: rgba(16, 185, 129, 0.12) !important; color: #6ee7b7 !important; } html.theme-dark .table > tbody > tr.danger > td, html.theme-dark .table > tbody > tr.danger > th, html.theme-dark .table > tbody > tr > td.danger, html.theme-dark .table > tbody > tr > th.danger, html.theme-dark .table > tfoot > tr.danger > td, html.theme-dark .table > tfoot > tr.danger > th, html.theme-dark .table > thead > tr.danger > td, html.theme-dark .table > thead > tr.danger > th { background-color: rgba(239, 68, 68, 0.12) !important; color: #fca5a5 !important; } html.theme-dark .table > tbody > tr.active > td, html.theme-dark .table > tbody > tr.active > th, html.theme-dark .table > tbody > tr > td.active, html.theme-dark .table > tbody > tr > th.active, html.theme-dark .table > tfoot > tr.active > td, html.theme-dark .table > tfoot > tr.active > th, html.theme-dark .table > thead > tr.active > td, html.theme-dark .table > thead > tr.active > th { background-color: var(--tt-surface-2) !important; color: var(--tt-text) !important; } /* Loading overlay shown while a table refreshes (light stripe sprite in core CSS) */ html.theme-dark .table-loading { background-color: var(--tt-surface) !important; background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 24px, transparent 24px, transparent 48px ); background-repeat: repeat-x; } /* Table body links are forced to dark gray (rgb(55 65 81)) in the core stylesheet */ html.theme-dark .dataTables_wrapper table tbody a:not(.text-muted):not(.text-primary):not(.text-danger):not(.text-warning):not(.text-success):not(.text-info), html.theme-dark .table > tbody a { color: var(--tt-link) !important; } /* Full-width table wrapper bottom border */ html.theme-dark .panel-table-full .dataTables_wrapper .table-responsive { border-color: var(--tt-border) !important; } /* ---------------------------------------------------------------------------- * Forms * ------------------------------------------------------------------------- */ html.theme-dark .form-control { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); box-shadow: none; } html.theme-dark .form-control:focus { background: var(--tt-surface-2); border-color: var(--tt-accent); color: var(--tt-text); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4); } html.theme-dark .form-control::placeholder { color: var(--tt-text-muted); opacity: 1; } html.theme-dark select.form-control { background-color: var(--tt-surface-2); color: var(--tt-text); } html.theme-dark select option { background: var(--tt-surface-2); color: var(--tt-text); } html.theme-dark .input-group-addon { background: var(--tt-surface-3); border-color: var(--tt-border); color: var(--tt-text-muted); } html.theme-dark .help-block { color: var(--tt-text-muted); } /* Form field labels are forced to gray (rgb(75 85 99)) in the core stylesheet */ html.theme-dark .control-label, html.theme-dark label { color: var(--tt-text-strong) !important; } /* Bootstrap select */ html.theme-dark .bootstrap-select > .dropdown-toggle { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); } html.theme-dark .bootstrap-select > .dropdown-toggle:hover, html.theme-dark .bootstrap-select > .dropdown-toggle:focus { background: var(--tt-surface-2); border-color: var(--tt-accent); } html.theme-dark .bootstrap-select .dropdown-menu { background: var(--tt-surface-2); border-color: var(--tt-border); } html.theme-dark .bootstrap-select .dropdown-menu li a { color: var(--tt-text); } html.theme-dark .bootstrap-select .dropdown-menu li.selected a, html.theme-dark .bootstrap-select .dropdown-menu li a:hover { background: var(--tt-surface-3); color: var(--tt-text-strong); } /* Select2 */ html.theme-dark .select2-container--default .select2-selection--single, html.theme-dark .select2-container--default .select2-selection--multiple { background: var(--tt-surface-2); border-color: var(--tt-border); } html.theme-dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tt-text); } html.theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--tt-text-muted); } html.theme-dark .select2-dropdown { background: var(--tt-surface-2); border-color: var(--tt-border); } html.theme-dark .select2-container--default .select2-results__option { color: var(--tt-text); } html.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--tt-accent); color: #fff; } html.theme-dark .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--tt-text-muted); } /* Chosen */ html.theme-dark .chosen-container .chosen-single, html.theme-dark .chosen-container.chosen-container-single .chosen-single { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); box-shadow: none; } html.theme-dark .chosen-container .chosen-drop { background: var(--tt-surface-2); border-color: var(--tt-border); } html.theme-dark .chosen-container .chosen-results li { color: var(--tt-text); } html.theme-dark .chosen-container .chosen-results li.highlighted { background: var(--tt-accent); color: #fff; } /* Tags input */ html.theme-dark .bootstrap-tagsinput { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); box-shadow: none; } html.theme-dark .bootstrap-tagsinput input { color: var(--tt-text); } html.theme-dark .bootstrap-tagsinput .tag { background: var(--tt-surface-3); color: var(--tt-text); border: 1px solid var(--tt-border); } /* ---------------------------------------------------------------------------- * Buttons * ------------------------------------------------------------------------- */ html.theme-dark .btn-default { background: var(--tt-surface-3); border-color: var(--tt-border); color: var(--tt-text); } html.theme-dark .btn-default:hover, html.theme-dark .btn-default:focus, html.theme-dark .btn-default:active, html.theme-dark .btn-default.active, html.theme-dark .open > .btn-default.dropdown-toggle { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text-strong); } html.theme-dark .btn-outline { color: var(--tt-text); border-color: var(--tt-border); background: transparent; } html.theme-dark .btn-outline:hover, html.theme-dark .btn-outline:focus { background: var(--tt-surface-3); border-color: var(--tt-border); color: var(--tt-text-strong); } html.theme-dark .btn[disabled], html.theme-dark .btn.disabled { opacity: 0.5; } html.theme-dark .btn-link { color: var(--tt-link); } html.theme-dark .caret { border-top-color: var(--tt-text-muted); } html.theme-dark .dropdown-toggle.btn-link .caret { border-top-color: var(--tt-link); } /* ---------------------------------------------------------------------------- * Modals * ------------------------------------------------------------------------- */ html.theme-dark .modal-content { background: var(--tt-surface); border-color: var(--tt-border); color: var(--tt-text); } html.theme-dark .close { color: var(--tt-text-strong); opacity: 0.6; text-shadow: none; } html.theme-dark .close:hover, html.theme-dark .close:focus { color: var(--tt-text-strong); opacity: 1; } html.theme-dark .modal-header { background-color: var(--tt-surface); border-bottom-color: var(--tt-border); } html.theme-dark .modal-title { color: var(--tt-text-strong); } html.theme-dark .modal-footer { border-top-color: var(--tt-border); } html.theme-dark .modal-backdrop.in { opacity: 0.6; } /* ---------------------------------------------------------------------------- * Dropdowns * ------------------------------------------------------------------------- */ html.theme-dark .dropdown-menu { background: var(--tt-surface-2); border-color: var(--tt-border); } html.theme-dark .dropdown-menu > li > a { color: var(--tt-text); } html.theme-dark .dropdown-menu > li > a:hover, html.theme-dark .dropdown-menu > li > a:focus { background: var(--tt-surface-3); color: var(--tt-text-strong); } html.theme-dark .dropdown-menu > .active > a, html.theme-dark .dropdown-menu > .active > a:hover, html.theme-dark .dropdown-menu > .active > a:focus { background: var(--tt-accent); color: #fff; } html.theme-dark .dropdown-menu > .disabled > a { color: var(--tt-text-muted); } html.theme-dark .dropdown-menu .divider { background-color: var(--tt-border); } html.theme-dark .dropdown-menu > .dropdown-header { color: var(--tt-text-muted); } /* ---------------------------------------------------------------------------- * Nav tabs / pills * ------------------------------------------------------------------------- */ html.theme-dark .nav-tabs { border-bottom-color: var(--tt-border); } html.theme-dark .nav-tabs > li > a { color: var(--tt-text-muted); } html.theme-dark .nav-tabs > li > a:hover, html.theme-dark .nav-tabs > li > a:focus { color: var(--tt-text); border-color: var(--tt-border-soft); } html.theme-dark .nav-tabs > li.active > a, html.theme-dark .nav-tabs > li.active > a:hover, html.theme-dark .nav-tabs > li.active > a:focus { background: var(--tt-surface); border-color: var(--tt-border); border-bottom-color: var(--tt-surface); color: var(--tt-text-strong); } /* Horizontal scrollable tab bar (gray rgb(243 244 246) in the core stylesheet) */ html.theme-dark .horizontal-scrollable-tabs .horizontal-tabs .nav-tabs-horizontal { background-color: var(--tt-surface-2) !important; } /* Segmented tab control */ html.theme-dark .nav-tabs-segmented { background-color: rgba(255, 255, 255, 0.06) !important; } html.theme-dark .nav-pills > li > a { color: var(--tt-text); } html.theme-dark .nav-pills > li.active > a, html.theme-dark .nav-pills > li.active > a:hover, html.theme-dark .nav-pills > li.active > a:focus { background: var(--tt-accent); color: #fff; } html.theme-dark .nav-pills > li > a:hover, html.theme-dark .nav-pills > li > a:focus { background: var(--tt-surface-3); color: var(--tt-text-strong); } /* ---------------------------------------------------------------------------- * Alerts * ------------------------------------------------------------------------- */ html.theme-dark .alert { background-color: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); } html.theme-dark .alert-success { background-color: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: #6ee7b7; } html.theme-dark .alert-info { background-color: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); color: #93c5fd; } html.theme-dark .alert-warning { background-color: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); color: #fcd34d; } html.theme-dark .alert-danger { background-color: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; } html.theme-dark .alert a { color: inherit; text-decoration: underline; } /* ---------------------------------------------------------------------------- * Form controls: checkboxes / radios / switches / date-time picker * ------------------------------------------------------------------------- */ html.theme-dark .checkbox label:before, html.theme-dark .radio label:before { background-color: var(--tt-surface-2) !important; border-color: var(--tt-border) !important; } html.theme-dark .checkbox input[type="checkbox"]:checked + label:before { background-color: var(--tt-accent) !important; border-color: var(--tt-accent) !important; } html.theme-dark .checkbox input[type="checkbox"]:checked + label:after { color: #fff !important; } html.theme-dark .radio input[type="radio"]:checked + label:after { background-color: var(--tt-accent) !important; } html.theme-dark .onoffswitch-label { background-color: var(--tt-surface-3) !important; border-color: var(--tt-border) !important; } html.theme-dark .onoffswitch-label:before { background-color: var(--tt-text-muted) !important; border-color: var(--tt-border) !important; } html.theme-dark .xdsoft_datetimepicker { background-color: var(--tt-surface) !important; border-color: var(--tt-border) !important; color: var(--tt-text) !important; } html.theme-dark .xdsoft_datetimepicker .xdsoft_calendar td, html.theme-dark .xdsoft_datetimepicker .xdsoft_calendar th, html.theme-dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div { background-color: var(--tt-surface-2) !important; color: var(--tt-text) !important; } html.theme-dark .xdsoft_datetimepicker .xdsoft_calendar td:hover, html.theme-dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background-color: var(--tt-accent) !important; color: #fff !important; } html.theme-dark .xdsoft_datetimepicker .xdsoft_today_button { color: var(--tt-link) !important; } /* ---------------------------------------------------------------------------- * Misc light surfaces * ------------------------------------------------------------------------- */ html.theme-dark .navbar-pills-flat { background-color: var(--tt-surface-2) !important; border-color: var(--tt-border) !important; } html.theme-dark [data-active="true"][class*="tw-bg-white"] { background-color: var(--tt-surface-2) !important; } html.theme-dark [data-active="true"][class*="tw-text-neutral-800"] { color: var(--tt-text-strong) !important; } html.theme-dark [data-active="true"][class*="tw-border-neutral-300"] { border-color: var(--tt-border) !important; } /* ---------------------------------------------------------------------------- * Badges / labels * ------------------------------------------------------------------------- */ html.theme-dark .label-default { background: var(--tt-surface-3); color: var(--tt-text); } html.theme-dark .label-info { background-color: rgba(3, 105, 161, 0.28) !important; color: #7dd3fc !important; } html.theme-dark .label-success { background-color: rgba(21, 128, 61, 0.28) !important; color: #86efac !important; } html.theme-dark .label-warning { background-color: rgba(202, 138, 4, 0.28) !important; color: #fde047 !important; } html.theme-dark .label-danger { background-color: rgba(185, 28, 28, 0.28) !important; color: #fca5a5 !important; } html.theme-dark .label-primary { background-color: rgba(37, 99, 235, 0.28) !important; color: #93c5fd !important; } /* Core .badge = light-gray pill (rgb(243 244 246)) with dark text. The bg-default / bg-bg-default modifier classes are not real Tailwind utilities, so badges carrying them (and badges with an empty inline background-color) fall back to the light pill. Force a dark pill and restore the standard colored badges. */ html.theme-dark .badge { background-color: var(--tt-surface-3) !important; color: var(--tt-text-strong) !important; } html.theme-dark .badge.bg-info { background-color: rgb(2 132 199) !important; } html.theme-dark .badge.bg-success { background-color: rgb(34 197 94) !important; } html.theme-dark .badge.bg-warning, html.theme-dark .badge.\!tw-bg-warning { background-color: rgb(202 138 4) !important; } html.theme-dark .badge.bg-danger { background-color: rgb(220 38 38) !important; } html.theme-dark .badge.bg-primary { background-color: rgb(37 99 235) !important; } html.theme-dark .bg-white { background-color: var(--tt-surface) !important; } /* ---------------------------------------------------------------------------- * Pagination * ------------------------------------------------------------------------- */ html.theme-dark .pagination > li > a, html.theme-dark .pagination > li > span { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); } html.theme-dark .pagination > li > a:hover, html.theme-dark .pagination > li > a:focus, html.theme-dark .pagination > li > span:hover, html.theme-dark .pagination > li > span:focus { background: var(--tt-surface-3); border-color: var(--tt-border); color: var(--tt-text-strong); } html.theme-dark .pagination > .active > a, html.theme-dark .pagination > .active > a:hover, html.theme-dark .pagination > .active > a:focus, html.theme-dark .pagination > .active > span, html.theme-dark .pagination > .active > span:hover, html.theme-dark .pagination > .active > span:focus { background: var(--tt-accent); border-color: var(--tt-accent); color: #fff; } html.theme-dark .pagination > .disabled > a, html.theme-dark .pagination > .disabled > a:hover, html.theme-dark .pagination > .disabled > span { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text-muted); } /* ---------------------------------------------------------------------------- * Misc components * ------------------------------------------------------------------------- */ html.theme-dark .well { background: var(--tt-surface-2); border-color: var(--tt-border); box-shadow: none; color: var(--tt-text); } /* Horizontal rules / dividers */ html.theme-dark hr { border-color: var(--tt-border) !important; } html.theme-dark .list-group-item { background: var(--tt-surface); border-color: var(--tt-border); color: var(--tt-text); } html.theme-dark .list-group-item.active, html.theme-dark .list-group-item.active:hover, html.theme-dark .list-group-item.active:focus { background: var(--tt-accent); border-color: var(--tt-accent); color: #fff; } html.theme-dark .breadcrumb { background: var(--tt-surface-2); } html.theme-dark .breadcrumb > li > a { color: var(--tt-link); } html.theme-dark .breadcrumb > .active { color: var(--tt-text-muted); } html.theme-dark .progress { background: var(--tt-surface-3); box-shadow: none; } html.theme-dark .popover { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } html.theme-dark .popover-title { background: var(--tt-surface-3); border-bottom-color: var(--tt-border); color: var(--tt-text-strong); } html.theme-dark .popover.top > .arrow::after { border-top-color: var(--tt-surface-2); } html.theme-dark .popover.bottom > .arrow::after { border-bottom-color: var(--tt-surface-2); } html.theme-dark .popover.right > .arrow::after { border-right-color: var(--tt-surface-2); } html.theme-dark .popover.left > .arrow::after { border-left-color: var(--tt-surface-2); } html.theme-dark .dropzone { background: var(--tt-surface-2); border-color: var(--tt-border); color: var(--tt-text); } /* Date/time pickers */ html.theme-dark .datepicker { background: var(--tt-surface-2); border-color: var(--tt-border); } html.theme-dark .datepicker table tr td, html.theme-dark .datepicker table tr td span { color: var(--tt-text); } html.theme-dark .datepicker table tr td.day:hover, html.theme-dark .datepicker table tr td span:hover { background: var(--tt-surface-3); } html.theme-dark .bootstrap-datetimepicker-widget { background: var(--tt-surface-2); border-color: var(--tt-border); } html.theme-dark .bootstrap-datetimepicker-widget table td, html.theme-dark .bootstrap-datetimepicker-widget table td span { color: var(--tt-text); } html.theme-dark .bootstrap-datetimepicker-widget table td:hover, html.theme-dark .bootstrap-datetimepicker-widget table td span:hover { background: var(--tt-surface-3) !important; } /* FullCalendar */ html.theme-dark .fc-unthemed .fc-content, html.theme-dark .fc-unthemed .fc-divider, html.theme-dark .fc-unthemed .fc-list-heading td, html.theme-dark .fc-unthemed .fc-list-view, html.theme-dark .fc-unthemed .fc-popover, html.theme-dark .fc-unthemed .fc-row, html.theme-dark .fc-unthemed tbody, html.theme-dark .fc-unthemed td, html.theme-dark .fc-unthemed th, html.theme-dark .fc-unthemed thead { border-color: var(--tt-border); } html.theme-dark .fc-day-header, html.theme-dark .fc-widget-header { background: var(--tt-surface-2); color: var(--tt-text-muted); } html.theme-dark .fc-day { background: var(--tt-surface); } html.theme-dark .fc-today { background: rgba(59, 130, 246, 0.12) !important; } html.theme-dark .fc-unthemed .fc-toolbar h2 { color: var(--tt-text-strong); } /* TinyMCE chrome */ html.theme-dark .tox-tinymce { background: var(--tt-surface-2) !important; border-color: var(--tt-border) !important; } /* Kanban */ html.theme-dark .kan-ban-col-wrapper .panel_s, html.theme-dark .kanban .panel_s { background: var(--tt-surface); border-color: var(--tt-border); } html.theme-dark #kan-ban .panel-heading, html.theme-dark .kan-ban-col-wrapper .panel_s .panel-heading { background: var(--tt-surface-2); color: var(--tt-text-strong); } /* ---------------------------------------------------------------------------- * Remaining white surfaces in the core stylesheet * ------------------------------------------------------------------------- */ html.theme-dark .mobile-navbar { background: var(--tt-header) !important; border-color: var(--tt-border) !important; } html.theme-dark .mobile-navbar .navbar-nav > li > a { color: var(--tt-text); } html.theme-dark #newsfeed .newsfeed_post .user-post-like { background: var(--tt-surface-2) !important; border-color: var(--tt-border) !important; } html.theme-dark .proposal-comments .proposal-comment { background: var(--tt-surface) !important; border-color: var(--tt-border) !important; } html.theme-dark .task-single-col-left { background: var(--tt-surface) !important; } html.theme-dark .sub-items .dd3-content { background: var(--tt-surface) !important; border-color: var(--tt-border) !important; } html.theme-dark .dd-handle:hover { background: var(--tt-surface-3); color: var(--tt-text-strong); } /* TinyMCE modal windows (non-skinned mce windows) */ html.theme-dark .mce-window-head, html.theme-dark .mce-window-body { background: var(--tt-surface) !important; color: var(--tt-text); } /* Fixed bottom toolbar (e.g. task editor) */ html.theme-dark .btn-bottom-toolbar { background: var(--tt-header) !important; border-top-color: var(--tt-border) !important; }