/* K360 login theme. Every value here is a token from packages/ui/src/styles.css * (the shell) or a rule from apps/web/src/app/login (the K360 sign-in page), * so a supplier moving from this page into K360 sees one system, not two. * keycloak.v2 exposes the hooks: its own --keycloak-* variables for logo, * background and card accent, and PatternFly 5's global variables for the * primary colour, radius and type. Nothing structural is overridden. */ :root, .pf-v5-theme-dark { /* the wordmark is text (the shell's h1 "K360"), so no logo image */ --keycloak-logo-url: none; --keycloak-bg-logo-url: none; --keycloak-logo-height: 0; --keycloak-logo-width: 0; } :root { --k360-bg: #eeeae5; --k360-panel: #f7f5f2; --k360-text: #28282a; --k360-muted: #5a5a5e; --k360-border: #d5d0c9; --k360-accent: #ff0012; --k360-accent-hover: #d9000f; --k360-err: #c0392b; --k360-warn-bg: #fdf8ec; --k360-warn-ink: #7a4b00; --k360-warn-line: #c98b1a; } /* keycloak.v2 follows prefers-color-scheme by adding this class; the same * dark tokens the shell uses under `@media (prefers-color-scheme: dark)`. */ .pf-v5-theme-dark { --k360-bg: #1e1e20; --k360-panel: #28282a; --k360-text: #eeeae5; --k360-muted: #a8a49e; --k360-border: #3a3a3e; --k360-accent: #ff2436; --k360-accent-hover: #ff4a5a; --k360-err: #ff6b6b; --k360-warn-bg: #33280f; --k360-warn-ink: #f0cf95; --k360-warn-line: #52411a; } :root, .pf-v5-theme-dark { --keycloak-card-top-color: var(--k360-accent); --pf-v5-global--FontFamily--sans-serif: "Aptos", system-ui, -apple-system, "Segoe UI", sans-serif; --pf-v5-global--FontFamily--heading-sans-serif: "Times New Roman", Georgia, serif; --pf-v5-global--primary-color--100: var(--k360-accent); --pf-v5-global--primary-color--200: var(--k360-accent-hover); --pf-v5-global--link--Color: var(--k360-accent); --pf-v5-global--link--Color--hover: var(--k360-accent-hover); --pf-v5-global--BorderRadius--sm: 7px; --pf-v5-global--Color--100: var(--k360-text); --pf-v5-global--Color--200: var(--k360-muted); --pf-v5-global--BackgroundColor--100: var(--k360-panel); --pf-v5-global--BorderColor--100: var(--k360-border); --pf-v5-global--danger-color--100: var(--k360-err); } /* ── The page: the shell's ground, no background picture ─────────────── */ .login-pf body, .login-pf body.pf-v5-theme-dark { background: var(--k360-bg); color: var(--k360-text); font: 15px/1.5 var(--pf-v5-global--FontFamily--sans-serif); } /* keycloak.v2 puts a large uppercase wordmark ABOVE the card. The K360 * sign-in page has none -- its "K360" is the card's own heading -- so the * header goes and the heading does the job (see #kc-page-title). */ #kc-header { display: none; } /* keycloak.v2 draws a 4px accent bar across the top of the card * (--keycloak-card-top-color). The K360 card has no such bar. */ .pf-v5-c-login__main-header { border-top: 0; } /* ── The card: the login page's panel, to the pixel ──────────────────── */ /* One width on every page: the error page's card otherwise shrinks to its * two lines of text and reads as a different design. */ .pf-v5-c-login__main { width: min(380px, calc(100vw - 48px)); max-width: 380px; margin: 0 auto; background: var(--k360-panel); border: 1px solid var(--k360-border); border-top: 1px solid var(--k360-border); border-radius: 12px; padding: 28px; box-shadow: none; } .pf-v5-c-login__main-header, .pf-v5-c-login__main-body, .pf-v5-c-login__main-footer { padding-left: 0; padding-right: 0; } /* The shell's h1: 20px, weight 650, serif. */ #kc-page-title.pf-v5-c-title { font-family: var(--pf-v5-global--FontFamily--heading-sans-serif); font-size: 20px; font-weight: 650; line-height: 1.3; color: var(--k360-text); margin: 0; } /* "Sign in to continue." -- the login page's `.sub` line, only on the * sign-in page itself (template.ftl stamps `data-page-id="login-"` * on ; the page id is the template name without `.ftl`). */ body[data-page-id="login-login"] #kc-page-title::after { content: "Sign in to continue."; display: block; margin-top: 6px; font: 13px/1.5 var(--pf-v5-global--FontFamily--sans-serif); font-weight: 400; color: var(--k360-muted); } /* ── Inputs: .k360-login input ────────────────────────────────────────── */ .pf-v5-c-form__label-text { font-size: 13px; color: var(--k360-muted); font-weight: 400; } .pf-v5-c-form-control { --pf-v5-c-form-control--BorderRadius: 7px; --pf-v5-c-form-control--BackgroundColor: var(--k360-panel); --pf-v5-c-form-control--Color: var(--k360-text); --pf-v5-c-form-control--after--BorderBottomColor: var(--k360-border); --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--k360-muted); --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--k360-accent); border: 1px solid var(--k360-border); border-radius: 7px; font: inherit; } .pf-v5-c-form-control > input, .pf-v5-c-form-control > select { padding: 8px 10px; font: inherit; } .pf-v5-c-form-control::after { display: none; } /* Focus: the shell's inputs keep their border and take the browser's own * focus ring (`.k360-login input` sets no :focus style), so no accent * border here either -- the ring is what says "focused". */ .pf-v5-c-form-control:focus-within { border-color: var(--k360-border); } /* ── The one primary action: button.k360-primary ─────────────────────── */ .pf-v5-c-button.pf-m-primary { font: inherit; font-weight: 550; padding: 8px 16px; border-radius: 7px; border: 1px solid var(--k360-accent); background: var(--k360-accent); color: #fff; /* a foreground ON the accent, the one place UI-32 allows it */ margin-top: 12px; } .pf-v5-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:focus { background: var(--k360-accent-hover); border-color: var(--k360-accent-hover); color: #fff; } /* The identity-provider button ("Sign in with Microsoft"): the shell's * secondary shape -- bordered, quiet, same radius. */ .pf-v5-c-login__main-footer-links-item .pf-v5-c-button, #kc-social-providers .pf-v5-c-button { /* PatternFly 5 draws a button's border with ::after, from this * variable -- `pf-m-secondary` defaults it to the primary colour, which * put a red ring round the Microsoft button. */ --pf-v5-c-button--after--BorderColor: var(--k360-border); --pf-v5-c-button--hover--after--BorderColor: var(--k360-muted); --pf-v5-c-button--focus--after--BorderColor: var(--k360-muted); --pf-v5-c-button--m-secondary--Color: var(--k360-text); --pf-v5-c-button--m-secondary--hover--Color: var(--k360-text); font: inherit; padding: 8px 16px; border-radius: 7px; background: var(--k360-panel); color: var(--k360-text); } #kc-social-providers h2, .pf-v5-c-login__main-footer-band { font-size: 13px; color: var(--k360-muted); font-weight: 400; } /* Links: "Forgot your password?" and "Back to sign in". */ .pf-v5-c-login__main a, .pf-v5-c-button.pf-m-link { color: var(--k360-accent); font-size: 13px; } /* Errors: the page's `.err` -- plain coloured text, no box. */ .pf-v5-c-alert.pf-m-danger { --pf-v5-c-alert--BackgroundColor: transparent; --pf-v5-c-alert--BorderTopColor: transparent; --pf-v5-c-alert--m-danger__icon--Color: var(--k360-err); --pf-v5-c-alert__title--Color: var(--k360-err); padding-left: 0; box-shadow: none; } .pf-v5-c-alert.pf-m-danger .kc-feedback-text { color: var(--k360-err); } /* Warnings ("choose a password to activate your account"): the shell's * own warn panel -- amber ink on a pale ground, an amber rule -- not red. */ .pf-v5-c-alert.pf-m-warning { --pf-v5-c-alert--BackgroundColor: var(--k360-warn-bg); --pf-v5-c-alert--BorderTopColor: var(--k360-warn-line); --pf-v5-c-alert--m-warning__icon--Color: var(--k360-warn-ink); --pf-v5-c-alert__title--Color: var(--k360-warn-ink); border-radius: 7px; box-shadow: none; } .pf-v5-c-alert.pf-m-warning .kc-feedback-text { color: var(--k360-warn-ink); font-weight: 400; } /* The show/hide-password toggle beside a password field: a control * button in the shell's palette, so it does not turn into a light grey * block on the dark ground. */ .pf-v5-c-button.pf-m-control { --pf-v5-c-button--after--BorderColor: var(--k360-border); --pf-v5-c-button--m-control--BackgroundColor: var(--k360-panel); --pf-v5-c-button--m-control--Color: var(--k360-muted); --pf-v5-c-button--m-control--hover--BackgroundColor: var(--k360-panel); --pf-v5-c-button--m-control--hover--Color: var(--k360-text); border-radius: 0 7px 7px 0; }