fix for the header to make it work better on small page (#32394)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-08-27 07:09:14 +02:00 committed by GitHub
parent 88cca10472
commit c53e6fa538
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 14 deletions

View file

@ -1,13 +1,7 @@
.pf-v5-c-login__container {
grid-template-areas: "main";
grid-template-columns: 34rem;
}
#kc-header-wrapper {
padding: 62px 10px 20px;
position: absolute;
left: 50%;
transform: translateX(-50%);
grid-template-areas: "header"
"main"
}
.login-pf body {
@ -82,6 +76,7 @@ div.kc-logo-text span {
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1.2em;
padding: 62px 10px 20px;
white-space: normal;
color: var(--pf-v5-global--Color--light-100) !important;
text-align: center;
}

View file

@ -52,13 +52,13 @@
</head>
<body id="keycloak-bg" class="${properties.kcBodyClass!}">
<div id="kc-header" class="${properties.kcHeaderClass!}">
<div id="kc-header-wrapper"
class="${properties.kcHeaderWrapperClass!}">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
</div>
</div>
<div class="pf-v5-c-login">
<div class="pf-v5-c-login__container">
<header id="kc-header" class="pf-v5-c-login__header">
<div id="kc-header-wrapper"
class="pf-v5-c-brand">${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}</div>
</header>
<main class="pf-v5-c-login__main">
<header class="pf-v5-c-login__main-header">
<h1 class="pf-v5-c-title pf-m-3xl" id="kc-page-title"><#nested "header"></h1>