/* * gg-design — gemeinsames Erscheinungsbild der German-Garrison-Dienste. * * Eine Umfärbeschicht über Bootstrap 5.3.x (gebaut gegen 5.3.8), keine eigene * Komponentenbibliothek. Einbinden NACH bootstrap.min.css. * * Herkunft: UTINNI src/main/resources/static/css/style.css (gg-api, origin/main * 0ae3020d), Werte 1:1 übernommen. Abweichungen gegenüber dem Original: * - url(...) zeigt relativ auf ../img und ../fonts, damit die Datei unter * /webjars/gg-design//css/ genauso funktioniert wie ohne Version. * - Die Schriftfarbe auf Primärflächen steht in EINER Variablen, * --gg-on-primary (Abschnitt 4). * - Neu: die Farben halten WCAG 2.1 AA ein (Abschnitt 4). Drei Rollen sind * als Token getrennt: --gg-on-primary, --gg-on-fill, --gg-primary-ink. * Die Primärfarbe hat als Schrift und Umriss eine abgedunkelte * Tönung. Die Flächenfarben sind unverändert. Messwerte in * docs/ux/README.md. * - Neu: gewöhnliche Verweise und die Umrisse von Bedienelementen halten * AA. Verweise nehmen --gg-primary-ink, Feldumrisse --gg-control-border, * der Fokus einen eigenen Ring (Abschnitt 4 und 5). Grün und Rot haben * dafür dieselbe Rollentrennung bekommen wie die Primärfarbe. * - Neu: das Theme dark zieht Bootstraps dunklen Modus mit (Abschnitt 3). * Ohne ihn bleiben Bootstraps eigene Flächen hell, und der Fließtext stand * dort bei 1,2:1. * - Themes und Hintergrund sind zusätzlich unter neutralem Namen erreichbar: * data-gg-theme neben data-utinni-theme, body.gg-backdrop neben body.utinni. * - .help-tour-btn bleibt als Produktbestandteil in UTINNI. * - Neu: die Anmeldekarte .gg-auth (Abschnitt 7). * * Abschnitte * 1. Grundpalette * 2. Themes: light (Standard), dark, utinni * 3. Bootstraps eigene Flächen im Theme dark * 4. Kontrast * 5. Umfärbeschicht für Bootstrap * 6. Hintergrund * 7. Anmeldekarte * 8. Schrift */ /* 1. Grundpalette ---------------------------------------------------------- */ :root { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-black: #212529; --gg-blue: #99B1D6; --gg-blue-hover: #90a7c2; /* gg-blue auf Lesbarkeit abgedunkelt: hsl(216, 43%, 44%), Farbton und * Sättigung von --gg-blue unverändert. Trägt Schrift auf hellem Grund * mit 5,5:1, auf der dunkelsten Stelle des Hintergrundfotos noch 5,0:1. */ --gg-blue-ink: #4066A0; /* Noch eine Stufe dunkler, für den Hover eines Verweises: * hsl(216, 43%, 34%). Auf hellem Grund 7,8:1. */ --gg-blue-ink-hover: #314F7C; --gg-light-gray: #f5f5f5; --gg-medium-gray: #ECECEC; --utinni-yellow: #F7BA00; --utinni-yellow-hover: #c59300; /* utinni-yellow abgedunkelt: hsl(45, 100%, 24%), Farbton und Sättigung * unverändert. Auf --utinni-sand 5,6:1, auf dem Foto noch 5,4:1. */ --utinni-gold-ink: #7A5C00; /* hsl(45, 100%, 16%), der Hover zur Tinte. Auf --utinni-sand 9,2:1. */ --utinni-gold-ink-hover: #523D00; --utinni-brown: #462C27; --utinni-sand: #FFEFDE; /* Grün und Rot bekommen dieselbe Rollentrennung wie die Primärfarbe: die * Fläche bleibt --bs-success und --bs-danger, als Schrift und Umriss * schreibt eine abgedunkelte Tönung. Farbton und Sättigung von Bootstraps * eigenen Werten bleiben, nur die Helligkeit geht herunter: 152° / 69 % * von 31 auf 22 Prozent, 354° / 70 % von 54 auf 42 Prozent. Auf hellem * Grund 7,3:1 und 6,2:1, wo die Füllfarben selbst nur 4,3:1 trugen. */ --gg-green-ink: #115F3B; --gg-red-ink: #B6202F; } /* 2. Themes ---------------------------------------------------------------- */ :root, [data-utinni-theme="light"], [data-gg-theme="light"] { --bs-primary: var(--gg-blue); --bs-primary-hover: var(--gg-blue-hover); --bs-secondary: #6c757d; --bs-success: #198754; --bs-success-hover: #105734; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-warning-hover: #b08400; --bs-danger: #dc3545; --bs-danger-hover: #862330; --bs-light: #f8f9fa; --bs-dark: var(--bs-black); --card-bg: #f8f9fa60; --body-background-image: url(../img/background-light.jpg); --body-background-color: var(--bs-light); /* Die Primärfarbe als Schrift und Umriss. Die Fläche bleibt --bs-primary. * Die Kanäle daneben, weil Bootstrap die Verweisfarbe und gg-design den * Fokusring als rgb() lesen und nicht als Farbwert. */ --gg-primary-ink: var(--gg-blue-ink); --gg-primary-ink-rgb: 64, 102, 160; --gg-primary-ink-hover: var(--gg-blue-ink-hover); --gg-primary-ink-hover-rgb: 49, 79, 124; --gg-success-ink: var(--gg-green-ink); --gg-danger-ink: var(--gg-red-ink); /* Verweise: eine Farbe für .link-primary und für jedes gewöhnliche . * Bootstraps eigenes #0d6efd trug hier 4,3:1 und ist ohnehin keine Farbe * der Garnison; die Tinte trägt 5,5:1, der Hover 7,8:1. */ --link-color: var(--gg-primary-ink); --link-hover-color: var(--gg-primary-ink-hover); --bs-link-color-rgb: var(--gg-primary-ink-rgb); --bs-link-hover-color-rgb: var(--gg-primary-ink-hover-rgb); --navbar-bg: var(--gg-light-gray); /* Navbar background */ --navbar-color: var(--bs-dark); /* Navbar text color */ --navbar-hover-color: var(--gg-primary-ink); /* Hover color */ --navbar-active-color: var(--gg-on-primary); --navbar-active-hover-color: var(--gg-on-primary); --navbar-toggler-border: var(--bs-dark); /* Toggler button */ } /* Das Theme dark gilt nur zusammen mit Bootstraps dunklem Modus. Warum die * Kopplung im Selektor steht und nicht bloß in der Anleitung: Abschnitt 3. * Fehlt data-bs-theme="dark", greift der Block oben und die Seite ist hell, * falsch, aber lesbar. */ [data-utinni-theme="dark"][data-bs-theme="dark"], [data-gg-theme="dark"][data-bs-theme="dark"] { --bs-primary: var(--gg-blue); --bs-primary-hover: var(--gg-blue-hover); --bs-secondary: #6c757d; --bs-success: #198754; --bs-success-hover: #105734; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-warning-hover: #b08400; --bs-danger: #dc3545; --bs-danger-hover: #862330; --bs-light: #212529; --bs-dark: #f8f9fa; --card-bg: #21252960; --body-background-image: url(../img/background-dark.png); --body-background-color: #181818; /* Auf dunklem Grund ist die Primärfarbe selbst schon lesbar (8,1:1), * hier wird nichts abgedunkelt. */ --gg-primary-ink: var(--gg-blue); --gg-primary-ink-rgb: 153, 177, 214; /* --gg-blue #99B1D6 */ --gg-primary-ink-hover: var(--gg-blue-hover); --gg-primary-ink-hover-rgb: 144, 167, 194; /* --gg-blue-hover #90a7c2 */ /* Hier geht die Tinte nicht nach unten, sondern nach oben: die dunklen * Tönungen des hellen Themes stünden auf #181818 bei 2,3:1 und 2,7:1. * Diese beiden Werte sind Bootstraps eigene aus seinem dunklen Modus und * tragen 7,6:1 und 7,0:1. */ --gg-success-ink: #75B798; --gg-danger-ink: #EA868F; /* Verweise: eine Farbe für .link-primary und für jedes gewöhnliche . * Bootstraps dunkler Modus nähme sein eigenes Hellblau #6ea8fe (7,4:1), * lesbar, aber keine Farbe der Garnison. Das helle gg-blue trägt 8,1:1. * Bootstrap liest die Verweisfarbe als Kanäle, nicht als Farbwert. */ --link-color: var(--gg-primary-ink); --link-hover-color: var(--gg-primary-ink-hover); --bs-link-color-rgb: var(--gg-primary-ink-rgb); --bs-link-hover-color-rgb: var(--gg-primary-ink-hover-rgb); --navbar-bg: var(--bs-light); /* Dark background */ --navbar-color: var(--bs-dark); /* Light text */ --navbar-hover-color: var(--gg-primary-ink); /* Hover color */ --navbar-active-color: var(--gg-on-primary); --navbar-active-hover-color: var(--gg-on-primary); --navbar-toggler-border: var(--bs-light); /* Toggler button */ } [data-utinni-theme="utinni"], [data-gg-theme="utinni"] { --bs-primary: var(--utinni-yellow); --bs-primary-hover: var(--utinni-yellow-hover); --bs-secondary: #6c757d; --bs-success: #198754; --bs-success-hover: #105734; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-warning-hover: #b08400; --bs-danger: #dc3545; --bs-danger-hover: #862330; --bs-light: #f8f9fa; --bs-dark: var(--utinni-brown); --card-bg: #f8f9fa60; --body-background-image: url(../img/background-utinni.png); --body-background-color: var(--utinni-sand); --gg-primary-ink: var(--utinni-gold-ink); --gg-primary-ink-rgb: 122, 92, 0; --gg-primary-ink-hover: var(--utinni-gold-ink-hover); --gg-primary-ink-hover-rgb: 82, 61, 0; --gg-success-ink: var(--gg-green-ink); --gg-danger-ink: var(--gg-red-ink); /* Verweise: Bootstraps eigenes #0d6efd trug auf dem Sand 4,0:1, die Tinte * trägt 5,6:1, der Hover 9,2:1. */ --link-color: var(--gg-primary-ink); --link-hover-color: var(--gg-primary-ink-hover); --bs-link-color-rgb: var(--gg-primary-ink-rgb); --bs-link-hover-color-rgb: var(--gg-primary-ink-hover-rgb); --navbar-bg: var(--bs-dark); --navbar-color: var(--bs-light); /* Die Leiste ist hier braun: darauf ist das helle Gelb die lesbare * Hoverfarbe (7,3:1), die abgedunkelte wäre es nicht (2,0:1). */ --navbar-hover-color: var(--bs-primary); --navbar-active-color: var(--gg-on-primary); --navbar-active-hover-color: var(--gg-on-primary); --navbar-toggler-border: var(--bs-primary); } /* 3. Bootstraps eigene Flächen im Theme dark -------------------------------- * * Diese Datei färbt Bootstrap um; sie ersetzt es nicht. Karten, Tabellen, * Modale, Formularfelder, Dropdowns, Listen und Meldungen holen ihre Fläche * und ihre Schrift aus Bootstraps eigenen Token (--bs-body-bg, --bs-body-color, * --bs-secondary-bg, --bs-tertiary-bg, --bs-border-color). Diese Token hängen * bei Bootstrap an einem eigenen Attribut, data-bs-theme, und an keinem * anderen. Solange es fehlt, bleibt jede dieser Flächen weiß, und der * Fließtext der Garnison, hell für den dunklen Grund gedacht, stand darauf bei * 1,2:1. * * Es war keine Absicht, sondern eine Naht. In UTINNI setzt das Skript beide * Attribute seit dem ersten Tag im Gleichschritt (spa-modules/_app/__main.js). * Beim Herausziehen der Farben in dieses WebJar blieb die JavaScript-Hälfte * dort zurück; übrig blieb ein Theme, das seine Voraussetzung nur noch in der * Anleitung nannte. * * Deshalb steht die Voraussetzung jetzt im Selektor: der dunkle Themeblock in * Abschnitt 2 verlangt beide Attribute am selben Element. * * * * Fehlt data-bs-theme, greift der Block für light, und die App ist hell statt * unlesbar. Ein vergessenes Attribut fällt damit beim ersten Blick auf, nicht * erst bei einer Messung. * * Der Weg dahin war die Wahl zwischen zwei Wegen, und der andere ist gemessen * worden: die betroffenen Flächen selbst einfärben, ohne data-bs-theme. Er * scheitert nicht am Fließtext, sondern an dem, was Bootstrap nicht als Farbe * ausliefert, sondern als Bild oder Filter: der Schließknopf .btn-close (ein * schwarzes SVG, das Bootstrap nur unter data-bs-theme="dark" invertiert), der * Pfeil in .form-select und das Zeichen in .accordion-button. Auf einer selbst * abgedunkelten Fläche verschwinden sie, und jede weitere Komponente, die * jemand später auf --bs-body-bg baut, wäre wieder hell: das Overlay von isb * ist genau so gebaut. Die vollständige Messung beider Wege steht in * docs/ux/README.md, zum Anklicken in * docs/ux/prototypes/dark-bootstrap-flaechen.html. * * Bootstraps dunkler Modus deckt fast alles selbst ab. Was er nicht abdeckt, * steht als Token im dunklen Themeblock (Abschnitt 2) und in der * Umfärbeschicht (Abschnitt 5), jeweils mit der gemessenen Zahl daneben. */ /* 4. Kontrast --------------------------------------------------------------- * * Drei Rollen, drei Token. Sie halten auseinander, was vorher alles an * --bs-light und --bs-dark hing. Die tauscht das Theme dark gegeneinander, * weshalb Schrift auf gesättigten Flächen dort ins Dunkle kippte. * * --gg-on-primary Schrift auf einer Fläche in --bs-primary: * .btn-primary, .btn-outline-primary:hover, .bg-primary, * aktive Seitenzahl, aktiver Listeneintrag, aktiver * Eintrag der Navigationsleiste. * --gg-on-fill Schrift auf den gesättigten Flächen secondary, * success und danger. * --gg-primary-ink die Primärfarbe als Schrift und Umriss, je Theme in * Abschnitt 2 gesetzt. Die Fläche bleibt --bs-primary. * Auch die Farbe jedes Verweises und des Fokus. * --gg-success-ink dasselbe für Grün und Rot: Prüfmeldungen am Formular, * --gg-danger-ink Umrissknöpfe. Die Flächen bleiben --bs-success und * --bs-danger. * --gg-control-border der Umriss eines Bedienelements. Bootstraps eigener * --bs-border-color trug 1,2:1 gegen die Seite und 1,3:1 * gegen das Feld, das er umschließt; ein Bedienelement * braucht 3:1. Derselbe Grauwert in allen drei Themes: * 3,9:1 auf einem weißen Feld, 4,0:1 auf #212529. * Er gilt nur für Bedienelemente. Die Linien in Tabellen * und an Karten sind Zierde und keine Bedienelemente; * sie bleiben, wie Bootstrap sie setzt. * --gg-focus-ring der Fokus. Ein Ring aus rgba() kommt über 1,5:1 nicht * hinaus, wie hell man ihn auch macht; deshalb trägt eine * 1px-Linie in der Tinte den Kontrast, und der weiche * Schein liegt nur darum herum. * * Gemessen (WCAG 2.1, AA: 4,5:1 für Text, 3:1 für Bedienelemente). Tabelle * mit allen Paarungen in docs/ux/README.md. * * --gg-on-primary = --bs-black #212529 * auf #99B1D6 gg-blue 7,1:1 (vorher hell: 2,1:1) * auf #F7BA00 utinni-yellow 8,8:1 (vorher hell: 1,7:1) * auf #90a7c2 gg-blue-hover 6,2:1 (vorher hell: 2,4:1) * --gg-on-fill = #fff * auf #6c757d secondary 4,7:1 (vorher #f8f9fa: 4,5:1, im Theme * dark #212529: 3,3:1) * auf #198754 success 4,5:1 (vorher 4,3:1 / dark 3,4:1) * auf #dc3545 danger 4,5:1 (vorher 4,3:1 / dark 3,4:1) * --gg-primary-ink * light #4066A0 auf #f8f9fa 5,5:1 (vorher #99B1D6: 2,1:1) * dark #99B1D6 auf #181818 8,1:1 (unverändert) * utinni #7A5C00 auf #FFEFDE 5,6:1 (vorher #F7BA00: 1,6:1) * * Die Flächenfarben selbst bleiben unangetastet. gg-blue und utinni-yellow * füllen weiter jeden Knopf; geändert hat sich, was darauf steht und womit * die Farbe schreibt. */ :root, [data-utinni-theme], [data-gg-theme] { --gg-on-primary: var(--bs-black); --gg-on-fill: #fff; /* Bootstraps --bs-gray, fünf Punkte heller: hsl(208, 7%, 51%), Farbton und * Sättigung unverändert. Ein einziger Wert für alle drei Themes, und er * trägt auf jeder Fläche, die ein Feld umgeben kann, mindestens 3,4:1. * --bs-gray selbst fiel am Zusatz eines Feldes im Theme dark auf 2,9:1. */ --gg-control-border: #79838B; --gg-focus-ring: 0 0 0 1px var(--gg-primary-ink), 0 0 0 0.25rem rgba(var(--gg-primary-ink-rgb), 0.3); /* Bootstraps Prüffarben am Formular. Als Umriss hielten sie die 3:1 schon, * als Schrift standen Fehler- und Bestätigungsmeldung bei 4,3:1 im Theme * light und 4,0:1 im Theme utinni, beide unter den 4,5:1 für Text. Mit den * Tinten: 6,2:1 und 7,3:1. Im Theme dark sind es Bootstraps eigene helle * Tönungen, die dort schon richtig standen. */ --bs-form-valid-color: var(--gg-success-ink); --bs-form-valid-border-color: var(--gg-success-ink); --bs-form-invalid-color: var(--gg-danger-ink); --bs-form-invalid-border-color: var(--gg-danger-ink); } /* 5. Umfärbeschicht für Bootstrap ------------------------------------------ */ blockquote { margin-left: 40px; padding-left: 20px; border-left: 2px solid var(--bs-primary); } /* Card */ .card { background-color: var(--card-bg) !important; } /* NavBar */ .navbar { background-color: var(--navbar-bg) !important; } .navbar a, .navbar-nav .nav-link { color: var(--navbar-color) !important; } .navbar-nav .nav-link:hover { color: var(--navbar-hover-color) !important; } /* When the navbar is active (e.g., expanded on mobile or has an active page) */ /* When the nav-link is active */ .navbar-nav .nav-link.active, .navbar-nav .nav-link.bg-primary { color: var(--navbar-active-color) !important; } .navbar-nav .nav-link.active:hover, .navbar-nav .nav-link.bg-primary:hover { color: var(--navbar-active-hover-color) !important; } /* Navbar Toggler (Hamburger Button) */ .navbar-toggler { border-color: var(--navbar-toggler-border) !important; } /* Bootstrap liefert das Hamburger-Zeichen als SVG und passt seine Farbe an * data-bs-theme an: dunkler Strich im hellen Modus, heller im dunklen. Eine * Umkehrung für alle Themes drehte das jedes Mal auf die falsche Seite: im * Theme light stand der helle Strich auf der hellen Leiste #f5f5f5 bei 1,2:1, * im Theme dark unter Bootstraps dunklem Modus der dunkle auf #212529 bei * 1,2:1. Gebraucht wird sie nur im Theme utinni: dort ist die Leiste braun, * Bootstrap hält den Strich aber für einen hellen Grund. */ [data-utinni-theme="utinni"] .navbar-toggler-icon, [data-gg-theme="utinni"] .navbar-toggler-icon { filter: invert(1); } /* Text */ .text-primary { color: var(--gg-primary-ink) !important; } /* Links */ .link-primary { color: var(--link-color) !important; text-decoration-color: var(--link-color) !important; /* Ensure underline matches text */ } .link-primary:hover { color: var(--link-hover-color) !important; text-decoration-color: var(--link-hover-color) !important; /* Ensure underline matches text */ } .table-clean tr:last-child td { border-bottom: none; /* removes the extra line at bottom */ } .form-check-input:checked { /* Die Fläche in gg-blue trug das weiße Häkchen mit 2,2:1 und stand mit * 2,1:1 gegen die Karte: der Kasten selbst war kaum zu sehen. Die Tinte * trägt das Häkchen mit 5,8:1 und grenzt sich mit 5,8:1 ab. */ background-color: var(--gg-primary-ink) !important; border-color: var(--gg-primary-ink) !important; } /* Formularfelder, Fokus ----------------------------------------------------- * * Der Umriss eines Bedienelements muss 3:1 tragen. Bootstraps eigener * --bs-border-color trug 1,2:1 gegen die Seite und 1,3:1 gegen das Feld selbst; * im Theme dark 2,2:1 und 1,9:1. Hier steht deshalb --gg-control-border, der * überall zwischen 3,4:1 und 4,6:1 liegt. * * Nur Bedienelemente. Die Trennlinien in Tabellen und die Kante einer Karte * sind Zierde; sie bleiben, wie Bootstrap sie setzt. */ .form-control, .form-select, .form-check-input, .input-group-text { border-color: var(--gg-control-border) !important; } /* Der geprüfte und der fehlerhafte Zustand tragen ihre eigene Farbe weiter. * Ohne diese Regel gewinnt das !important der Regel darüber, und ein Feld mit * Fehler hätte denselben grauen Umriss wie jedes andere: der Fehler wäre nur * noch an der Meldung darunter zu erkennen. */ .form-control.is-invalid, .form-select.is-invalid, .form-check-input.is-invalid, .was-validated .form-control:invalid, .was-validated .form-select:invalid, .was-validated .form-check-input:invalid { border-color: var(--bs-form-invalid-border-color) !important; } .form-control.is-valid, .form-select.is-valid, .form-check-input.is-valid, .was-validated .form-control:valid, .was-validated .form-select:valid, .was-validated .form-check-input:valid { border-color: var(--bs-form-valid-border-color) !important; } /* Ein gesperrtes Feld ist von der Regel ausgenommen und soll gesperrt * aussehen: hier bleibt Bootstraps blasser Umriss die richtige Antwort. * Ein gesetzter Haken behält auch gesperrt seine Tinte. */ .form-control:disabled, .form-select:disabled, .form-check-input:not(:checked):disabled { border-color: var(--bs-border-color) !important; } /* Bootstraps Fokus ist sein eigenes Hellblau: der Umriss #86b7fe trug 2,0:1 * gegen das weiße Feld, der Schein 1,4:1 gegen die Seite. Der Umriss nimmt * jetzt die Tinte: gegen die Seite 5,5:1 im Theme light, 8,1:1 in dark und * 5,6:1 in utinni. Die 1px-Linie darum legt die * Tinte auch dorthin, wo vorher die Seite war: sichtbar wird der Fokus an * dieser Linie, nicht am Schein. */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--gg-primary-ink) !important; box-shadow: var(--gg-focus-ring) !important; } /* Dasselbe für jeden Knopf. Bootstrap leitet den Schein je Knopfart aus seiner * eigenen Palette ab (.btn-primary: rgba(49, 132, 253, .5), 1,8:1), also in * einer Farbe, die in der Garnison nicht vorkommt. Ein Fokus soll überall gleich * aussehen, deshalb eine Regel für alle. */ .btn { --bs-btn-focus-box-shadow: var(--gg-focus-ring); } /* Der Knopf im Schalter ist ein SVG und steckt in --bs-form-switch-bg. Im * Ruhezustand war er rgba(0, 0, 0, .25) und stand auf dem weißen Feld bei * 1,8:1, im Theme dark bei 2,3:1. Jetzt derselbe Grauwert wie der Umriss: * 3,9:1 und 4,0:1. Ein Farbwert lässt sich in einem url() nicht aus einer * Variablen einsetzen, deshalb steht der Wert hier ausgeschrieben. * :not(:checked), damit der eingeschaltete Schalter seinen eigenen Knopf behält; * !important, weil Bootstraps dunkler Modus für diesen Knopf eine eigene, * spezifischere Regel mitbringt. */ .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2379838B'/%3e%3c/svg%3e") !important; } /* Im Theme dark ist die Fläche eines gesetzten Hakens das helle gg-blue. Das * weiße Zeichen aus Bootstraps Regel stand darauf bei 2,2:1: der Haken war * gesetzt und man sah es kaum. Dasselbe Zeichen in --gg-on-primary trägt 7,1:1. * In light und utinni ist die Fläche die dunkle Tinte, dort bleibt das Zeichen * weiß (5,8:1 und 6,3:1). Auch hier muss der Wert ausgeschrieben stehen. */ [data-utinni-theme="dark"][data-bs-theme="dark"] .form-check-input:checked[type="checkbox"], [data-gg-theme="dark"][data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } [data-utinni-theme="dark"][data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate, [data-gg-theme="dark"][data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); } [data-utinni-theme="dark"][data-bs-theme="dark"] .form-check-input:checked[type="radio"], [data-gg-theme="dark"][data-bs-theme="dark"] .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23212529'/%3e%3c/svg%3e"); } [data-utinni-theme="dark"][data-bs-theme="dark"] .form-switch .form-check-input:checked, [data-gg-theme="dark"][data-bs-theme="dark"] .form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23212529'/%3e%3c/svg%3e"); } /* Zwei Werte, die Bootstrap in seinem dunklen Modus nicht mitzieht, weil sie * in der Komponente stehen und nicht im Themeblock: die Überschrift im * Dropdown (#6c757d auf #212529 sind 3,3:1) und der gesperrte Eintrag (4,1:1). * Beide Werte hier sind Bootstraps eigene aus .dropdown-menu-dark. Sie müssen * an .dropdown-menu stehen, denn ein an der Wurzel gesetzter Wert wird von der * Komponente überschrieben. */ [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-header-color: #adb5bd; --bs-dropdown-link-disabled-color: #adb5bd; } /* Apply Variables to Bootstrap Pagination */ .page-item .page-link { color: var(--gg-primary-ink) !important; } .page-item .page-link:hover { background-color: var(--bs-primary) !important; color: var(--gg-on-primary) !important; border-color: var(--bs-primary) !important; } .page-item.active .page-link { background-color: var(--bs-primary) !important; color: var(--gg-on-primary) !important; border-color: var(--bs-primary) !important; } /* Bootstrap Buttons */ .btn-primary { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--gg-on-primary) !important; } .btn-primary:hover { background-color: var(--bs-primary-hover) !important; border-color: var(--bs-primary-hover) !important; } .btn-outline-primary { color: var(--gg-primary-ink) !important; border-color: var(--gg-primary-ink) !important; } .btn-outline-primary:hover { color: var(--gg-on-primary) !important; background-color: var(--bs-primary) !important; /* Der Umriss bleibt die Tinte: der Knopf behält seine Kante, wenn sich * die Fläche füllt. */ border-color: var(--gg-primary-ink) !important; } .btn-secondary { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: var(--gg-on-fill) !important; } .btn-success { background-color: var(--bs-success) !important; border-color: var(--bs-success) !important; color: var(--gg-on-fill) !important; } .btn-success:hover { background-color: var(--bs-success-hover) !important; border-color: var(--bs-success-hover) !important; color: var(--gg-on-fill) !important; } /* Schrift und Umriss waren die Füllfarbe selbst: 4,3:1 im Theme light, 4,0:1 * im Theme utinni, 3,9:1 im Theme dark. Die Tinte trägt 7,3:1 / 6,9:1 / 7,6:1. * Die Fläche beim Hover bleibt unverändert. */ .btn-outline-success { color: var(--gg-success-ink) !important; border-color: var(--gg-success-ink) !important; } .btn-outline-success:hover { color: var(--gg-on-fill) !important; background-color: var(--bs-success-hover) !important; } /* --bs-dark ist im Theme dark hell (#f8f9fa) und stand dort mit 1,6:1 auf * #ffc107. --bs-black ist in allen Themes dunkel: 9,5:1. */ .btn-warning { background-color: var(--bs-warning) !important; border-color: var(--bs-warning-hover) !important; color: var(--bs-black) !important; } .btn-warning:hover { background-color: var(--bs-warning-hover) !important; border-color: var(--bs-warning) !important; color: var(--bs-black) !important; } .btn-danger { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: var(--gg-on-fill) !important; } .btn-danger:hover { background-color: var(--bs-danger-hover) !important; border-color: var(--bs-danger-hover) !important; color: var(--gg-on-fill) !important; } /* Wie bei Grün: 4,3:1 / 4,0:1 / 3,9:1 vorher, 6,2:1 / 5,8:1 / 7,0:1 jetzt. */ .btn-outline-danger { color: var(--gg-danger-ink) !important; border-color: var(--gg-danger-ink) !important; } .btn-outline-danger:hover { color: var(--gg-on-fill) !important; background-color: var(--bs-danger-hover) !important; } /* Backgrounds */ /* .bg-primary hing bisher an --bs-dark. Im Theme dark ist das #f8f9fa und * stand mit 2,1:1 auf gg-blue. Jetzt dieselbe Schriftfarbe wie auf jeder * anderen Primärfläche. */ .bg-primary { background-color: var(--bs-primary) !important; color: var(--gg-on-primary) !important; } .bg-secondary { background-color: var(--bs-secondary) !important; color: var(--gg-on-fill) !important; } .bg-dark { background-color: var(--bs-dark) !important; color: var(--bs-light) !important; } .list-group-item.active { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--gg-on-primary) !important; } /* Borders */ /* Als Umriss braucht die Farbe 3:1 gegen den Grund; gg-blue kam auf 2,1:1. */ .border-primary { border-color: var(--gg-primary-ink) !important; } /* 6. Hintergrund ----------------------------------------------------------- */ body.utinni, body.gg-backdrop { background-image: var(--body-background-image); background-color: var(--body-background-color) !important; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: 50% 0; } /* 7. Anmeldekarte ----------------------------------------------------------- * * Wappen, Titel, Untertitel, darunter eine Bootstrap-Karte mit dem Formular. * Nur Aussehen: kein Skript, kein Formularverhalten. Markup siehe * docs/ux/components.md. */ .gg-auth { max-width: 26rem; margin-inline: auto; padding: 3rem 1rem 2rem; } .gg-auth__header { text-align: center; margin-bottom: 1.5rem; } .gg-auth__crest { display: block; width: 96px; height: 96px; margin: 0 auto 0.75rem; } .gg-auth__title { font-size: 1.5rem; font-weight: 500; margin-bottom: 0.25rem; } .gg-auth__subtitle { color: var(--bs-secondary-color); font-size: 0.875em; margin-bottom: 0; } .gg-auth__footer { color: var(--bs-secondary-color); font-size: 0.875em; text-align: center; margin-top: 1.5rem; } /* 8. Schrift --------------------------------------------------------------- */ @font-face { font-family: 'Stay On Target'; src: url('../fonts/StayOnTarget-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } .gg-font-display { font-family: 'Stay On Target', monospace; }