更新样式

mugen-isekai/login/theme.properties

@@ -0,0 +1,132 @@
+parent=mugen
+import=common/keycloak
+
+styles=css/styles.css
+stylesCommon=vendor/patternfly-v5/patternfly.min.css vendor/patternfly-v5/patternfly-addons.css
+
+scripts=js/lib/patternfly-simple.js js/lib/common.js
+
+darkMode=true
+
+kcFormGroupClass=pf-v5-c-form__group
+kcFormGroupLabelClass=pf-v5-c-form__group-label pf-v5-u-pb-xs
+kcFormLabelClass=pf-v5-c-form__label
+kcFormLabelTextClass=pf-v5-c-form__label-text
+
+kcLabelClass=pf-v5-c-form__label
+kcInputClass=pf-v5-c-form-control
+kcInputGroup=pf-v5-c-input-group
+kcFormHelperTextClass=pf-v5-c-form__helper-text
+kcInputHelperTextClass=pf-v5-c-helper-text pf-v5-u-display-flex pf-v5-u-justify-content-space-between
+kcInputHelperTextItemClass=pf-v5-c-helper-text__item
+kcInputHelperTextItemTextClass=pf-v5-c-helper-text__item-text
+kcInputGroupItemClass=pf-v5-c-input-group__item
+kcFill=pf-m-fill
+kcError=pf-m-error
+kcLoginFooterBand=pf-v5-c-login__main-footer-band
+kcLoginFooterBandItem=pf-v5-c-login__main-footer-band-item
+
+kcCheckboxClass=pf-v5-c-check
+kcCheckboxInputClass=pf-v5-c-check__input
+kcCheckboxLabelClass=pf-v5-c-check__label
+kcCheckboxLabelRequiredClass=pf-v5-c-check__label-required
+
+kcInputRequiredClass=pf-v5-c-form__label-required
+kcInputErrorMessageClass=pf-v5-c-helper-text__item-text pf-m-error kc-feedback-text
+kcFormControlUtilClass=pf-v5-c-form-control__utilities
+kcInputErrorIconStatusClass=pf-v5-c-form-control__icon pf-m-status
+kcInputErrorIconClass=fas fa-exclamation-circle
+kcAlertClass=pf-v5-c-alert pf-m-inline pf-v5-u-mb-md
+kcAlertIconClass=pf-v5-c-alert__icon
+kcAlertTitleClass=pf-v5-c-alert__title
+kcAlertDescriptionClass=pf-v5-c-alert__description
+kcFormPasswordVisibilityButtonClass=pf-v5-c-button pf-m-control
+kcFormControlToggleIcon=pf-v5-c-form-control__toggle-icon
+kcFormActionGroupClass=pf-v5-c-form__actions pf-v5-u-pt-xs
+kcFormReadOnlyClass=pf-m-readonly
+
+kcPanelClass=pf-v5-c-panel pf-m-raised
+kcPanelMainClass=pf-v5-c-panel__main
+kcPanelMainBodyClass=pf-v5-c-panel__main-body
+kcListClass=pf-v5-c-list
+
+kcButtonClass=pf-v5-c-button
+kcButtonPrimaryClass=pf-v5-c-button pf-m-primary
+kcButtonSecondaryClass=pf-v5-c-button pf-m-secondary
+kcButtonBlockClass=pf-m-block
+kcButtonLinkClass=pf-v5-c-button pf-m-link
+kcCommonLogoIdP=pf-v5-c-login__main-footer-links-item
+kcFormSocialAccountListClass=pf-v5-c-login__main-body pf-v5-u-pl-0 pf-v5-u-pr-0
+kcFormSocialAccountListItemClass=pf-v5-u-pb-sm
+kcFormSocialAccountNameClass=pf-v5-u-m-auto
+kcFormSocialAccountListButtonClass=pf-v5-c-button pf-m-secondary pf-m-block pf-v5-u-display-flex pf-v5-u-align-items-center pf-v5-u-justify-content-space-between
+kcFormSocialAccountListButtonDisabledClass=pf-m-aria-disabled
+kcFormSocialAccountListGridClass=pf-v5-l-grid pf-m-gutter pf-m-all-6-col-on-xl pf-m-all-6-col-on-sm
+kcFormSocialAccountGridItem=pf-v5-l-grid__item
+
+kcLoginClass=pf-v5-c-login__main
+kcFormClass=pf-v5-c-form pf-v5-u-w-100
+kcFormCardClass=card-pf
+
+kcResetFlowIcon=pf-icon fas fa-share-square
+
+kcSelectAuthListClass=pf-v5-c-data-list select-auth-container
+kcSelectAuthListItemWrapperClass=pf-v5-c-data-list__item pf-m-clickable
+kcSelectAuthListItemClass=pf-v5-c-data-list__item-row select-auth-box-parent
+kcSelectAuthListItemHeadingClass=pf-v5-u-font-family-heading select-auth-box-headline
+kcSelectAuthListItemBodyClass=pf-v5-c-data-list__cell pf-m-no-fill pf-v5-u-pt-md pf-v5-u-pb-md
+kcSelectAuthListItemIconClass=pf-v5-c-data-list__cell pf-m-icon pf-v5-u-display-flex pf-v5-u-pt-0 pf-v5-u-align-items-center 
+kcSelectAuthListItemFillClass=pf-v5-c-data-list__item-action
+kcSelectAuthListItemDescriptionClass=pf-v5-c-data-list__cell pf-m-no-fill select-auth-box-desc
+
+kcRecoveryCodesWarning=pf-v5-c-alert pf-m-warning pf-m-inline pf-v5-u-mb-md kc-recovery-codes-warning
+kcLogin=pf-v5-c-login
+kcLoginContainer=pf-v5-c-login__container
+kcLoginMain=pf-v5-c-login__main
+kcLoginMainHeader=pf-v5-c-login__main-header
+kcLoginMainFooter=pf-v5-c-login__main-footer
+kcLoginMainFooterBand=pf-v5-c-login__main-footer-band
+kcLoginMainFooterBandItem=pf-v5-c-login__main-footer-band-item
+kcLoginMainFooterHelperText=pf-v5-u-font-size-sm pf-v5-u-color-200
+kcLoginMainTitle=pf-v5-c-title pf-m-3xl
+kcLoginMainHeaderUtilities=pf-v5-c-login__main-header-utilities
+kcLoginMainBody=pf-v5-c-login__main-body
+
+kcContentWrapperClass=pf-v5-u-mb-md
+kcWebAuthnDefaultIcon=pf-v5-c-icon pf-m-lg
+kcMarginTopClass=pf-v5-u-mt-md
+
+kcLoginOTPListClass=pf-v5-c-tile
+kcLoginOTPListItemHeaderClass=pf-v5-c-tile__header pf-m-stacked
+kcLoginOTPListItemIconBodyClass=pf-v5-c-tile__icon
+kcLoginOTPListItemIconClass=fa fa-mobile
+kcLoginOTPListItemTitleClass=pf-v5-c-tile__title
+kcLoginOTPListSelectedClass=pf-m-selected
+
+kcCopyIconClass=fas fa-copy
+kcCheckIconClass=fas fa-check
+kcAngleRightIconClass=fas fa-angle-right
+kcAngleDownIconClass=fas fa-angle-down
+kcExpandedClass=pf-m-expanded
+
+kcCodeClipboardCopyClass=pf-v5-c-clipboard-copy
+kcCodeClipboardCopyGroupClass=pf-v5-c-clipboard-copy__group
+kcCodeClipboardCopyContentClass=pf-v5-c-clipboard-copy__expandable-content
+
+kcDarkModeClass=pf-v5-theme-dark
+
+kcHtmlClass=login-pf
+kcLogoIdP-facebook=
+kcLogoIdP-google=
+kcLogoIdP-github=
+kcLogoIdP-linkedin=
+kcLogoIdP-instagram=
+kcLogoIdP-microsoft=
+kcLogoIdP-bitbucket=
+kcLogoIdP-gitlab=
+kcLogoIdP-paypal=
+kcLogoIdP-stackoverflow=
+kcLogoIdP-twitter=
+kcLogoIdP-openshift-v4=
+
+kcLoginBackgroundImageUrl=img/isekai_bg.svg

