libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

KEYCLOAK-282 Login forms HTML refactoring

Browse source
This commit is contained in:
Viliam Rockai 2014-02-04 15:52:06 +01:00
parent 2ad873a87f
commit 1cebe99774
15 changed files with 189 additions and 267 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
forms/common-themes/src/main/resources/theme/login/base/error.ftl
View file

@ -2,22 +2,15 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass=""; section> <@layout.registrationLayout bodyClass=""; section>
<#if section = "title"> <#if section = "title">
We're sorry... We're sorry...
<#elseif section = "header"> <#elseif section = "header">
We're <strong>sorry</strong> ... We're <strong>sorry</strong> ...
<#elseif section = "form"> <#elseif section = "form">
<div id="kc-error-message">
<p class="instruction">Something happened and we could not process your request.</p> <p class="instruction">Something happened and we could not process your request.</p>
<p id="error-summary" class="instruction second">${message.summary}</p> <p id="error-summary" class="instruction second">${message.summary}</p>
<#elseif section = "info" >
<div id="info">
</div> </div>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

47
forms/common-themes/src/main/resources/theme/login/base/login-config-totp.ftl
View file

@ -1,38 +1,31 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass=""; section> <@layout.registrationLayout bodyClass=""; section>
<#if section = "title"> <#if section = "title">
Google Authenticator Setup Google Authenticator Setup
<#elseif section = "header"> <#elseif section = "header">
Google Authenticator Setup Google Authenticator Setup
<#elseif section = "form"> <#elseif section = "form">
<ol id="kc-totp-settings">
<div id="form"> <li>
<ol> <p><strong>1</strong>Download the <a href="http://code.google.com/p/google-authenticator/" target="_blank">Google Authenticator app</a> in your device.</p>
<li> </li>
<p><strong>1</strong>Download the <a href="http://code.google.com/p/google-authenticator/" target="_blank">Google Authenticator app</a> in your device.</p> <li class="clearfix">
</li> <p><strong>2</strong>Create an account in Google Authenticator and scan the barcode or the provided key below.</p>
<li class="clearfix"> <img src="${totp.totpSecretQrCodeUrl}" alt="Figure: Barcode">
<p><strong>2</strong>Create an account in Google Authenticator and scan the barcode or the provided key below.</p> <span class="code">${totp.totpSecretEncoded}</span>
<img src="${totp.totpSecretQrCodeUrl}" alt="Figure: Barcode"> </li>
<span class="code">${totp.totpSecretEncoded}</span> <li class="clearfix">
</li> <p><strong>3</strong>Enter the one-time-password provided by Google Authenticator below and click Submit to finish the setup.</p>
<li class="clearfix"> <form action="${url.loginUpdateTotpUrl}" method="post">
<p><strong>3</strong>Enter the one-time-password provided by Google Authenticator below and click Submit to finish the setup.</p> <div class="field-wrapper">
<form action="${url.loginUpdateTotpUrl}" method="post"> <label for="otp" class="two-lines">One-time-password</label><input type="text" id="totp" name="totp" />
<div> <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
<label for="otp" class="two-lines">One-time-password</label><input type="text" id="totp" name="totp" /> </div>
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" /> <input type="submit" class="btn-primary" value="Submit" />
</div> </form>
<input type="submit" class="btn-primary" value="Submit" /> </li>
</form> </ol>
</li>
</ol>
</div>
<#elseif section = "info" >
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

12
forms/common-themes/src/main/resources/theme/login/base/login-oauth-grant.ftl
View file

@ -2,17 +2,15 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass="oauth"; section> <@layout.registrationLayout bodyClass="oauth"; section>
<#if section = "title"> <#if section = "title">
OAuth Grant OAuth Grant
<#elseif section = "header"> <#elseif section = "header">
<strong>Keycloak</strong> Central Login <strong>Keycloak</strong> Central Login
<#elseif section = "form"> <#elseif section = "form">
<div class="content-area"> <div id="kc-oauth" class="content-area">
<p class="instruction"><strong>${oauth.client}</strong> requests access to:</p> <p class="instruction"><strong>${oauth.client}</strong> requests access to:</p>
<ul> <ul id="kc-oauth-list">
<#list oauth.realmRolesRequested as role> <#list oauth.realmRolesRequested as role>
<li> <li>
<span><#if role.description??>${role.description}<#else>${role.name}</#if></span> <span><#if role.description??>${role.description}<#else>${role.name}</#if></span>
@ -36,11 +34,5 @@
<input type="submit" class="btn-secondary" name="cancel" value="Cancel"> <input type="submit" class="btn-secondary" name="cancel" value="Cancel">
</form> </form>
</div> </div>
<#elseif section = "info" >
<div id="info">
</div>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

14
forms/common-themes/src/main/resources/theme/login/base/login-reset-password.ftl
View file

