/* ============================================================================================ ContrAI-Look der Anmeldung (kct1 #2301) — VERBRAUCHER der Kit-Tokens, nie eine zweite Quelle. REGEL DIESER DATEI: kein Farbwert, kein Abstandswert und keine Schriftgroesse als Literal. Jeder Wert kommt aus `css/tokens.css` (`core/tokens@1`, Byte-Kopie des Kit-Fragments). Wer hier eine Hex-Farbe schreibt, baut das zweite Farbwissen, gegen das Kit-Grundsatz 1 gebaut ist — `test_kct1_theme.py` faerbt genau dafuer rot. ⚠️ SOLLBRUCHSTELLE, benannt statt verschwiegen: die `--ctr-*`-Tokens werden auf `.app` DEKLARIERT, und `.app` sitzt am `` (`kcBodyClass=app`). Das ``-Element traegt `login-pf` (`kcHtmlClass`) und sieht KEIN `--ctr-*`. Eine Regel auf `html`, `:root` oder `.login-pf` allein kann hier also nichts einfaerben — sie faende die Variable nicht und fiele still auf den Initialwert zurueck. Alles unten haengt deshalb an `body.app` oder tiefer. Der Seiten-Hintergrund erreicht die Leinwand ueber die Hintergrund-Propagierung des Rumpfes (`` traegt selbst keinen Hintergrund). REIHENFOLGE-ANNAHME: diese Datei wird als LETZTE der drei `styles`-Eintraege geladen (`theme.properties`). Wo der Elter mit `!important` arbeitet, steht es hier ebenfalls — mit Begruendung an der Stelle, nie pauschal. ============================================================================================ */ /* --- 1. Die Tapete abraeumen -------------------------------------------------------------- `keycloak.v2/login/resources/css/styles.css` Z. 29-33 setzt `.login-pf body { background: var(--keycloak-bg-logo-url) no-repeat center center fixed; }`. Das ist eine Bild-Tapete mit Spezifitaet (0,1,1) — `.app { background }` aus dem Kit (0,1,0) verliert dagegen. Die Tapete muss also AKTIV abgeraeumt werden, nicht bloss ueberschrieben gehofft. Zwei Selektoren, beide gemessen am gerenderten Rumpf (``): `.login-pf body.app` (0,2,1) schlaegt die Elternregel ueber die Klasse, `body.app#keycloak-bg` (1,0,1) zusaetzlich ueber die ID — die zweite haelt auch dann, wenn ein kuenftiges Basis-Theme seine Regel verschaerft. */ .login-pf body.app, body.app#keycloak-bg { background: var(--ctr-bg); background-image: none; color: var(--ctr-ink); font-family: var(--ctr-font); font-size: var(--ctr-fs-2); } /* --- 2. Die Marke im Kopf ------------------------------------------------------------------ Der Kopf rendert `msg("loginTitleHtml", realm.displayNameHtml)` — die Marke kommt also aus dem REALM (`realm.py`: `displayNameHtml`), nicht aus diesem Theme und nicht aus einem Sprach-Bundle. `styles.css` Z. 103-111 faerbt sie `light-100` mit `!important` (weiss auf der dunklen Tapete) und stellt sie auf `uppercase` mit 3 px Sperrung. Beides ist auf hellem Grund falsch: die Farbe waere unsichtbar, und die Sperrung ueberschreibt die Auszeichnung, die `displayNameHtml` selbst mitbringt. Das `!important` hier ist die Antwort auf das `!important` dort — ohne es bliebe die Marke weiss. */ .app #kc-header-wrapper { color: var(--ctr-ink) !important; font-size: var(--ctr-fs-4); text-transform: none; letter-spacing: normal; padding: var(--ctr-gap-3) 0; } /* --- 3. Die Karte -------------------------------------------------------------------------- `pf-v5-c-login__main` ist die weisse Karte; `styles.css` Z. 15-17 setzt ihr eine 4 px breite blaue Oberkante (`--keycloak-card-top-color`). Die Kante bleibt als Gestaltungselement, traegt aber den ContrAI-Akzent. Flaeche, Rahmen und Schatten kommen aus den Kit-Tokens. */ .app .pf-v5-c-login__main { background: var(--ctr-surface); border: 1px solid var(--ctr-border); border-radius: var(--ctr-radius); box-shadow: var(--ctr-shadow); color: var(--ctr-ink); } .app .pf-v5-c-login__main-header { border-top: 4px solid var(--ctr-accent); padding: var(--ctr-gap-4) var(--ctr-gap-4) var(--ctr-gap-2); } .app .pf-v5-c-login__main-title, .app .pf-v5-c-login__main-header .pf-v5-c-title { color: var(--ctr-ink); font-size: var(--ctr-fs-3); } .app .pf-v5-c-login__main-body { padding: var(--ctr-gap-2) var(--ctr-gap-4) var(--ctr-gap-4); } .app .pf-v5-c-login__main-footer { padding: 0 var(--ctr-gap-4) var(--ctr-gap-4); color: var(--ctr-ink-2); } /* --- 4. Formular: Beschriftung und Eingabe -------------------------------------------------- */ .app .pf-v5-c-form__label, .app .pf-v5-c-form__label-text { color: var(--ctr-label); font-size: var(--ctr-fs-1); } .app .pf-v5-c-form__group { margin-bottom: var(--ctr-gap-3); } .app .pf-v5-c-form-control { background: var(--ctr-surface); border-radius: var(--ctr-radius-sm); color: var(--ctr-ink); font-family: var(--ctr-font); font-size: var(--ctr-fs-2); } /* Die Fokus-Marke ist eine Barrierefreiheits-Zusage (WCAG 2.2 AA 2.4.11) und deshalb sichtbar in der Akzentfarbe, nicht als entfernter Browser-Ring. */ .app .pf-v5-c-form-control:focus-within { outline: 2px solid var(--ctr-accent); outline-offset: 1px; } /* --- 5. Der Primaer-Knopf ------------------------------------------------------------------ EIN Vollton-Primaer-Anker je Bildschirm (#25b Anker-Prinzip): auf der Anmeldeseite ist das „Anmelden". Die Mindesthoehe kommt aus dem Bedien-Mass `--ctr-ziel-touch` (44 px) — dieselbe Zahl, gegen die `design_gate` im Kit misst; sie steht nicht ein zweites Mal hier. */ .app .pf-v5-c-button.pf-m-primary { background: var(--ctr-accent); color: var(--ctr-accent-ink); border-radius: var(--ctr-radius-sm); font-family: var(--ctr-font); font-size: var(--ctr-fs-2); min-height: var(--ctr-ziel-touch); } .app .pf-v5-c-button.pf-m-primary:hover, .app .pf-v5-c-button.pf-m-primary:focus { background: var(--ctr-accent); color: var(--ctr-accent-ink); outline: 2px solid var(--ctr-accent); outline-offset: 2px; } .app .pf-v5-c-button.pf-m-link { color: var(--ctr-accent); font-size: var(--ctr-fs-1); } /* --- 6. Meldungen -------------------------------------------------------------------------- Keycloak rendert Fehler und Hinweise als `pf-v5-c-alert pf-m-inline`. Der Fehlerfall ist der haeufigste (falsches Passwort) und traegt deshalb die Kit-Kritikfarbe; `--ctr-crit-soft` ist die zugehoerige Flaeche aus demselben Tokensatz — zwei Werte, EIN Paar, nie gemischt. */ .app .pf-v5-c-alert { background: var(--ctr-crit-soft); border-radius: var(--ctr-radius-sm); color: var(--ctr-ink); margin-bottom: var(--ctr-gap-3); } .app .pf-v5-c-alert.pf-m-inline { border-inline-start: 3px solid var(--ctr-crit); } .app .pf-v5-c-alert__title, .app .pf-v5-c-alert__icon { color: var(--ctr-crit); } .app .kc-feedback-text, .app .pf-v5-c-helper-text__item-text.pf-m-error { color: var(--ctr-crit); font-size: var(--ctr-fs-1); } /* --- 7. Ankreuzfeld und Sprachwahl --------------------------------------------------------- */ .app .pf-v5-c-check__label { color: var(--ctr-ink-2); font-size: var(--ctr-fs-1); } .app .pf-v5-c-login__main-header-utilities .pf-v5-c-form-control { font-size: var(--ctr-fs-1); }