/* * Klimawerkstatt-spezifische Ergaenzungen zu Tabler (app/static/vendor/tabler). * Das eigentliche Design-System (Buttons, Cards, Formulare, Tabellen, Nav, * Dark Mode via data-bs-theme) kommt vollstaendig von Tabler -- hier stehen * NUR Dinge, die Tabler nicht mitbringt. */ /* Ampel-Statusfarben (Spezifikation: rot/gelb/gruen-Bewertungen). * Als Variablen definiert, damit ein Mandanten-CI sie theoretisch anpassen * koennte, ohne die Templates anzufassen. */ :root { --kw-ampel-gruen: var(--tblr-success, #2fb344); --kw-ampel-gelb: var(--tblr-warning, #f76707); --kw-ampel-rot: var(--tblr-danger, #d63939); } /* Slide-in-Panel (Alpine-gesteuert, siehe base.html) */ .slideover { position: fixed; inset: 0; z-index: 1050; } .slideover-backdrop { position: absolute; inset: 0; background: rgba(24, 36, 51, 0.4); } .slideover-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(480px, 92vw); overflow-y: auto; border-radius: 0; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); } /* --- Sidebar: Ueberschriften klar von klickbaren Punkten unterscheiden (Auftraggeber 2026-08-02). Ueberschriften = kleine, stark abgedunkelte Labels mit Trennlinie (nicht klickbar); Menuepunkte = eingerueckt, mit Pfeil, Hover-Flaeche und deutlich hervorgehobenem Aktiv-Zustand in der Mandanten-Primaerfarbe. --- */ .nav-block-titel { margin-top: 0.9rem; padding: 0.55rem 1rem 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); border-top: 1px solid rgba(255, 255, 255, 0.08); } .navbar-vertical .navbar-nav > .nav-block-titel:first-child { border-top: 0; margin-top: 0; } .navbar-vertical .nav-item .nav-link { margin: 1px 0.5rem; padding: 0.32rem 0.6rem 0.32rem 0.75rem; border-radius: 0.375rem; color: rgba(255, 255, 255, 0.85); } .navbar-vertical .nav-item .nav-link:hover:not(.disabled) { background: rgba(255, 255, 255, 0.09); color: #fff; } .navbar-vertical .nav-item .nav-link.active { background: var(--tblr-primary, #206bc4); color: #fff; font-weight: 600; } .navbar-vertical .nav-item .nav-link.disabled { color: rgba(255, 255, 255, 0.35); } /* Ungelesen-Zaehler am Menuepunkt (wie im Altsystem): 0 gedimmt, >0 rot */ .navbar-vertical .nav-item .nav-link { display: flex; align-items: center; } .navbar-vertical .nav-badge-leer { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); } /* Dual-Listbox (Zuteilungs-Komponente, siehe macros/_dual_listbox.html) */ .dual-listbox select[multiple] { min-height: 12rem; } /* Klimawerkstatt.at-Logo in der Kopfzeile: braune Variante im hellen, weisse Variante im dunklen Theme (data-bs-theme auf ) */ .navbar-brand .kw-logo-dunkel { display: none; } [data-bs-theme="dark"] .navbar-brand .kw-logo-hell { display: none; } [data-bs-theme="dark"] .navbar-brand .kw-logo-dunkel { display: inline-block; } /* Spalten-Sortierung: Ueberschriften sind klickbar (app.js) */ table.table thead th { cursor: pointer; user-select: none; } table.table thead th .sortier-pfeil { color: var(--tblr-primary, #206bc4); } /* Read-only-Modus: Anlage-Knoepfe ("+ ... erstellen", fuehren auf /neu) komplett ausblenden — Detail-/Bearbeiten-Ansichten bleiben zum LESEN erreichbar (ihre Felder sind deaktiviert, Speichern serverseitig blockiert) */ body.nur-lesen a[href$="/neu"], body.nur-lesen a[href*="/neu?"] { display: none !important; } /* Read-only-Modus: auch listen-erzeugende Exporte (Excel) ausblenden */ body.nur-lesen a[href$=".xlsx"] { display: none !important; } /* Dashboard modern & uebersichtlich (Auftraggeber 2026-08-02) */ .dashboard-deko { position: fixed; right: 1.5rem; bottom: 1rem; width: 300px; max-width: 30vw; opacity: .45; pointer-events: none; z-index: 0; user-select: none; } .status-kachel { border-left: 4px solid var(--tblr-secondary, #626976); transition: transform .12s ease, box-shadow .12s ease; } .status-kachel:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.10); } .status-kachel.status-rot { border-left-color: var(--tblr-danger, #d63939); } .status-kachel.status-gelb { border-left-color: var(--tblr-warning, #f59f00); } .status-kachel.status-gruen { border-left-color: var(--tblr-success, #2fb344); } .status-punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--tblr-secondary, #626976); flex: none; } .status-punkt-rot { background: var(--tblr-danger, #d63939); } .status-punkt-gelb { background: var(--tblr-warning, #f59f00); } .status-punkt-gruen { background: var(--tblr-success, #2fb344); } /* Listen-Ansichten sollen in die Breite PASSEN statt horizontal zu scrollen (Auftraggeber 2026-08-04). Standard-Listen nutzen das Makro macros/_tabelle -> .table-responsive > table.card-table. Statt breiter, nicht umbrechender Zellen: Text umbrechen, lange Tokens (E-Mail/URL) brechen, dichtere Darstellung. Bewusst per text-nowrap markierte Zellen (z. B. Datum) bleiben einzeilig (Tablers .text-nowrap gewinnt per !important). */ .card-table { font-size: 0.875rem; } .card-table th, .card-table td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; vertical-align: top; padding-top: 0.4rem; padding-bottom: 0.4rem; } /* Aktions-/Knopf-Zellen nicht umbrechen und schmal halten */ .card-table td .btn, .card-table th .btn { white-space: nowrap; } /* Filter-/Toolbar-Formulare oberhalb der Liste dürfen nie die Seite breiter machen als das Fenster */ .page-body .card-body .row { --tblr-gutter-x: 0.75rem; } /* Alpine: Elemente mit x-cloak erst nach Initialisierung zeigen. */ [x-cloak] { display: none !important; } /* "letztes Audit"-Aufklapper im Audit-Grid: Pfeil (Marker) ebenfalls rot, damit er zusammen mit der roten Schrift ins Auge sticht. */ summary.text-danger::marker { color: var(--tblr-danger, #d63939); } /* Seitenleisten-Kopf "Aktiver Betrieb" + Betriebsname bleibt beim Scrollen oben sichtbar (Auftraggeber 2026-08-10). Die Sidebar (.navbar-vertical) ist selbst der Scroll-Container (overflow-y: scroll), daher genügt sticky. */ .sidebar-sticky-kopf { position: sticky; top: 0; z-index: 5; background: var(--kw-menu-bg, #16382a); } .sidebar-sticky-kopf-titel { margin-top: 0; border-top: 0; padding-top: 0.5rem; } /* Obere Leiste (Logo, Hilfe, Abmelden …) bleibt beim Scrollen sichtbar (Auftraggeber 2026-08-10). Opaker Hintergrund + z-index über dem Inhalt, unter der fixierten Seitenleiste (z-index 1030). */ .kw-topbar { z-index: 1025; background: var(--tblr-navbar-bg, var(--tblr-bg-surface, #fff)); } /* Betriebs-Ebene: Menü scrollt bei Bedarf (Auftraggeber 2026-08-12: die frühere Kompakt-Darstellung „alles ohne Scrollen" war zu gedrungen — jetzt wieder dieselben luftigen Abstände wie auf Mandanten-/Admin-Ebene, der Kopf „Aktiver Betrieb" bleibt beim Scrollen oben sichtbar). */ body.ebene-betrieb .navbar-vertical { overflow-y: auto !important; } body.ebene-betrieb .sidebar-sticky-kopf-titel { padding-top: 0.5rem; } /* Menü-Hintergrund dunkelgrün statt schwarz (Auftraggeber 2026-08-10). */ :root { --kw-menu-bg: #16382a; } .navbar-vertical { background-color: var(--kw-menu-bg, #16382a) !important; } /* Rechtsmanagement: Langtext-Spalten (Verpflichtungen/Maßnahmen/Anmerkung) wachsen mit dem Inhalt, damit der gesamte Text lesbar ist (Auftraggeber 2026-08-11). field-sizing für aktuelle Browser; Fallback: JS in app.js. */ .recht-langtext { field-sizing: content; min-width: 16rem; max-width: 30rem; min-height: calc(1.4em + 0.5rem); overflow: hidden; resize: vertical; white-space: pre-wrap; } /* Schwebender Speichern-Knopf (app.js): oben rechts unter der Kopfleiste, über dem Inhalt, unter Modalen. */ .kw-speichern-schwebend { position: fixed; top: 4.2rem; right: 1.5rem; z-index: 1020; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } /* Menü-Freischaltung: Blocküberschriften ohne sichtbare Menüpunkte darunter ausblenden (Auftraggeber 2026-08-12, Beispiel „Rechtskonformität" bei Betrieben ohne Rechtsmanagement). Abgewählte Punkte werden gar nicht gerendert — folgt auf eine Überschrift direkt die nächste (oder das Listenende), ist ihr Block leer. */ .navbar-vertical li.nav-block-titel:has(+ li.nav-block-titel), .navbar-vertical .navbar-nav > li.nav-block-titel:last-child { display: none; } /* Tom Select nutzt Bootstrap-CSS-Variablen (--bs-*), Tabler stellt aber --tblr-* bereit — ohne Mapping war die aufgeklappte Liste transparent (Auftraggeber 2026-08-12, Screenshot Schulungsbewertung). Mapping + solide Fallbacks, funktioniert in Hell- und Dunkel-Theme. */ .ts-wrapper, .ts-control, .ts-dropdown { --bs-body-bg: var(--tblr-bg-surface, #ffffff); --bs-body-color: var(--tblr-body-color, #182433); --bs-border-color: var(--tblr-border-color, #dadfe5); --bs-border-color-translucent: var(--tblr-border-color-translucent, rgba(4, 32, 69, 0.14)); --bs-border-width: 1px; --bs-border-radius: 4px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 8px; --bs-box-shadow-inset: none; --bs-secondary-bg: var(--tblr-bg-surface-secondary, #f6f8fb); --bs-tertiary-bg: var(--tblr-bg-surface-tertiary, #f6f8fb); --bs-form-valid-color: var(--tblr-success, #2fb344); --bs-form-invalid-color: var(--tblr-danger, #d63939); } .ts-dropdown { background: var(--tblr-bg-surface, #ffffff); color: var(--tblr-body-color, #182433); border: 1px solid var(--tblr-border-color, #dadfe5); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); z-index: 1055; } .ts-dropdown .option.active { background: var(--tblr-primary, #206bc4); color: #fff; } .ts-control { background: var(--tblr-bg-forms, var(--tblr-bg-surface, #fff)) !important; color: var(--tblr-body-color, #182433); } /* Einfach-Auswahl: nie umbrechen — sonst wird das Feld zweizeilig und ungleich hoch (Auftraggeber 2026-08-13, Screenshot To-do-Filter). In schmalen Filterleisten braucht der Wrapper zudem eine Mindestbreite, weil er anders als ein natives