@ -1,25 +1,23 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass=""; section> <@layout.registrationLayout bodyClass=""; section>
<#if section = "title"> <#if section = "title">
${rb.emailForgotHeader} ${rb.emailForgotHeader}
<#elseif section = "header"> <#elseif section = "header">
${rb.emailForgotHeader} ${rb.emailForgotHeader}
<#elseif section = "form"> <#elseif section = "form">
<div id="kc-reset-password">
<div id="form">
<p class="instruction">${rb.emailInstruction}</p> <p class="instruction">${rb.emailInstruction}</p>
<form action="${url.loginPasswordResetUrl}" method="post"> <form action="${url.loginPasswordResetUrl}" method="post">
<div> <div class="field-wrapper">
<label for="email">${rb.email}</label><input type="text" id="email" name="email" /> <label for="email">${rb.email}</label><input type="text" id="email" name="email" />
</div> </div>
<input class="btn-primary" type="submit" value="Submit" /> <input class="btn-primary" type="submit" value="Submit" />
</form> </form>
</div> </div>
<#elseif section = "info" > <#elseif section = "info" >
<p><a href="${url.loginUrl}">&laquo; Back to Login</a></p> <p><a href="${url.loginUrl}">&laquo; Back to Login</a></p>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

11
forms/common-themes/src/main/resources/theme/login/base/login-totp.ftl
View file

@ -2,20 +2,17 @@
<@layout.registrationLayout bodyClass=""; section> <@layout.registrationLayout bodyClass=""; section>
<#if section = "title"> <#if section = "title">
Log in to ${realm.name} Log in to ${realm.name}
<#elseif section = "header"> <#elseif section = "header">
Log in to <strong>${realm.name}</strong> Log in to <strong>${realm.name}</strong>
<#elseif section = "form"> <#elseif section = "form">
<form id="kc-totp-login-form" action="${url.loginAction}" method="post">
<form action="${url.loginAction}" method="post">
<input id="username" name="username" value="${login.username!''}" type="hidden" /> <input id="username" name="username" value="${login.username!''}" type="hidden" />
<input id="password" name="password" value="${login.password!''}" type="hidden" /> <input id="password" name="password" value="${login.password!''}" type="hidden" />
<div> <div class="field-wrapper">
<label for="totp">${rb.authenticatorCode}</label><input id="totp" name="totp" type="text" /> <label for="totp">${rb.authenticatorCode}</label><input id="totp" name="totp" type="text" />
</div> </div>
@ -28,10 +25,10 @@
</form> </form>
<#elseif section = "info"> <#elseif section = "info">
<#if realm.registrationAllowed> <#if realm.registrationAllowed>
<div id="kc-totp-register-link">
<p>${rb.noAccount} <a href="${url.registrationUrl}">${rb.register}</a>.</p> <p>${rb.noAccount} <a href="${url.registrationUrl}">${rb.register}</a>.</p>
</#if> </#if>
</div>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

29
forms/common-themes/src/main/resources/theme/login/base/login-update-password.ftl
View file

@ -1,32 +1,21 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass=""; section> <@layout.registrationLayout bodyClass=""; section>
<#if section = "title"> <#if section = "title">
${rb.emailUpdateHeader} ${rb.emailUpdateHeader}
<#elseif section = "header"> <#elseif section = "header">
${rb.emailUpdateHeader} ${rb.emailUpdateHeader}
<#elseif section = "form"> <#elseif section = "form">
<form id="kc-passwd-update-form" action="${url.loginUpdatePasswordUrl}" method="post">
<div class="field-wrapper">
<label for="password-new">${rb.passwordNew}</label><input type="password" id="password-new" name="password-new" />
</div>
<div class="field-wrapper">
<label for="password-confirm" class="two-lines">${rb.passwordConfirm}</label><input type="password" id="password-confirm" name="password-confirm" />
</div>
<div id="form"> <input class="btn-primary" type="submit" value="Submit" />
<form action="${url.loginUpdatePasswordUrl}" method="post"> </form>
<div>
<label for="password-new">${rb.passwordNew}</label><input type="password" id="password-new" name="password-new" />
</div>
<div>
<label for="password-confirm" class="two-lines">${rb.passwordConfirm}</label><input type="password" id="password-confirm" name="password-confirm" />
</div>
<input class="btn-primary" type="submit" value="Submit" />
</form>
</div>
<#elseif section = "info" >
<div id="info">
</div>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

42
forms/common-themes/src/main/resources/theme/login/base/login-update-profile.ftl
View file

