From b7c45c85bdff7d4be579808e109c08d64ea0d157 Mon Sep 17 00:00:00 2001 From: Tasko Olevski <16360283+olevski@users.noreply.github.com> Date: Wed, 24 Jun 2026 15:56:36 +0200 Subject: [PATCH 1/3] fix: update for keycloak version 26.4.0 --- Dockerfile.dev | 2 +- README.md | 2 +- renku_theme/login/resources/css/login.css | 25 ---------------------- renku_theme/login/resources/css/styles.css | 16 ++++++++++---- renku_theme/login/theme.properties | 2 +- 5 files changed, 15 insertions(+), 32 deletions(-) diff --git a/Dockerfile.dev b/Dockerfile.dev index df5c6a5..f71cd63 100644 --- a/Dockerfile.dev +++ b/Dockerfile.dev @@ -1,4 +1,4 @@ -FROM keycloak/keycloak:25.0.6 +FROM keycloak/keycloak:26.4.0 # Turn of caching in the configuration so we can modify the theme and refresh to see changes COPY ./renku-theme-dev/standalone.xml /opt/jboss/keycloak/standalone/configuration/standalone.xml diff --git a/README.md b/README.md index e2e7dba..815f447 100644 --- a/README.md +++ b/README.md @@ -88,4 +88,4 @@ In the renku chart, change the `values.yaml` to reference the image in the `keyc To understand the structure of the content, you may need to consult the source code for the theme. -Download the source for the release that is used (https://github.com/keycloak/keycloak/releases/tag/25.0.6) and then look in the `themes/src/main/resources/theme` folder for the `base` and `keycloak` templates. Official theme examples are found in `examples/themes/src/main/resources/theme` folder. +Download the source for the release that is used (https://github.com/keycloak/keycloak/releases/tag/26.4.0) and then look in the `themes/src/main/resources/theme` folder for the `base` and `keycloak` templates. Official theme examples are found in `examples/themes/src/main/resources/theme` folder. diff --git a/renku_theme/login/resources/css/login.css b/renku_theme/login/resources/css/login.css index ec1c652..d60b2bc 100644 --- a/renku_theme/login/resources/css/login.css +++ b/renku_theme/login/resources/css/login.css @@ -196,31 +196,6 @@ div#kc-form-options div { margin-right: 20px; } -div#kc-feedback { - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); - position: fixed; - top: 0; - left: 0; - width: 100%; - text-align: center; -} - -div#kc-feedback-wrapper { - padding: 1em; -} - -div.feedback-success { - background-color: rgba(155, 155, 255, 0.1); -} - -div.feedback-warning { - background-color: rgba(255, 175, 0, 0.1); -} - -div.feedback-error { - background-color: rgba(255, 0, 0, 0.1); -} - span#input-error { color: hsl(342, 89%, 45%); display: block; diff --git a/renku_theme/login/resources/css/styles.css b/renku_theme/login/resources/css/styles.css index 9fcab65..c16d38a 100644 --- a/renku_theme/login/resources/css/styles.css +++ b/renku_theme/login/resources/css/styles.css @@ -1,17 +1,25 @@ -.alert.alert-success { +/* + * Alert / feedback message styling. + * + * As of Keycloak 26 the login template renders messages as a PatternFly v4 + * alert:
. + * Target the pf-c-alert + pf-m-* classes (the old `.alert.alert-*` compound + * selectors no longer match, since Keycloak emits `alert-` as a single token). + */ +.pf-c-alert.pf-m-success { background-color: #65E677; border-color: #65E677; } -.alert.alert-error { +.pf-c-alert.pf-m-danger { background-color: #E04B43; border-color: #E04B43; color: #F5F5F5; } -.alert.alert-warning { +.pf-c-alert.pf-m-warning { background-color: #FFD91A; border-color: #FFD91A; } -.alert.alert-info { +.pf-c-alert.pf-m-info { background-color: #5994B2; border-color: #5994B2; } \ No newline at end of file diff --git a/renku_theme/login/theme.properties b/renku_theme/login/theme.properties index 0a23b50..30d398d 100644 --- a/renku_theme/login/theme.properties +++ b/renku_theme/login/theme.properties @@ -17,7 +17,7 @@ parent=keycloak styles=css/fonts.css css/styles.css css/login.css fonts/inter.css -stylesCommon=node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.css +stylesCommon=stylesCommon=stylesCommon=vendor/patternfly-v4/patternfly.min.css vendor/patternfly-v3/css/patternfly.min.css vendor/patternfly-v3/css/patternfly-additions.min.css lib/pficon/pficon.css kcLogoLink=https://renkulab.io From 4db6dd31ac24be200e821b2cc69c7354354d0bfc Mon Sep 17 00:00:00 2001 From: Tasko Olevski <16360283+olevski@users.noreply.github.com> Date: Wed, 24 Jun 2026 15:57:24 +0200 Subject: [PATCH 2/3] squashme: minor fix --- renku_theme/login/theme.properties | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/renku_theme/login/theme.properties b/renku_theme/login/theme.properties index 30d398d..f8eab8d 100644 --- a/renku_theme/login/theme.properties +++ b/renku_theme/login/theme.properties @@ -17,7 +17,7 @@ parent=keycloak styles=css/fonts.css css/styles.css css/login.css fonts/inter.css -stylesCommon=stylesCommon=stylesCommon=vendor/patternfly-v4/patternfly.min.css vendor/patternfly-v3/css/patternfly.min.css vendor/patternfly-v3/css/patternfly-additions.min.css lib/pficon/pficon.css +stylesCommon=vendor/patternfly-v4/patternfly.min.css vendor/patternfly-v3/css/patternfly.min.css vendor/patternfly-v3/css/patternfly-additions.min.css lib/pficon/pficon.css kcLogoLink=https://renkulab.io From f746f31248af1d0bb5bfbd3e552c8ce47e1c3cf1 Mon Sep 17 00:00:00 2001 From: Tasko Olevski <16360283+olevski@users.noreply.github.com> Date: Wed, 24 Jun 2026 16:59:44 +0200 Subject: [PATCH 3/3] squashme: minor fixes --- renku_theme/login/login.ftl | 4 +-- renku_theme/login/resources/css/login.css | 33 ++++++++++++++++++++++ renku_theme/login/resources/css/styles.css | 20 ++++++++++++- 3 files changed, 54 insertions(+), 3 deletions(-) diff --git a/renku_theme/login/login.ftl b/renku_theme/login/login.ftl index 7bfadea..2e81049 100755 --- a/renku_theme/login/login.ftl +++ b/renku_theme/login/login.ftl @@ -13,7 +13,7 @@
<#elseif section = "socialProviders" > - <#if realm.password && social.providers??> + <#if realm.password && social?? && social.providers?has_content>

${msg("identity-provider-login-label")}

- <#if realm.password && social.providers??> + <#if realm.password && social?? && social.providers?has_content>
OR diff --git a/renku_theme/login/resources/css/login.css b/renku_theme/login/resources/css/login.css index d60b2bc..dfffc45 100644 --- a/renku_theme/login/resources/css/login.css +++ b/renku_theme/login/resources/css/login.css @@ -150,9 +150,16 @@ input[type="password"]:hover { background-color: #f5f5f5; } +.pf-c-button.pf-m-primary, input[type="submit"] { font-family: var(--inter-font); + /* Override PatternFly v4 primary-button colors (default is light blue) */ + --pf-c-button--m-primary--BackgroundColor: #07182b; + --pf-c-button--m-primary--hover--BackgroundColor: #007a6c; + --pf-c-button--m-primary--active--BackgroundColor: #009568; + --pf-c-button--m-primary--focus--BackgroundColor: #07182b; + background-color: #07182b; color: #009568; border: 1px solid #009568; @@ -165,6 +172,7 @@ input[type="submit"] { width: 300px; } +.pf-c-button.pf-m-primary:hover, input[type="submit"]:hover { background: #007a6c; color: #ffffff; @@ -272,6 +280,7 @@ div#kc-social-providers ul { display: flex; flex-direction: column; align-items: center; + gap: 20px; } div#kc-social-providers ul a { @@ -281,6 +290,7 @@ div#kc-social-providers ul a { width: 300px; } +div#kc-social-providers a.pf-c-button.pf-m-control, div#kc-social-providers a { font-family: var(--inter-font); text-decoration: none; @@ -288,6 +298,14 @@ div#kc-social-providers a { box-shadow: none; text-shadow: none; + /* Override PatternFly v4 pf-m-control variant: light background + ::after border */ + --pf-c-button--m-control--BackgroundColor: #07182b; + --pf-c-button--m-control--after--BorderColor: transparent; + --pf-c-button--m-control--after--BorderTopColor: transparent; + --pf-c-button--m-control--after--BorderRightColor: transparent; + --pf-c-button--m-control--after--BorderBottomColor: transparent; + --pf-c-button--m-control--after--BorderLeftColor: transparent; + background: none; background-color: #07182b; color: #009568; @@ -300,12 +318,21 @@ div#kc-social-providers a { padding: 10px; } +div#kc-social-providers a.pf-c-button.pf-m-control::after, +div#kc-social-providers a::after { + border: none; +} + +div#kc-social-providers a.pf-c-button.pf-m-control:hover, div#kc-social-providers a:hover { + --pf-c-button--m-control--hover--BackgroundColor: #007a6c; background: #007a6c; color: #ffffff; } +div#kc-social-providers a.pf-c-button.pf-m-control:active, div#kc-social-providers a:active { + --pf-c-button--m-control--active--BackgroundColor: #009568; background: #009568; color: #ffffff; } @@ -313,6 +340,7 @@ div#kc-social-providers a:active { .login-section-title-providers { margin-bottom: 40px; } + .login-section-title-form { margin-bottom: 35px; } @@ -359,21 +387,26 @@ div#renku-login-terms-text { align-items: center; flex-direction: column-reverse; } + #login-separator { flex-direction: row; margin: 20px; } + #login-separator .separator { width: 100px; height: 1px; } + div#kc-social-providers ul { margin-bottom: 0; gap: 40px; } + div#kc-social-providers ul a { margin: 0; } + div#renku-login-terms-icon { display: none; } diff --git a/renku_theme/login/resources/css/styles.css b/renku_theme/login/resources/css/styles.css index c16d38a..3e8ce2c 100644 --- a/renku_theme/login/resources/css/styles.css +++ b/renku_theme/login/resources/css/styles.css @@ -10,16 +10,34 @@ background-color: #65E677; border-color: #65E677; } + .pf-c-alert.pf-m-danger { background-color: #E04B43; border-color: #E04B43; color: #F5F5F5; } + .pf-c-alert.pf-m-warning { background-color: #FFD91A; border-color: #FFD91A; } + .pf-c-alert.pf-m-info { background-color: #5994B2; border-color: #5994B2; -} \ No newline at end of file +} + +/* Text + icon color per alert type (override PatternFly's own title color) */ +.pf-c-alert.pf-m-danger .pf-c-alert__title, +.pf-c-alert.pf-m-danger .pf-c-alert__icon, +.pf-c-alert.pf-m-info .pf-c-alert__title, +.pf-c-alert.pf-m-info .pf-c-alert__icon { + color: #F5F5F5; +} + +.pf-c-alert.pf-m-success .pf-c-alert__title, +.pf-c-alert.pf-m-success .pf-c-alert__icon, +.pf-c-alert.pf-m-warning .pf-c-alert__title, +.pf-c-alert.pf-m-warning .pf-c-alert__icon { + color: #07182b; +}