add logo, change orientation
This commit is contained in:
parent
c1cc1591c7
commit
2c47327205
@ -6,6 +6,20 @@
|
|||||||
src: url("../fonts/perfect_dos_vga_437_win-webfont.woff");
|
src: url("../fonts/perfect_dos_vga_437_win-webfont.woff");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
padding: 20px 50px 50px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
padding: 20px 30px 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
.topbar {
|
.topbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #0000a8;
|
background-color: #0000a8;
|
||||||
|
|||||||
@ -39,114 +39,122 @@
|
|||||||
<body class="${properties.kcBodyClass!}">
|
<body class="${properties.kcBodyClass!}">
|
||||||
<div class="${properties.kcLoginClass!}">
|
<div class="${properties.kcLoginClass!}">
|
||||||
<div id="kc-header" class="${properties.kcHeaderClass!}">
|
<div id="kc-header" class="${properties.kcHeaderClass!}">
|
||||||
<div id="kc-header-wrapper"
|
<!-- <div id="kc-header-wrapper"
|
||||||
class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
|
class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="${properties.kcFormCardClass!}">
|
<div class="${properties.kcFormCardClass!}">
|
||||||
<header class="topbar"> ${msg("welcomeTo")} </header>
|
<header class="topbar"> ${msg("welcomeTo")} </header>
|
||||||
<header class="${properties.kcFormHeaderClass!}">
|
<div class="flex-container">
|
||||||
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
|
<div class="image">
|
||||||
<div class="${properties.kcLocaleMainClass!}" id="kc-locale">
|
<img src="${url.resourcesPath}/img/logo.png" class="logo"></img>
|
||||||
<div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
|
</div>
|
||||||
<div id="kc-locale-dropdown" class="${properties.kcLocaleDropDownClass!}">
|
<div class="input">
|
||||||
<a href="#" id="kc-current-locale-link">${locale.current}</a>
|
<header class="${properties.kcFormHeaderClass!}">
|
||||||
<ul class="${properties.kcLocaleListClass!}">
|
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
|
||||||
<#list locale.supported as l>
|
<div class="${properties.kcLocaleMainClass!}" id="kc-locale">
|
||||||
<li class="${properties.kcLocaleListItemClass!}">
|
<div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
|
||||||
<a class="${properties.kcLocaleItemClass!}" href="${l.url}">${l.label}</a>
|
<div id="kc-locale-dropdown" class="${properties.kcLocaleDropDownClass!}">
|
||||||
</li>
|
<a href="#" id="kc-current-locale-link">${locale.current}</a>
|
||||||
</#list>
|
<ul class="${properties.kcLocaleListClass!}">
|
||||||
</ul>
|
<#list locale.supported as l>
|
||||||
</div>
|
<li class="${properties.kcLocaleListItemClass!}">
|
||||||
</div>
|
<a class="${properties.kcLocaleItemClass!}" href="${l.url}">${l.label}</a>
|
||||||
</div>
|
</li>
|
||||||
</#if>
|
</#list>
|
||||||
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
|
</ul>
|
||||||
<#if displayRequiredFields>
|
|
||||||
<div class="${properties.kcContentWrapperClass!}">
|
|
||||||
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
|
||||||
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-10">
|
|
||||||
<h3 id="kc-page-title"><#nested "header"></h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<#else>
|
|
||||||
<h13 id="kc-page-title"><#nested "header"></h3>
|
|
||||||
</#if>
|
|
||||||
<#else>
|
|
||||||
<#if displayRequiredFields>
|
|
||||||
<div class="${properties.kcContentWrapperClass!}">
|
|
||||||
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
|
||||||
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-10">
|
|
||||||
<#nested "show-username">
|
|
||||||
<div id="kc-username" class="${properties.kcFormGroupClass!}">
|
|
||||||
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
|
||||||
<a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
|
|
||||||
<div class="kc-login-tooltip">
|
|
||||||
<i class="${properties.kcResetFlowIcon!}"></i>
|
|
||||||
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
|
</div>
|
||||||
|
</#if>
|
||||||
|
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
|
||||||
|
<#if displayRequiredFields>
|
||||||
|
<div class="${properties.kcContentWrapperClass!}">
|
||||||
|
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
||||||
|
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-10">
|
||||||
|
<h3 id="kc-page-title"><#nested "header"></h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<#else>
|
||||||
|
<h13 id="kc-page-title"><#nested "header"></h3>
|
||||||
|
</#if>
|
||||||
|
|
||||||
<#else>
|
<#else>
|
||||||
<#nested "show-username">
|
<#if displayRequiredFields>
|
||||||
<div id="kc-username" class="${properties.kcFormGroupClass!}">
|
<div class="${properties.kcContentWrapperClass!}">
|
||||||
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
||||||
<a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
|
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
||||||
<div class="kc-login-tooltip">
|
|
||||||
<i class="${properties.kcResetFlowIcon!}"></i>
|
|
||||||
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
<div class="col-md-10">
|
||||||
</div>
|
<#nested "show-username">
|
||||||
|
<div id="kc-username" class="${properties.kcFormGroupClass!}">
|
||||||
|
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
||||||
|
<a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
|
||||||
|
<div class="kc-login-tooltip">
|
||||||
|
<i class="${properties.kcResetFlowIcon!}"></i>
|
||||||
|
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<#else>
|
||||||
|
<#nested "show-username">
|
||||||
|
<div id="kc-username" class="${properties.kcFormGroupClass!}">
|
||||||
|
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
||||||
|
<a id="reset-login" href="${url.loginRestartFlowUrl}" aria-label="${msg("restartLoginTooltip")}">
|
||||||
|
<div class="kc-login-tooltip">
|
||||||
|
<i class="${properties.kcResetFlowIcon!}"></i>
|
||||||
|
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</#if>
|
||||||
</#if>
|
</#if>
|
||||||
</#if>
|
</header>
|
||||||
</header>
|
<div id="kc-content">
|
||||||
<div id="kc-content">
|
<div id="kc-content-wrapper">
|
||||||
<div id="kc-content-wrapper">
|
|
||||||
|
|
||||||
<#-- App-initiated actions should not see warning messages about the need to complete the action -->
|
<#-- App-initiated actions should not see warning messages about the need to complete the action -->
|
||||||
<#-- during login. -->
|
<#-- during login. -->
|
||||||
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
|
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
|
||||||
<div class="alert-${message.type} ${properties.kcAlertClass!} pf-m-<#if message.type = 'error'>danger<#else>${message.type}</#if>">
|
<div class="alert-${message.type} ${properties.kcAlertClass!} pf-m-<#if message.type = 'error'>danger<#else>${message.type}</#if>">
|
||||||
<div class="pf-c-alert__icon">
|
<div class="pf-c-alert__icon">
|
||||||
<#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
|
<#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
|
||||||
<#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
|
<#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
|
||||||
<#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
|
<#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
|
||||||
<#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
|
<#if message.type = 'info'><span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
|
||||||
|
</div>
|
||||||
|
<span class="${properties.kcAlertTitleClass!}">${kcSanitize(message.summary)?no_esc}</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="${properties.kcAlertTitleClass!}">${kcSanitize(message.summary)?no_esc}</span>
|
</#if>
|
||||||
</div>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#nested "form">
|
<#nested "form">
|
||||||
|
|
||||||
<#if auth?has_content && auth.showTryAnotherWayLink()>
|
<#if auth?has_content && auth.showTryAnotherWayLink()>
|
||||||
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
|
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
|
||||||
<div class="${properties.kcFormGroupClass!}">
|
<div class="${properties.kcFormGroupClass!}">
|
||||||
<input type="hidden" name="tryAnotherWay" value="on"/>
|
<input type="hidden" name="tryAnotherWay" value="on"/>
|
||||||
<a href="#" id="try-another-way"
|
<a href="#" id="try-another-way"
|
||||||
onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
|
onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#nested "socialProviders">
|
||||||
|
|
||||||
|
<#if displayInfo>
|
||||||
|
<div id="kc-info" class="${properties.kcSignUpClass!}">
|
||||||
|
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
|
||||||
|
<#nested "info">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</#if>
|
||||||
</#if>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<#nested "socialProviders">
|
</div>
|
||||||
|
|
||||||
<#if displayInfo>
|
|
||||||
<div id="kc-info" class="${properties.kcSignUpClass!}">
|
|
||||||
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
|
|
||||||
<#nested "info">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</#if>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user