/** * Phase C: dark-mode overrides for third-party form widgets not covered by * the Phase B foundation pass (dark-theme.css) - select2, nicEdit, and any * other hardcoded-light-color widget chrome. * * Loaded after dark-theme.css in admin.layouts.master, active when * . * * Palette reused from dark-theme.css for visual consistency: * surface / toolbar bg : #1c2029 (matches .ajax-table .card-header) * control bg : #232833 (matches .ajax-table-search-input) * border : #2a2f3a * border (hover/pop) : #3a4152 / #333947 * text (primary) : #e5e7eb * text (secondary) : #cfd3dc / #d4d7de * text (muted) : #9199a8 * accent / focus : #4f5df0 * hover highlight : #2b3040 / #1f2430 */ /* select2 -------------------------------------------------------------- * style.css (~L2187-2250, L2567) only overrides a handful of select2's own * light-mode colors (choice pills, dropdown border, search field height); * everything else - including two `!important` rules on the box border - * still comes from select2.min.css's hardcoded light theme. All selectors * below are prefixed with the [data-bs-theme="dark"] attribute, which by * itself already out-specifies every affected rule in both stylesheets, so * `!important` is only added where needed to beat style.css's own * `!important` border declaration. */ /* Closed single-select box */ html[data-bs-theme="dark"] .select2-container--default .select2-selection--single { background-color: #232833; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--single, html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple { border-color: #2a2f3a !important; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e5e7eb; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9199a8; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: #9199a8; } html[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: #9199a8; } html[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #1c2029; color: #565d6b; } html[data-bs-theme="dark"] .select2-selection__clear { color: #9199a8; } /* Multi-select box + choice pills */ html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: #232833; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #2b3040; border-color: #3a4152; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__display, html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove span { color: #e5e7eb; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #9199a8; border-right-color: #3a4152; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background-color: #333947; color: #e5e7eb; } html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #4f5df0 !important; } /* Dropdown (appended to or a dropdownParent - always styled via the html[data-bs-theme] ancestor selector regardless of where it lands) */ html[data-bs-theme="dark"] .select2-dropdown { background-color: #1c2029; border-color: #4f5df0; } html[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: #232833; border-color: #2a2f3a; color: #e5e7eb; } html[data-bs-theme="dark"] .select2-results__option { color: #d4d7de; } html[data-bs-theme="dark"] .select2-results__option--disabled { color: #565d6b; } /* Two rules in style.css both target the "selected" option; the plain `.select2-results__option.select2-results__option--selected` one (light grey #F1F1F1) wins in light mode by source order, so override both here to be safe regardless of which one a future edit re-orders. */ html[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected, html[data-bs-theme="dark"] .select2-results__option.select2-results__option--selected { background-color: #2b3040; color: #e5e7eb; } html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #4f5df0; color: #fff; } /* nicEdit ---------------------------------------------------------------- * nicEdit.js (see nicEditorPanel/nicEditorButton/nicEditorPane/nicEditorSelect * constructors) builds its whole UI with plain unclassed
s and paints * them via elm.style.xyz = '...' directly in JS - a real inline `style` * attribute - both once at construction (panel bar, editor border) and * repeatedly on interaction (button hover/active swatches, dropdown-row * hover). An inline style always beats an external stylesheet rule of any * specificity, so every rule in this section needs `!important` to have any * effect at all. Where JS also toggles hover/active by rewriting that same * inline style on mouseover/mouseout (buttons, select dropdown rows), we * re-create the feedback with a real `:hover` pseudo-class instead of trying * to key off nicEdit's own state classes - those (`nicEdit-button-hover`, * `-active`, `-undefined`) are added but never removed, so they accumulate * and can't reliably tell current vs. past state. * * `.nicEdit-selected` (toggled by nicEditorInstance.selected()/blur()) has * no associated color styling anywhere in this codebase - it's a pure state * marker nicEdit uses internally, so there is nothing to override for it. */ /* Toolbar bar */ html[data-bs-theme="dark"] .nicEdit-panelContain { background-color: #1c2029 !important; border-color: #2a2f3a !important; } /* Toolbar buttons - swatch behind each icon (rest + real-time hover) */ html[data-bs-theme="dark"] .nicEdit-buttonContain > div { background-color: #1c2029 !important; border-color: #1c2029 !important; } html[data-bs-theme="dark"] .nicEdit-buttonContain:hover > div { background-color: #2b3040 !important; border-color: #3a4152 !important; } /* Font size / family / format select control (closed state) */ html[data-bs-theme="dark"] .nicEdit-selectContain > div { background-color: #1c2029 !important; border-color: #2a2f3a !important; } html[data-bs-theme="dark"] .nicEdit-selectTxt { color: #cfd3dc !important; } /* Editable content area */ html[data-bs-theme="dark"] .nicEdit-main { color: #e5e7eb; } /* Popup panes - button tooltips, link/image "Advanced" dialogs, the color pickers' container, and the font size/family/format dropdown list all share this one class. `color` cascades to their unclassed inner title/label divs for free since none of those set their own inline color. */ html[data-bs-theme="dark"] .nicEdit-pane { background-color: #1c2029 !important; border-color: #2a2f3a !important; color: #e5e7eb !important; } /* Font size/family/format dropdown rows (rest + real-time hover; nicEdit re-sets these rows' background to #ccc/#fff directly via JS on every mouseover/mouseout, so both states need an !important override here) */ html[data-bs-theme="dark"] .nicEdit-pane > div { border-color: #2a2f3a !important; } html[data-bs-theme="dark"] .nicEdit-pane > div > div { background-color: #1c2029 !important; color: #e5e7eb !important; } html[data-bs-theme="dark"] .nicEdit-pane > div:hover > div { background-color: #2b3040 !important; }