@ -1,37 +1,31 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass=""; section> <@layout.registrationLayout bodyClass=""; section>
<#if section = "title"> <#if section = "title">
Update Account Information Update Account Information
<#elseif section = "header"> <#elseif section = "header">
Update Account Information
<h2>Update Account Information</h2>
<#elseif section = "feedback"> <#elseif section = "feedback">
<div class="feedback warning show"> <div id="kc-feedback" class="feedback warning show">
<p><strong>Your account is not enabled because you need to update your account information.</strong><br>Please follow the steps below.</p> <p><strong>Your account is not enabled because you need to update your account information.</strong><br>Please follow the steps below.</p>
</div> </div>
<#elseif section = "form"> <#elseif section = "form">
<form id="kc-update-profile-form" action="${url.loginUpdateProfileUrl}" method="post">
<div id="form"> <div class="feedback error bottom-left">
<form action="${url.loginUpdateProfileUrl}" method="post"> <p><strong>Some required fields are empty or incorrect.</strong><br>Please correct the fields in red.</p>
<div class="feedback error bottom-left"> </div>
<p><strong>Some required fields are empty or incorrect.</strong><br>Please correct the fields in red.</p> <p class="subtitle">All fields required</p>
</div> <div class="field-wrapper">
<p class="subtitle">All fields required</p> <label for="email">${rb.email}</label><input type="text" id="email" name="email" value="${user.email!''}" />
<div> </div class="field-wrapper">
<label for="email">${rb.email}</label><input type="text" id="email" name="email" value="${user.email!''}" /> <div class="field-wrapper">
</div> <label for="firstName">${rb.firstName}</label><input type="text" id="firstName" name="firstName" value="${user.firstName!''}" />
<div> </div>
<label for="firstName">${rb.firstName}</label><input type="text" id="firstName" name="firstName" value="${user.firstName!''}" /> <div class="field-wrapper">
</div> <label for="lastName">${rb.lastName}</label><input type="text" id="lastName" name="lastName" value="${user.lastName!''}" />
<div> </div>
<label for="lastName">${rb.lastName}</label><input type="text" id="lastName" name="lastName" value="${user.lastName!''}" /> <input class="btn-primary" type="submit" value="Submit" />
</div> </form>
<input class="btn-primary" type="submit" value="Submit" />
</form>
</div>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

19
forms/common-themes/src/main/resources/theme/login/base/login-username-reminder.ftl
View file

@ -1,25 +1,20 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass=""; section> <@layout.registrationLayout bodyClass=""; section>
<#if section = "title"> <#if section = "title">
${rb.emailUsernameForgotHeader} ${rb.emailUsernameForgotHeader}
<#elseif section = "header"> <#elseif section = "header">
${rb.emailUsernameForgotHeader} ${rb.emailUsernameForgotHeader}
<#elseif section = "form"> <#elseif section = "form">
<form id="kc-username-reminder-form" action="${url.loginUsernameReminderUrl}" method="post">
<div id="form">
<p class="instruction">${rb.emailUsernameInstruction}</p> <p class="instruction">${rb.emailUsernameInstruction}</p>
<form action="${url.loginUsernameReminderUrl}" method="post"> <div class="field-wrapper">
<div> <label for="email">${rb.email}</label><input type="text" id="email" name="email" />
<label for="email">${rb.email}</label><input type="text" id="email" name="email" /> </div>
</div> <input class="btn-primary" type="submit" value="Submit" />
<input class="btn-primary" type="submit" value="Submit" /> </form>
</form>
</div>
<#elseif section = "info" > <#elseif section = "info" >
<p><a href="${url.loginUrl}">&laquo; Back to Login</a></p> <p><a href="${url.loginUrl}">&laquo; Back to Login</a></p>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

8
forms/common-themes/src/main/resources/theme/login/base/login-verify-email.ftl
View file

@ -1,16 +1,13 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass="email"; section> <@layout.registrationLayout bodyClass="email"; section>
<#if section = "title"> <#if section = "title">
Email verification Email verification
<#elseif section = "header"> <#elseif section = "header">
Email verification Email verification
<#elseif section = "form"> <#elseif section = "form">
<div id="kc-verify-email" class="app-form">
<div class="app-form">
<p class="instruction"> <p class="instruction">
Your account is not enabled. An email with instructions to verify your email address has been sent to you. Your account is not enabled. An email with instructions to verify your email address has been sent to you.
</p> </p>
@ -18,8 +15,5 @@
<a href="${url.loginEmailVerificationUrl}">Click here</a> to re-send the email. <a href="${url.loginEmailVerificationUrl}">Click here</a> to re-send the email.
</p> </p>
</div> </div>
<#elseif section = "info" >
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

35
forms/common-themes/src/main/resources/theme/login/base/login.ftl
View file

