/* Overrides for the keycloak.v2 base theme (loaded first via theme.properties' `styles` list) - keep using its tokens/selectors instead of re-implementing layout, since that's what actually sizes/positions the login card. */ /* keycloak.v2 draws a top accent border on the card using this token. */ :root { --keycloak-card-top-color: #6d28d9; } /* Real selector confirmed from the rendered page: . A bare `body` rule loses to keycloak.v2's `.login-pf body` by specificity, so this needs the id to actually win. */ #keycloak-bg { /* bg-picker.js sets --login-bg-image on daily; the var() fallback below is what shows if JS doesn't run. A local declaration here would shadow the inherited value regardless of what JS sets, so don't add one. */ background: linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)), var(--login-bg-image, url("../img/background.svg")) center center / cover no-repeat fixed; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; } #kc-header-wrapper { font-weight: 600; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } /* PatternFly draws the login card's background/shadow on .pf-v5-c-login__main itself via these two custom properties - override the tokens rather than fighting the selector. */ .pf-v5-c-login__main { --pf-v5-c-login__main--BackgroundColor: rgba(255, 255, 255, 0.92); --pf-v5-c-login__main--BoxShadow: 0 20px 60px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); border-radius: 16px; overflow: hidden; } @media (prefers-color-scheme: dark) { .pf-v5-c-login__main { --pf-v5-c-login__main--BackgroundColor: rgba(15, 23, 42, 0.82); } } /* #kc-login is the actual submit button's id - safe to target directly without fighting PatternFly's own hover/focus custom-property chain. Shares the same dynamic accent as the card's top border, so the two change together as bg-picker.js recomputes it per background image. */ #kc-login { background-color: var(--keycloak-card-top-color, #4338ca); border-radius: 8px; transition: filter 0.2s ease; } #kc-login:hover, #kc-login:focus { filter: brightness(0.85); } .pf-v5-c-form-control, .pf-v5-c-form-control input { border-radius: 8px; } .pf-v5-c-input-group .pf-v5-c-form-control { border-radius: 8px 0 0 8px; } .pf-v5-c-input-group .pf-v5-c-button.pf-m-control { border-radius: 0 8px 8px 0; }