platform/keycloak-theme
Archived
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update keycloak theme

Browse Source
This commit is contained in:
Jonas Juselius
2024-02-22 09:47:34 +01:00
parent d6fde78f8d
commit f9e012da95
9813 changed files with 611335 additions and 162181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
keycloak-themes/oceanbox/login/resources/css/login.css
+18 -182
View File
@@ -6,173 +6,33 @@
}
.login-pf body {
/* background: url("../img/oceanbox-bg.jpg") no-repeat center center fixed; */
background: url("../img/oceanbox-bg.png") no-repeat center center fixed;
background: white;
background-size: cover;
height: 100%;
}
/*IE compatibility*/
.pf-c-form-control {
font-size: 14px;
font-size: var(--pf-global--FontSize--sm);
border-width: 1px;
border-width: var(--pf-global--BorderWidth--sm);;
border-color: #EDEDED #EDEDED #8A8D90 #EDEDED;
border-color: var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--200) var(--pf-global--BorderColor--300);
background-color: #FFFFFF;
background-color: var(--pf-global--BackgroundColor--100);
height: 36px;
height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));
padding: 5px 0.5rem;
padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
}
textarea.pf-c-form-control {
height: auto;
}
.pf-c-form-control:hover, .pf-c-form-control:focus {
border-bottom-color: #0066CC;
border-bottom-color: var(--pf-global--primary-color--100);
border-bottom-width: 2px;
border-bottom-width: var(--pf-global--BorderWidth--md);
}
.pf-c-form-control[aria-invalid="true"] {
border-bottom-color: #C9190B;
border-bottom-color: var(--pf-global--danger-color--100);
border-bottom-width: 2px;
border-bottom-width: var(--pf-global--BorderWidth--md);
}
.pf-c-check__label, .pf-c-radio__label {
font-size: 14px;
font-size: var(--pf-global--FontSize--sm);
}
.pf-c-alert.pf-m-inline {
margin-bottom: 0.5rem; /* default - IE compatibility */
margin-bottom: var(--pf-global--spacer--sm);
padding: 0.25rem;
padding: var(--pf-global--spacer--xs);
border: solid #ededed;
border: solid var(--pf-global--BorderColor--300);
border-width: 1px;
border-width: var(--pf-c-alert--m-inline--BorderTopWidth) var(--pf-c-alert--m-inline--BorderRightWidth) var(--pf-c-alert--m-inline--BorderBottomWidth) var(--pf-c-alert--m-inline--BorderLeftWidth);
display: -ms-flexbox;
display: grid;
-ms-grid-columns: max-content 1fr max-content;
grid-template-columns:max-content 1fr max-content;
grid-template-columns: var(--pf-c-alert--grid-template-columns);
grid-template-rows: 1fr auto;
grid-template-rows: var(--pf-c-alert--grid-template-rows);
}
.pf-c-alert.pf-m-inline::before {
position: absolute;
top: -1px;
top: var(--pf-c-alert--m-inline--before--Top);
bottom: -1px;
bottom: var(--pf-c-alert--m-inline--before--Bottom);
left: 0;
width: 3px;
width: var(--pf-c-alert--m-inline--before--Width);
content: "";
background-color: #FFFFFF;
background-color: var(--pf-global--BackgroundColor--100);
}
.pf-c-alert.pf-m-inline.pf-m-success::before {
background-color: #92D400;
background-color: var(--pf-global--success-color--100);
}
.pf-c-alert.pf-m-inline.pf-m-danger::before {
background-color: #C9190B;
background-color: var(--pf-global--danger-color--100);
}
.pf-c-alert.pf-m-inline.pf-m-warning::before {
background-color: #F0AB00;
background-color: var(--pf-global--warning-color--100);
}
.pf-c-alert.pf-m-inline .pf-c-alert__icon {
padding: 1rem 0.5rem 1rem 1rem;
padding: var(--pf-c-alert--m-inline__icon--PaddingTop) var(--pf-c-alert--m-inline__icon--PaddingRight) var(--pf-c-alert--m-inline__icon--PaddingBottom) var(--pf-c-alert--m-inline__icon--PaddingLeft);
font-size: 16px;
font-size: var(--pf-c-alert--m-inline__icon--FontSize);
}
.pf-c-alert.pf-m-success .pf-c-alert__icon {
color: #92D400;
color: var(--pf-global--success-color--100);
}
.pf-c-alert.pf-m-success .pf-c-alert__title {
color: #486B00;
color: var(--pf-global--success-color--200);
}
.pf-c-alert.pf-m-danger .pf-c-alert__icon {
color: #C9190B;
color: var(--pf-global--danger-color--100);
}
.pf-c-alert.pf-m-danger .pf-c-alert__title {
color: #A30000;
color: var(--pf-global--danger-color--200);
}
.pf-c-alert.pf-m-warning .pf-c-alert__icon {
color: #F0AB00;
color: var(--pf-global--warning-color--100);
}
.pf-c-alert.pf-m-warning .pf-c-alert__title {
color: #795600;
color: var(--pf-global--warning-color--200);
}
.pf-c-alert__title {
font-size: 14px; /* default - IE compatibility */
font-size: var(--pf-global--FontSize--sm);
padding: 5px 8px;
padding: var(--pf-c-alert__title--PaddingTop) var(--pf-c-alert__title--PaddingRight) var(--pf-c-alert__title--PaddingBottom) var(--pf-c-alert__title--PaddingLeft);
font-size: var(--pf-global--FontSize--xs);
}
.pf-c-button{
padding:0.375rem 1rem;
padding: var(--pf-global--spacer--form-element) var(--pf-global--spacer--md);
p.instruction {
margin: 5px 0;
}
/* default - IE compatibility */
.pf-m-primary {
color: #FFFFFF;
background-color: #0066CC;
background-color: var(--pf-global--primary-color--100);
}
/* default - IE compatibility */
.pf-m-primary:hover {
background-color: #004080;
background-color: var(--pf-global--primary-color--200);
}
/* default - IE compatibility */
.pf-c-button.pf-m-control {
border: solid 1px;
border: solid var(--pf-global--BorderWidth--sm);
border-color: rgba(230, 230, 230, 0.5);
}
/*End of IE compatibility*/
h1#kc-page-title {
margin-top: 10px;
}
#kc-locale ul {
background-color: #FFF;
background-color: var(--pf-global--BackgroundColor--100);
display: none;
top: 20px;
@@ -188,19 +48,14 @@ h1#kc-page-title {
display:block;
}
/* IE compatibility */
#kc-locale-dropdown a {
color: #6A6E73;
color: var(--pf-global--Color--200);
text-align: right;
font-size: 14px;
font-size: var(--pf-global--FontSize--sm);
}
/* IE compatibility */
a#kc-current-locale-link::after {
content: "\2c5";
margin-left: 4px;
margin-left: var(--pf-global--spacer--xs)
}
@@ -323,6 +178,13 @@ div.kc-logo-text span {
margin-bottom: 20px;
}
#kc-registration-terms-text {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
margin: 5px;
}
#kc-registration {
margin-bottom: 0;
}
@@ -336,7 +198,6 @@ div.kc-logo-text span {
}
.required {
color: #A30000; /* default - IE compatibility */
color: var(--pf-global--danger-color--200);
}
@@ -399,6 +260,10 @@ ul#kc-totp-supported-apps {
margin-top: 20px;
}
.kc-social-links li {
width: 100%;
}
.kc-social-provider-logo {
font-size: 23px;
width: 30px;
@@ -407,12 +272,10 @@ ul#kc-totp-supported-apps {
}
.kc-social-gray {
color: #737679; /* default - IE compatibility */
color: var(--pf-global--Color--200);
}
.kc-social-item {
margin-bottom: 0.5rem; /* default - IE compatibility */
margin-bottom: var(--pf-global--spacer--sm);
font-size: 15px;
text-align: center;
@@ -420,7 +283,6 @@ ul#kc-totp-supported-apps {
.kc-social-provider-name {
position: relative;
top: 3px;
}
.kc-social-icon-text {
@@ -585,32 +447,6 @@ ul#kc-totp-supported-apps {
width: 40%;
}
/* Internet Explorer 11 compatibility workaround for select-authenticator screen */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.select-auth-box-parent {
border-top: 1px solid #f0f0f0;
padding-top: 1rem;
padding-bottom: 1rem;
cursor: pointer;
}
.select-auth-box-headline {
font-size: 16px;
color: #06c;
font-weight: bold;
}
.select-auth-box-desc {
font-size: 14px;
}
.pf-l-stack {
flex-basis: 100%;
}
}
/* End of IE11 workaround for select-authenticator screen */
.select-auth-box-arrow{
display: flex;
align-items: center;
@@ -662,7 +498,6 @@ ul#kc-totp-supported-apps {
padding: 0 20px;
max-width: 500px;
border-top: 4px solid;
border-color: #0066CC; /* default - IE compatibility */
border-color: var(--pf-global--primary-color--100);
}
@@ -715,7 +550,8 @@ ul#kc-totp-supported-apps {
#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-profile-form div.form-group:last-of-type,
#kc-update-email-form div.form-group:last-of-type{
margin-bottom: 0px;
}
keycloak-themes/oceanbox/login/resources/css/tile.css
-207
View File
@@ -1,207 +0,0 @@
/*Internet Explorer 11 compatibility workaround - IE does not support CSS variables */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.pf-c-tile {
position: relative;
display: -ms-inline-grid;
display: inline-grid;
padding: 1.5rem 1.5rem 1.5rem 1.5rem;
margin-bottom: 0.25rem;
text-align: center;
cursor: pointer;
background-color: #fff;
grid-template-rows: -webkit-min-content;
-ms-grid-rows: -webkit-min-content;
-ms-grid-rows: min-content;
grid-template-rows: min-content;
}
.pf-c-tile::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
content: "";
border: 1px solid #d2d2d2;
border-radius: 3px;
}
.pf-c-tile:hover {
border: 1px solid #06c;
border-radius: 3px;
}
.pf-c-tile:hover .pf-c-tile__title,
.pf-c-tile:hover .pf-c-tile__icon {
color: #06c;
}
.pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__title,
.pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__icon {
color: #06c;
}
.pf-c-tile__input:checked + .pf-c-tile {
border: 2px solid #06c;
border-radius: 3px;
}
.pf-c-tile.pf-m-disabled {
pointer-events: none;
}
.pf-c-tile__header {
display: flex;
align-items: center;
justify-content: center;
}
.pf-c-tile__header.pf-m-stacked {
flex-direction: column;
justify-content: initial;
}
.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.25rem;
}
.pf-c-tile__title {
color: #6a6e73;
}
.pf-c-tile__body {
font-size: 0.75rem;
color: #6a6e73;
}
.pf-c-tile__icon {
margin-right: 0.5rem;
font-size: 1.5rem;
color: #6a6e73;
}
}
/*End of the IE11 workaround*/
.pf-c-tile {
--pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
--pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
--pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
--pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
--pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-tile--before--BorderRadius: var(--pf-global--BorderRadius--sm);
--pf-c-tile--hover--before--BorderColor: var(--pf-global--primary-color--100);
--pf-c-tile--m-selected--before--BorderWidth: var(--pf-global--BorderWidth--md);
--pf-c-tile--m-selected--before--BorderColor: var(--pf-global--primary-color--100);
--pf-c-tile--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
--pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100);
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
--pf-c-tile__title--Color: var(--pf-global--Color--100);
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
--pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
--pf-c-tile__icon--Color: var(--pf-global--Color--100);
--pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
--pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
--pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
--pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
--pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
--pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
--pf-c-tile__body--Color: var(--pf-global--Color--100);
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
position: relative;
display: inline-grid;
padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
margin-bottom: 0.25rem;
text-align: center;
cursor: pointer;
background-color: var(--pf-c-tile--BackgroundColor);
grid-template-rows: min-content;
overflow: hidden;
}
.pf-c-tile::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
content: "";
border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
border-radius: var(--pf-c-tile--before--BorderRadius);
}
.pf-c-tile:hover {
--pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
--pf-c-tile--before--BorderColor: var(--pf-c-tile--hover--before--BorderColor);
}
.pf-c-tile__input:checked + .pf-c-tile {
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--m-selected--before--BorderWidth);
--pf-c-tile--before--BorderColor: var(--pf-c-tile--m-selected--before--BorderColor);
}
.pf-c-tile:focus {
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--focus--before--BorderWidth);
--pf-c-tile--before--BorderColor: var(--pf-c-tile--focus--before--BorderColor);
}
.pf-c-tile.pf-m-disabled {
--pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
--pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color);
--pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color);
--pf-c-tile--before--BorderWidth: 0;
--pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color);
pointer-events: none;
}
.pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked {
--pf-c-tile__icon--FontSize: var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
}
.pf-c-tile__input {
display: none;
}
.pf-c-tile__header {
display: flex;
align-items: center;
justify-content: center;
}
.pf-c-tile__header.pf-m-stacked {
--pf-c-tile__icon--MarginRight: 0;
--pf-c-tile__icon--FontSize: var(--pf-c-tile__header--m-stacked__icon--FontSize);
flex-direction: column;
justify-content: initial;
}
.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom);
}
.pf-c-tile__title {
color: var(--pf-c-tile__title--Color);
}
.pf-c-tile__body {
font-size: var(--pf-c-tile__body--FontSize);
color: var(--pf-c-tile__body--Color);
}
.pf-c-tile__icon {
margin-right: var(--pf-c-tile__icon--MarginRight);
font-size: var(--pf-c-tile__icon--FontSize);
color: var(--pf-c-tile__icon--Color);
}
keycloak-themes/oceanbox/login/resources/img/keycloak-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

