Details
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login.ftl b/forms/common-themes/src/main/resources/theme/login/base/login.ftl
index b609784..eed0257 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login.ftl
@@ -36,9 +36,6 @@
</div>
</#if>
<div class="${properties.kcFormOptionsWrapperClass!}">
- <#if realm.registrationAllowed>
- <span>${rb.noAccount} <a href="${url.registrationUrl}">${rb.register}</a></span>
- </#if>
<#if realm.resetPasswordAllowed>
<span>${rb.loginForgot} <a href="${url.loginPasswordResetUrl}">${rb.password}</a>?</span>
</#if>
@@ -54,6 +51,12 @@
</div>
</form>
<#elseif section = "info" >
+ <#if realm.registrationAllowed>
+ <div id="kc-registration">
+ <span>${rb.noAccount} <a href="${url.registrationUrl}">${rb.register}</a></span>
+ </div>
+ </#if>
+
<div id="kc-social-providers">
<ul>
<#list social.providers as p>
diff --git a/forms/common-themes/src/main/resources/theme/login/base/template.ftl b/forms/common-themes/src/main/resources/theme/login/base/template.ftl
index a53b4d4..49c0246 100644
--- a/forms/common-themes/src/main/resources/theme/login/base/template.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/template.ftl
@@ -4,6 +4,11 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <#if properties.meta?has_content>
+ <#list properties.meta?split(' ') as meta>
+ <meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
+ </#list>
+ </#if>
<title><#nested "title"></title>
<link rel="icon" href="${url.resourcesPath}/img/favicon.ico" />
<#if properties.styles?has_content>
@@ -19,7 +24,7 @@
</head>
<body class="${properties.kcBodyClass!}">
- <dv id="kc-logo"></dv>
+ <div id="kc-logo"><div id="kc-logo-wrapper"></div></div>
<div id="kc-container" class="${properties.kcContainerClass!}">
<div id="kc-container-wrapper" class="${properties.kcContainerWrapperClass!}">
@@ -31,24 +36,28 @@
<#if displayMessage && message?has_content>
<div id="kc-feedback" class="feedback-${message.type} ${properties.kcFeedBackClass!}">
<div id="kc-feedback-wrapper">
- <span>${message.summary}</span>
+ <span class="kc-feedback-text">${message.summary}</span>
</div>
</div>
</#if>
- <div id="kc-form" class="${properties.kcFormAreaClass!}">
- <div id="kc-form-wrapper" class="${properties.kcFormAreaWrapperClass!}">
- <#nested "form">
- </div>
- </div>
-
- <#if displayInfo>
- <div id="kc-info" class="${properties.kcInfoAreaClass!}">
- <div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
- <#nested "info">
+ <div id="kc-content" class="${properties.kcContentClass!}">
+ <div id="kc-content-wrapper" class="${properties.kcContentWrapperClass!}">
+ <div id="kc-form" class="${properties.kcFormAreaClass!}">
+ <div id="kc-form-wrapper" class="${properties.kcFormAreaWrapperClass!}">
+ <#nested "form">
+ </div>
</div>
+
+ <#if displayInfo>
+ <div id="kc-info" class="${properties.kcInfoAreaClass!}">
+ <div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
+ <#nested "info">
+ </div>
+ </div>
+ </#if>
</div>
- </#if>
+ </div>
</div>
</div>
diff --git a/forms/common-themes/src/main/resources/theme/login/patternfly/resources/css/login.css b/forms/common-themes/src/main/resources/theme/login/patternfly/resources/css/login.css
index 6851d6c..f033fb5 100644
--- a/forms/common-themes/src/main/resources/theme/login/patternfly/resources/css/login.css
+++ b/forms/common-themes/src/main/resources/theme/login/patternfly/resources/css/login.css
@@ -1,20 +1,43 @@
+.login-pf .container {
+ padding-top: 40px;
+}
+
#kc-logo {
+ width: 100%;
+}
+
+#kc-logo-wrapper {
background-image: url("../img/keycloak-logo.png");
background-repeat: no-repeat;
- position: absolute;
- top: 50px;
- right: 50px;
+ background-position: top right;
+
height: 37px;
- width: 150px;
+
+ margin: 50px;
+}
+
+#kc-header {
+ overflow: visible;
+ padding-left: 80px;
+ white-space: nowrap;
}
#kc-header-wrapper {
font-size: 26px;
- height: 18px;
text-transform: uppercase;
- display: block;
+/* display: block;
+ position: relative;
+ top: -80px;*/
+}
+
+#kc-container-wrapper {
+ bottom: 13%;
+ position: absolute;
+ width: 100%;
+}
+
+#kc-content {
position: relative;
- top: -80px;
}
#kc-form-options span {
@@ -27,18 +50,18 @@
margin-bottom: 10px;
}
+#kc-feedback-wrapper {
+ display: inline-block;
+ width: auto;
-#kc-feedback {
background-position: left bottom;
background-repeat: no-repeat;
- padding-bottom: 21px;
+ padding-bottom: 10px;
- position: absolute;
- top: -40px;
- white-space: nowrap;
}
#kc-feedback span {
+ display: block;
padding: 0.90909090909091em 3.63636363636364em;
border-style: solid;
border-width: 1px 1px 0px 1px;
@@ -52,7 +75,7 @@
margin-bottom: 0;
}
-.feedback-error {
+.feedback-error #kc-feedback-wrapper {
background-image: url(../img/feedback-error-arrow-down.png);
}
.feedback-error span {
@@ -61,7 +84,7 @@
background-color: #f8e7e7;
}
-.feedback-success {
+.feedback-success #kc-feedback-wrapper {
background-image: url(../img/feedback-success-arrow-down.png);
}
.feedback-success span {
@@ -70,7 +93,7 @@
background-color: #e4f1e1;
}
-.feedback-warning {
+.feedback-warning #kc-feedback-wrapper {
background-image: url(../img/feedback-warning-arrow-down.png);
}
.feedback-warning span {
@@ -79,6 +102,10 @@
background-color: #fef1e9;
}
+#kc-registration {
+ margin-bottom: 15px;
+}
+
/* TOTP */
ol#kc-totp-settings {
@@ -136,14 +163,17 @@ ol#kc-totp-settings li:first-of-type {
#kc-social-providers li {
display: block;
- margin-top: 1em;
- width: 130px;
+ margin-top: 5px;
}
#kc-social-providers li:first-of-type {
margin-top: 0;
}
+.zocial {
+ width: 125px;
+}
+
.zocial.facebook,
.zocial.github,
.zocial.google,
@@ -173,26 +203,49 @@ ol#kc-totp-settings li:first-of-type {
}
@media (max-width: 767px) {
- #kc-logo {
- position: inherit;
- display: inline-block;
+ #kc-logo-wrapper {
+ background-image: url("../img/keycloak-logo.png");
+ background-repeat: no-repeat;
+ background-position: top center;
+
+ height: 37px;
+
margin: 20px;
- float: right;
+ }
+
+ #kc-header {
+ padding-left: 40px;
+ padding-right: 40px;
+ white-space: normal;
+ float: none;
}
#kc-feedback {
+ padding-left: 40px;
+ padding-right: 40px;
+ float: none;
+ }
+
+ #kc-container-wrapper {
position: inherit;
- display: inline-block;
- margin-left: 20px;
+ float: none;
}
- #kc-social-providers {
- margin-top: 30px;
+ #kc-form {
+ padding-left: 40px;
+ padding-right: 40px;
+ }
+
+ #kc-info-wrapper {
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ margin-top: 20px;
+ padding-top: 20px;
+ padding-left: 20px;
+ padding-right: 40px;
}
#kc-social-providers li {
- float: left;
- margin-right: 10px;
- margin-top: 0;
+ display: inline-block;
+ margin-right: 5px;
}
}
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/patternfly/theme.properties b/forms/common-themes/src/main/resources/theme/login/patternfly/theme.properties
index 4b46ae1..de83191 100644
--- a/forms/common-themes/src/main/resources/theme/login/patternfly/theme.properties
+++ b/forms/common-themes/src/main/resources/theme/login/patternfly/theme.properties
@@ -1,24 +1,25 @@
parent=base
styles=lib/patternfly/css/patternfly.css lib/zocial/zocial.css css/login.css
+meta=viewport==width=device-width,initial-scale=1
kcHtmlClass=login-pf
-kcContainerClass=container
-kcContainerWrapperClass=row
+kcContentClass=col-sm-12 col-md-12 col-lg-12 container
+kcContentWrapperClass=row
-kcHeaderClass=col-sm-12
+kcHeaderClass=col-xs-12 col-sm-7 col-md-6 col-lg-5
-kcFeedBackClass=col-sm-offset-2 col-md-offset-4
+kcFeedBackClass=col-xs-12 col-sm-5 col-md-6 col-lg-7
-kcFormAreaClass=col-sm-7 col-md-6 col-lg-5 login
+kcFormAreaClass=col-sm-8 col-md-8 col-lg-6 login
kcFormClass=form-horizontal
kcFormGroupClass=form-group
kcLabelClass=control-label
-kcLabelWrapperClass=col-sm-4 col-md-4 col-lg-3
+kcLabelWrapperClass=col-xs-12 col-sm-12 col-md-4 col-lg-3
kcInputClass=form-control
-kcInputWrapperClass=col-sm-8 col-md-8 col-lg-9
-kcFormOptionsClass=col-sm-offset-4 col-sm-4 col-md-offset-4 col-md-4 col-lg-offset-3 col-lg-5
-kcFormButtonsClass=col-sm-4 col-md-4 col-lg-4 submit
+kcInputWrapperClass=col-xs-12 col-sm-12 col-md-8 col-lg-9
+kcFormOptionsClass=col-xs-5 col-sm-5 col-md-offset-4 col-md-4 col-lg-offset-3 col-lg-5
+kcFormButtonsClass=col-xs-7 col-sm-7 col-md-4 col-lg-4 submit
-kcInfoAreaClass=col-sm-5 col-md-6 col-lg-7 details
\ No newline at end of file
+kcInfoAreaClass=col-sm-4 col-md-4 col-lg-6 details
\ No newline at end of file
