1 changed files with 597 additions and 0 deletions
@ -0,0 +1,597 @@
|
||||
/* Patternfly CSS places a "bg-login.jpg" as the background on this ".login-pf" class. |
||||
This clashes with the "keycloak-bg.png' background defined on the body below. |
||||
Therefore the Patternfly background must be set to none. */ |
||||
.login-pf { |
||||
background: none; |
||||
} |
||||
|
||||
.login-pf body { |
||||
background: url("../img/keycloak-bg.png") no-repeat center center fixed; |
||||
background-size: cover; |
||||
height: 100%; |
||||
} |
||||
|
||||
textarea.pf-c-form-control { |
||||
height: auto; |
||||
} |
||||
|
||||
.pf-c-alert__title { |
||||
font-size: var(--pf-global--FontSize--xs); |
||||
} |
||||
|
||||
p.instruction { |
||||
margin: 5px 0; |
||||
} |
||||
|
||||
.pf-c-button.pf-m-control { |
||||
border: solid var(--pf-global--BorderWidth--sm); |
||||
border-color: rgba(230, 230, 230, 0.5); |
||||
} |
||||
|
||||
h1#kc-page-title { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
#kc-locale ul { |
||||
background-color: var(--pf-global--BackgroundColor--100); |
||||
display: none; |
||||
top: 20px; |
||||
min-width: 100px; |
||||
padding: 0; |
||||
} |
||||
|
||||
#kc-locale-dropdown{ |
||||
display: inline-block; |
||||
} |
||||
|
||||
#kc-locale-dropdown:hover ul { |
||||
display:block; |
||||
} |
||||
|
||||
#kc-locale-dropdown a { |
||||
color: var(--pf-global--Color--200); |
||||
text-align: right; |
||||
font-size: var(--pf-global--FontSize--sm); |
||||
} |
||||
|
||||
a#kc-current-locale-link::after { |
||||
content: "\2c5"; |
||||
margin-left: var(--pf-global--spacer--xs) |
||||
} |
||||
|
||||
.login-pf .container { |
||||
padding-top: 40px; |
||||
} |
||||
|
||||
.login-pf a:hover { |
||||
color: #0099d3; |
||||
} |
||||
|
||||
#kc-logo { |
||||
width: 100%; |
||||
} |
||||
|
||||
div.kc-logo-text { |
||||
background-image: url(../img/keycloak-logo-text.png); |
||||
background-repeat: no-repeat; |
||||
height: 63px; |
||||
width: 300px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
div.kc-logo-text span { |
||||
display: none; |
||||
} |
||||
|
||||
#kc-header { |
||||
color: #ededed; |
||||
overflow: visible; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
#kc-header-wrapper { |
||||
font-size: 29px; |
||||
text-transform: uppercase; |
||||
letter-spacing: 3px; |
||||
line-height: 1.2em; |
||||
padding: 62px 10px 20px; |
||||
white-space: normal; |
||||
} |
||||
|
||||
#kc-content { |
||||
width: 100%; |
||||
} |
||||
|
||||
#kc-attempted-username { |
||||
font-size: 20px; |
||||
font-family: inherit; |
||||
font-weight: normal; |
||||
padding-right: 10px; |
||||
} |
||||
|
||||
#kc-username { |
||||
text-align: center; |
||||
margin-bottom:-10px; |
||||
} |
||||
|
||||
#kc-webauthn-settings-form { |
||||
padding-top: 8px; |
||||
} |
||||
|
||||
#kc-form-webauthn .select-auth-box-parent { |
||||
pointer-events: none; |
||||
} |
||||
|
||||
#kc-form-webauthn .select-auth-box-desc { |
||||
color: var(--pf-global--palette--black-600); |
||||
} |
||||
|
||||
#kc-form-webauthn .select-auth-box-headline { |
||||
color: var(--pf-global--Color--300); |
||||
} |
||||
|
||||
#kc-form-webauthn .select-auth-box-icon { |
||||
flex: 0 0 3em; |
||||
} |
||||
|
||||
#kc-form-webauthn .select-auth-box-icon-properties { |
||||
margin-top: 10px; |
||||
font-size: 1.8em; |
||||
} |
||||
|
||||
#kc-form-webauthn .select-auth-box-icon-properties.unknown-transport-class { |
||||
margin-top: 3px; |
||||
} |
||||
|
||||
#kc-form-webauthn .pf-l-stack__item { |
||||
margin: -1px 0; |
||||
} |
||||
|
||||
#kc-content-wrapper { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
#kc-form-wrapper { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
#kc-info { |
||||
margin: 20px -40px -30px; |
||||
} |
||||
|
||||
#kc-info-wrapper { |
||||
font-size: 13px; |
||||
padding: 15px 35px; |
||||
background-color: #F0F0F0; |
||||
} |
||||
|
||||
#kc-form-options span { |
||||
display: block; |
||||
} |
||||
|
||||
#kc-form-options .checkbox { |
||||
margin-top: 0; |
||||
color: #72767b; |
||||
} |
||||
|
||||
#kc-terms-text { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
#kc-registration { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
/* TOTP */ |
||||
|
||||
.subtitle { |
||||
text-align: right; |
||||
margin-top: 30px; |
||||
color: #909090; |
||||
} |
||||
|
||||
.required { |
||||
color: var(--pf-global--danger-color--200); |
||||
} |
||||
|
||||
ol#kc-totp-settings { |
||||
margin: 0; |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
ul#kc-totp-supported-apps { |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
#kc-totp-secret-qr-code { |
||||
max-width:150px; |
||||
max-height:150px; |
||||
} |
||||
|
||||
#kc-totp-secret-key { |
||||
background-color: #fff; |
||||
color: #333333; |
||||
font-size: 16px; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
/* OAuth */ |
||||
|
||||
#kc-oauth h3 { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
#kc-oauth ul { |
||||
list-style: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
#kc-oauth ul li { |
||||
border-top: 1px solid rgba(255, 255, 255, 0.1); |
||||
font-size: 12px; |
||||
padding: 10px 0; |
||||
} |
||||
|
||||
#kc-oauth ul li:first-of-type { |
||||
border-top: 0; |
||||
} |
||||
|
||||
#kc-oauth .kc-role { |
||||
display: inline-block; |
||||
width: 50%; |
||||
} |
||||
|
||||
/* Code */ |
||||
#kc-code textarea { |
||||
width: 100%; |
||||
height: 8em; |
||||
} |
||||
|
||||
/* Social */ |
||||
.kc-social-links { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.kc-social-provider-logo { |
||||
font-size: 23px; |
||||
width: 30px; |
||||
height: 25px; |
||||
float: left; |
||||
} |
||||
|
||||
.kc-social-gray { |
||||
color: var(--pf-global--Color--200); |
||||
} |
||||
|
||||
.kc-social-item { |
||||
margin-bottom: var(--pf-global--spacer--sm); |
||||
font-size: 15px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.kc-social-provider-name { |
||||
position: relative; |
||||
top: 3px; |
||||
} |
||||
|
||||
.kc-social-icon-text { |
||||
left: -15px; |
||||
} |
||||
|
||||
.kc-social-grid { |
||||
display:grid; |
||||
grid-column-gap: 10px; |
||||
grid-row-gap: 5px; |
||||
grid-column-end: span 6; |
||||
--pf-l-grid__item--GridColumnEnd: span 6; |
||||
} |
||||
|
||||
.kc-social-grid .kc-social-icon-text { |
||||
left: -10px; |
||||
} |
||||
|
||||
.kc-login-tooltip { |
||||
position: relative; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.kc-social-section { |
||||
text-align: center; |
||||
} |
||||
|
||||
.kc-social-section hr{ |
||||
margin-bottom: 10px |
||||
} |
||||
|
||||
.kc-login-tooltip .kc-tooltip-text{ |
||||
top:-3px; |
||||
left:160%; |
||||
background-color: black; |
||||
visibility: hidden; |
||||
color: #fff; |
||||
|
||||
min-width:130px; |
||||
text-align: center; |
||||
border-radius: 2px; |
||||
box-shadow:0 1px 8px rgba(0,0,0,0.6); |
||||
padding: 5px; |
||||
|
||||
position: absolute; |
||||
opacity:0; |
||||
transition:opacity 0.5s; |
||||
} |
||||
|
||||
/* Show tooltip */ |
||||
.kc-login-tooltip:hover .kc-tooltip-text { |
||||
visibility: visible; |
||||
opacity:0.7; |
||||
} |
||||
|
||||
/* Arrow for tooltip */ |
||||
.kc-login-tooltip .kc-tooltip-text::after { |
||||
content: " "; |
||||
position: absolute; |
||||
top: 15px; |
||||
right: 100%; |
||||
margin-top: -5px; |
||||
border-width: 5px; |
||||
border-style: solid; |
||||
border-color: transparent black transparent transparent; |
||||
} |
||||
|
||||
@media (min-width: 768px) { |
||||
#kc-container-wrapper { |
||||
position: absolute; |
||||
width: 100%; |
||||
} |
||||
|
||||
.login-pf .container { |
||||
padding-right: 80px; |
||||
} |
||||
|
||||
#kc-locale { |
||||
position: relative; |
||||
text-align: right; |
||||
z-index: 9999; |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 767px) { |
||||
|
||||
.login-pf body { |
||||
background: white; |
||||
} |
||||
|
||||
#kc-header { |
||||
padding-left: 15px; |
||||
padding-right: 15px; |
||||
float: none; |
||||
text-align: left; |
||||
} |
||||
|
||||
#kc-header-wrapper { |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
padding: 20px 60px 0 0; |
||||
color: #72767b; |
||||
letter-spacing: 0; |
||||
} |
||||
|
||||
div.kc-logo-text { |
||||
margin: 0; |
||||
width: 150px; |
||||
height: 32px; |
||||
background-size: 100%; |
||||
} |
||||
|
||||
#kc-form { |
||||
float: none; |
||||
} |
||||
|
||||
#kc-info-wrapper { |
||||
border-top: 1px solid rgba(255, 255, 255, 0.1); |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.login-pf .container { |
||||
padding-top: 15px; |
||||
padding-bottom: 15px; |
||||
} |
||||
|
||||
#kc-locale { |
||||
position: absolute; |
||||
width: 200px; |
||||
top: 20px; |
||||
right: 20px; |
||||
text-align: right; |
||||
z-index: 9999; |
||||
} |
||||
} |
||||
|
||||
@media (min-height: 646px) { |
||||
#kc-container-wrapper { |
||||
bottom: 12%; |
||||
} |
||||
} |
||||
|
||||
@media (max-height: 645px) { |
||||
#kc-container-wrapper { |
||||
padding-top: 50px; |
||||
top: 20%; |
||||
} |
||||
} |
||||
|
||||
.card-pf form.form-actions .btn { |
||||
float: right; |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
#kc-form-buttons { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.login-pf-page .login-pf-brand { |
||||
margin-top: 20px; |
||||
max-width: 360px; |
||||
width: 40%; |
||||
} |
||||
|
||||
.select-auth-box-arrow{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-right: 2rem; |
||||
} |
||||
|
||||
.select-auth-box-icon{ |
||||
display: flex; |
||||
flex: 0 0 2em; |
||||
justify-content: center; |
||||
margin-right: 1rem; |
||||
margin-left: 3rem; |
||||
} |
||||
|
||||
.select-auth-box-parent{ |
||||
border-top: 1px solid var(--pf-global--palette--black-200); |
||||
padding-top: 1rem; |
||||
padding-bottom: 1rem; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.select-auth-box-parent:hover{ |
||||
background-color: #f7f8f8; |
||||
} |
||||
|
||||
.select-auth-container { |
||||
padding-bottom: 0px !important; |
||||
} |
||||
|
||||
.select-auth-box-headline { |
||||
font-size: var(--pf-global--FontSize--md); |
||||
color: var(--pf-global--primary-color--100); |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.select-auth-box-desc { |
||||
font-size: var(--pf-global--FontSize--sm); |
||||
} |
||||
|
||||
.select-auth-box-paragraph { |
||||
text-align: center; |
||||
font-size: var(--pf-global--FontSize--md); |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.card-pf { |
||||
margin: 0 auto; |
||||
box-shadow: var(--pf-global--BoxShadow--lg); |
||||
padding: 0 20px; |
||||
max-width: 500px; |
||||
border-top: 4px solid; |
||||
border-color: var(--pf-global--primary-color--100); |
||||
} |
||||
|
||||
/*phone*/ |
||||
@media (max-width: 767px) { |
||||
.login-pf-page .card-pf { |
||||
max-width: none; |
||||
margin-left: 0; |
||||
margin-right: 0; |
||||
padding-top: 0; |
||||
border-top: 0; |
||||
box-shadow: 0 0; |
||||
} |
||||
|
||||
.kc-social-grid { |
||||
grid-column-end: 12; |
||||
--pf-l-grid__item--GridColumnEnd: span 12; |
||||
} |
||||
|
||||
.kc-social-grid .kc-social-icon-text { |
||||
left: -15px; |
||||
} |
||||
} |
||||
|
||||
.login-pf-page .login-pf-signup { |
||||
font-size: 15px; |
||||
color: #72767b; |
||||
} |
||||
#kc-content-wrapper .row { |
||||
margin-left: 0; |
||||
margin-right: 0; |
||||
} |
||||
|
||||
.login-pf-page.login-pf-page-accounts { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
.login-pf-page .btn-primary { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.login-pf-page .list-view-pf .list-group-item { |
||||
border-bottom: 1px solid #ededed; |
||||
} |
||||
|
||||
.login-pf-page .list-view-pf-description { |
||||
width: 100%; |
||||
} |
||||
|
||||
#kc-form-login div.form-group:last-of-type, |
||||
#kc-register-form div.form-group:last-of-type, |
||||
#kc-update-profile-form div.form-group:last-of-type, |
||||
#kc-update-email-form div.form-group:last-of-type{ |
||||
margin-bottom: 0px; |
||||
} |
||||
|
||||
.no-bottom-margin { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
#kc-back { |
||||
margin-top: 5px; |
||||
} |
||||
|
||||
/* Recovery codes */ |
||||
.kc-recovery-codes-warning { |
||||
margin-bottom: 32px; |
||||
} |
||||
.kc-recovery-codes-warning .pf-c-alert__description p { |
||||
font-size: 0.875rem; |
||||
} |
||||
.kc-recovery-codes-list { |
||||
list-style: none; |
||||
columns: 2; |
||||
margin: 16px 0; |
||||
padding: 16px 16px 8px 16px; |
||||
border: 1px solid #D2D2D2; |
||||
} |
||||
.kc-recovery-codes-list li { |
||||
margin-bottom: 8px; |
||||
font-size: 11px; |
||||
} |
||||
.kc-recovery-codes-list li span { |
||||
color: #6A6E73; |
||||
width: 16px; |
||||
text-align: right; |
||||
display: inline-block; |
||||
margin-right: 1px; |
||||
} |
||||
|
||||
.kc-recovery-codes-actions { |
||||
margin-bottom: 24px; |
||||
} |
||||
.kc-recovery-codes-actions button { |
||||
padding-left: 0; |
||||
} |
||||
.kc-recovery-codes-actions button i { |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
.kc-recovery-codes-confirmation { |
||||
align-items: baseline; |
||||
margin-bottom: 16px; |
||||
} |
||||
/* End Recovery codes */ |
||||
|
||||
Loading…
Reference in new issue