OR
diff --git a/renku_theme/login/resources/css/login.css b/renku_theme/login/resources/css/login.css
index ec1c652..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;
@@ -196,31 +204,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;
@@ -297,6 +280,7 @@ div#kc-social-providers ul {
display: flex;
flex-direction: column;
align-items: center;
+ gap: 20px;
}
div#kc-social-providers ul a {
@@ -306,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;
@@ -313,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;
@@ -325,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;
}
@@ -338,6 +340,7 @@ div#kc-social-providers a:active {
.login-section-title-providers {
margin-bottom: 40px;
}
+
.login-section-title-form {
margin-bottom: 35px;
}
@@ -384,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 9fcab65..3e8ce2c 100644
--- a/renku_theme/login/resources/css/styles.css
+++ b/renku_theme/login/resources/css/styles.css
@@ -1,17 +1,43 @@
-.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
+}
+
+/* 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;
+}
diff --git a/renku_theme/login/theme.properties b/renku_theme/login/theme.properties
index 0a23b50..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=node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.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