pub-solar/keycloak-theme
5
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

More fixes to keycloak theme

Browse source
This commit is contained in:
Benjamin Bädorf 2022-11-28 15:06:30 +01:00
parent cac941a300
commit b165e70189
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
14 changed files with 494 additions and 476 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
account/template.ftl
View file

@ -13,6 +13,7 @@
<link href="${url.resourcesPath}/css/index.css" rel="stylesheet" />
<script defer src="${url.resourcesPath}/js/background.js" type="text/javascript"></script>
<script defer src="${url.resourcesPath}/js/i18n.js" type="text/javascript"></script>
<#if properties.stylesCommon?has_content>
<#list properties.stylesCommon?split(' ') as style>
@ -59,16 +60,17 @@
<a href="https://pub.solar/" class="ps-homelink">pub.solar/</a>
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<ul class="ps-i18n-links">
<select
class="ps-i18n-links"
id="language-toggle"
>
<#list locale.supported as l>
<li class="ps-i18n-links--item">
<a
class="ps-i18n-links--link <#if locale.current == l.label >ps-i18n-links--link_active</#if>"
href="${l.url}"
>${l.label}</a>
</li>
<option
value="${l.url}"
<#if locale.current == l.label>selected</#if>
>${l.label}</option>
</#list>
</ul>
</select>
</#if>
<nav class="ps-header--nav" role="navigation">

51
common/resources/css/index.css
View file

