commit 3db80463bdeb5806b0f645093e0750af142dc64e Author: Pheeef Date: Fri Feb 14 21:20:26 2025 +0100 custom theme for keycloak diff --git a/login/resources/css/styles.css b/login/resources/css/styles.css new file mode 100644 index 0000000..bd0ab77 --- /dev/null +++ b/login/resources/css/styles.css @@ -0,0 +1,46 @@ +:root { + --pf-global--primary-color--100: #FFDF5D; + --pf-global--primary-color--200: #ffd738; +} + + +.login-pf body { + background-image: url('../img/background.svg'); + background-size: cover; +} + +.pf-v5-c-login__main { + border-radius: 0.75rem; + background-color: #282828; +} + +.pf-v5-c-button.pf-m-primary { + background-color: #FFDF5D; + color: #282828; +} + +.pf-v5-c-button.pf-m-primary:hover { + background-color: #ffd738; +} + +.pf-v5-c-form-control:focus-within { + --pf-v5-c-form-control--after--BorderBottomColor: #FFDF5D; + --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth); +} + +#kc-header { + display: none; +} + +.pf-v5-c-login__main-header { + display: flex; + flex-direction: column; +} + +.cccsbg-logo { + background-image: url('../img/logo.svg'); + height: 170px; + width: 300px; + background-repeat: no-repeat; + margin-bottom: 50px; +} \ No newline at end of file diff --git a/login/resources/img/background.svg b/login/resources/img/background.svg new file mode 100644 index 0000000..1eb10a9 --- /dev/null +++ b/login/resources/img/background.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/login/resources/img/logo.png b/login/resources/img/logo.png new file mode 100644 index 0000000..6070668 Binary files /dev/null and b/login/resources/img/logo.png differ diff --git a/login/resources/img/logo.svg b/login/resources/img/logo.svg new file mode 100644 index 0000000..9bfbb5c --- /dev/null +++ b/login/resources/img/logo.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/login/template.ftl b/login/template.ftl new file mode 100644 index 0000000..161df5b --- /dev/null +++ b/login/template.ftl @@ -0,0 +1,238 @@ +<#import "field.ftl" as field> +<#import "footer.ftl" as loginFooter> +<#macro username> + <#assign label> + <#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")} + + <@field.group name="username" label=label> +
+
+ + + +
+
+ +
+ + + +<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false> + + dir="${(locale.rtl)?then('rtl','ltr')}"> + + + + + + + + + <#if properties.meta?has_content> + <#list properties.meta?split(' ') as meta> + + + + ${msg("loginTitle",(realm.displayName!''))} + + <#if properties.stylesCommon?has_content> + <#list properties.stylesCommon?split(' ') as style> + + + + <#if properties.styles?has_content> + <#list properties.styles?split(' ') as style> + + + + + <#if darkMode> + + + <#if properties.scripts?has_content> + <#list properties.scripts?split(' ') as script> + + + + <#if scripts??> + <#list scripts as script> + + + + + + <#if authenticationSession??> + + + + + + +
+
+ +
+
+ +

<#nested "header">

+ <#if realm.internationalizationEnabled && locale.supported?size gt 1> +
+
+ + + + + + +
+
+ +
+
+ <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())> + <#if displayRequiredFields> +
+
+ + * ${msg("requiredFields")} + +
+
+ + <#else> + <#if displayRequiredFields> +
+
+ + * ${msg("requiredFields")} + +
+
+ <#nested "show-username"> + <@username /> +
+
+ <#else> +
+ <#nested "show-username"> + <@username /> +
+ + + + <#-- App-initiated actions should not see warning messages about the need to complete the action --> + <#-- during login. --> + <#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)> +
+
+ <#if message.type = 'success'> + <#if message.type = 'warning'> + <#if message.type = 'error'> + <#if message.type = 'info'> +
+ +
+ + + <#nested "form"> + + <#if auth?has_content && auth.showTryAnotherWayLink()> +
+ + + ${kcSanitize(msg("doTryAnotherWay"))?no_esc} + +
+ + + <#if displayInfo> +
+
+ <#nested "info"> +
+
+ +
+ +
+ + <@loginFooter.content/> +
+
+ + + diff --git a/login/theme.properties b/login/theme.properties new file mode 100644 index 0000000..5ef5858 --- /dev/null +++ b/login/theme.properties @@ -0,0 +1,4 @@ +parent=keycloak.v2 +import=common/keycloak +styles=css/styles.css +logo=/img/logo.svg \ No newline at end of file