Updates to login form styles
This commit is contained in:
Stian Thorgersen
parent
87aaaf0b06
commit
c0f49763f1
4 changed files with 121 additions and 55 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 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>
|
||||
</div>
|
||||
|
||||
<#if displayInfo>
|
||||
<div id="kc-info" class="${properties.kcInfoAreaClass!}">
|
||||
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
|
||||
<#nested "info">
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
position: inherit;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
float: none;
|
||||
}
|
||||
|
||||
#kc-social-providers {
|
||||
margin-top: 30px;
|
||||
#kc-container-wrapper {
|
||||
position: inherit;
|
||||
float: none;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
kcInfoAreaClass=col-sm-4 col-md-4 col-lg-6 details
|
||||
Loading…
Reference in a new issue