keycloak-themes/oceanbox/login/resources/img/keycloak-logo-text.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

keycloak-themes/oceanbox/login/resources/img/keycloak-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

keycloak-themes/oceanbox/login/resources/img/oceanbox-bg.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 MiB

keycloak-themes/oceanbox/login/resources/img/oceanbox-bg.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 109 KiB

keycloak-themes/oceanbox/login/resources/img/oceanbox-logo.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

keycloak-themes/oceanbox/login/theme.properties
+9 -3
View File
@@ -1,15 +1,15 @@
parent=base
import=common/keycloak
styles=css/login.css css/tile.css
stylesCommon=web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css
styles=css/login.css
stylesCommon=node_modules/@patternfly/patternfly/patternfly.min.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css
meta=viewport==width=device-width,initial-scale=1
kcHtmlClass=login-pf
kcLoginClass=login-pf-page
kcLogoLink=https://www.keycloak.org
kcLogoLink=http://www.keycloak.org
kcLogoClass=login-pf-brand
@@ -75,6 +75,7 @@ kcInputClassCheckboxInput=pf-c-check__input
kcInputClassCheckboxLabel=pf-c-check__label
kcInputClassRadioCheckboxLabelDisabled=pf-m-disabled
kcInputErrorMessageClass=pf-c-form__helper-text pf-m-error required kc-feedback-text
kcInputGroup=pf-c-input-group
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
@@ -159,3 +160,8 @@ kcRecoveryCodesConfirmation=kc-recovery-codes-confirmation
kcCheckClass=pf-c-check
kcCheckInputClass=pf-c-check__input
kcCheckLabelClass=pf-c-check__label
## Password visibility
kcFormPasswordVisibilityButtonClass=pf-c-button pf-m-control
kcFormPasswordVisibilityIconShow=fa fa-eye
kcFormPasswordVisibilityIconHide=fa fa-eye-slash