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,11 +39,16 @@
<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>
<div class="flex-container">
<div class="image">
<img src="${url.resourcesPath}/img/logo.png" class="logo"></img>
</div>
<div class="input">
<header class="${properties.kcFormHeaderClass!}"> <header class="${properties.kcFormHeaderClass!}">
<#if realm.internationalizationEnabled && locale.supported?size gt 1> <#if realm.internationalizationEnabled && locale.supported?size gt 1>
<div class="${properties.kcLocaleMainClass!}" id="kc-locale"> <div class="${properties.kcLocaleMainClass!}" id="kc-locale">
@ -74,6 +79,7 @@
<#else> <#else>
<h13 id="kc-page-title"><#nested "header"></h3> <h13 id="kc-page-title"><#nested "header"></h3>
</#if> </#if>
<#else> <#else>
<#if displayRequiredFields> <#if displayRequiredFields>
<div class="${properties.kcContentWrapperClass!}"> <div class="${properties.kcContentWrapperClass!}">
@ -149,6 +155,8 @@
</div> </div>
</div> </div>
</div>
</div> </div>
</body> </body>
</html> </html>