first draft login view
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
1e69982156
commit
795b1d0539
83
lumbung.space/login/resources/css/login.css
Normal file
83
lumbung.space/login/resources/css/login.css
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
body {
|
||||||
|
|
||||||
|
font-size:1.3em;
|
||||||
|
font-family: sans-serif;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-pf {
|
||||||
|
border:2px solid #0e0e22;
|
||||||
|
max-width:500px;
|
||||||
|
margin:auto;
|
||||||
|
box-shadow:1em 1em 0 #d2d1c8;
|
||||||
|
background-color: #fff09d;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card-pf #kc-content #kc-content-wrapper {
|
||||||
|
|
||||||
|
padding: 1em;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-pf-header {
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#kc-page-title {
|
||||||
|
border-right: 2px solid black;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.2em;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
font-size: 1em;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-form-wrapper {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-form-login {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 5px auto;
|
||||||
|
border:2px solid #0e0e22;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group.login-pf-settings{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-weight: bold;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kc-form-buttons {
|
||||||
|
width: unset;
|
||||||
|
margin: 0;
|
||||||
|
align-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pf-c-form-control {
|
||||||
|
border: none;
|
||||||
|
padding: 5px 5px 5px 5px;
|
||||||
|
border-left: 2px solid black;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
130
lumbung.space/login/theme.properties
Normal file
130
lumbung.space/login/theme.properties
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
parent=base
|
||||||
|
import=common/keycloak
|
||||||
|
|
||||||
|
styles=css/login.css
|
||||||
|
scripts=css/test.js
|
||||||
|
|
||||||
|
meta=viewport==width=device-width,initial-scale=1
|
||||||
|
|
||||||
|
kcHtmlClass=login-pf
|
||||||
|
kcLoginClass=login-pf-page
|
||||||
|
|
||||||
|
kcLogoLink=http://www.keycloak.org
|
||||||
|
|
||||||
|
kcLogoClass=login-pf-brand
|
||||||
|
|
||||||
|
kcContainerClass=container-fluid
|
||||||
|
kcContentClass=col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3
|
||||||
|
|
||||||
|
kcHeaderClass=login-pf-page-header
|
||||||
|
kcFeedbackAreaClass=col-md-12
|
||||||
|
kcLocaleClass=col-xs-12 col-sm-1
|
||||||
|
|
||||||
|
## Locale
|
||||||
|
kcLocaleMainClass=pf-c-dropdown
|
||||||
|
kcLocaleListClass=pf-c-dropdown__menu pf-m-align-right
|
||||||
|
kcLocaleItemClass=pf-c-dropdown__menu-item
|
||||||
|
|
||||||
|
## Alert
|
||||||
|
kcAlertClass=pf-c-alert pf-m-inline
|
||||||
|
kcAlertTitleClass=pf-c-alert__title kc-feedback-text
|
||||||
|
|
||||||
|
kcFormAreaClass=col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2
|
||||||
|
kcFormCardClass=card-pf
|
||||||
|
|
||||||
|
### Social providers
|
||||||
|
kcFormSocialAccountListClass=pf-c-login__main-footer-links kc-social-links
|
||||||
|
kcFormSocialAccountListGridClass=pf-l-grid kc-social-grid
|
||||||
|
kcFormSocialAccountListButtonClass=pf-c-button pf-m-control pf-m-block kc-social-item kc-social-gray
|
||||||
|
kcFormSocialAccountGridItem=pf-l-grid__item
|
||||||
|
|
||||||
|
kcFormSocialAccountNameClass=kc-social-provider-name
|
||||||
|
kcFormSocialAccountLinkClass=pf-c-login__main-footer-links-item-link
|
||||||
|
kcFormSocialAccountSectionClass=kc-social-section kc-social-gray
|
||||||
|
kcFormHeaderClass=login-pf-header
|
||||||
|
|
||||||
|
kcFeedbackErrorIcon=fa fa-fw fa-exclamation-circle
|
||||||
|
kcFeedbackWarningIcon=fa fa-fw fa-exclamation-triangle
|
||||||
|
kcFeedbackSuccessIcon=fa fa-fw fa-check-circle
|
||||||
|
kcFeedbackInfoIcon=fa fa-fw fa-info-circle
|
||||||
|
|
||||||
|
kcResetFlowIcon=pficon pficon-arrow fa
|
||||||
|
kcWebAuthnKeyIcon=pficon pficon-key
|
||||||
|
|
||||||
|
kcFormClass=form-horizontal
|
||||||
|
kcFormGroupClass=form-group
|
||||||
|
kcFormGroupErrorClass=has-error
|
||||||
|
kcLabelClass=pf-c-form__label pf-c-form__label-text
|
||||||
|
kcLabelWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
|
||||||
|
kcInputClass=pf-c-form-control
|
||||||
|
kcInputErrorMessageClass=pf-c-form__helper-text pf-m-error required kc-feedback-text
|
||||||
|
kcInputWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
|
||||||
|
kcFormOptionsClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
|
||||||
|
kcFormButtonsClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
|
||||||
|
kcFormSettingClass=login-pf-settings
|
||||||
|
kcTextareaClass=form-control
|
||||||
|
kcSignUpClass=login-pf-signup
|
||||||
|
|
||||||
|
|
||||||
|
kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-5 details
|
||||||
|
|
||||||
|
##### css classes for form buttons
|
||||||
|
# main class used for all buttons
|
||||||
|
kcButtonClass=pf-c-button
|
||||||
|
# classes defining priority of the button - primary or default (there is typically only one priority button for the form)
|
||||||
|
kcButtonPrimaryClass=pf-m-primary
|
||||||
|
kcButtonDefaultClass=btn-default
|
||||||
|
# classes defining size of the button
|
||||||
|
kcButtonLargeClass=btn-lg
|
||||||
|
kcButtonBlockClass=pf-m-block
|
||||||
|
|
||||||
|
##### css classes for input
|
||||||
|
kcInputLargeClass=input-lg
|
||||||
|
|
||||||
|
##### css classes for form accessability
|
||||||
|
kcSrOnlyClass=sr-only
|
||||||
|
|
||||||
|
##### css classes for select-authenticator form
|
||||||
|
kcSelectAuthListClass=pf-l-stack select-auth-container
|
||||||
|
kcSelectAuthListItemClass=pf-l-stack__item select-auth-box-parent pf-l-split
|
||||||
|
kcSelectAuthListItemIconClass=pf-l-split__item select-auth-box-icon
|
||||||
|
kcSelectAuthListItemBodyClass=pf-l-split__item pf-l-stack
|
||||||
|
kcSelectAuthListItemHeadingClass=pf-l-stack__item select-auth-box-headline pf-c-title
|
||||||
|
kcSelectAuthListItemDescriptionClass=pf-l-stack__item select-auth-box-desc
|
||||||
|
kcSelectAuthListItemFillClass=pf-l-split__item pf-m-fill
|
||||||
|
kcSelectAuthListItemArrowClass=pf-l-split__item select-auth-box-arrow
|
||||||
|
kcSelectAuthListItemArrowIconClass=fa fa-angle-right fa-lg
|
||||||
|
|
||||||
|
##### css classes for the authenticators
|
||||||
|
kcAuthenticatorDefaultClass=fa list-view-pf-icon-lg
|
||||||
|
kcAuthenticatorPasswordClass=fa fa-unlock list-view-pf-icon-lg
|
||||||
|
kcAuthenticatorOTPClass=fa fa-mobile list-view-pf-icon-lg
|
||||||
|
kcAuthenticatorWebAuthnClass=fa fa-key list-view-pf-icon-lg
|
||||||
|
kcAuthenticatorWebAuthnPasswordlessClass=fa fa-key list-view-pf-icon-lg
|
||||||
|
|
||||||
|
##### css classes for the OTP Login Form
|
||||||
|
kcLoginOTPListClass=pf-c-tile
|
||||||
|
kcLoginOTPListInputClass=pf-c-tile__input
|
||||||
|
kcLoginOTPListItemHeaderClass=pf-c-tile__header
|
||||||
|
kcLoginOTPListItemIconBodyClass=pf-c-tile__icon
|
||||||
|
kcLoginOTPListItemIconClass=fa fa-mobile
|
||||||
|
kcLoginOTPListItemTitleClass=pf-c-tile__title
|
||||||
|
|
||||||
|
##### css classes for identity providers logos
|
||||||
|
kcCommonLogoIdP=kc-social-provider-logo kc-social-gray
|
||||||
|
|
||||||
|
## Social
|
||||||
|
kcLogoIdP-facebook=fa fa-facebook
|
||||||
|
kcLogoIdP-google=fa fa-google
|
||||||
|
kcLogoIdP-github=fa fa-github
|
||||||
|
kcLogoIdP-linkedin=fa fa-linkedin
|
||||||
|
kcLogoIdP-instagram=fa fa-instagram
|
||||||
|
## windows instead of microsoft - not included in PF4
|
||||||
|
kcLogoIdP-microsoft=fa fa-windows
|
||||||
|
kcLogoIdP-bitbucket=fa fa-bitbucket
|
||||||
|
kcLogoIdP-gitlab=fa fa-gitlab
|
||||||
|
kcLogoIdP-paypal=fa fa-paypal
|
||||||
|
kcLogoIdP-stackoverflow=fa fa-stack-overflow
|
||||||
|
kcLogoIdP-twitter=fa fa-twitter
|
||||||
|
kcLogoIdP-openshift-v4=pf-icon pf-icon-openshift
|
||||||
|
kcLogoIdP-openshift-v3=pf-icon pf-icon-openshift
|
Loading…
Reference in New Issue
Block a user