diff --git a/bootstrap/keycloak-theme/keycloak-themes/oceanbox/login/resources/css/oceanbox.css b/bootstrap/keycloak-theme/keycloak-themes/oceanbox/login/resources/css/oceanbox.css index 9140a73f..5b8f0afe 100644 --- a/bootstrap/keycloak-theme/keycloak-themes/oceanbox/login/resources/css/oceanbox.css +++ b/bootstrap/keycloak-theme/keycloak-themes/oceanbox/login/resources/css/oceanbox.css @@ -1,13 +1,6 @@ -/* Oceanbox Keycloak Login Theme - * - * Branding aligned with oceanbox.io: - * Primary teal: #0bb4aa - * Dark teal: #37746F - * Deep blue: #031275 - * Background: #f9fafd - * Text: #101010 - */ +/* Oceanbox Keycloak Login Theme */ +/* Brand colours */ :root { --pf-v5-global--primary-color--100: #0bb4aa; --pf-v5-global--primary-color--200: #099e95; @@ -15,17 +8,10 @@ --pf-v5-global--link--Color--hover: #031275; } +/* Background */ .login-pf body { background: #f9fafd url("../img/oceanbox-bg.png") no-repeat center bottom fixed; background-size: cover; - height: 100%; -} - -/* Login container layout */ -.pf-v5-c-login__container { - grid-template-columns: 34rem; - grid-template-areas: "header" - "main"; } /* Logo */ @@ -43,67 +29,19 @@ div.kc-logo-text span { display: none; } -/* Header */ -#kc-header-wrapper { - font-size: 29px; - text-transform: uppercase; - letter-spacing: 3px; - line-height: 1.2em; - white-space: normal; - color: #37746F !important; - text-align: center; -} - -/* Login card */ -.pf-v5-c-login__main { - border-radius: 8px; - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); -} - /* Primary button */ .pf-v5-c-button.pf-m-primary { --pf-v5-c-button--m-primary--BackgroundColor: #0bb4aa; --pf-v5-c-button--m-primary--hover--BackgroundColor: #099e95; --pf-v5-c-button--m-primary--active--BackgroundColor: #37746F; --pf-v5-c-button--m-primary--focus--BackgroundColor: #099e95; - border-radius: 4px; } /* Links */ -.pf-v5-c-button.pf-m-link { - --pf-v5-c-button--m-link--Color: #0bb4aa; - --pf-v5-c-button--m-link--hover--Color: #031275; -} - -a { +a, .pf-v5-c-button.pf-m-link { color: #0bb4aa; } -a:hover { +a:hover, .pf-v5-c-button.pf-m-link:hover { color: #031275; } - -/* Form inputs */ -.pf-v5-c-form-control > input, -.pf-v5-c-form-control > textarea { - border-radius: 4px; -} - -#kc-recovery-codes-list { - columns: 2; -} - -#certificate_subjectDN { - overflow-wrap: break-word; -} - -hr { - margin-top: var(--pf-v5-global--spacer--sm); - margin-bottom: var(--pf-v5-global--spacer--md); -} - -@media (min-width: 768px) { - div.pf-v5-c-login__main-header { - grid-template-columns: 70% 30%; - } -}