/* ================================================================ DMC SELECT / MULTISELECT — DARK MODE FIX Datei: fe-auslastungsmonitor/assets/dmc-darkmode-fix.css v2: Ergaenzt um Regeln fuer dcc.Dropdown (Plotly Dash Core), z.B. im Massenpflege-Modal. dcc.Dropdown rendert das Menue per Portal in , daher koennen seitenspezifische Selektoren wie #massenpflege-modal .Select-menu-outer NICHT greifen. Wir nutzen daher globale Selektoren. ================================================================ */ /* ================================================================ TEIL 1: dmc.Select / dmc.MultiSelect (Combobox-System) ================================================================ */ /* ---------- DROPDOWN-CONTAINER ---------- */ [data-mantine-color-scheme="dark"] .mantine-Combobox-dropdown, [data-mantine-color-scheme="dark"] .mantine-Select-dropdown, [data-mantine-color-scheme="dark"] .mantine-MultiSelect-dropdown { background-color: var(--mantine-color-dark-7) !important; border: 1px solid var(--mantine-color-dark-4) !important; color: var(--mantine-color-gray-0) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important; } /* ---------- EINZELNE OPTIONS ---------- */ [data-mantine-color-scheme="dark"] .mantine-Combobox-option, [data-mantine-color-scheme="dark"] .mantine-Select-option, [data-mantine-color-scheme="dark"] .mantine-MultiSelect-option { color: var(--mantine-color-gray-0) !important; background-color: transparent !important; } /* ---------- HOVER ---------- */ [data-mantine-color-scheme="dark"] .mantine-Combobox-option[data-hovered], [data-mantine-color-scheme="dark"] .mantine-Combobox-option:hover, [data-mantine-color-scheme="dark"] .mantine-Select-option[data-hovered], [data-mantine-color-scheme="dark"] .mantine-MultiSelect-option[data-hovered] { background-color: var(--mantine-color-dark-5) !important; color: var(--mantine-color-white) !important; } /* ---------- SELECTED ---------- */ [data-mantine-color-scheme="dark"] .mantine-Combobox-option[data-selected], [data-mantine-color-scheme="dark"] .mantine-Select-option[data-selected], [data-mantine-color-scheme="dark"] .mantine-MultiSelect-option[data-selected] { background-color: var(--mantine-color-red-7) !important; color: #fff !important; } /* ---------- DISABLED ---------- */ [data-mantine-color-scheme="dark"] .mantine-Combobox-option[data-disabled] { color: var(--mantine-color-dark-2) !important; opacity: 0.6; } /* ---------- EMPTY-STATE ---------- */ [data-mantine-color-scheme="dark"] .mantine-Combobox-empty { color: var(--mantine-color-dark-1) !important; } /* ---------- GROUP-LABELS ---------- */ [data-mantine-color-scheme="dark"] .mantine-Combobox-group label, [data-mantine-color-scheme="dark"] .mantine-Combobox-groupLabel { color: var(--mantine-color-dark-2) !important; background-color: var(--mantine-color-dark-7) !important; } /* ---------- INPUT-FELD ---------- */ [data-mantine-color-scheme="dark"] .mantine-Select-input, [data-mantine-color-scheme="dark"] .mantine-MultiSelect-input, [data-mantine-color-scheme="dark"] .mantine-InputBase-input { background-color: var(--mantine-color-dark-6) !important; border-color: var(--mantine-color-dark-4) !important; color: var(--mantine-color-gray-0) !important; } [data-mantine-color-scheme="dark"] .mantine-Select-input::placeholder, [data-mantine-color-scheme="dark"] .mantine-MultiSelect-input::placeholder, [data-mantine-color-scheme="dark"] .mantine-InputBase-input::placeholder { color: var(--mantine-color-dark-2) !important; } /* ---------- MULTISELECT PILLS ---------- */ [data-mantine-color-scheme="dark"] .mantine-MultiSelect-pill, [data-mantine-color-scheme="dark"] .mantine-Pill-root { background-color: var(--mantine-color-dark-5) !important; color: var(--mantine-color-gray-0) !important; } /* ---------- CHECK-ICON ---------- */ [data-mantine-color-scheme="dark"] .mantine-Combobox-optionsDropdown svg { color: var(--mantine-color-gray-0) !important; } /* ================================================================ TEIL 2: dcc.Dropdown (Plotly Dash Core, react-select) z.B. im Massenpflege-Modal mit className "mp-dropdown-dark" Wichtig: Das Menue wird per Portal direkt in gerendert, daher MUESSEN diese Selektoren global sein (kein Parent-Scope). Wir scopen auf [data-mantine-color-scheme="dark"] am -Tag. ================================================================ */ /* ---------- CONTROL (geschlossener Zustand) ---------- */ [data-mantine-color-scheme="dark"] .Select-control, [data-mantine-color-scheme="dark"] .Select__control { background-color: var(--mantine-color-dark-6) !important; border: 1px solid var(--mantine-color-dark-4) !important; color: var(--mantine-color-gray-0) !important; box-shadow: none !important; } [data-mantine-color-scheme="dark"] .Select__control--is-focused, [data-mantine-color-scheme="dark"] .Select-control.is-focused { border-color: var(--mantine-color-red-7) !important; box-shadow: 0 0 0 1px var(--mantine-color-red-7) !important; } /* ---------- Werte / Eingabe / Placeholder ---------- */ [data-mantine-color-scheme="dark"] .Select-value-label, [data-mantine-color-scheme="dark"] .Select__single-value, [data-mantine-color-scheme="dark"] .Select-value, [data-mantine-color-scheme="dark"] .Select-input > input, [data-mantine-color-scheme="dark"] .Select__input, [data-mantine-color-scheme="dark"] .Select__input input { color: var(--mantine-color-gray-0) !important; } [data-mantine-color-scheme="dark"] .Select-placeholder, [data-mantine-color-scheme="dark"] .Select__placeholder { color: var(--mantine-color-dark-2) !important; } /* ---------- MENU (offener Zustand) ---------- */ [data-mantine-color-scheme="dark"] .Select-menu-outer, [data-mantine-color-scheme="dark"] .Select__menu, [data-mantine-color-scheme="dark"] .Select__menu-list, [data-mantine-color-scheme="dark"] .Select-menu { background-color: var(--mantine-color-dark-7) !important; border: 1px solid var(--mantine-color-dark-4) !important; color: var(--mantine-color-gray-0) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important; z-index: 1100 !important; } /* ---------- OPTIONEN ---------- */ [data-mantine-color-scheme="dark"] .Select-option, [data-mantine-color-scheme="dark"] .Select__option, [data-mantine-color-scheme="dark"] .VirtualizedSelectOption { background-color: transparent !important; color: var(--mantine-color-gray-0) !important; } /* ---------- OPTION HOVER / FOCUS ---------- */ [data-mantine-color-scheme="dark"] .Select-option.is-focused, [data-mantine-color-scheme="dark"] .Select__option--is-focused, [data-mantine-color-scheme="dark"] .VirtualizedSelectFocusedOption, [data-mantine-color-scheme="dark"] .Select-option:hover, [data-mantine-color-scheme="dark"] .Select__option:hover { background-color: var(--mantine-color-dark-5) !important; color: var(--mantine-color-white) !important; } /* ---------- OPTION SELECTED ---------- */ [data-mantine-color-scheme="dark"] .Select-option.is-selected, [data-mantine-color-scheme="dark"] .Select__option--is-selected, [data-mantine-color-scheme="dark"] .VirtualizedSelectSelectedOption { background-color: var(--mantine-color-red-7) !important; color: #fff !important; font-weight: 600 !important; } /* ---------- DISABLED ---------- */ [data-mantine-color-scheme="dark"] .Select-option.is-disabled, [data-mantine-color-scheme="dark"] .Select__option--is-disabled { color: var(--mantine-color-dark-2) !important; opacity: 0.6; } /* ---------- Pfeil-Icon ---------- */ [data-mantine-color-scheme="dark"] .Select-arrow-zone .Select-arrow, [data-mantine-color-scheme="dark"] .Select__indicator svg { color: var(--mantine-color-dark-2) !important; fill: var(--mantine-color-dark-2) !important; } /* ---------- Trennlinie zwischen Indikator & Control ---------- */ [data-mantine-color-scheme="dark"] .Select__indicator-separator { background-color: var(--mantine-color-dark-4) !important; } /* ---------- MultiValue-Pills (bei multi=True) ---------- */ [data-mantine-color-scheme="dark"] .Select__multi-value, [data-mantine-color-scheme="dark"] .Select-value { background-color: var(--mantine-color-dark-5) !important; color: var(--mantine-color-gray-0) !important; } [data-mantine-color-scheme="dark"] .Select__multi-value__label { color: var(--mantine-color-gray-0) !important; } /* ---------- "No options"-State ---------- */ [data-mantine-color-scheme="dark"] .Select-noresults, [data-mantine-color-scheme="dark"] .Select__menu-notice, [data-mantine-color-scheme="dark"] .Select__menu-notice--no-options { color: var(--mantine-color-dark-1) !important; background-color: var(--mantine-color-dark-7) !important; }