/* ═════════════════════════════════════════════════════════════ Dark Mode — VS Code Dark+ Theme Overrides Applied when [data-bs-theme="dark"] is set on ═════════════════════════════════════════════════════════════ */ [data-bs-theme="dark"] { /* ── Override Bootstrap _color-mode.scss defaults ── */ --bs-body-color: #d4d4d4; --bs-body-bg: #1e1e1e; /* ── VS Code Dark+ Palette ── */ --pd-bg-sidebar: #252526; --pd-bg-body: #1e1e1e; --pd-bg-elevated: #2d2d2d; --pd-bg-surface: #3c3c3c; --pd-border: #3c3c3c; --pd-border-light: #464646; --pd-text-primary: #d4d4d4; --pd-text-secondary: #9d9d9d; --pd-text-muted: #6e6e6e; --pd-accent: #007acc; --pd-accent-hover: #0098ff; --pd-accent-soft: rgba(0, 122, 204, 0.15); --pd-accent-text: #ffffff; --pd-nav-header-bg: #1a1a1a; --pd-nav-header-text: #858585; --pd-link-color: #4daafc; --pd-link-hover: #6ec0ff; --pd-sort-arrow: #858585; --pd-select2-bg: #3c3c3c; --pd-select2-border: #555555; --pd-select2-text: #d4d4d4; --pd-select2-placeholder:#858585; --pd-select2-dropdown-bg:#252526; --pd-select2-hover: #094771; --pd-select2-selected: #0e639c; --pd-select2-selected-text:#d4d4d4; --pd-select2-group-bg: #1e1e1e; --pd-select2-group-text:#858585; --pd-select2-disabled-bg:#2d2d2d; --pd-select2-disabled-text:#6e6e6e; --pd-select2-focus-border:#007acc; --pd-select2-focus-shadow:rgba(0, 122, 204, 0.25); --pd-select2-tag-bg: #3c3c3c; --pd-select2-tag-border:#555555; --pd-select2-clear: #858585; } /* ═══════════════════════════════════════════════════════ Polished Sidebar — VS Code Dark+ ═══════════════════════════════════════════════════════ */ /* ── Sidebar shell ── */ [data-bs-theme="dark"] .sidebar { background: linear-gradient(180deg, #2d2d2d 0%, var(--pd-bg-sidebar) 30%) !important; border-right-color: var(--pd-border); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35); } /* ── Brand / Logo Area ── */ [data-bs-theme="dark"] .sidebar > a.d-flex { background: linear-gradient(135deg, rgba(0, 122, 204, 0.08), rgba(0, 122, 204, 0.04)); border-bottom-color: var(--pd-border); } [data-bs-theme="dark"] .sidebar > a.d-flex i { color: var(--pd-accent); } [data-bs-theme="dark"] .sidebar > a.d-flex span { color: var(--pd-text-primary); } /* ── Individual nav links ── */ [data-bs-theme="dark"] .sidebar .nav-item .nav-link { color: var(--pd-text-secondary); } [data-bs-theme="dark"] .sidebar .nav-item .nav-link::before { background: var(--pd-accent); } [data-bs-theme="dark"] .sidebar .nav-item .nav-link i { color: var(--pd-text-muted); } [data-bs-theme="dark"] .sidebar .nav-item .nav-link:hover i { color: var(--pd-accent-hover); } /* ── Active nav link ── */ [data-bs-theme="dark"] .sidebar .nav-item .nav-link.active, [data-bs-theme="dark"] .sidebar .show > .nav-link { background: linear-gradient(135deg, #0e639c, #094771); box-shadow: 0 3px 8px rgba(0, 80, 160, 0.35); color: var(--pd-accent-text); } [data-bs-theme="dark"] .sidebar .nav-item .nav-link.active i, [data-bs-theme="dark"] .sidebar .show > .nav-link i { color: var(--pd-accent-text); } [data-bs-theme="dark"] .sidebar .nav-item .nav-link.active::before { background: rgba(255, 255, 255, 0.6); } /* ── Nav link hover (inactive) ── */ [data-bs-theme="dark"] .sidebar .nav-link:hover:not(.active):not(.text-muted) { background-color: rgba(0, 122, 204, 0.08); color: var(--pd-link-hover); } /* ── Section Header ── */ [data-bs-theme="dark"] .sidebar .nav-header, [data-bs-theme="dark"] .sidebar .nav-item .nav-link.nav-header { color: var(--pd-nav-header-text); background: linear-gradient(90deg, rgba(60, 60, 60, 0.5), transparent); } /* ── Submenu container ── */ [data-bs-theme="dark"] .sidebar .collapse, [data-bs-theme="dark"] .sidebar .collapsing { border-left-color: var(--pd-border-light); } /* ── Dropdown toggle ── */ [data-bs-theme="dark"] .sidebar .dropdown-toggle:not(.collapsed) { color: var(--pd-accent-hover); } /* ── Scrollbar ── */ [data-bs-theme="dark"] .sidebar .overflow-auto::-webkit-scrollbar-thumb { background: var(--pd-border-light); } [data-bs-theme="dark"] .sidebar .overflow-auto::-webkit-scrollbar-thumb:hover { background: var(--pd-text-muted); } /* ── Nav Links (generic fallback) ── */ [data-bs-theme="dark"] .nav-link.link-dark { color: var(--pd-text-primary) !important; } [data-bs-theme="dark"] .nav-link.link-dark:hover { color: var(--pd-link-hover) !important; background-color: var(--pd-accent-soft); } [data-bs-theme="dark"] .sidebar .link-dark { color: var(--pd-text-primary) !important; } /* ── Borders ── */ [data-bs-theme="dark"] .border-bottom { border-bottom-color: var(--pd-border) !important; } [data-bs-theme="dark"] .border-top { border-top-color: var(--pd-border) !important; } [data-bs-theme="dark"] .border-start { border-left-color: var(--pd-border) !important; } [data-bs-theme="dark"] .border-end { border-right-color: var(--pd-border) !important; } [data-bs-theme="dark"] .border { border-color: var(--pd-border) !important; } /* ── Section header (nav-header) ── */ [data-bs-theme="dark"] .nav-header { background: var(--pd-nav-header-bg); color: var(--pd-nav-header-text); } /* ── asc / desc arrows ── These override the generic a.asc/a.desc from admindb.css. .grid-view overrides in gridview-compact.css already use CSS variables so they inherit correctly; this covers non-grid views. */ [data-bs-theme="dark"] a.asc:after { border-bottom-color: var(--pd-sort-arrow) !important; } [data-bs-theme="dark"] a.desc:after { border-top-color: var(--pd-sort-arrow) !important; } /* ── Text muted ── */ [data-bs-theme="dark"] .text-muted { color: var(--pd-text-muted) !important; } /* ── Hint block ── */ [data-bs-theme="dark"] .hint-block { color: var(--pd-text-muted); } /* ── Error summary ── */ [data-bs-theme="dark"] .error-summary { color: #f48771; background: #331a1a; border-left-color: #6e2020; } /* ═══════════════════════════════════════════════════════ Select2 (kartik-bs5) — VS Code Dark+ theme overrides The trigger element lives inside [data-bs-theme="dark"]. The dropdown is appended to , so we also toggle .select2-dark on via admindb.js. ═══════════════════════════════════════════════════════ */ /* ── Trigger / selection box ── */ [data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection { background-color: var(--pd-select2-bg); border-color: var(--pd-select2-border); color: var(--pd-select2-text); } /* Caret arrow (down) */ [data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection--single { background-color: var(--pd-select2-bg); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d4d4d4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } /* Caret arrow (up, open state) */ [data-bs-theme="dark"] .select2-container--krajee-bs5.select2-container--open .select2-selection--single { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' fill='none' stroke='%23d4d4d4' stroke-linecap='round' stroke-linejoin='round' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3e%3c/svg%3e"); } /* Selected value text */ [data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered, [data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__rendered { color: var(--pd-select2-text); } /* Placeholder */ [data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection__placeholder { color: var(--pd-select2-placeholder); } /* Clear × button */ [data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection__clear { color: var(--pd-select2-clear); } /* Multiple tags */ [data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice { background-color: var(--pd-select2-tag-bg); border-color: var(--pd-select2-tag-border); color: var(--pd-select2-text); } [data-bs-theme="dark"] .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice__remove { color: var(--pd-select2-clear); } /* Focus / open border glow */ [data-bs-theme="dark"] .select2-container--krajee-bs5.select2-container--open:not(.select2-container--disabled) .select2-selection, [data-bs-theme="dark"] .select2-container--krajee-bs5:not(.select2-container--disabled) .select2-selection:focus { border-color: var(--pd-select2-focus-border); box-shadow: 0 0 0 0.25rem var(--pd-select2-focus-shadow); } /* Disabled */ [data-bs-theme="dark"] .select2-container--krajee-bs5.select2-container--disabled .select2-selection { background-color: var(--pd-select2-disabled-bg); color: var(--pd-select2-disabled-text); } /* ── Dropdown (appended to ) ── Body gets .select2-dark toggled by admindb.js */ body.select2-dark .select2-container--krajee-bs5 .select2-dropdown { background-color: var(--pd-select2-dropdown-bg); border-color: var(--pd-select2-border); color: var(--pd-select2-text); box-shadow: 0 0.375rem 0.75rem 0.2rem rgba(0, 0, 0, 0.55); } /* Search field inside dropdown */ body.select2-dark .select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field { background-color: var(--pd-select2-bg); background-image: none; border-color: var(--pd-select2-border); color: var(--pd-select2-text); } body.select2-dark .select2-container--krajee-bs5 .select2-search__field::placeholder { color: var(--pd-select2-placeholder); } /* Results list */ body.select2-dark .select2-container--krajee-bs5 .select2-results__option[aria-selected] { background-color: var(--pd-select2-dropdown-bg); color: var(--pd-select2-text); } /* Normal unselected row */ body.select2-dark .select2-container--krajee-bs5 li.select2-results__option { background-color: var(--pd-select2-dropdown-bg); color: var(--pd-select2-text); } /* Highlighted (hover) */ body.select2-dark .select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] { background-color: var(--pd-select2-hover); color: #ffffff; } /* Selected (already chosen) */ body.select2-dark .select2-container--krajee-bs5 .select2-results__option.select2-results__option--selected, body.select2-dark .select2-container--krajee-bs5 .select2-results__option[aria-selected=true] { background-color: var(--pd-select2-selected); color: var(--pd-select2-selected-text); } /* Disabled option */ body.select2-dark .select2-container--krajee-bs5 .select2-results__option[aria-disabled=true] { color: var(--pd-select2-disabled-text); background-color: var(--pd-select2-dropdown-bg); } /* Group header */ body.select2-dark .select2-container--krajee-bs5 .select2-results__group { background-color: var(--pd-select2-group-bg); color: var(--pd-select2-group-text); border-color: var(--pd-select2-border); text-shadow: none; } /* Open border matches trigger */ body.select2-dark .select2-container--krajee-bs5:not(.select2-container--disabled) .select2-dropdown { border-color: var(--pd-select2-focus-border); }