71 lines
2.4 KiB
CSS
71 lines
2.4 KiB
CSS
|
/* 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: <body id="keycloak-bg">.
|
||
|
|
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 <html> 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;
|
||
|
|
}
|