@ -1,33 +1,25 @@
<#ftl strip_whitespace=true strip_text=true>
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass=""; section> <@layout.registrationLayout bodyClass=""; section>
<#if section = "title"> <#if section = "title">Log in to ${realm.name}
Log in to ${realm.name}
<#elseif section = "header"> <#elseif section = "header">
Log in to <strong>${(realm.name)!''}</strong> Log in to <strong>${(realm.name)!''}</strong>
<#elseif section = "form"> <#elseif section = "form">
<form id="kc-form-login" action="${url.loginAction}" method="post">
<div id="form"> <div class="field-wrapper">
<form action="${url.loginAction}" method="post"> <label for="username">${rb.username}</label><input id="username" name="username" value="${login.username!''}" type="text" />
<div> </div>
<label for="username">${rb.username}</label><input id="username" name="username" value="${login.username!''}" type="text" autofocus /> <div class="field-wrapper">
</div> <label for="password">${rb.password}</label><input id="password" name="password" type="password" />
</div>
<div> <input class="btn-primary" name="login" type="submit" value="Log In"/>
<label for="password">${rb.password}</label><input id="password" name="password" type="password" /> <input class="btn-secondary" name="cancel" type="submit" value="Cancel"/>
</div> </form>
<input class="btn-primary" name="login" type="submit" value="Log In"/>
<input class="btn-secondary" name="cancel" type="submit" value="Cancel"/>
</form>
</div>
<#elseif section = "info" > <#elseif section = "info" >
<div id="kc-login-actions">
<div id="info">
<#if realm.registrationAllowed> <#if realm.registrationAllowed>
<p>${rb.noAccount} <a href="${url.registrationUrl}">${rb.register}</a>.</p> <p>${rb.noAccount} <a href="${url.registrationUrl}">${rb.register}</a>.</p>
</#if> </#if>
@ -35,6 +27,5 @@
<p>Forgot <a href="${url.loginUsernameReminderUrl}">Username</a> / <a href="${url.loginPasswordResetUrl}">Password</a>?</p> <p>Forgot <a href="${url.loginUsernameReminderUrl}">Username</a> / <a href="${url.loginPasswordResetUrl}">Password</a>?</p>
</#if> </#if>
</div> </div>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

20
forms/common-themes/src/main/resources/theme/login/base/register.ftl
View file

@ -1,34 +1,30 @@
<#import "template.ftl" as layout> <#import "template.ftl" as layout>
<@layout.registrationLayout bodyClass="register" ; section> <@layout.registrationLayout bodyClass="register" ; section>
<#if section = "title"> <#if section = "title">
${rb.registerWith} ${realm.name} ${rb.registerWith} ${realm.name}
<#elseif section = "header"> <#elseif section = "header">
${rb.registerWith} <strong>${realm.name}</strong> ${rb.registerWith} <strong>${realm.name}</strong>
<#elseif section = "form"> <#elseif section = "form">
<form id="kc-register-form" action="${url.registrationAction}" method="post">
<form action="${url.registrationAction}" method="post">
<p class="subtitle">${rb.allRequired}</p> <p class="subtitle">${rb.allRequired}</p>
<div> <div class="field-wrapper">
<label for="firstName">${rb.firstName}</label><input type="text" id="firstName" name="firstName" value="${register.formData.firstName!''}" /> <label for="firstName">${rb.firstName}</label><input type="text" id="firstName" name="firstName" value="${register.formData.firstName!''}" />
</div> </div>
<div> <div class="field-wrapper">
<label for="lastName">${rb.lastName}</label><input type="text" id="lastName" name="lastName" value="${register.formData.lastName!''}" /> <label for="lastName">${rb.lastName}</label><input type="text" id="lastName" name="lastName" value="${register.formData.lastName!''}" />
</div> </div>
<div> <div class="field-wrapper">
<label for="email">${rb.email}</label><input type="text" id="email" name="email" value="${register.formData.email!''}" /> <label for="email">${rb.email}</label><input type="text" id="email" name="email" value="${register.formData.email!''}" />
</div> </div>
<div> <div class="field-wrapper">
<label for="username">${rb.username}</label><input type="text" id="username" name="username" value="${register.formData.username!''}" /> <label for="username">${rb.username}</label><input type="text" id="username" name="username" value="${register.formData.username!''}" />
</div> </div>
<div> <div class="field-wrapper">
<label for="password">${rb.password}</label><input type="password" id="password" name="password" /> <label for="password">${rb.password}</label><input type="password" id="password" name="password" />
</div> </div>
<div> <div class="field-wrapper">
<label for="password-confirm">${rb.passwordConfirm}</label><input type="password" id="password-confirm" name="password-confirm" /> <label for="password-confirm">${rb.passwordConfirm}</label><input type="password" id="password-confirm" name="password-confirm" />
</div> </div>
@ -36,9 +32,7 @@
</form> </form>
<#elseif section = "info"> <#elseif section = "info">
<p>${rb.alreadyHaveAccount} <a href="${url.loginUrl}">${rb.logIn}</a>.</p> <p>${rb.alreadyHaveAccount} <a href="${url.loginUrl}">${rb.logIn}</a>.</p>
</#if> </#if>
</@layout.registrationLayout> </@layout.registrationLayout>

18
forms/common-themes/src/main/resources/theme/login/base/template.ftl
View file