@ -127,9 +127,6 @@ html {
font-weight: bold; }
.ps-homelink {
position: fixed;
top: 0;
left: 0;
z-index: 100;
pointer-events: all;
color: var(--foreground);
@ -152,15 +149,8 @@ html {
font-size: 32px;
padding: 12px; } }
.ps-i18n-links {
position: fixed;
top: 0;
right: 0;
z-index: 100;
display: flex;
margin: 0; }
.ps-i18n-links--item {
display: flex; }
.ps-i18n-links--link {
margin: 0;
pointer-events: all;
color: var(--foreground);
background: white;
@ -175,16 +165,6 @@ html {
border: 12px solid var(--foreground);
border-top: 0;
border-right: 0; }
.ps-i18n-links--link:hover {
text-shadow: 0.3vw 0px 0px var(--accent); }
@media screen and (min-width: 1200px) {
.ps-i18n-links--link {
font-size: 32px;
padding: 12px; } }
.ps-i18n-links--link_active {
background-color: var(--foreground);
color: var(--background);
text-shadow: 0.15vw 0px 0px var(--foreground); }
.ps-main {
display: flex;
@ -209,9 +189,13 @@ html {
z-index: 1; }
.ps-main_full {
padding: 0; }
@media screen and (min-width: 1200px) {
.ps-main_full .ps-main--page {
flex-direction: column;
flex-wrap: nowrap; } }
.ps-header {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0; }
.ps-header--title {
@ -253,10 +237,12 @@ html {
align-items: center;
justify-content: flex-start;
padding: 0;
pointer-events: none; }
pointer-events: none;
padding-top: 4rem; }
@media screen and (min-width: 1200px) {
.ps-page {
padding: 1vw;
padding-top: 4rem;
flex-direction: row;
align-items: flex-start; } }
.ps-page_home {
@ -294,8 +280,12 @@ html {
padding: 5vw; }
.ps-page--section_full {
max-width: unset;
width: calc(100% - 8rem);
margin: 4rem; }
width: calc(100vw - 1.6rem);
margin: 0.8rem; }
@media screen and (min-width: 1200px) {
.ps-page--section_full {
width: 96vw;
margin: 1vw; } }
.ps-page--section a {
color: var(--accent);
border-bottom: 1px solid transparent;
@ -347,6 +337,17 @@ html {
margin-top: 1.5rem;
line-height: 1.5; }
.ps-login-flow-pre {
margin: 2rem;
display: flex;
border-bottom: 0.25rem solid var(--foreground);
padding-bottom: 0.25rem; }
.ps-login-flow-pre--selected {
font-weight: bold;
margin-right: 1rem; }
.ps-login-flow-pre--cancel {
font-weight: normal; }
.ps-section-nav {
display: flex;
justify-content: space-between;

5
common/resources/js/i18n.js Normal file
View file

@ -0,0 +1,5 @@
const toggle = document.getElementById('language-toggle');
toggle.addEventListener('change', (event) => {
window.location = toggle.value;
});

1
common/resources/scss/header.scss
View file

@ -1,5 +1,6 @@
.ps-header {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;

3
common/resources/scss/homelink.scss
View file

@ -1,7 +1,4 @@
.ps-homelink {
position: fixed;
top: 0;
left: 0;
z-index: 100;
pointer-events: all;

26
common/resources/scss/i18n-links.scss
View file

@ -1,16 +1,6 @@
.ps-i18n-links {
position: fixed;
top: 0;
right: 0;
z-index: 100;
display: flex;
margin: 0;
&--item {
display: flex;
}
&--link {
pointer-events: all;
color: var(--foreground);
background: white;
@ -25,20 +15,4 @@
border: 12px solid var(--foreground);
border-top: 0;
border-right: 0;
&:hover {
text-shadow: 0.3vw 0px 0px var(--accent);
}
@media screen and (min-width: 1200px) {
font-size: 32px;
padding: 12px;
}
&_active {
background-color: var(--foreground);
color: var(--background);
text-shadow: 0.15vw 0px 0px var(--foreground);
}
}
}

1
common/resources/scss/index.scss
View file

@ -43,6 +43,7 @@ html {
@import './main';
@import './header';
@import './page';
@import './login-flow-pre';
@import './section-nav';
@import './logo';
@import './background';

16
common/resources/scss/login-flow-pre.scss Normal file
View file

@ -0,0 +1,16 @@
.ps-login-flow-pre {
margin: 2rem;
display: flex;
border-bottom: 0.25rem solid var(--foreground);
padding-bottom: 0.25rem;
&--selected {
font-weight: bold;
margin-right: 1rem;
}
&--cancel {
font-weight: normal;
}
}

7
common/resources/scss/main.scss
View file

@ -27,4 +27,11 @@
&_full {
padding: 0;
}
&_full &--page {
@media screen and (min-width: 1200px) {
flex-direction: column;
flex-wrap: nowrap;
}
}
}

11
common/resources/scss/page.scss
View file

@ -6,9 +6,11 @@
justify-content: flex-start;
padding: 0;
pointer-events: none;
padding-top: 4rem;
@media screen and (min-width: 1200px) {
padding: 1vw;
padding-top: 4rem;
flex-direction: row;
align-items: flex-start;
}
@ -58,8 +60,13 @@
&_full {
max-width: unset;
width: calc(100% - 8rem);
margin: 4rem;
width: calc(100vw - 1.6rem);
margin: 0.8rem;
@media screen and (min-width: 1200px) {
width: 96vw;
margin: 1vw;
}
}
a {

38
login/login-otp.ftl
View file

@ -3,11 +3,14 @@
<#if section="header">
${msg("doLogIn")}
<#elseif section="form">
<form id="kc-otp-login-form" class="${properties.kcFormClass!}" action="${url.loginAction}"
method="post">
<form
id="kc-otp-login-form"
class="ps-container"
action="${url.loginAction}"
method="post"
>
<#if otpLogin.userOtpCredentials?size gt 1>
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcInputWrapperClass!}">
<#list otpLogin.userOtpCredentials as otpCredential>
<input id="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListInputClass!}" type="radio" name="selectedCredentialId" value="${otpCredential.id}" <#if otpCredential.id == otpLogin.selectedCredentialId>checked="checked"</#if>>
<label for="kc-otp-credential-${otpCredential?index}" class="${properties.kcLoginOTPListClass!}" tabindex="${otpCredential?index}">
@ -20,17 +23,19 @@
</label>
</#list>
</div>
</div>
</#if>
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
<label for="otp" class="${properties.kcLabelClass!}">${msg("loginOtpOneTime")}</label>
</div>
<div class="${properties.kcInputWrapperClass!}">
<input id="otp" name="otp" autocomplete="off" type="text" class="${properties.kcInputClass!}"
autofocus aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"/>
<input
id="otp"
name="otp"
autocomplete="off"
type="text"
class="${properties.kcInputClass!}"
autofocus aria-invalid="<#if messagesPerField.existsError('totp')>true</#if>"
/>
<#if messagesPerField.existsError('totp')>
<span id="input-error-otp-code" class="${properties.kcInputErrorMessageClass!}"
@ -39,19 +44,14 @@
</span>
</#if>
</div>
</div>
<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
<div class="${properties.kcFormOptionsWrapperClass!}">
</div>
</div>
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<input
<button
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
name="login" id="kc-login" type="submit" value="${msg("doLogIn")}" />
</div>
name="login"
id="kc-login"
type="submit"
>${msg("doLogIn")}</button>
</div>
</form>
</#if>

41
login/template.ftl
View file

@ -16,6 +16,7 @@
<link href="${url.resourcesPath}/css/index.css" rel="stylesheet" />
<script defer src="${url.resourcesPath}/js/background.js" type="text/javascript"></script>
<script defer src="${url.resourcesPath}/js/i18n.js" type="text/javascript"></script>
<#if properties.stylesCommon?has_content>
<#list properties.stylesCommon?split(' ') as style>
@ -65,16 +66,17 @@
<a href="https://pub.solar/" class="ps-homelink">pub.solar/</a>
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<ul class="ps-i18n-links">
<select
class="ps-i18n-links"
id="language-toggle"
>
<#list locale.supported as l>
<li class="ps-i18n-links--item">
<a
class="ps-i18n-links--link <#if locale.current == l.label >ps-i18n-links--link_active</#if>"
href="${l.url}"
>${l.label}</a>
</li>
<option
value="${l.url}"
<#if locale.current == l.label>selected</#if>
>${l.label}</option>
</#list>
</ul>
</select>
</#if>
</header>
@ -109,13 +111,15 @@
</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>
<div class="ps-login-flow-pre">
<div class="ps-login-flow-pre--selected">${auth.attemptedUsername}</div>
<a
id="reset-login"
href="${url.loginRestartFlowUrl}"
aria-label="${msg("restartLoginTooltip")}"
class="ps-login-flow-pre--cancel ps-link"
>
${msg("restartLoginTooltip")}
</a>
</div>
</#if>
@ -143,8 +147,11 @@
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post">
<div class="${properties.kcFormGroupClass!}">
<input type="hidden" name="tryAnotherWay" value="on"/>
<a href="#" id="try-another-way"
onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
<a
href="#"
id="try-another-way"
onclick="document.forms['kc-select-try-another-way-form'].submit();return false;"
>${msg("doTryAnotherWay")}</a>
</div>
</form>
</#if>