kriss/keycloak-vilanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix login theme layering, restyle login card, add photo rotation with dynamic accent

Browse Source 
- theme.properties: keep loading the keycloak.v2 parent stylesheet (previously
  shadowed by our same-named css/styles.css, so the base card grid/layout
  never loaded); our overrides now live in resources/css/custom.css.
- custom.css: rewritten against the real rendered markup/PatternFly tokens
  (#keycloak-bg, .pf-v5-c-login__main, #kc-login) instead of guessed
  selectors, with a frosted-glass card, dark-mode variant, and rounded
  inputs/buttons.
- bg-picker.js: picks the background photo deterministically by epoch-day
  from an IMAGES list (add filenames as new photos are uploaded), and
  derives the card's accent color (top border + primary button) from the
  chosen photo via saturation-weighted dominant-hue extraction.
- dev/: local static preview (real login markup snapshot + vendored
  Font Awesome glyph) to iterate on the theme without redeploying.
This commit is contained in:
Kriss Vila
2026-07-24 19:11:13 +02:00
parent 8beecff42d
commit 0c3db46b89
6 changed files with 360 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
assets/login/resources/css/custom.css Normal file
View File

@@ -0,0 +1,70 @@
/* 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;
}

39
assets/login/resources/css/styles.css
View File

@@ -1,39 +0,0 @@
body {
background: linear-gradient(rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.45)),
url("../img/background.svg") center center / cover no-repeat fixed;
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* Keycloak's built-in theme markup/classes vary by version, so several
selectors are listed as best-effort hooks for the login card - inspect
the rendered page and adjust whichever one actually matches. */
.login-pf-page .card-pf,
#kc-form-wrapper,
.pf-c-login__main-body,
.pf-v5-c-login__main-body {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
border-radius: 16px;
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
#kc-header-wrapper,
.pf-c-login__header,
.pf-v5-c-login__header {
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.btn-primary,
.pf-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary {
border-radius: 8px;
transition: background-color 0.2s ease;
}
input.form-control,
.pf-c-form-control,
.pf-v5-c-form-control {
border-radius: 8px;
}