/* * custom.css – Eigene Styles für portal.ko-we.com * * @version: 2026-08-27-v01 * @updated: Versionskopf ergaenzt. Eigene Stile ueber dem Vuexy-Theme. Hier steht * auch die Gestaltung der Bildlaufleisten — am Universalselektor, nicht * an html, weil scrollbar-color sich vererbt (CLAUDE.md). */ /* Navbar-detached: linkes + rechtes Margin erzwingen (wie Vuexy Demo: 16px 24px 0px) */ #layout-navbar.navbar-detached { margin-top: 1rem !important; /* 16px */ margin-inline: 1.5rem !important; /* 24px links + rechts */ margin-bottom: 0 !important; } /* Auswahlfelder (Dropdown-Toggle im Eingabefeld-Stil, z.B. Klassifikation, Status, Priorität, Zugewiesen an): sehen aus wie ein normales Eingabefeld (form-control) und zeigen immer volle Textfarbe, aktiv und deaktiviert gleich hell — Standard für das gesamte Portal. */ .form-control.dropdown-toggle { color: var(--bs-body-color) !important; text-align: left; } .form-control.dropdown-toggle:disabled { opacity: 1 !important; cursor: default !important; pointer-events: none; } /* Gesperrte Formularfelder im Ansichtsmodus lesbar halten — portalweit. Vorher gab es dieselbe Idee dreimal: für die Auswahlkomponente oben in dieser Datei, lokal in documents/detail.php (.doc-form input:disabled) und lokal in admin/stammdaten/index.php. Beide lokalen Blöcke sind entfernt. Zwei Fallen dabei: 1. NICHT über opacity. Bootstrap setzt bei :disabled bereits opacity: 1 — die Abdunklung kommt über die Textfarbe. 2. -webkit-text-fill-color ist nötig. In WebKit-Browsern überstimmt diese Eigenschaft color; ohne sie bleibt der Text dunkel, obwohl color gesetzt ist. Genau daran scheiterte der erste Versuch. Bewusst über .form-control und .form-select statt über input:disabled — sonst würden auch gesperrte Knöpfe aufgehellt, wo das Ausgrauen richtig ist (etwa ein Speichern-Knopf während des Speichervorgangs). */ .form-control:disabled, .form-select:disabled, textarea.form-control:disabled, .form-select:disabled option { opacity: 1 !important; color: var(--bs-body-color) !important; -webkit-text-fill-color: var(--bs-body-color) !important; cursor: default !important; } /* Schalter und Kontrollkästchen samt ihrer Beschriftung */ .form-check-input:disabled { opacity: 1 !important; cursor: default !important; } .form-check-input:disabled ~ .form-check-label, .form-check-input:disabled + .form-check-label { opacity: 1 !important; color: var(--bs-body-color) !important; -webkit-text-fill-color: var(--bs-body-color) !important; } /* Aufklapp-Menues von Auswahlfeldern: gleiche Schriftgroesse wie form-control-sm, damit Button und Menue einheitlich wirken. Betrifft NUR Menues von Auswahlfeldern (Klasse dropdown-menu-field), nicht andere Dropdowns im Portal (z.B. Benutzer-Menue oben rechts). */ .dropdown-menu-field { font-size: 0.8125rem; } /* Rote Fehler-/Warn-Tooltips — portalweit wiederverwendbar, basiert auf Bootstraps eigener Tooltip-Komponente (rendert via Popper.js in , dadurch nicht anfällig für abschneidende overflow:hidden/auto-Eltern wie es bei reinen CSS-Tooltips der Fall wäre). Nutzung: Plus einmalige Initialisierung nach dem Laden (siehe footer.php): document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(el => new bootstrap.Tooltip(el)); */ .tooltip-danger .tooltip-inner { background-color: var(--bs-danger); color: #fff; font-weight: 400; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35); } .tooltip-danger.bs-tooltip-top .tooltip-arrow::before, .tooltip-danger.bs-tooltip-auto[data-popper-placement="top"] .tooltip-arrow::before { border-top-color: var(--bs-danger); } .tooltip-danger.bs-tooltip-bottom .tooltip-arrow::before, .tooltip-danger.bs-tooltip-auto[data-popper-placement="bottom"] .tooltip-arrow::before { border-bottom-color: var(--bs-danger); } .tooltip-danger.bs-tooltip-start .tooltip-arrow::before, .tooltip-danger.bs-tooltip-auto[data-popper-placement="left"] .tooltip-arrow::before { border-left-color: var(--bs-danger); } .tooltip-danger.bs-tooltip-end .tooltip-arrow::before, .tooltip-danger.bs-tooltip-auto[data-popper-placement="right"] .tooltip-arrow::before { border-right-color: var(--bs-danger); } /* Scrollbalken — portalweit, fuer alle nativ scrollenden Flaechen. NUR die genormten Eigenschaften. ::-webkit-scrollbar bleibt bewusst draussen: Chrome ab 121 kennt beide, und dann gewinnt scrollbar-width — die ::-webkit-Regeln waeren wirkungslos. Zwei Mechanismen nebeneinander ergaeben in altem und neuem Chrome verschiedene Bilder. WARUM DER UNIVERSALSELEKTOR und nicht html: scrollbar-color VERERBT sich. Stuende der Ruhewert nur an html und der Hover-Wert an html:hover, dann erbte beim Ueberfahren jedes Element im Dokument den Hover-Wert — alle Balken waeren gleichzeitig kraeftig, sobald der Zeiger irgendwo im Fenster steht. Die Deklaration an jedem Element unterbricht diese Vererbung. WAS "BEIM UEBERFAHREN" HIER HEISST: die genormten Eigenschaften kennen keinen Selektor fuer den Griff allein. Gemeint ist der Zeiger ueber der scrollenden FLAECHE, nicht auf dem Balken. FOLGE, DIE MAN KENNEN MUSS: :hover gilt fuer die ganze Vorfahrenkette. Der aeussere Seitenbereich (.content-wrapper) ist Vorfahre von allem Inhalt und damit praktisch immer im Hover-Zustand, sobald der Zeiger ueberhaupt im Inhalt steht. Sein Balken zeigt deshalb dauerhaft die kraeftige Farbe — das ist kein Randfall, sondern der Normalzustand. Dasselbe gilt fuer jede Verschachtelung: beim Ueberfahren einer inneren Flaeche sind der innere und alle aeusseren Balken zugleich kraeftig. Wer das nicht will, schraenkt die Hover-Regel auf benannte Container ein und handelt sich dafuer eine Pflegeliste ein. FARBEN AUS VARIABLEN, keine festen rgba()-Werte — der Theme-Umschalter in sidebar.php wechselt zwischen hell und dunkel: hell #e6e6e8 -> #acaab1 dunkel #44485e -> #76778e REICHWEITE: Firefox seit je, Chrome ab 121, Safari erst in neueren Fassungen. Wo die Eigenschaften fehlen, bleibt der Standardbalken — kein Fehlbild, nur keine Wirkung. Das Sidebar-Menue und die uebrigen perfect-scrollbar-Flaechen haben gar keinen nativen Balken und bleiben unberuehrt; ebenso das PDF.js-iframe, ein eigenes Dokument. */ * { scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; } *:hover { scrollbar-color: var(--bs-secondary-color) transparent; }