/* ── Choices.js Dark-Mode Overrides ──────────────────────────────────────── */ .choices .choices__list[aria-expanded] .choices__list { padding: 0 !important; } .choices__heading { --pe-text-opacity: 1; color: rgba(var(--pe-primary-rgb), var(--pe-text-opacity)) !important; border-bottom-color: var(--pe-primary-rgb) !important; } [data-bs-theme="dark"] .choices__heading { background-color: var(--pe-primary-bg-subtle) !important; border-bottom-color: var(--pe-primary-border-subtle) !important; } /* Choices.js Placeholder vereinheitlichen — der Select-Placeholder soll identisch zum Suchfeld-Placeholder dargestellt werden (Farbe, Gewicht, Opacity). Werte orientieren sich an Bootstrap ::placeholder. */ .choices__placeholder, .choices__item--placeholder, .choices__list--single .choices__item.choices__placeholder, .choices__list--multiple ~ .choices__input::placeholder, .choices__input::placeholder { color: var(--bs-secondary-color, #6c757d) !important; font-weight: 300 !important; opacity: 1 !important; } /* Choices.js-Wrapper bei Validierungsfehler rot umranden */ .choices { margin-bottom: 0 !important; } .choices.is-invalid .choices__inner { border-color: var(--pe-form-invalid-border-color, #dc3545); } .choices.is-invalid ~ .invalid-feedback { display: block; } .choices__list--multiple .choices__item { border-radius: 0 !important; margin-bottom: 0 !important; } .choices__list--dropdown, .choices__list[aria-expanded] { z-index: 3; } /* Dark-Mode: .choices.is-disabled — Choices' Default ist ein helles Grau, das im Dark-Mode unleserlich wird. Wir bringen es auf die gleichen --pe-*-Tokens wie disabled Bootstrap-Inputs. */ [data-bs-theme="dark"] .choices.is-disabled .choices__inner, [data-bs-theme="dark"] .choices.is-disabled .choices__input { background-color: var(--pe-secondary-bg) !important; color: var(--pe-secondary-color) !important; border-color: var(--pe-border-color) !important; } [data-bs-theme="dark"] .choices.is-disabled .choices__item, [data-bs-theme="dark"] .choices.is-disabled .choices__placeholder { color: var(--pe-secondary-color) !important; opacity: 0.75; } [data-bs-theme="dark"] .choices.is-disabled .choices__list--single .choices__item--selectable::after { /* Pfeil-Icon im Dark-Mode neutralisieren */ border-color: var(--pe-secondary-color) transparent transparent transparent !important; opacity: 0.5; } .tagify .tagify__tag { border-radius: 0 !important; } .tagify__input { color: var(--pe-body-color) !important; } hr.dividing-line { border: 0; height: 1px; background-image: linear-gradient(to left, rgba(173, 173, 173, 0), rgb(173, 173, 173), rgba(173, 173, 173, 0)); margin: 8px 0 5px 0; } /* wfConfirm-Body soll Zeilenumbrüche (\n) als solche rendern, nicht zusammenklappen. Ermöglicht mehrzeilige Bestätigungen wie z.B. Konflikt-Listen. */ #wfDeleteModalBody { white-space: pre-line; } /* ── Air Datepicker Dark-Mode Overrides ─────────────────────────────────── */ /* Air Datepicker nutzt CSS-Custom-Properties (--adp-*). Wir überschreiben sie im Dark-Mode an der Wurzel-Klasse, das deckt 95 % der Stellen ab. */ [data-bs-theme="dark"] .air-datepicker { --adp-background-color: var(--pe-secondary-bg); --adp-background-color-hover: var(--pe-tertiary-bg); --adp-background-color-active: var(--pe-tertiary-bg); --adp-color: var(--pe-body-color); --adp-color-secondary: var(--pe-secondary-color); --adp-color-other-month: rgba(255, 255, 255, 0.25); --adp-color-other-month-hover: rgba(255, 255, 255, 0.5); --adp-color-disabled: rgba(255, 255, 255, 0.3); --adp-color-disabled-in-range: rgba(255, 255, 255, 0.4); --adp-border-color: var(--pe-border-color); --adp-border-color-inner: var(--pe-border-color); --adp-border-color-inline: var(--pe-border-color); --adp-cell-background-color-hover: var(--pe-tertiary-bg); --adp-cell-background-color-selected: var(--pe-primary); --adp-cell-background-color-selected-hover: var(--pe-primary); --adp-time-track-color: rgba(255, 255, 255, 0.18); --adp-time-track-color-hover: rgba(255, 255, 255, 0.4); --adp-time-day-period-color: var(--pe-secondary-color); --adp-btn-color: var(--pe-primary); --adp-btn-color-hover: var(--pe-body-color); --adp-btn-background-color-hover: var(--pe-tertiary-bg); --adp-btn-background-color-active: var(--pe-tertiary-bg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* Slider-Thumb hat hartcodiertes `background:#fff` — direkt überschreiben. Achtung: Klassennamen mit Doppel-Dash (BEM-Style)! */ [data-bs-theme="dark"] .air-datepicker-time--row input[type="range"]::-webkit-slider-thumb { background: var(--pe-secondary-bg) !important; } [data-bs-theme="dark"] .air-datepicker-time--row input[type="range"]::-moz-range-thumb { background: var(--pe-secondary-bg) !important; } [data-bs-theme="dark"] .air-datepicker-time--row input[type="range"]:focus::-webkit-slider-thumb { background: var(--pe-primary) !important; } [data-bs-theme="dark"] .air-datepicker-time--row input[type="range"]:focus::-moz-range-thumb { background: var(--pe-primary) !important; } /* Bootstrap-Tooltips: globalen Theme-Box-Shadow entfernen (Menilo setzt 3px 3px 100px rgba(82,63,105,0.5) — wirkt überdimensioniert). */ .tooltip .tooltip-inner { -webkit-box-shadow: none !important; box-shadow: none !important; } /* Pointer-Pfeil zum Input hat ebenfalls hartcodiertes `background:#fff` */ [data-bs-theme="dark"] .air-datepicker--pointer:after { background: var(--pe-secondary-bg) !important; } /* qty-input Input wächst auf die volle Spaltenbreite, +/-Buttons behalten ihre 34×34 */ .qty-input { width: 100%; } .qty-input input { flex: 1 1 auto; width: auto; min-width: 0; } /* Eingeklappte Sidebar (data-sidebar="icon"): Top-Level-Items OHNE Untermenü (Dashboards, Projektmanagement, Kontakte) erbten vom Menilo-Standard keine Label-Maskierung — ihr `.pe-nav-content` ragte sichtbar aus der Sidebar heraus. Hier explizit verstecken, analog zu Items mit `.pe-has-sub`. */ @media (min-width: 1024px) { [data-sidebar="icon"] #sidebar .pe-main-menu > li > a > .pe-nav-content, [data-sidebar="icon"] #sidebar .pe-main-menu > li > a > .pe-nav-arrow, [data-sidebar="icon"] #sidebar .pe-menu-title { display: none !important; } [data-sidebar="icon"] #sidebar .pe-main-menu > li > a { justify-content: center; } } .qty-input button { flex: 0 0 34px; } /* Dropzone-Vorschau: alle Overlays (Dateiname, Größe, Progress-Bar) raus — sie legten sich lesbar-feindlich aufs Foto. Nur das Vorschau-Bild + der „Entfernen"-Link bleiben sichtbar. Höhere Spezifität, damit es nicht durch modul-spezifische Regeln in details.css übersteuert wird. */ .dropzone .dz-preview .dz-details, .dropzone .dz-preview .dz-progress, .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-error-message { display: none !important; } /* ── Baum-Auswahl für Kategorie/Standort (Betriebsmittel anlegen) ──────── Der Auslöser sieht aus wie ein Select, ist aber ein Button, der den Baum-Dialog öffnet. Der eigentliche Wert steckt im versteckten