add logo, change orientation

This commit is contained in:
knoflook 2023-04-14 15:22:52 +02:00
parent c1cc1591c7
commit 2c47327205
2 changed files with 115 additions and 93 deletions

View File

@ -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;

View File

@ -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>