/* Garg Systems — Keycloak login theme (keycloak.v2 / PatternFly v5) Selectors verified against the rendered markup, not assumed. */ :root { --garg-ink: #12233F; --garg-brass: #B7893F; --garg-paper: #F5F2EC; --garg-slate: #5A6B84; } /* page canvas — the real body is */ body#keycloak-bg, html body#keycloak-bg { background-color: var(--garg-paper) !important; background-image: url("../img/bg.svg") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* the card */ .pf-v5-c-login__main { border-top: 3px solid var(--garg-brass) !important; border-radius: 10px !important; box-shadow: 0 14px 44px rgba(18, 35, 63, .16) !important; overflow: hidden; } /* wordmark replaces the header text */ #kc-header-wrapper { background-image: url("../img/logo.svg"); background-repeat: no-repeat; background-position: center center; background-size: contain; height: 66px; margin-bottom: 10px; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-indent: -9999px; } #kc-header { padding-bottom: 4px; } /* title */ h1#kc-page-title, .pf-v5-c-login__main-header #kc-page-title { color: var(--garg-ink) !important; font-size: 1.35rem !important; font-weight: 600 !important; letter-spacing: -0.01em; } /* labels + inputs */ .pf-v5-c-form__label-text { color: var(--garg-ink) !important; font-weight: 500; } .pf-v5-c-form-control { border-radius: 8px !important; } .pf-v5-c-form-control:focus-within { outline: 2px solid var(--garg-brass) !important; outline-offset: 1px; } /* primary button */ .pf-v5-c-button.pf-m-primary { background-color: var(--garg-ink) !important; border-color: var(--garg-ink) !important; border-radius: 8px !important; font-weight: 600 !important; } .pf-v5-c-button.pf-m-primary:hover { background-color: #1b3157 !important; border-color: #1b3157 !important; } /* links */ .pf-v5-c-login__main a, .pf-v5-c-login__main-footer a, #kc-registration a, #kc-form-options a { color: var(--garg-brass) !important; } .pf-v5-c-login__main a:hover { color: #8f6a2f !important; } /* alerts */ .pf-v5-c-alert.pf-m-danger { border-left: 3px solid #c9190b !important; } .pf-v5-c-alert.pf-m-success { border-left: 3px solid var(--garg-brass) !important; } /* footer text */ #kc-info-message, .pf-v5-c-login__main-footer-band { color: var(--garg-slate) !important; } @media (max-width: 640px) { #kc-header-wrapper { height: 50px; } .pf-v5-c-login__main { border-radius: 0 !important; } } /* ================================================================== Social login (Google) ------------------------------------------------------------------ keycloak.v2 renders each provider as an icon-only link: div#kc-social-providers > ul.pf-v5-c-login__main-footer-links li.pf-v5-c-login__main-footer-links-item a#social-google.pf-v5-c-login__main-footer-links-item-link svg <-- Keycloak's own inline Google mark, no text label The visible label is added with ::after; the anchor already carries aria-label="Google", so screen readers are unaffected. ================================================================== */ /* "Or sign in with" -> a proper divider */ .pf-v5-c-login__main-footer-band { position: relative; margin-top: 1.4rem; padding-top: 0.2rem; } .pf-v5-c-login__main-footer-band::before { content: ""; position: absolute; left: 0; right: 0; top: -0.5rem; border-top: 1px solid rgba(18, 35, 63, 0.14); } .pf-v5-c-login__main-footer-band-item { text-align: center; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--garg-slate) !important; } #kc-social-providers .pf-v5-c-login__main-footer-links { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.9rem 0 0; padding: 0; list-style: none; } #kc-social-providers .pf-v5-c-login__main-footer-links-item { width: 100%; } #kc-social-providers a.pf-v5-c-login__main-footer-links-item-link { display: flex !important; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; padding: 0.62rem 1rem; border: 1px solid rgba(18, 35, 63, 0.25); border-radius: 4px; background: #FFFFFF; color: var(--garg-ink) !important; font-size: 0.95rem; font-weight: 600; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease; } #kc-social-providers a.pf-v5-c-login__main-footer-links-item-link:hover { border-color: var(--garg-brass); box-shadow: 0 2px 8px rgba(18, 35, 63, 0.10); } #kc-social-providers a.pf-v5-c-login__main-footer-links-item-link svg { width: 18px; height: 18px; flex: none; fill: currentColor; } #kc-social-providers a#social-google::after { content: "Continue with Google"; }