/* * h_da Corporate Design für den Tabler-Zweig (base_tabler.html): * Hausschrift DINWeb + offizieller Farbenpool. * * Auf den Seiten kommen ausschließlich h_da-Farben vor. Dafür wird Tablers * eigene Palette weiter unten auf den Farbenpool umgezogen — nicht nur die * Utility-Klassen, sondern die Variablen selbst. Nur so folgen auch Buttons, * Alerts, Fokusringe und Formularzustände dem Corporate Design; die holen ihre * Farbe aus --tblr-*, wo eine .bg-hda-*-Klasse gar nicht hinreicht. * * Einzige bewusste Ausnahme: das neutrale Grau (--tblr-secondary). Der * h_da-Pool hat keinen solchen Ton, deshalb ist er als --hda-grey übernommen. * * Verwendung: immer über die Variablen oder die Utility-Klassen unten, * nie den Hexwert direkt ins Template schreiben. */ /* --------------------------------------------------------------------------- * Hausschrift DINWeb (h_da), lokal unter static/fonts/ — kein CDN. * Dieselben Dateien nutzen bereits Welcomescreen und Planningcalendar. * ------------------------------------------------------------------------- */ @font-face { font-family: "DINWeb"; src: url("../fonts/DINWeb.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "DINWeb"; src: url("../fonts/DINWeb-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "DINWeb"; src: url("../fonts/DINWeb-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Hausschrift als Standard-Schriftfamilie des Tabler-Zweigs. DINWeb bringt nur 400/500/700 mit — andere Schnitte würde der Browser synthetisch verzerren, deshalb im Markup bei diesen dreien bleiben. */ --hda-font-sans: "DINWeb", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tblr-font-sans-serif: var(--hda-font-sans); --tblr-body-font-family: var(--hda-font-sans); --bs-body-font-family: var(--hda-font-sans); } :root { /* --- Farbenpool --- */ --hda-orange: #E98011; /* h_da Orange 2081 */ --hda-orange-dark: #CF6F0C; --hda-bordeaux: #5D0613; /* h_da Orange 9901 */ --hda-red: #AC1B21; /* h_da Rot 5005 */ --hda-yellow: #FCCB06; /* h_da Gelb 1051 */ --hda-green: #9DC41E; /* h_da Grün (Chat-Grün) */ --hda-green-dark: #719E3E; --hda-blue: #519CDB; /* h_da Blau 1169 */ --hda-blue-dark: #102D5C; /* h_da Blau 8190 */ --hda-purple: #A04AA3; /* h_da Violett 2197 */ --hda-anthracite: #231F20; /* h_da Schwarz */ --hda-grey: #6b7280; /* kein h_da-Ton: Tablers neutrales Grau, bewusst übernommen */ /* --- Dieselben Farben als RGB-Tripel --- Nötig für rgba()-Tints: rgba(var(--hda-green-rgb), .12). Der Fallback im Template ist Pflicht, weil Templates ungecacht sind, diese CSS aber gecacht wird — ohne ihn verschwindet die Farbe bei veralteter CSS. */ --hda-orange-rgb: 233, 128, 17; --hda-orange-dark-rgb: 207, 111, 12; --hda-bordeaux-rgb: 93, 6, 19; --hda-red-rgb: 172, 27, 33; --hda-yellow-rgb: 252, 203, 6; --hda-green-rgb: 157, 196, 30; --hda-green-dark-rgb: 113, 158, 62; --hda-blue-rgb: 81, 156, 219; --hda-blue-dark-rgb: 16, 45, 92; --hda-purple-rgb: 160, 74, 163; --hda-anthracite-rgb: 35, 31, 32; --hda-grey-rgb: 107, 114, 128; } /* --------------------------------------------------------------------------- * Tablers Palette auf den h_da-Farbenpool umziehen. * * Tabler führt zwei Ebenen getrennt: die Palette (--tblr-blue, --tblr-green …) * und die Zustandsfarben (--tblr-success, --tblr-danger …). Beide sind eigene * Hexwerte, die zweite leitet sich NICHT aus der ersten ab — also müssen beide * gesetzt werden, sonst bleibt die Hälfte der App Tabler-bunt. * * Die -lt-Tönungen (.bg-green-lt und Geschwister) mischt Tabler per color-mix * aus diesen Variablen und nimmt dieselbe Farbe als Textfarbe. Die dunkleren * Geschwister sind deshalb die richtige Wahl, wo der Ton als Text lesbar sein * muss: h_da-Grün #9DC41E ist auf Weiß kaum zu lesen, #719E3E dagegen schon. * * Töne, die der h_da-Pool nicht kennt (teal, cyan, pink, indigo, lime), zeigen * auf den nächstliegenden Hausfarbton — sonst schlüge bei einer Komponente, * die sie benutzt, doch wieder Fremdfarbe durch. * ------------------------------------------------------------------------- */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --tblr-blue: var(--hda-blue); --tblr-blue-rgb: var(--hda-blue-rgb); --tblr-green: var(--hda-green-dark); --tblr-green-rgb: var(--hda-green-dark-rgb); --tblr-red: var(--hda-red); --tblr-red-rgb: var(--hda-red-rgb); --tblr-orange: var(--hda-orange); --tblr-orange-rgb: var(--hda-orange-rgb); --tblr-yellow: var(--hda-yellow); --tblr-yellow-rgb: var(--hda-yellow-rgb); --tblr-purple: var(--hda-purple); --tblr-purple-rgb: var(--hda-purple-rgb); --tblr-dark: var(--hda-anthracite); --tblr-dark-rgb: var(--hda-anthracite-rgb); --tblr-azure: var(--hda-blue); --tblr-azure-rgb: var(--hda-blue-rgb); /* Ohne Entsprechung im Pool — auf den nächsten Hausfarbton gelegt. */ --tblr-teal: var(--hda-green-dark); --tblr-teal-rgb: var(--hda-green-dark-rgb); --tblr-cyan: var(--hda-blue); --tblr-cyan-rgb: var(--hda-blue-rgb); --tblr-pink: var(--hda-purple); --tblr-pink-rgb: var(--hda-purple-rgb); --tblr-indigo: var(--hda-blue-dark); --tblr-indigo-rgb: var(--hda-blue-dark-rgb); --tblr-lime: var(--hda-green); --tblr-lime-rgb: var(--hda-green-rgb); /* Zustandsfarben. Warnung trägt Orange, nicht Gelb: h_da-Gelb ist so hell, dass es als Textfarbe auf heller Fläche nicht mehr lesbar wäre. */ --tblr-success: var(--hda-green-dark); --tblr-success-rgb: var(--hda-green-dark-rgb); --tblr-danger: var(--hda-red); --tblr-danger-rgb: var(--hda-red-rgb); --tblr-warning: var(--hda-orange); --tblr-warning-rgb: var(--hda-orange-rgb); --tblr-info: var(--hda-blue); --tblr-info-rgb: var(--hda-blue-rgb); /* Primärfarbe: h_da-Blau. Es ist ein heller Ton — auf gefüllter Fläche trägt es deshalb anthrazitfarbenen statt weißen Text (5,4:1 gegen 3,0:1). Dieselbe Regel gilt seit jeher für .bg-hda-blue. */ --tblr-primary: var(--hda-blue); --tblr-primary-rgb: var(--hda-blue-rgb); --tblr-primary-fg: var(--hda-anthracite); --tblr-primary-darken: color-mix(in oklab, var(--hda-blue), var(--hda-blue-dark) 25%); /* Das neutrale Grau bleibt, wie es ist — der Pool hat keinen Ersatz dafür. */ --tblr-secondary: var(--hda-grey); --tblr-secondary-rgb: var(--hda-grey-rgb); /* Foreground on filled surfaces – the same reasoning as for the primary colour above, applied to the rest of the pool. Blue, green, orange and yellow are light tones and read far better in anthracite than in white (blue 5.4:1 vs 3.0:1, green 5.1:1 vs 3.0:1, orange 5.8:1 vs 2.6:1, yellow 10.4:1 vs 1.5:1). Red, purple and the grey are dark enough that Tabler's light foreground stays right. */ --tblr-blue-fg: var(--hda-anthracite); --tblr-azure-fg: var(--hda-anthracite); --tblr-cyan-fg: var(--hda-anthracite); --tblr-teal-fg: var(--hda-anthracite); --tblr-info-fg: var(--hda-anthracite); --tblr-green-fg: var(--hda-anthracite); --tblr-lime-fg: var(--hda-anthracite); --tblr-success-fg: var(--hda-anthracite); --tblr-orange-fg: var(--hda-anthracite); --tblr-warning-fg: var(--hda-anthracite); --tblr-yellow-fg: var(--hda-anthracite); } /* Im Dunkelmodus dieselben Farben, nur aufgehellt. Tabler nimmt bei den -lt-Tönungen die Basisfarbe auch als Textfarbe. Rot und Violett des Pools sind dafür gedacht, auf Weiß zu stehen — auf der dunklen Fläche werden sie zu Löchern. Der Farbton bleibt, es ändert sich nur die Helligkeit; deshalb color-mix statt eines zweiten, frei gewählten Hexwerts. */ :root[data-bs-theme="dark"], [data-bs-theme="dark"] { --tblr-red: color-mix(in oklab, var(--hda-red), white 32%); --tblr-danger: color-mix(in oklab, var(--hda-red), white 32%); --tblr-purple: color-mix(in oklab, var(--hda-purple), white 22%); --tblr-pink: color-mix(in oklab, var(--hda-purple), white 22%); --tblr-bordeaux: color-mix(in oklab, var(--hda-bordeaux), white 45%); --tblr-indigo: color-mix(in oklab, var(--hda-blue-dark), white 45%); /* Das helle Hausgrün steht hier besser als sein dunkles Geschwister. */ --tblr-green: var(--hda-green); --tblr-green-rgb: var(--hda-green-rgb); --tblr-success: var(--hda-green); --tblr-teal: var(--hda-green); --tblr-lime: var(--hda-green); } /* --------------------------------------------------------------------------- * Buttons — zwei app-weite Korrekturen an Tablers Default. * ------------------------------------------------------------------------- */ /* Buttons flach halten: Tablers Ruhe-Schatten (--tblr-shadow-input, 0 1px 1px) erzeugt eine dünne dunkle Linie an der Unterkante. Bei gefüllten Buttons fällt sie kaum auf, bei .btn-ghost-* und .btn-icon wirkt sie wie ein Schmutzrand. Nur den Ruhe-Zustand entschärfen — der Fokus-Rahmen läuft über --tblr-btn-focus-box-shadow und bleibt für die Barrierefreiheit erhalten. */ .btn { --tblr-btn-box-shadow: none; box-shadow: none; } /* Bugfix im Tabler-Build: .btn macht Icon-Buttons quadratisch über min-width/min-height: calc(var(--tblr-btn-line-height) * 1 + padding-y * 2 + border * 2). Basis (1.25rem) und .btn-lg (1.5rem) liefern dafür eine Länge — .btn-sm setzt die Variable aber EINHEITENLOS (1.3333333333). Damit ist der calc()-Ausdruck ungültig und beide Constraints fallen weg: `btn-sm btn-icon` wird höher als breit (Breite = Icon + padding-x:0 + Rahmen). Derselbe Wert als Länge (0.75rem Schriftgröße * 1.3333 = 1rem) macht das calc() wieder gültig und die Buttons quadratisch. Beim Tabler-Update prüfen, ob das upstream behoben ist — dann kann dieser Block weg. Der Wert ist die Zeilenhöhe der Eingabefelder (1.25rem): Tabler leitet die Höhe von .btn-sm und .form-control-sm aus demselben Padding, aber aus zwei verschiedenen Zeilenhöhen ab. In einer Filterzeile stünde sonst ein 28px hoher Button neben einem 32px hohen Feld. Der Button folgt dem Feld — nicht umgekehrt: btn-icon ist über die Breite an das Maß gebunden und bliebe bei 28px Höhe nicht mehr quadratisch. */ .btn-sm { --tblr-btn-line-height: 1.25rem; } /* Icon→Text-Abstand: jeder Text-Button trägt ein führendes Tabler-Icon. Tablers .btn ist inline-flex ohne gap, ein Leerzeichen im Markup trägt am Flex-Item-Rand nicht zuverlässig — der Abstand muss daher als Margin am Icon gesetzt werden. Icon-only-Buttons (.btn-icon) sind ausgenommen. */ .btn:not(.btn-icon) > .ti:first-child { margin-inline-end: 0.40em; } /* Tooltips dürfen keine Klicks abfangen: der Tooltip eines Kopfzeilen-Icons bleibt nach dem Schließen eines Modals kurz stehen und legt sich dabei über das Nachbar-Icon – das war dann nicht mehr klickbar. Dieselbe Regel gilt im AdminLTE-Zweig (base_new.html). */ .tooltip { pointer-events: none; } /* --------------------------------------------------------------------------- * Toasts sehen aus wie Tabler-Alerts. * * Der Statuspunkt im Toast-Kopf ging in der Bildschirmecke unter. Statt eine * eigene Toast-Optik zu erfinden, trägt der Toast jetzt einen echten * `.alert.alert-`: getönte Fläche, farbiger Rand, farbiges Icon, * `.alert-heading` + `.alert-description` – dieselben Bausteine wie im * Seitenfluss, dieselben Farben in beiden Themes (Tabler mischt sie über * color-mix aus `--tblr-alert-color` und der Flächenfarbe). * * Der Toast selbst ist damit nur noch Träger für Ein-/Ausblenden und * Positionierung: seine eigene Fläche, sein Rand und sein Schatten würden * sonst als zweiter Kasten um den Alert stehen. * ------------------------------------------------------------------------- */ .toast-status { background: none; border: 0; box-shadow: none; } /* Der Schatten wandert an den Alert – ohne ihn klebt der Toast flach auf der Seite, statt über ihr zu schweben. Die Fläche muss zusätzlich deckend werden: Tabler mischt die Alert-Tönung mit `color-mix(…, transparent)` und landet bei rund 55 % Deckkraft. Im Seitenfluss fällt das nicht auf, unter einem schwebenden Toast schimmert dagegen der Seiteninhalt durch. Deshalb die Tönung als Farbschicht über eine deckende Grundfläche legen, statt sie selbst als Hintergrundfarbe zu setzen – so bleibt sie an `--tblr-alert-color` gebunden und stimmt in beiden Themes. */ .toast-status > .alert { box-shadow: var(--tblr-box-shadow); background-color: var(--tblr-bg-surface); background-image: linear-gradient(var(--tblr-alert-bg), var(--tblr-alert-bg)); } /* --------------------------------------------------------------------------- * Utility-Klassen — damit kein Template einen Hexwert hartkodieren muss. * * .bg-hda- volle Fläche, Text automatisch hell/dunkel * .bg-hda--lt dezente Tönung (Badges, Zell-Hintergründe) * .text-hda- Textfarbe * .border-hda- Rahmenfarbe * * Die -lt-Tönungen sind bewusst rgba-basiert: so bleiben sie auf hellem wie * dunklem Untergrund benutzbar und brauchen keine zweite Definition für den * Dark Mode. * ------------------------------------------------------------------------- */ .bg-hda-orange { background-color: var(--hda-orange); color: #fff; } .bg-hda-orange-dark{ background-color: var(--hda-orange-dark);color: #fff; } .bg-hda-bordeaux { background-color: var(--hda-bordeaux); color: #fff; } .bg-hda-red { background-color: var(--hda-red); color: #fff; } .bg-hda-yellow { background-color: var(--hda-yellow); color: var(--hda-anthracite); } .bg-hda-green { background-color: var(--hda-green); color: var(--hda-anthracite); } .bg-hda-green-dark { background-color: var(--hda-green-dark); color: #fff; } .bg-hda-blue { background-color: var(--hda-blue); color: var(--hda-anthracite); } .bg-hda-blue-dark { background-color: var(--hda-blue-dark); color: #fff; } .bg-hda-purple { background-color: var(--hda-purple); color: #fff; } .bg-hda-anthracite { background-color: var(--hda-anthracite); color: #fff; } .bg-hda-grey { background-color: var(--hda-grey); color: #fff; } .bg-hda-orange-lt { background-color: rgba(var(--hda-orange-rgb, 233, 128, 17), .14); color: var(--hda-orange-dark); } .bg-hda-bordeaux-lt { background-color: rgba(var(--hda-bordeaux-rgb, 93, 6, 19), .14); color: var(--hda-bordeaux); } .bg-hda-red-lt { background-color: rgba(var(--hda-red-rgb, 172, 27, 33), .14); color: var(--hda-red); } .bg-hda-yellow-lt { background-color: rgba(var(--hda-yellow-rgb, 252, 203, 6), .20); color: #8a6d03; } .bg-hda-green-lt { background-color: rgba(var(--hda-green-rgb, 157, 196, 30), .16); color: var(--hda-green-dark); } .bg-hda-blue-lt { background-color: rgba(var(--hda-blue-rgb, 81, 156, 219), .16); color: var(--hda-blue-dark); } .bg-hda-purple-lt { background-color: rgba(var(--hda-purple-rgb, 160, 74, 163), .14); color: var(--hda-purple); } .bg-hda-grey-lt { background-color: rgba(var(--hda-grey-rgb, 107, 114, 128), .14); color: var(--hda-grey); } .text-hda-orange { color: var(--hda-orange) !important; } .text-hda-orange-dark { color: var(--hda-orange-dark) !important; } .text-hda-bordeaux { color: var(--hda-bordeaux) !important; } .text-hda-red { color: var(--hda-red) !important; } .text-hda-yellow { color: var(--hda-yellow) !important; } .text-hda-green { color: var(--hda-green) !important; } .text-hda-green-dark { color: var(--hda-green-dark) !important; } .text-hda-blue { color: var(--hda-blue) !important; } .text-hda-blue-dark { color: var(--hda-blue-dark) !important; } .text-hda-purple { color: var(--hda-purple) !important; } .text-hda-anthracite { color: var(--hda-anthracite) !important; } .text-hda-grey { color: var(--hda-grey) !important; } .border-hda-orange { border-color: var(--hda-orange) !important; } .border-hda-red { border-color: var(--hda-red) !important; } .border-hda-green { border-color: var(--hda-green) !important; } .border-hda-blue { border-color: var(--hda-blue) !important; } .border-hda-purple { border-color: var(--hda-purple) !important; } /* Im Dunkelmodus tragen die dunklen Töne zu wenig Kontrast gegen die dunkle Fläche — dort die helleren Geschwister als Textfarbe verwenden. */ [data-bs-theme="dark"] .bg-hda-blue-lt { color: var(--hda-blue); } [data-bs-theme="dark"] .bg-hda-bordeaux-lt{ color: var(--hda-red); } [data-bs-theme="dark"] .bg-hda-yellow-lt { color: var(--hda-yellow); } [data-bs-theme="dark"] .text-hda-blue-dark { color: var(--hda-blue) !important; } [data-bs-theme="dark"] .text-hda-anthracite { color: var(--tblr-body-color) !important; } /* Filled badges: Tabler prints a badge in --tblr-badge-color, which is the grey of --tblr-secondary, while the bg-* utilities paint only the background. A `badge bg-secondary` therefore ends up grey on grey – invisible – and `bg-danger` barely legible. Upstream expects the matching `text-*-fg` next to every bg-*; instead of writing it into a hundred templates, each filled badge picks up its own foreground here. The soft -lt variants keep their dark text and are deliberately not listed. */ .badge.bg-primary { color: var(--tblr-primary-fg); } .badge.bg-secondary { color: var(--tblr-secondary-fg); } .badge.bg-success { color: var(--tblr-success-fg); } .badge.bg-danger { color: var(--tblr-danger-fg); } .badge.bg-warning { color: var(--tblr-warning-fg); } .badge.bg-info { color: var(--tblr-info-fg); } .badge.bg-dark { color: var(--tblr-dark-fg); } .badge.bg-light { color: var(--tblr-light-fg); } .badge.bg-blue { color: var(--tblr-blue-fg); } .badge.bg-azure { color: var(--tblr-azure-fg); } .badge.bg-green { color: var(--tblr-green-fg); } .badge.bg-red { color: var(--tblr-red-fg); } .badge.bg-orange { color: var(--tblr-orange-fg); } .badge.bg-yellow { color: var(--tblr-yellow-fg); } .badge.bg-purple { color: var(--tblr-purple-fg); } /* Mehrfachauswahl-Filter (partials/multiselect_dropdown.html): lange Listen scrollen im Dropdown, statt die Seite zu sprengen. */ .multiselect-menu { max-height: 20rem; overflow-y: auto; } .multiselect-menu .dropdown-item { cursor: pointer; } /* Marked table row (.table-primary): Bootstrap nails the tint to a light blue, so in the dark theme a marked row turns into a bright block. Mixing it from the theme's own primary keeps the mark equally clear in both modes. Light mode keeps upstream's tint — it already is h_da blue. */ [data-bs-theme="dark"] .table-primary { --tblr-table-color: var(--tblr-body-color); --tblr-table-bg: color-mix(in srgb, var(--tblr-primary) 26%, var(--tblr-bg-surface)); --tblr-table-border-color: color-mix(in srgb, var(--tblr-primary) 40%, var(--tblr-bg-surface)); --tblr-table-striped-color: var(--tblr-body-color); --tblr-table-striped-bg: color-mix(in srgb, var(--tblr-primary) 30%, var(--tblr-bg-surface)); --tblr-table-hover-color: var(--tblr-body-color); --tblr-table-hover-bg: color-mix(in srgb, var(--tblr-primary) 34%, var(--tblr-bg-surface)); } /* Treffer der Tabellensuche (static/js/table-filter.js): Bootstrap gibt ein Padding, das mitten im Wort eine Lücke aufreißt – „Mül ler" statt „Müller". Die Markierung soll den Text färben, nicht ihn auseinanderziehen. */ mark[data-search-mark] { padding: 0; border-radius: 2px; } /* Textauswahl mit der Maus: Tabler tönt sie mit 10 % der Primärfarbe ein, was bei h_da-Blau kaum noch zu sehen ist – markierter Text sah aus wie nicht markierter. Zurück auf die Systemfarbe der Auswahl (das gewohnte Blau des Browsers, samt passender Textfarbe). */ ::selection { background-color: Highlight; color: HighlightText; }