Enhanced the IdP listing (WAYF page)

CHANGELOG.md

@@ -8,6 +8,10 @@ For Keycloak upstream changelog please see https://www.keycloak.org/docs/latest/
   Full Keycloak upstream jira issue can be shown if filtered by Fix version. For example [Keycloak jira issue for 15.0.2 version](https://issues.redhat.com/browse/KEYCLOAK-19161?jql=project%20%3D%20keycloak%20and%20fixVersion%20%3D%2015.0.2)
 
 
+## [v4.1.1] - 2022-07-20
+### Changed
+- Enhanced the login page IdP listing (css changes)
+
 ## [v4.1.0] - 2022-06-02
 ### Changed
 - Searches also for QUARKUS_HOME as an alternative for app's base path

README.md

@@ -140,6 +140,7 @@ This theme is compatible with the custom releases of keycloak which can be found
 | v4.0.0        | v16.1.0-rc1.0.1 + |
 | v4.0.3        | v16.1.0-rc1.0.1 + |
 | v4.1.0        | v18.0.0-rc1.0.1 + |
+| v4.1.1        | v18.0.0-rc1.0.1 + |
 
 If you are using keycloak 16.1.0-X.X.X versions, you **should definitely** use the theme version 4.0.3 which includes a critical fix. 
 

pom.xml

@@ -6,7 +6,7 @@
 
     <groupId>org.synthesys.plus</groupId>
     <artifactId>keycloak-theme-vanilla</artifactId>
-    <version>1.0.0-SNAPSHOT</version>
+    <version>4.1.1</version>
     <packaging>jar</packaging>
 
     <properties>

src/main/resources/theme/rciam/login/resources/css/styles.css

@@ -57,4 +57,47 @@
 
 .hidden {
     display: none;
+}
+
+/* Enhance the listing of IdPs (scrollbar, borderless items) */
+
+input[type=text] {
+  padding: 5px 15px;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+
+.card-pf {
+    border-radius: 10px;
+}
+
+#kc-providers-list {
+    scrollbar-width: thin;
+}
+
+#kc-providers-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+#kc-providers-list::-webkit-scrollbar-track {
+    background-color: white;
+}
+
+#kc-providers-list::-webkit-scrollbar-thumb {
+    #background-color: rgb(179, 204, 255);
+    background-color: rgb(204, 204, 204);
+    border-radius:5px;
+}
+
+.pf-c-button.pf-m-control {
+    #border: solid 0px;
+    border: 0px;
+    border-color: transparent !important;
+}
+
+.pf-c-button.pf-m-control::after {
+    --pf-c-button--BorderWidth: 0px !important;
+    --pf-c-button--BorderColor: transparent !important;
 }