@ -5,7 +5,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><#nested "title"></title> <title><#nested "title"></title>
<link rel="icon" href="${url.resourcesPath}/img/favicon.ico"> <link rel="icon" href="${url.resourcesPath}/img/favicon.ico" />
<#if properties.styles?has_content> <#if properties.styles?has_content>
<#list properties.styles?split(' ') as style> <#list properties.styles?split(' ') as style>
<link href="${url.resourcesPath}/${style}" rel="stylesheet" /> <link href="${url.resourcesPath}/${style}" rel="stylesheet" />
@ -18,14 +18,10 @@
</#if> </#if>
</head> </head>
<body class="rcue-login-register ${bodyClass}"> <body class="kc-login-register ${bodyClass}">
<div class="rcue-logo"></div> <h1 class="kc-title">KeyCloak</h1>
<div class="content"> <div class="content">
<h2> <h2 id="kc-header"><#nested "header"></h2>
<#nested "header">
</h2>
<div class="background-area"> <div class="background-area">
<#if !forceSeparator && realm?has_content> <#if !forceSeparator && realm?has_content>
<#assign drawSeparator = realm.registrationAllowed> <#assign drawSeparator = realm.registrationAllowed>
@ -41,7 +37,6 @@
</#if> </#if>
<#nested "form"> <#nested "form">
</div> </div>
<#if social.displaySocialProviders> <#if social.displaySocialProviders>
<div class="section social-login"> <span>or</span> <div class="section social-login"> <span>or</span>
<p>${rb.logInWith}</p> <p>${rb.logInWith}</p>
@ -52,20 +47,15 @@
</ul> </ul>
</div> </div>
</#if> </#if>
<div class="section info-area"> <div class="section info-area">
<#nested "info"> <#nested "info">
</div> </div>
</div> </div>
</div> </div>
<p class="powered"> <p class="powered">
<a href="http://www.keycloak.org">${rb.poweredByKeycloak}</a> <a href="http://www.keycloak.org">${rb.poweredByKeycloak}</a>
</p> </p>
</div> </div>
<#nested "content">
</body> </body>
</html> </html>
</#macro> </#macro>

7
forms/common-themes/src/main/resources/theme/login/keycloak/resources/css/styles.css
View file

@ -1,4 +1,5 @@
body.rcue-login-register { @IMPORT url("../../rcue/css/styles.css");
background: #083556;
background-image: none; body {
xbackground: #083556 !important;
} }

4
forms/common-themes/src/main/resources/theme/login/rcue/resources/css/forms.css
View file

