Details
diff --git a/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css b/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
index 8f09a97..0c7bdb2 100644
--- a/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
+++ b/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
@@ -1,6 +1,8 @@
-.login-pf body {
- background: #0f0f0f url("../img/keycloak-bg.png") top left no-repeat;
- background-size: 100% auto;
+/** Delete after proper logo insertion */
+#brand .iam-logo-wrapper {
+ padding-left: 80px;
+ height: 10px;
+ text-align: inherit;
}
.kc-dropdown{
@@ -68,17 +70,25 @@
}
#kc-logo {
- width: 100%;
+ float: right;
+ margin-right: 64px;
+ margin-left: auto;
+ display: block;
+ position: relative;
+ text-align: center;
}
#kc-logo-wrapper {
- background-image: url("../img/keycloak-logo.png");
- background-repeat: no-repeat;
- background-position: top right;
-
- height: 37px;
-
- margin: 50px;
+ background-image: url("../lib/rcue/img/logo.svg");
+ border: 0px none;
+ vertical-align: middle;
+ color: #0099D3;
+ text-decoration: none;
+ background-color: transparent;
+ width: 137px;
+ height: 44px;
+ margin-top: 50px;
+ margin-bottom: 50px;
}
#kc-header {
@@ -89,7 +99,7 @@
}
#kc-header-wrapper {
- font-size: 26px;
+ font-size: 17px;
text-transform: uppercase;
line-height: 1.2em;
margin-bottom: 15px;
@@ -280,9 +290,32 @@ ol#kc-totp-settings li:first-of-type {
}
@media (max-width: 767px) {
+ #kc-logo {
+ float: none;
+ margin: auto;
+ display: block;
+ position: relative;
+ text-align: center;
+ }
+
#kc-logo-wrapper {
- margin-top: 30px;
- margin-right: 15px;
+ background-image: url("../lib/rcue/img/logo.svg");
+ border: 0px none;
+ vertical-align: middle;
+ color: #0099D3;
+ text-decoration: none;
+ background-color: transparent;
+ width: 137px;
+ height: 44px;
+ margin: 20px auto 50px auto;
+ }
+
+ #kc-container-wrapper {
+ bottom : auto;
+ }
+
+ #brand .iam-logo-wrapper {
+ padding-left: 15px;
}
#kc-header {
@@ -322,7 +355,6 @@ ol#kc-totp-settings li:first-of-type {
@media (max-height: 500px) {
#kc-container-wrapper {
- position: inherit;
float: none;
}
}
diff --git a/forms/common-themes/src/main/resources/theme/keycloak/login/template.ftl b/forms/common-themes/src/main/resources/theme/keycloak/login/template.ftl
new file mode 100755
index 0000000..5400cb9
--- /dev/null
+++ b/forms/common-themes/src/main/resources/theme/keycloak/login/template.ftl
@@ -0,0 +1,93 @@
+<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" class="${properties.kcHtmlClass!}">
+
+<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>
+ <#list properties.styles?split(' ') as style>
+ <link href="${url.resourcesPath}/${style}" rel="stylesheet" />
+ </#list>
+ </#if>
+ <#if properties.scripts?has_content>
+ <#list properties.scripts?split(' ') as script>
+ <script src="${url.resourcesPath}/${script}" type="text/javascript"></script>
+ </#list>
+ </#if>
+ <#if scripts??>
+ <#list scripts as script>
+ <script src="${script}" type="text/javascript"></script>
+ </#list>
+ </#if>
+</head>
+
+<body class="${properties.kcBodyClass!}">
+ <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!}">
+
+ <div id="brand">
+ <img class="${properties.iamLogo!}" alt="Red Hat® JBoss® Identity and Access Management" src="${url.resourcesPath}/img/brand.svg">
+ </div>
+
+ <div id="kc-header" class="${properties.kcHeaderClass!}">
+ <div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}"><#nested "header"></div>
+ </div>
+
+ <#if displayMessage && message?has_content>
+ <div id="kc-feedback" class="feedback-${message.type} ${properties.kcFeedBackClass!}">
+ <div id="kc-feedback-wrapper">
+ <span class="kc-feedback-text">${message.summary}</span>
+ </div>
+ </div>
+ <#else>
+ <div id="kc-feedback-placeholder" class="${properties.kcFeedBackPlaceholderClass!}">
+ <div id="kc-feedback-placeholder-wrapper"></div>
+ </div>
+ </#if>
+
+ <#if realm.internationalizationEnabled>
+ <div id="kc-locale" class="${properties.kcLocaleClass!}">
+ <div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
+ <div class="kc-dropdown" id="kc-locale-dropdown">
+ <a href="#" id="kc-current-locale-link">${locale.current}</a>
+ <ul>
+ <#list locale.supported as l>
+ <li class="kc-dropdown-item"><a href="${l.url}">${l.label}</a></li>
+ </#list>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </#if>
+
+ <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>
+ </div>
+ </div>
+</body>
+</html>
+</#macro>
diff --git a/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties b/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
index 7319690..3140264 100644
--- a/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
+++ b/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
@@ -1,8 +1,8 @@
parent=base
import=common/keycloak
-styles=lib/patternfly/css/patternfly.css lib/zocial/zocial.css css/login.css
-meta=viewport==width=device-width,initial-scale=1
+styles=lib/rcue/css/rcue.min.css lib/rcue/css/rcue-additions.min.css lib/zocial/zocial.css css/login.css
+meta=viewport==width=device-width,initial-scale=1.0
kcHtmlClass=login-pf
@@ -29,6 +29,8 @@ kcTextareaClass=form-control
kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-5 details
+iamLogo=brand iam-logo-wrapper
+
##### css classes for form buttons
# main class used for all buttons
kcButtonClass=btn
@@ -37,3 +39,4 @@ kcButtonPrimaryClass=btn-primary
kcButtonDefaultClass=btn-default
# classes defining size of the button
kcButtonLargeClass=btn-lg
+
