changed css
This commit is contained in:
parent
426466b6d5
commit
6d82179c70
|
|
@ -1,5 +1,535 @@
|
|||
body {
|
||||
.login-pf body {
|
||||
background: url("../img/bg.png") no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: #ffffff;
|
||||
border-color: #cc0000;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
#kc-locale ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
list-style: none;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
min-width: 100px;
|
||||
padding: 2px 0;
|
||||
border: solid 1px #bbb;
|
||||
}
|
||||
|
||||
#kc-locale:hover ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#kc-locale ul li a {
|
||||
display: block;
|
||||
padding: 5px 14px;
|
||||
color: #000 !important;
|
||||
text-decoration: none;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#kc-locale ul li a:hover {
|
||||
color: #4d5258;
|
||||
background-color: #d4edfa;
|
||||
}
|
||||
|
||||
#kc-locale-dropdown a {
|
||||
color: #4d5258;
|
||||
background: 0 0;
|
||||
padding: 0 15px 0 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#kc-locale-dropdown a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a#kc-current-locale-link {
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/* a#kc-current-locale-link:hover {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
} */
|
||||
|
||||
a#kc-current-locale-link::after {
|
||||
content: "\2c5";
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.login-pf .container {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.login-pf a:hover {
|
||||
color: #0099d3;
|
||||
}
|
||||
|
||||
#kc-logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#kc-logo-wrapper {
|
||||
background-image: url(../img/keycloak-logo-2.png);
|
||||
background-repeat: no-repeat;
|
||||
height: 63px;
|
||||
width: 300px;
|
||||
margin: 62px auto 0;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#kc-webauthn-settings-form{
|
||||
padding-top:8px;
|
||||
}
|
||||
|
||||
/* #kc-content-wrapper {
|
||||
overflow-y: hidden;
|
||||
} */
|
||||
|
||||
#kc-info {
|
||||
padding-bottom: 200px;
|
||||
margin-bottom: -200px;
|
||||
}
|
||||
|
||||
#kc-info-wrapper {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#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: 15px;
|
||||
}
|
||||
|
||||
/* TOTP */
|
||||
|
||||
.subtitle {
|
||||
text-align: right;
|
||||
margin-top: 30px;
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #CB2915;
|
||||
}
|
||||
|
||||
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-providers ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#kc-social-providers li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#kc-social-providers li:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.kc-login-tooltip{
|
||||
position:relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.zocial,
|
||||
a.zocial {
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
text-shadow: none;
|
||||
border: 0;
|
||||
background: #f5f5f5;
|
||||
color: #72767b;
|
||||
border-radius: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
.zocial:before {
|
||||
border-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.zocial span:before {
|
||||
padding: 7px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.zocial:hover {
|
||||
background: #ededed !important;
|
||||
}
|
||||
|
||||
.zocial.facebook,
|
||||
.zocial.github,
|
||||
.zocial.google,
|
||||
.zocial.microsoft,
|
||||
.zocial.stackoverflow,
|
||||
.zocial.linkedin,
|
||||
.zocial.twitter {
|
||||
background-image: none;
|
||||
border: 0;
|
||||
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Copy of zocial windows classes to be used for microsoft's social provider button */
|
||||
.zocial.microsoft:before{ content: "\f15d"; }
|
||||
.zocial.stackoverflow:before{ color: inherit; }
|
||||
|
||||
|
||||
@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);
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
padding-left: 0px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#kc-social-providers li {
|
||||
display: block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#kc-logo-wrapper {
|
||||
background-size: 100px 21px;
|
||||
height: 21px;
|
||||
width: 100px;
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@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: 40px;
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-brand {
|
||||
margin-top: 20px;
|
||||
max-width: 360px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.card-pf {
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
max-width: 500px;
|
||||
border-top: 0;
|
||||
box-shadow: 0 0 0;
|
||||
}
|
||||
|
||||
/*tablet*/
|
||||
@media (max-width: 840px) {
|
||||
.login-pf-page .card-pf{
|
||||
max-width: none;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
padding: 20px 20px 30px 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.login-pf-page .card-pf{
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
.card-pf.login-pf-accounts{
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-signup {
|
||||
font-size: 15px;
|
||||
color: #72767b;
|
||||
}
|
||||
#kc-content-wrapper .row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.login-pf-page .login-pf-social-section:first-of-type {
|
||||
padding-right: 39px;
|
||||
border-right: 1px solid #d1d1d1;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-section:last-of-type {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-section .login-pf-social-link:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-pf-page .login-pf-social-link {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.login-pf-page .login-pf-social-link a {
|
||||
padding: 2px 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%;
|
||||
}
|
||||
|
||||
.login-pf-page .card-pf{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#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 {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#kc-back {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
form#kc-select-back-form div.login-pf-social-section {
|
||||
padding-left: 0px;
|
||||
border-left: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,94 @@
|
|||
parent=keycloak
|
||||
parent=base
|
||||
import=common/keycloak
|
||||
|
||||
styles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css css/s2i2s-login.css
|
||||
styles=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/zocial/zocial.css css/s2i2s.css
|
||||
meta=viewport==width=device-width,initial-scale=1
|
||||
|
||||
kcLogoLink=http://www.isti.cnr.it
|
||||
kcBodyClass=login-s2i2s
|
||||
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
|
||||
kcContentWrapperClass=row
|
||||
|
||||
kcHeaderClass=login-pf-page-header
|
||||
kcFeedbackAreaClass=col-md-12
|
||||
kcLocaleClass=col-xs-12 col-sm-1
|
||||
kcAlertIconClasserror=pficon pficon-error-circle-o
|
||||
|
||||
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
|
||||
kcFormCardAccountClass=login-pf-accounts
|
||||
kcFormSocialAccountClass=login-pf-social-section
|
||||
kcFormSocialAccountContentClass=col-xs-12 col-sm-6
|
||||
kcFormSocialAccountListClass=login-pf-social list-unstyled login-pf-social-all
|
||||
kcFormSocialAccountDoubleListClass=login-pf-social-double-col
|
||||
kcFormSocialAccountListLinkClass=login-pf-social-link
|
||||
kcFormHeaderClass=login-pf-header
|
||||
|
||||
kcFeedbackErrorIcon=pficon pficon-error-circle-o
|
||||
kcFeedbackWarningIcon=pficon pficon-warning-triangle-o
|
||||
kcFeedbackSuccessIcon=pficon pficon-ok
|
||||
kcFeedbackInfoIcon=pficon pficon-info
|
||||
|
||||
kcResetFlowIcon=pficon pficon-arrow fa-2x
|
||||
kcWebAuthnKeyIcon=pficon pficon-key
|
||||
|
||||
kcFormClass=form-horizontal
|
||||
kcFormGroupClass=form-group
|
||||
kcFormGroupErrorClass=has-error
|
||||
kcLabelClass=control-label
|
||||
kcLabelWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
|
||||
kcInputClass=form-control
|
||||
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=btn
|
||||
# classes defining priority of the button - primary or default (there is typically only one priority button for the form)
|
||||
kcButtonPrimaryClass=btn-primary
|
||||
kcButtonDefaultClass=btn-default
|
||||
# classes defining size of the button
|
||||
kcButtonLargeClass=btn-lg
|
||||
kcButtonBlockClass=btn-block
|
||||
|
||||
##### css classes for input
|
||||
kcInputLargeClass=input-lg
|
||||
|
||||
##### css classes for form accessability
|
||||
kcSrOnlyClass=sr-only
|
||||
|
||||
##### css classes for select-authenticator form
|
||||
kcSelectAuthListClass=list-group list-view-pf
|
||||
kcSelectAuthListItemClass=list-group-item list-view-pf-stacked
|
||||
kcSelectAuthListItemInfoClass=list-view-pf-main-info
|
||||
kcSelectAuthListItemLeftClass=list-view-pf-left
|
||||
kcSelectAuthListItemBodyClass=list-view-pf-body
|
||||
kcSelectAuthListItemDescriptionClass=list-view-pf-description
|
||||
kcSelectAuthListItemHeadingClass=list-group-item-heading
|
||||
kcSelectAuthListItemHelpTextClass=list-group-item-text
|
||||
|
||||
##### 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
|
||||
kcSelectOTPListClass=card-pf card-pf-view card-pf-view-select card-pf-view-single-select
|
||||
kcSelectOTPListItemClass=card-pf-body card-pf-top-element
|
||||
kcAuthenticatorOtpCircleClass=fa fa-mobile card-pf-icon-circle
|
||||
kcSelectOTPItemHeadingClass=card-pf-title text-center
|
||||
Loading…
Reference in New Issue