/*
* longyai login theme — the devtools design system, applied to the one page
* that is not a devtool.
*
* The tokens below are a VERBATIM copy of devtools/ui/components/src/theme.css
* (light in :root, dark in .pf-v5-theme-dark), because this page cannot import
* that file: it is served by Keycloak out of a ConfigMap, with no bundler and
* no node_modules. A copy is the honest cost of that, and it is one block at
* the top rather than values sprinkled through the rules — when the design
* system moves, this is the thing to re-copy.
*
* The dark class is Keycloak's, not ours: keycloak.v2's template.ftl toggles
* `pf-v5-theme-dark` on from prefers-color-scheme, which is the same
* question devtools' applyInitialTheme() asks. So the login page follows the
* system exactly as the tools do, with no switch to build.
*
* Everything here layers ON TOP of keycloak.v2 (see theme.properties): the
* layout, the grid and every component's structure stay upstream's, and this
* file only ever restates colour, radius, type and spacing. That is what keeps
* a Keycloak upgrade from being a rewrite — a new field or a moved wrapper
* inherits the theme instead of escaping it.
*/
:root {
--lai-background: #ffffff;
--lai-foreground: #0d2233;
--lai-card: #f1f7fb;
--lai-elevated: #e4eff7;
--lai-muted: #eaf3f9;
--lai-muted-foreground: #5b7488;
--lai-border: #d7e5f0;
--lai-primary: #0284c7;
--lai-primary-foreground: #ffffff;
--lai-accent: #0ea5e9;
--lai-ring: #0ea5e9;
--lai-destructive: #dc2626;
--lai-warning: #d97706;
--lai-success: #16a34a;
--lai-radius: 0.875rem;
--lai-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* The brand wash behind the card. Terracotta on the warm side, devtools blue
on the cold one — the same two colours the tile carries, at the intensity
of a background rather than a mark. */
--lai-wash-warm: rgba(224, 140, 114, 0.16);
--lai-wash-cold: rgba(14, 165, 233, 0.14);
}
.pf-v5-theme-dark {
--lai-background: #05080c;
--lai-foreground: #dbe7f2;
--lai-card: #0e161f;
--lai-elevated: #17222f;
--lai-muted: #16212e;
--lai-muted-foreground: #6d8299;
--lai-border: #1b2836;
--lai-primary: #38bdf8;
--lai-primary-foreground: #05080c;
--lai-accent: #38bdf8;
--lai-ring: #38bdf8;
--lai-destructive: #f87171;
--lai-warning: #f59e0b;
--lai-success: #22c55e;
--lai-wash-warm: rgba(230, 85, 33, 0.18);
--lai-wash-cold: rgba(56, 189, 248, 0.12);
}
/* ---------------------------------------------------------------- the page */
/* keycloak.v2 ships a photographic background (keycloak-bg.png) pinned with
`fixed`. Two radial washes replace it: nothing to download, nothing to
letterbox on a phone, and it is the same surface the tools open on. */
.login-pf body,
body#keycloak-bg {
background: radial-gradient(60rem 40rem at 15% -10%, var(--lai-wash-warm), transparent 60%),
radial-gradient(55rem 40rem at 90% 110%, var(--lai-wash-cold), transparent 60%),
var(--lai-background);
color: var(--lai-foreground);
font-family: var(--lai-font);
-webkit-font-smoothing: antialiased;
}
.pf-v5-c-login {
font-family: var(--lai-font);
}
/* ------------------------------------------------------------- the brand */
/* #kc-header-wrapper renders the realm's displayNameHtml and nothing else, so
the tile is a pseudo-element above it rather than a template override — one
fewer .ftl to re-check on every Keycloak upgrade. The realm sets
displayNameHtml so this is not an empty box (realm-longyai.json). */
#kc-header-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
font-family: var(--lai-font);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--lai-foreground) !important;
padding-bottom: 1.25rem;
}
#kc-header-wrapper::before {
content: "";
width: 64px;
height: 64px;
background: url("../img/longyai.svg") no-repeat center / contain;
/* The one warm thing on the page deserves to sit slightly off it. */
filter: drop-shadow(0 8px 20px rgba(230, 85, 33, 0.28));
}
/* --------------------------------------------------------------- the card */
.pf-v5-c-login__main {
background: var(--lai-card);
border: 1px solid var(--lai-border);
border-radius: var(--lai-radius);
box-shadow: 0 20px 60px -20px rgba(5, 8, 12, 0.45);
overflow: hidden;
}
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
background: transparent;
}
.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
font-family: var(--lai-font);
font-size: 1.375rem;
font-weight: 600;
color: var(--lai-foreground);
}
/* --------------------------------------------------------------- the form */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
color: var(--lai-muted-foreground);
font-family: var(--lai-font);
font-size: 0.8125rem;
font-weight: 500;
}
/* In PatternFly 5 the control is the WRAPPER, not the input: the is a
transparent child of a . Styling the
input alone leaves a box drawn around a box. */
.pf-v5-c-form-control {
background: var(--lai-muted);
border: 1px solid var(--lai-border);
border-radius: 0.625rem;
color: var(--lai-foreground);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pf-v5-c-form-control::after {
border: 0; /* PF's own focus underline — replaced by the ring below. */
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
background: transparent;
color: var(--lai-foreground);
font-family: var(--lai-font);
}
.pf-v5-c-form-control:focus-within {
border-color: var(--lai-ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--lai-ring) 25%, transparent);
}
.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control[aria-invalid="true"] {
border-color: var(--lai-destructive);
}
.pf-v5-c-check__label,
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item-text {
color: var(--lai-muted-foreground);
font-family: var(--lai-font);
}
.pf-v5-c-helper-text__item-text.pf-m-error,
.kc-feedback-text {
color: var(--lai-destructive);
}
/* ------------------------------------------------------------- the buttons */
.pf-v5-c-button {
border-radius: 0.625rem;
font-family: var(--lai-font);
font-weight: 600;
}
.pf-v5-c-button.pf-m-primary {
background: var(--lai-primary);
color: var(--lai-primary-foreground);
border: 1px solid transparent;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
background: var(--lai-accent);
}
.pf-v5-c-button.pf-m-secondary {
background: transparent;
color: var(--lai-primary);
border: 1px solid var(--lai-border);
}
.pf-v5-c-button.pf-m-link {
color: var(--lai-primary);
}
a {
color: var(--lai-primary);
}
/* --------------------------------------------------- the identity providers */
/* Google is how nearly everyone gets in (the realm's first-broker-login flow
links, never creates — see realm-longyai.json), so it is the primary path on
this page and is drawn as a real button rather than the footer link
PatternFly makes of it by default. */
.pf-v5-c-login__main-footer-links {
padding-top: 0.5rem;
}
.pf-v5-c-login__main-footer-links-item-link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.6875rem 1rem;
background: var(--lai-elevated);
border: 1px solid var(--lai-border);
border-radius: 0.625rem;
color: var(--lai-foreground);
font-family: var(--lai-font);
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.pf-v5-c-login__main-footer-links-item-link:hover {
background: var(--lai-muted);
border-color: var(--lai-ring);
text-decoration: none;
}
/* -------------------------------------------------------------- the alerts */
.pf-v5-c-alert {
background: var(--lai-elevated);
border: 1px solid var(--lai-border);
border-radius: 0.625rem;
color: var(--lai-foreground);
}
.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-error {
border-color: color-mix(in srgb, var(--lai-destructive) 45%, var(--lai-border));
}
.pf-v5-c-alert.pf-m-warning {
border-color: color-mix(in srgb, var(--lai-warning) 45%, var(--lai-border));
}
.pf-v5-c-alert.pf-m-success {
border-color: color-mix(in srgb, var(--lai-success) 45%, var(--lai-border));
}
.pf-v5-c-alert__title {
font-family: var(--lai-font);
font-weight: 600;
}
/* --------------------------------------------------------------- the rest */
.pf-v5-c-login__main-footer-band,
.pf-v5-c-login__main-footer-band-item {
color: var(--lai-muted-foreground);
font-family: var(--lai-font);
}
/* The auth-method picker (OTP, security key) and the tiles it draws. */
.pf-v5-c-data-list__item,
.pf-v5-c-tile {
background: var(--lai-elevated);
border: 1px solid var(--lai-border);
border-radius: 0.625rem;
color: var(--lai-foreground);
}
.pf-v5-c-tile.pf-m-selected {
border-color: var(--lai-ring);
}
* {
scrollbar-width: thin;
scrollbar-color: var(--lai-border) transparent;
}