/* * SentinelX login theme — CSS overrides on top of keycloak.v2. * * Inspected the parent's templates + styles.css directly (extracted from * keycloak-themes-26.5.6.jar) to find the REAL selectors: * * Outer page: body.login-pf-page (or just ) * Login wrapper: .pf-v5-c-login (body class via kcLoginClass) * Container: .pf-v5-c-login__container * Brand area: #kc-header + #kc-header-wrapper * The "card": .pf-v5-c-login__main ← the one with the bg + border * Card header: .pf-v5-c-login__main-header ← has the blue top border * Card title (h1): .pf-v5-c-login__main-header h1 / #kc-page-title * Card body: .pf-v5-c-login__main-body (form goes here) * Card footer: .pf-v5-c-login__main-footer (social providers go here) * Inputs: .pf-v5-c-form-control * Eye toggle: .pf-v5-c-button.pf-m-control * Primary btn: input[type=submit].pf-v5-c-button.pf-m-primary * Social buttons: .pf-v5-c-button.pf-m-secondary (under #kc-social-providers) * Social title: .pf-v5-c-login__main-footer-band first-child * * The previous version of this file tried generic selectors (.card-pf, * #kc-form-wrapper, etc.) — keycloak.v2 doesn't actually use those, so * those rules silently no-op'd. This pass uses what's in the DOM. */ :root { /* Brand palette, mirrors the dashboard's vars. */ --bg-page: #0a0e14; --bg-card: #131821; --bg-input: #1a212d; --bg-input-focus: #1f2937; --border-soft: #1f2937; --border-hi: #2a3441; --text: #e6edf3; --text-dim: #94a3b8; --text-faint: #64748b; --accent: #5eead4; --accent-hover: #2dd4bf; --accent-soft: rgba(94, 234, 212, 0.12); --danger: #f87171; --radius-card: 12px; --radius-input: 8px; --radius-button: 8px; /* Override keycloak's own token: the blue top-border on the card header. Setting to transparent kills the bar without needing display:none. */ --keycloak-card-top-color: transparent; } /* ────────────────────────────────────────────────────────────────── Page background + typography ────────────────────────────────────────────────────────────────── */ html, body, body.login-pf, body.login-pf-page { background: var(--bg-page) !important; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 14.5px; line-height: 1.5; } body.login-pf, body.login-pf-page, body#keycloak-bg { background-image: radial-gradient(ellipse 800px 500px at 50% -100px, rgba(94, 234, 212, 0.06) 0%, transparent 60%) !important; background-repeat: no-repeat; } /* Tighten the outer login container so the form sits higher. Keycloak v2 centers vertically by default and on short viewports that pushes the social buttons below the fold. */ .pf-v5-c-login, .pf-v5-c-login__container { min-height: auto !important; } .pf-v5-c-login { padding-block-start: 24px !important; padding-block-end: 24px !important; } /* ────────────────────────────────────────────────────────────────── Header — SentinelX logo + brand text ────────────────────────────────────────────────────────────────── */ #kc-header, .pf-v5-c-login__header { padding: 0 0 16px !important; color: var(--text) !important; } #kc-header-wrapper { padding: 0 !important; font-size: 16px; letter-spacing: 0.02em; color: var(--text) !important; } #kc-header-wrapper img { height: 40px !important; width: auto !important; vertical-align: middle; } /* ────────────────────────────────────────────────────────────────── The card — THIS is the actual "card" element (.pf-v5-c-login__main) ────────────────────────────────────────────────────────────────── */ .pf-v5-c-login__main { background: var(--bg-card) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius-card) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.02) inset !important; overflow: hidden; max-width: 440px; margin: 0 auto !important; } /* Header inside the card. Kill the blue top border (the 4px bar) and tighten its vertical padding. */ .pf-v5-c-login__main-header { border-top: none !important; padding: 24px 28px 8px !important; } #kc-page-title, .pf-v5-c-login__main-header h1, .pf-v5-c-title { color: var(--text) !important; font-size: 21px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; margin: 0 !important; line-height: 1.3 !important; } /* Body of the card — where the form lives. NO additional background/border here (that was the "card-in-card" effect from the previous pass). */ .pf-v5-c-login__main-body { background: transparent !important; border: none !important; padding: 8px 28px 16px !important; } /* The two id'd wrappers around the form — they should be invisible structural divs, not visual cards. */ #kc-form, #kc-form-wrapper { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* ────────────────────────────────────────────────────────────────── Labels ────────────────────────────────────────────────────────────────── */ .pf-v5-c-form__label, .pf-v5-c-form__label-text, label { color: var(--text-dim) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px !important; } .pf-v5-c-form__group { margin-bottom: 14px !important; } /* ────────────────────────────────────────────────────────────────── Inputs — kill the underline, restyle the box ────────────────────────────────────────────────────────────────── */ /* PatternFly v5 form-control uses its own custom properties; override them so the entire visual appearance matches the dashboard inputs. The key one is --pf-v5-c-form-control--BorderBottomColor which paints the underline that was leaking through in the previous pass. */ .pf-v5-c-form-control, .pf-v5-c-form-control input { --pf-v5-c-form-control--BorderTopColor: var(--border-soft); --pf-v5-c-form-control--BorderRightColor: var(--border-soft); --pf-v5-c-form-control--BorderBottomColor: var(--border-soft); --pf-v5-c-form-control--BorderLeftColor: var(--border-soft); --pf-v5-c-form-control--BorderBottomWidth: 1px; --pf-v5-c-form-control--BorderRadius: var(--radius-input); --pf-v5-c-form-control--BackgroundColor: var(--bg-input); --pf-v5-c-form-control--Color: var(--text); --pf-v5-c-form-control--FontSize: 14.5px; --pf-v5-c-form-control--PaddingTop: 10px; --pf-v5-c-form-control--PaddingBottom: 10px; --pf-v5-c-form-control--PaddingLeft: 12px; --pf-v5-c-form-control--PaddingRight: 12px; background: var(--bg-input) !important; color: var(--text) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius-input) !important; height: auto !important; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .pf-v5-c-form-control:hover { border-color: var(--border-hi) !important; } .pf-v5-c-form-control:focus, .pf-v5-c-form-control:focus-within, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { outline: none !important; border-color: var(--accent) !important; background: var(--bg-input-focus) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; --pf-v5-c-form-control--BorderBottomColor: var(--accent); } /* ────────────────────────────────────────────────────────────────── Password "show" eye toggle — keep it from pulling its own border ────────────────────────────────────────────────────────────────── */ .pf-v5-c-input-group .pf-v5-c-button.pf-m-control, button.pf-v5-c-button.pf-m-control { background: var(--bg-input) !important; border: 1px solid var(--border-soft) !important; border-left: none !important; border-radius: 0 var(--radius-input) var(--radius-input) 0 !important; color: var(--text-faint) !important; } .pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover { color: var(--text) !important; background: var(--bg-input-focus) !important; } /* Make input-group rows mesh visually (input + eye button as one piece) */ .pf-v5-c-input-group { background: transparent !important; border-radius: var(--radius-input) !important; } .pf-v5-c-input-group .pf-v5-c-form-control { border-right: none !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ────────────────────────────────────────────────────────────────── Primary "Sign In" button ────────────────────────────────────────────────────────────────── */ input[type="submit"].pf-v5-c-button, .pf-v5-c-button.pf-m-primary, .pf-v5-c-button.pf-m-primary.pf-m-block, #kc-login { background: var(--accent) !important; background-color: var(--accent) !important; border: 1px solid var(--accent) !important; border-radius: var(--radius-button) !important; color: #0a0e14 !important; font-weight: 600 !important; font-size: 14.5px !important; letter-spacing: 0.01em; padding: 11px 16px !important; height: auto !important; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); margin-top: 8px !important; } input[type="submit"].pf-v5-c-button:hover, .pf-v5-c-button.pf-m-primary:hover, #kc-login:hover { background: var(--accent-hover) !important; background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: #0a0e14 !important; } input[type="submit"].pf-v5-c-button:focus, .pf-v5-c-button.pf-m-primary:focus, #kc-login:focus { outline: 2px solid var(--accent-hover) !important; outline-offset: 2px !important; } /* ────────────────────────────────────────────────────────────────── Social providers — the GitHub/Google buttons They use .pf-v5-c-button.pf-m-secondary which has the default blue border. Override the whole pf-m-secondary token set inside the social section so we don't accidentally restyle pf-m-secondary buttons elsewhere. ────────────────────────────────────────────────────────────────── */ /* The "Or sign in with" caption */ .pf-v5-c-login__main-footer-band:first-child { margin-block-start: 12px !important; padding: 0 28px !important; } .pf-v5-c-login__main-footer-band-item { color: var(--text-faint) !important; font-size: 12.5px !important; font-weight: 500 !important; text-align: center; width: 100%; } /* The list of provider buttons */ #kc-social-providers { padding: 4px 28px 24px !important; } #kc-social-providers ul { margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px !important; list-style: none; } #kc-social-providers li { padding-bottom: 0 !important; margin: 0 !important; } /* Each social button. Kill PF's secondary blue border, replace with our subtle outline. Override the PF tokens too in case any version of keycloak.v2 reuses them. */ #kc-social-providers .pf-v5-c-button.pf-m-secondary, #kc-social-providers a.pf-v5-c-button { --pf-v5-c-button--m-secondary--BorderColor: var(--border-hi); --pf-v5-c-button--m-secondary--Color: var(--text); --pf-v5-c-button--m-secondary--BackgroundColor: transparent; --pf-v5-c-button--m-secondary--hover--BorderColor: var(--accent); --pf-v5-c-button--m-secondary--hover--Color: var(--text); --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--accent-soft); --pf-v5-c-button--m-secondary--focus--BorderColor: var(--accent); --pf-v5-c-button--m-secondary--focus--Color: var(--text); --pf-v5-c-button--m-secondary--focus--BackgroundColor: var(--accent-soft); --pf-v5-c-button--m-secondary--active--BorderColor: var(--accent); background: transparent !important; background-color: transparent !important; border: 1px solid var(--border-hi) !important; border-radius: var(--radius-button) !important; color: var(--text) !important; padding: 10px 16px !important; font-size: 13.5px !important; font-weight: 500 !important; text-decoration: none !important; display: flex !important; align-items: center; justify-content: center; gap: 10px; transition: border-color 0.15s, background 0.15s; } #kc-social-providers .pf-v5-c-button.pf-m-secondary:hover, #kc-social-providers a.pf-v5-c-button:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; background-color: var(--accent-soft) !important; color: var(--text) !important; } #kc-social-providers .pf-v5-c-button:focus, #kc-social-providers a.pf-v5-c-button:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } /* The social button's name. PF's "justify-content-space-between" leaves a weird gap; override to keep icon+name together. */ #kc-social-providers .pf-v5-c-button .kc-social-provider-name, #kc-social-providers .pf-v5-u-m-auto { margin: 0 !important; } #kc-social-providers svg, #kc-social-providers img { width: 18px; height: 18px; flex-shrink: 0; } /* ────────────────────────────────────────────────────────────────── Misc ────────────────────────────────────────────────────────────────── */ a { color: var(--accent) !important; } a:hover { color: var(--accent-hover) !important; } #kc-form-options a { color: var(--text-dim) !important; font-size: 13px; } #kc-form-options a:hover { color: var(--accent) !important; } /* Error/alert banners */ .pf-v5-c-alert { background: rgba(248, 113, 113, 0.08) !important; border: 1px solid rgba(248, 113, 113, 0.30) !important; border-radius: var(--radius-input) !important; color: var(--danger) !important; padding: 10px 14px !important; margin: 0 28px 12px !important; } .pf-v5-c-alert.pf-m-warning { background: rgba(251, 191, 36, 0.08) !important; border-color: rgba(251, 191, 36, 0.30) !important; color: #fbbf24 !important; } .pf-v5-c-alert.pf-m-success { background: rgba(52, 211, 153, 0.08) !important; border-color: rgba(52, 211, 153, 0.30) !important; color: #34d399 !important; } .pf-v5-c-form__helper-text { color: var(--danger) !important; font-size: 12px !important; margin-top: 4px; } /* ────────────────────────────────────────────────────────────────── Mobile ────────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .pf-v5-c-login__main { margin: 12px !important; border-radius: 10px !important; } .pf-v5-c-login__main-header, .pf-v5-c-login__main-body, #kc-social-providers { padding-left: 20px !important; padding-right: 20px !important; } #kc-page-title { font-size: 19px !important; } }