KEYCLOAK-2157

Language drop-down is not obvious

forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css

@@ -9,60 +9,58 @@
     color: #333333;
 }
 
-.kc-dropdown{
-    position: relative;
-    z-index: 9999;
-}
-.kc-dropdown > a{
+#kc-locale ul {
+    display: none;
     position: absolute;
-    right: 0px;
-    display:block;
-    padding: 11px 10px 12px;
-    line-height: 12px;
-    font-size: 12px;
-    color: #fff !important;
-    text-decoration: none;
+    background-color: #fff;
+    list-style: none;
+    right: 20px;
+    top: 30px;
+    width: 200px;
+    padding: 2px;
 }
-.kc-dropdown > a::after{
-    content: "\2c5";
-    margin-left: 4px;
+
+#kc-locale:hover ul {
+    display: block;
+    margin: 0;
 }
-.kc-dropdown:hover > a{
-    background-color: rgba(0,0,0,0.2);
-}
-.kc-dropdown ul li a{
+
+#kc-locale ul li a {
+    display: block;
     padding: 1px 11px;
-    font-size: 12px;
     color: #000 !important;
     border: 1px solid #fff;
     text-decoration: none;
     display:block;
     line-height: 20px;
 }
-.kc-dropdown ul li a:hover{
+
+#kc-locale ul li a:hover {
     color: #4d5258;
     background-color: #d4edfa;
     border-color: #b3d3e7;
 }
-.kc-dropdown ul{
-    position: absolute;
-    right: 0px;
-    top: 35px;
-    z-index: 2000;
-    list-style:none;
-    display:none;
-    padding: 5px 0px;
-    margin: 0px;
-    background-color: #fff !important;
-    border: 1px solid #b6b6b6;
-    border-radius: 1px;
-    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-    background-clip: padding-box;
-    min-width: 100px;
+
+#kc-locale-dropdown a {
+    color: #fff;
 }
-.kc-dropdown:hover ul{
-    display:block;
+
+#kc-locale-dropdown a:hover {
+    text-decoration: none;
+}
+
+a#kc-current-locale-link {
+    display: block;
+    padding: 5px;
+}
+
+a#kc-current-locale-link:hover {
+    background-color: rgba(0,0,0,0.2);
+}
+
+a#kc-current-locale-link::after {
+    content: "\2c5";
+    margin-left: 4px;
 }
 
 .login-pf .container {
@@ -244,6 +242,14 @@ ol#kc-totp-settings li:first-of-type {
     .login-pf .container {
         padding-right: 80px;
     }
+
+    #kc-locale {
+        position: relative;
+        width: 200px;
+        left: -230px;
+        text-align: right;
+        z-index: 9999;
+    }
 }
 
 @media (max-width: 767px) {
@@ -282,6 +288,15 @@ ol#kc-totp-settings li:first-of-type {
         padding-top: 15px;
         padding-bottom: 15px;
     }
+
+    #kc-locale {
+        position: absolute;
+        width: 200px;
+        top: 10px;
+        right: 0px;
+        text-align: right;
+        z-index: 9999;
+    }
 }
 
 @media (max-height: 500px) {

forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties

@@ -11,7 +11,7 @@ kcLogoLink=http://www.keycloak.org
 kcContentClass=col-sm-12 col-md-12 col-lg-12 container
 kcContentWrapperClass=row
 
-kcHeaderClass=col-xs-12 col-sm-7 col-md-6 col-lg-5
+kcHeaderClass=col-xs-12 col-sm-8 col-md-8 col-lg-7
 kcFeedbackAreaClass=col-md-12
 kcLocaleClass=col-xs-12 col-sm-1
 kcAlertIconClasserror=pficon pficon-error-circle-o