mugen/login/resources/css/styles.css

@@ -100,12 +100,13 @@ div.kc-logo-text span {
 }
 
 #kc-header-wrapper {
-    font-size: 29px;
-    text-transform: uppercase;
+    font-size: 46px;
+    text-shadow: 0px 1px 0px #999, 0px 2px 0px #777, 0px 3px 0px #555, 0px 4px 0px #333, 0px 5px 7px rgba(0,0,0,0.3);
+    text-transform: capitalize;
     letter-spacing: 3px;
     line-height: 1.2em;
     white-space: normal;
-    color: var(--pf-v5-global--Color--light-100) !important;
+    color: #fff !important;
     text-align: center;
 }
 

mugen/login/template.ftl

@@ -49,6 +49,11 @@
             <link href="${url.resourcesPath}/${style}" rel="stylesheet" />
         </#list>
     </#if>
+    <style>
+      :root {
+        --keycloak-bg-logo-url: url('${url.resourcesPath}/${properties.kcLoginBackgroundImageUrl!''}');
+      }
+    </style>
     <script type="importmap">
         {
             "imports": {

mugen/login/theme.properties

@@ -129,4 +129,4 @@ kcLogoIdP-stackoverflow=
 kcLogoIdP-twitter=
 kcLogoIdP-openshift-v4=
 
-kcBackgroundImage=
+kcLoginBackgroundImageUrl=img/keycloak-bg-darken.svg