@ -189,11 +189,11 @@ button.primary:enabled:active {
box-shadow: inset 0 0 5px 3px #0074ae; box-shadow: inset 0 0 5px 3px #0074ae;
} }
/* Code from Gabriel */ /* Code from Gabriel */
.rcue-login-register.register .two-fields input[type="text"] { .kc-login-register.register .two-fields input[type="text"] {
width: 121px; width: 121px;
min-width: 0; min-width: 0;
} }
.rcue-login-register.register .two-fields input + input { .kc-login-register.register .two-fields input + input {
margin-left: 10px; margin-left: 10px;
} }
.search-comp { .search-comp {

181
forms/common-themes/src/main/resources/theme/login/rcue/resources/css/login-register.css
View file

@ -4,13 +4,14 @@ body {
min-width: 120em; min-width: 120em;
} }
body.rcue-login-register { body.kc-login-register {
background-image: url("../img/login-screen-background.jpg"); background-image: url("../img/login-screen-background.jpg");
} }
div.rcue-logo { .kc-title {
background-image: url("../img/keycloak-logo.png"); background-image: url("../img/keycloak-logo.png");
background-repeat: no-repeat; background-repeat: no-repeat;
text-indent: -9999px;
height: 37px; height: 37px;
width: 150px; width: 150px;
position: absolute; position: absolute;
@ -18,7 +19,7 @@ div.rcue-logo {
right: 6.4em; right: 6.4em;
} }
.rcue-login-register { .kc-login-register {
background-color: #1D2226; background-color: #1D2226;
background-position: top left; background-position: top left;
background-size: auto; background-size: auto;
@ -32,18 +33,18 @@ div.rcue-logo {
} }
.rcue-login-register h1 a { .kc-login-register h1 a {
position: absolute; position: absolute;
top: 5em; top: 5em;
right: 6.4em; right: 6.4em;
} }
.rcue-login-register .content { .kc-login-register .content {
position: absolute; position: absolute;
bottom: 10%; bottom: 10%;
width: 100%; width: 100%;
min-width: 76em; min-width: 76em;
} }
.rcue-login-register h2 { .kc-login-register h2 {
padding-left: 4.34782608695652em; padding-left: 4.34782608695652em;
font-family: "Overpass", sans-serif; font-family: "Overpass", sans-serif;
font-size: 2.3em; font-size: 2.3em;
@ -51,10 +52,10 @@ div.rcue-logo {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.005em; letter-spacing: 0.005em;
} }
.rcue-login-register h2 strong { .kc-login-register h2 strong {
font-weight: bold; font-weight: bold;
} }
.rcue-login-register .background-area { .kc-login-register .background-area {
border-top: 0.1em rgba(255, 255, 255, 0.05) solid; border-top: 0.1em rgba(255, 255, 255, 0.05) solid;
border-bottom: 0.1em rgba(255, 255, 255, 0.05) solid; border-bottom: 0.1em rgba(255, 255, 255, 0.05) solid;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
@ -63,115 +64,115 @@ div.rcue-logo {
width: 100%; width: 100%;
min-width: 120em; min-width: 120em;
} }
.rcue-login-register .form-area.separator, .kc-login-register .form-area.separator,
.rcue-login-register .form-area.social, .kc-login-register .form-area.social,
.rcue-login-register .form-area.social.separator { .kc-login-register .form-area.social.separator {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 42.7em center; background-position: 42.7em center;
} }
.rcue-login-register .form-area.separator { .kc-login-register .form-area.separator {
background-image: url(../img/login-register-separator.png); background-image: url(../img/login-register-separator.png);
background-position: 43.2em center; background-position: 43.2em center;
} }
.rcue-login-register .form-area.social { .kc-login-register .form-area.social {
background-image: url(../img/login-register-social.png); background-image: url(../img/login-register-social.png);
} }
.rcue-login-register .form-area.social.separator { .kc-login-register .form-area.social.separator {
background-image: url(../img/login-register-social-separator.png); background-image: url(../img/login-register-social-separator.png);
} }
.rcue-login-register .background-area .section { .kc-login-register .background-area .section {
float: left; float: left;
padding: 0 4.5em 0 4.6em; padding: 0 4.5em 0 4.6em;
width: auto; width: auto;
position: relative; position: relative;
} }
.rcue-login-register .background-area .section, .kc-login-register .background-area .section,
.rcue-login-register .background-area .social .section { .kc-login-register .background-area .social .section {
padding-top: 1.5em; padding-top: 1.5em;
padding-bottom: 1.5em; padding-bottom: 1.5em;
} }
.rcue-login-register .background-area .section h3 { .kc-login-register .background-area .section h3 {
display: none; display: none;
} }
.rcue-login-register .background-area .section:first-child { .kc-login-register .background-area .section:first-child {
padding-right: 4.5em; padding-right: 4.5em;
} }
.rcue-login-register .section > p { .kc-login-register .section > p {
font-size: 1.3em; font-size: 1.3em;
margin-bottom: 1.53846153846154em; margin-bottom: 1.53846153846154em;
line-height: 1.3em; line-height: 1.3em;
} }
.rcue-login-register .section.app-form { .kc-login-register .section.app-form {
padding-left: 0; padding-left: 0;
position: relative; position: relative;
} }
.rcue-login-register form > div { .kc-login-register form > div {
margin-bottom: 1em; margin-bottom: 1em;
} }
.rcue-login-register label, .kc-login-register label,
.rcue-login-register .social-login > p { .kc-login-register .social-login > p {
display: inline-block; display: inline-block;
font-size: 1.4em; font-size: 1.4em;
font-weight: 400; font-weight: 400;
} }
.rcue-login-register label { .kc-login-register label {
width: 8.21428571428571em; width: 8.21428571428571em;
} }
.rcue-login-register label.two-lines { .kc-login-register label.two-lines {
float: left; float: left;
margin-top: -0.14285714285714em; margin-top: -0.14285714285714em;
line-height: 1.1em; line-height: 1.1em;
} }
.rcue-login-register input[type="text"], .kc-login-register input[type="text"],
.rcue-login-register input[type="password"] { .kc-login-register input[type="password"] {
width: 24.7272727272727em; width: 24.7272727272727em;
/* 272px */ /* 272px */
} }
.rcue-login-register form > div.aside-btn { .kc-login-register form > div.aside-btn {
float: left; float: left;
font-size: 1.1em; font-size: 1.1em;
margin-left: 10.4545454545454em; margin-left: 10.4545454545454em;
margin-top: 0.90909090909091em; margin-top: 0.90909090909091em;
margin-bottom: 0; margin-bottom: 0;
} }
.rcue-login-register form > div.aside-btn label { .kc-login-register form > div.aside-btn label {
font-size: 1em; font-size: 1em;
width: auto; width: auto;
} }
.rcue-login-register form > div.aside-btn input[type="checkbox"] { .kc-login-register form > div.aside-btn input[type="checkbox"] {
margin-bottom: 0.54545454545455em; margin-bottom: 0.54545454545455em;
/* 6px */ /* 6px */
} }
.rcue-login-register form > input[type="button"], .kc-login-register form > input[type="button"],
.rcue-login-register form > input[type="submit"]{ .kc-login-register form > input[type="submit"]{
float: right; float: right;
margin-top: 0.76923076923077em; margin-top: 0.76923076923077em;
margin-left: 0.90909090909091em; margin-left: 0.90909090909091em;
/* 10px */ /* 10px */
} }
.rcue-login-register p.subtitle { .kc-login-register p.subtitle {
font-size: 1.1em; font-size: 1.1em;
color: #999; color: #999;
position: absolute; position: absolute;
right: 4.09090909090909em; right: 4.09090909090909em;
top: -0.636363636363636em; top: -0.636363636363636em;
} }
.rcue-login-register .feedback.bottom-left { .kc-login-register .feedback.bottom-left {
left: 35.7em; left: 35.7em;
bottom: 17em; bottom: 17em;
min-width: 35em; min-width: 35em;
} }
.rcue-login-register input.error[type="text"], .kc-login-register input.error[type="text"],
.rcue-login-register input.error[type="password"], .kc-login-register input.error[type="password"],
.rcue-login-register input.error[type="email"] { .kc-login-register input.error[type="email"] {
background-color: #F8E7E7; background-color: #F8E7E7;
} }
.rcue-login-register .section.social-login > span { .kc-login-register .section.social-login > span {
display: none; display: none;
} }
.rcue-login-register .section.social-login > p { .kc-login-register .section.social-login > p {
float: left; float: left;
margin-top: 0.28571428571429em; margin-top: 0.28571428571429em;
/* 14px */ /* 14px */
@ -180,32 +181,32 @@ div.rcue-logo {
/* 95px */ /* 95px */
} }
.rcue-login-register .section.social-login > ul { .kc-login-register .section.social-login > ul {
float: left; float: left;
} }
.rcue-login-register .section.social-login li { .kc-login-register .section.social-login li {
margin-bottom: 2em; margin-bottom: 2em;
} }
.rcue-login-register .section.social-login li:last-child { .kc-login-register .section.social-login li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.rcue-login-register .section.info-area { .kc-login-register .section.info-area {
padding-right: 0; padding-right: 0;
} }
.rcue-login-register .section.info-area p, .kc-login-register .section.info-area p,
.rcue-login-register .section.info-area li { .kc-login-register .section.info-area li {
font-size: 1.4em; font-size: 1.4em;
margin-bottom: 1.64285714285714em; margin-bottom: 1.64285714285714em;
} }
.rcue-login-register .section.info-area li { .kc-login-register .section.info-area li {
color: #999; color: #999;
margin-bottom: 1em; margin-bottom: 1em;
} }
.rcue-login-register .section.info-area li:last-child { .kc-login-register .section.info-area li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@media screen and (min-width: 1280px) { @media screen and (min-width: 1280px) {
.rcue-login-register { .kc-login-register {
background-size: 100% auto; background-size: 100% auto;
} }
} }
@ -265,19 +266,19 @@ a.zocial:before {
/* 32px */ /* 32px */
} }
/* Register page */ /* Register page */
.rcue-login-register.register label { .kc-login-register.register label {
width: 7.5em; width: 7.5em;
/* 105px */ /* 105px */
} }
.rcue-login-register.register input[type="text"], .kc-login-register.register input[type="text"],
.rcue-login-register.register input[type="email"], .kc-login-register.register input[type="email"],
.rcue-login-register.register input[type="password"] { .kc-login-register.register input[type="password"] {
width: 22.9090909090909em; width: 22.9090909090909em;
/* 252px */ /* 252px */
} }
.rcue-login-register.register form > div.aside-btn { .kc-login-register.register form > div.aside-btn {
margin-left: 9.54545454545454em; margin-left: 9.54545454545454em;
/* 105px */ /* 105px */
@ -285,111 +286,111 @@ a.zocial:before {
/* 138px */ /* 138px */
} }
.rcue-login-register.register form > div.aside-btn p { .kc-login-register.register form > div.aside-btn p {
line-height: 1.3em; line-height: 1.3em;
} }
.rcue-login-register p.powered { .kc-login-register p.powered {
font-size: 1.1em; font-size: 1.1em;
margin-top: 1.27272727272727em; margin-top: 1.27272727272727em;
text-align: right; text-align: right;
margin-right: 5.81818181818182em; margin-right: 5.81818181818182em;
} }
.rcue-login-register p.powered a { .kc-login-register p.powered a {
color: #666; color: #666;
} }
.rcue-login-register p.powered a:hover { .kc-login-register p.powered a:hover {
color: #0099D3; color: #0099D3;
} }
/* Forgot Password page */ /* Forgot Password page */
.rcue-login-register.reset .background-area .section.app-form { .kc-login-register.reset .background-area .section.app-form {
width: 43.2em; width: 43.2em;
} }
.rcue-login-register.oauth .form-actions { .kc-login-register.oauth .form-actions {
margin-bottom: 0; margin-bottom: 0;
margin-top: 2em; margin-top: 2em;
} }
.rcue-login-register .background-area .content-area { .kc-login-register .background-area .content-area {
width: 50em; width: 50em;
} }
.rcue-login-register .background-area .content-area ul { .kc-login-register .background-area .content-area ul {
border-bottom: 1px solid #34393C; border-bottom: 1px solid #34393C;
margin-bottom: 2em; margin-bottom: 2em;
} }
.rcue-login-register .background-area .content-area ul li { .kc-login-register .background-area .content-area ul li {
border-top: 1px solid #34393C; border-top: 1px solid #34393C;
padding: 2em; padding: 2em;
position: relative; position: relative;
} }
.rcue-login-register .background-area .content-area ul li span { .kc-login-register .background-area .content-area ul li span {
font-size: 1.3em; font-size: 1.3em;
line-height: 1.3em; line-height: 1.3em;
} }
.rcue-login-register .background-area .content-area ul li span:first-child { .kc-login-register .background-area .content-area ul li span:first-child {
padding-right: 11.5384615384615em; padding-right: 11.5384615384615em;
} }
.rcue-login-register .background-area .content-area ul li span.parent { .kc-login-register .background-area .content-area ul li span.parent {
position: absolute; position: absolute;
left: 26em; left: 26em;
top: 1.53846153846154em; top: 1.53846153846154em;
width: 12.3076923076923em; width: 12.3076923076923em;
} }
.rcue-login-register .background-area .content-area ul li span.icon-info { .kc-login-register .background-area .content-area ul li span.icon-info {
float: right; float: right;
margin-top: 0.5em; margin-top: 0.5em;
} }
.rcue-login-register .background-area .content-area p.terms { .kc-login-register .background-area .content-area p.terms {
color: #999999; color: #999999;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.3em; line-height: 1.3em;
} }
.rcue-login-register.reset p.subtitle { .kc-login-register.reset p.subtitle {
margin-bottom: 10px; margin-bottom: 10px;
position: inherit; position: inherit;
text-align: right; text-align: right;
} }
.rcue-login-register .background-area p.instruction { .kc-login-register .background-area p.instruction {
font-size: 1.3em; font-size: 1.3em;
line-height: 1.3em; line-height: 1.3em;
margin-bottom: 1.53846em; margin-bottom: 1.53846em;
} }
.rcue-login-register .background-area p.instruction.instruction.second { .kc-login-register .background-area p.instruction.instruction.second {
color: #999999; color: #999999;
} }
.rcue-login-register .background-area p.instruction + .instruction.second { .kc-login-register .background-area p.instruction + .instruction.second {
margin-top: -1.23077em; margin-top: -1.23077em;
} }
.rcue-login-register .background-area a.link-right { .kc-login-register .background-area a.link-right {
float: right; float: right;
font-size: 1.3em; font-size: 1.3em;
} }
.rcue-login-register.totp .form-area { .kc-login-register.totp .form-area {
background-image: none; background-image: none;
} }
.rcue-login-register.reset .form-area p.instruction { .kc-login-register.reset .form-area p.instruction {
font-size: 1.3em; font-size: 1.3em;
line-height: 1.3em; line-height: 1.3em;
margin-bottom: 1.81818181818182em; margin-bottom: 1.81818181818182em;
} }
.rcue-login-register.totp { .kc-login-register.totp {
min-height: 0; min-height: 0;
} }
.rcue-login-register.totp ol li { .kc-login-register.totp ol li {
margin-bottom: 3em; margin-bottom: 3em;
width: 100%; width: 100%;
} }
.rcue-login-register.totp ol li p { .kc-login-register.totp ol li p {
font-size: 1.3em; font-size: 1.3em;
margin-bottom: 1.92307692307692em; margin-bottom: 1.92307692307692em;
} }
.rcue-login-register.totp ol li p strong { .kc-login-register.totp ol li p strong {
text-indent: -1em; text-indent: -1em;
float: left; float: left;
font-size: 1.84615384615385em; font-size: 1.84615384615385em;
@ -397,40 +398,40 @@ a.zocial:before {
margin-top: -0.20833333333333em; margin-top: -0.20833333333333em;
color: #999; color: #999;
} }
.rcue-login-register.totp ol li img { .kc-login-register.totp ol li img {
border: 7px solid #fff; border: 7px solid #fff;
width: 150px; width: 150px;
} }
.rcue-login-register.totp ol li .code { .kc-login-register.totp ol li .code {
font-size: 1.3em; font-size: 1.3em;
margin-left: 1.53846153846154em; margin-left: 1.53846153846154em;
} }
.rcue-login-register.totp ol li form { .kc-login-register.totp ol li form {
width: 357px; width: 357px;
} }
.rcue-login-register.totp ol li form input[type="text"] { .kc-login-register.totp ol li form input[type="text"] {
width: 22em; width: 22em;
} }
.rcue-login-register.totp ol li form input[type="submit"] { .kc-login-register.totp ol li form input[type="submit"] {
float: right; float: right;
} }
.rcue-login-register.totp ol li:last-child { .kc-login-register.totp ol li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.rcue-login-register.totp .content { .kc-login-register.totp .content {
position: inherit; position: inherit;
margin-top: 16em; margin-top: 16em;
} }
.rcue-login-register.email .background-area .section { .kc-login-register.email .background-area .section {
width: 41.2em; width: 41.2em;
} }
.rcue-login-register.email .background-area .section.email { .kc-login-register.email .background-area .section.email {
width: 45.8em; width: 45.8em;
} }
.rcue-login-register.email label { .kc-login-register.email label {
width: 6.78571428571429em; width: 6.78571428571429em;
} }
.rcue-login-register.email .feedback.bottom-left { .kc-login-register.email .feedback.bottom-left {
left: 38.3em; left: 38.3em;
} }