/* ============================================================================= Romvesen — Keycloak login/registration branding (light + dark) ----------------------------------------------------------------------------- CSS-only theme layered on top of `keycloak.v2` (PatternFly v5). Loaded AFTER the parent's css/styles.css (see theme.properties), so the v2 layout grid is preserved and we only retint. Palette is matched to the apps: - Brand teal scale mirrors the React app (frontend/src/styles.css), built from the logo eye colour #79BFC6. (The old Django app's primary #6EC6D9 is a near cousin; the React scale is the canonical, fuller palette so we unify on it.) - Surfaces / text / borders use the React app's slate semantic tokens, NOT PatternFly's default greys, so the card, inputs and copy read the same as the SPA. Both apps use flat slate surfaces with teal as an *accent only* (logo, card stripe, buttons, links) — so there are no teal page washes here. Dark mode is keycloak.v2's built-in feature: the template adds the `pf-v5-theme-dark` class to from `prefers-color-scheme`. We re-point the same tokens for dark using the React app's dark slate values + lighter brand. ============================================================================= */ :root { /* Brand teal scale (logo eye colour #79BFC6 = brand-400 = brand-solid) */ --rv-brand-50: #f1f9fa; --rv-brand-100: #dbf0f2; --rv-brand-200: #bce2e6; --rv-brand-300: #95d0d8; --rv-brand-400: #79bfc6; --rv-brand-500: #519fa8; --rv-brand-600: #3c828c; --rv-brand-700: #336a72; --rv-brand-800: #2f565d; --rv-brand-900: #2b484e; --rv-brand-950: #172e33; /* ---- Logo + card accent (keycloak.v2 hooks) ---- */ /* v2 renders the brand as TEXT in #kc-header-wrapper (not div.kc-logo-text — that's dead CSS). We hide the text and paint the logo as a background image; --rv-logo keeps the light/dark swap in one place. */ --rv-logo: url("../img/romvesen-logo.svg"); /* black shape + teal eye */ --keycloak-card-top-color: var(--rv-brand-400); /* accent stripe atop the card */ /* ---- Surfaces / text / borders — React LIGHT slate tokens ---- */ --pf-v5-global--BackgroundColor--100: #ffffff; /* card surface (= surface-raised) */ --pf-v5-c-form-control--BackgroundColor: #ffffff;/* inputs */ --pf-v5-global--Color--100: #0f172a; /* content */ --pf-v5-global--Color--200: #475569; /* content-muted */ --pf-v5-global--BorderColor--100: #e2e8f0; /* border */ --pf-v5-global--BorderColor--200: #cbd5e1; /* border-strong */ /* ---- Interactive text / links = React --brand (brand-700 in light) ---- */ --pf-v5-global--link--Color: var(--rv-brand-700); --pf-v5-global--link--Color--hover: var(--rv-brand-800); --pf-v5-global--primary-color--100: var(--rv-brand-600); /* focus rings / active accents */ --pf-v5-global--primary-color--200: var(--rv-brand-700); --pf-v5-global--active-color--100: var(--rv-brand-600); --pf-v5-global--BorderColor--active: var(--rv-brand-500); /* ---- Primary button = React --brand-solid (brand-400) + --brand-on ink ---- */ /* React uses the SAME solid teal fill with dark ink in both themes, so these are inherited unchanged into dark below. */ --pf-v5-c-button--m-primary--BackgroundColor: var(--rv-brand-400); --pf-v5-c-button--m-primary--Color: var(--rv-brand-950); --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--rv-brand-500); --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--rv-brand-500); --pf-v5-c-button--m-primary--active--BackgroundColor: var(--rv-brand-600); } /* Logo: hide the realm-name text (kept in DOM for screen readers) and paint the logo as a centered background image on the brand header. */ #kc-header-wrapper { font-size: 0; line-height: 0; padding: 0; height: 56px; background-image: var(--rv-logo); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Page background = React --surface (light). Flat slate; teal stays an accent. */ .login-pf body { background: #f8fafc; } /* --------------------------------------------------------------------------- DARK — keycloak.v2 adds `pf-v5-theme-dark` to via prefers-color-scheme. React dark slate values + lighter brand shades. Button fill/ink inherit from :root unchanged (React keeps the solid teal button identical across themes). --------------------------------------------------------------------------- */ :root.pf-v5-theme-dark { --rv-logo: url("../img/romvesen-logo-invert.svg"); /* white logo on dark header */ --keycloak-card-top-color: var(--rv-brand-400); /* Surfaces / text / borders — React DARK slate tokens */ --pf-v5-global--BackgroundColor--100: #1e293b; /* card (= surface-raised) */ --pf-v5-c-form-control--BackgroundColor: #0f172a; /* inputs (= surface, inset) */ --pf-v5-global--Color--100: #f1f5f9; /* content */ --pf-v5-global--Color--200: #94a3b8; /* content-muted */ --pf-v5-global--BorderColor--100: #334155; /* border */ --pf-v5-global--BorderColor--200: #475569; /* border-strong */ /* Links / accents = React --brand (brand-300 in dark) */ --pf-v5-global--link--Color: var(--rv-brand-300); --pf-v5-global--link--Color--hover: var(--rv-brand-200); --pf-v5-global--primary-color--100: var(--rv-brand-400); --pf-v5-global--primary-color--200: var(--rv-brand-500); --pf-v5-global--active-color--100: var(--rv-brand-400); --pf-v5-global--BorderColor--active: var(--rv-brand-400); } /* Page background = React --surface (dark). */ .pf-v5-theme-dark body { background: #0f172a; }