/*
* Brand styling for the Keycloak admin console (parent: keycloak.v2).
*
* Everything above the admin-only section is deliberately identical to
* account/resources/css/lukascerveny-account.css; see that file's header for
* why the theme works through PatternFly tokens and how the chrome is
* repainted. Both are generated from console-theme/ -- edit the template or the
* brand config, never the output.
*
* The console is a React app built on PatternFly 5, and PatternFly drives
* almost everything from CSS custom properties. This file therefore restates
* the *tokens* and leaves PatternFly's own rules alone. Overriding rules
* directly is what broke the earlier revision: PatternFly scopes many
* component variables to the component root
* (`.pf-v5-c-nav { --pf-v5-c-nav__link--Color: ... }`), so a `:root` override
* never reaches them, and a flat `background:` override repaints a surface
* without repainting the text that sits on it.
*
* Two facts about the parent theme drive the choices below.
*
* 1. keycloak.v2 ships `darkMode=true`, which makes index.ftl put
* `pf-v5-theme-dark` on whenever the OS asks for a dark scheme.
* We set `darkMode=false` in theme.properties, so none of PatternFly's
* `.pf-v5-theme-dark` rules can fire and this file only has to describe one
* palette.
*
* 2. The masthead and the page sidebar are *dark surfaces by default*.
* PatternFly remaps `--pf-v5-global--Color--100` to its light-on-dark value
* inside `.pf-v5-c-masthead` and `.pf-v5-c-page__sidebar`, so painting those
* surfaces white without undoing the remap leaves the navigation white on
* white. Lukas Cerveny has a white header, so this sheet does both: it repaints
* the surfaces and reverses the remap on the same selectors PatternFly
* used.
*/
/* ------------------------------------------------------------------ fonts */
/* The console bundle does not carry Lora / Outfit, so the theme ships
the same files the site loads through @fontsource. */
@font-face {
font-family: 'Lora Variable';
font-style: normal;
font-display: swap;
font-weight: 400 700;
src: url('../fonts/lora-latin-ext-wght-normal.woff2')
format('woff2-variations');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lora Variable';
font-style: normal;
font-display: swap;
font-weight: 400 700;
src: url('../fonts/lora-latin-wght-normal.woff2') format('woff2-variations');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url('../fonts/outfit-latin-ext-wght-normal.woff2')
format('woff2-variations');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Outfit Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url('../fonts/outfit-latin-wght-normal.woff2')
format('woff2-variations');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ----------------------------------------------------------- brand tokens */
/* Mirrors frontend/app/styles/tokens.sass. Keep the two in step. */
:root {
/* Palette -- $color-* in tokens.sass. */
--lc-primary: #d84b33; /* $color-primary, terracotta */
--lc-primary-strong: #b63d2a; /* $color-primary-strong */
--lc-primary-soft: rgb(216 75 51 / 8%); /* $color-primary-soft */
--lc-primary-soft-md: rgb(216 75 51 / 12%); /* $color-primary-soft-md */
--lc-primary-focus: rgb(216 75 51 / 18%); /* $color-primary-shadow-focus */
--lc-field-outline: rgb(
216 75 51 / 30%
); /* $color-primary-field-outline-soft */
--lc-accent: #526734; /* $color-secondary-soft, links */
--lc-accent-strong: #1a5a2a; /* $color-secondary */
--lc-accent-soft: rgb(82 103 52 / 12%); /* $color-secondary-soft-alpha */
--lc-danger: #9f3e2e; /* $color-error */
--lc-danger-strong: #7f3025;
--lc-ink: #2d2d2d; /* $color-text */
--lc-muted: #4b5058; /* $color-text-muted */
/* Surfaces. The site is white with barely-there grey washes. */
--lc-surface: #ffffff; /* $color-surface */
--lc-surface-soft: #f8fafc; /* $color-surface-soft */
--lc-surface-muted: #f3f4f6; /* $color-surface-muted */
--lc-surface-strong: #e9ebef;
--lc-border: rgb(229 231 235 / 72%); /* $color-border-soft */
--lc-border-strong: #e5e7eb; /* $color-border */
/* Chrome -- masthead and sidebar. The site's app bar is frosted white over
the page, not a solid band, and the only thing separating it from the
content is a hairline (Navigation.vue: .main-bar). */
--lc-chrome-bg: rgb(255 255 255 / 90%); /* $color-surface-glass */
--lc-chrome-text: var(--lc-ink);
--lc-chrome-muted: var(--lc-muted);
--lc-chrome-border: var(--lc-border);
--lc-chrome-rule: 1px solid var(--lc-border);
--lc-chrome-link: var(--lc-accent);
--lc-chrome-link-hover: var(--lc-accent-strong);
--lc-sidebar-rule: 1px solid var(--lc-border);
--lc-chrome-blur: blur(12px);
--lc-page-bg: #ffffff;
/* Geometry. Vuetify defaults in plugins/vuetify.ts: VBtn rounded="lg"
(8px), VCard rounded="xl" (24px), fields 16px from .app-field. */
--lc-radius-card: 24px; /* $radius-xl */
--lc-radius-field: 16px; /* $radius-md */
--lc-radius-control: 12px; /* $radius-sm */
--lc-radius-button: 8px;
--lc-radius-pill: 999px; /* $radius-pill */
--lc-shadow-card: 0 12px 24px rgb(15 23 42 / 8%); /* $shadow-sm */
--lc-shadow-card-hover: 0 18px 36px rgb(15 23 42 / 12%); /* $shadow-md */
/* $color-primary-shadow-flat is 0 12px 24px on the site's 50px buttons;
at console size that blur reads as a halo around the pill, so the same
shadow is scaled down with the control. */
--lc-shadow-button: 0 6px 14px rgb(216 75 51 / 22%);
--lc-shadow-button-hover: 0 10px 20px rgb(216 75 51 / 26%);
/* Type. Lora carries the copy, Outfit every piece of interface text --
headings, buttons, labels, navigation. */
--lc-font-text: 'Lora Variable', Lora, Georgia, serif;
--lc-font-head:
'Outfit Variable', Outfit, -apple-system, blinkmacsystemfont,
'Segoe UI', sans-serif;
/* The eyebrow (AdminView.vue .eyebrow): small, spaced-out uppercase. */
--lc-eyebrow-transform: uppercase;
--lc-eyebrow-spacing: 0.08em;
/* Zebra fill for list rows. */
/* Navigation. The site mutes its links and marks the current one with full
ink plus an accent bar; nothing carries a fill (Navigation.vue). */
--lc-nav-link: var(--lc-muted);
--lc-nav-current: var(--lc-ink);
--lc-nav-hover-bg: var(--lc-surface-soft);
--lc-nav-current-bg: var(--lc-surface-soft);
--lc-nav-separator: transparent;
/* Secondary button: the site outlines it over a near-white fill
(main.sass: .app-btn--variant-outlined). */
--lc-secondary-bg: var(--lc-surface);
--lc-secondary-border: var(--lc-border-strong);
--lc-secondary-hover-bg: var(--lc-surface-soft);
--lc-secondary-hover-border: var(--lc-primary);
/* Cards on the site carry a hairline as well as the shadow
(AdminView.vue: .project-item.v-card) and no accent rule on top. */
--lc-card-border: var(--lc-border-strong);
--lc-card-accent: 1px solid var(--lc-border-strong);
/* Success keeps its meaning but takes the site's own green
($color-secondary) instead of PatternFly's. */
--lc-success: #1a5a2a;
--lc-success-strong: #144721;
--lc-zebra: #f8fafc;
--lc-row-hover: rgb(216 75 51 / 5%);
/* Fields: white fill, terracotta-tinted outline, soft halo on focus. */
--lc-field-bg: var(--lc-surface);
--lc-field-hover-border: var(--lc-primary);
--lc-field-focus-border: var(--lc-primary);
--lc-field-focus-ring: 0 0 0 4px var(--lc-primary-focus);
/* Filled button: white label, darker fill on hover. */
--lc-on-primary: var(--lc-surface);
--lc-on-primary-hover: var(--lc-surface);
--lc-primary-hover-bg: var(--lc-primary-strong);
--lc-secondary-weight: 600;
/* "Current realm" badge in the admin sidebar. */
--lc-badge-bg: var(--lc-primary-soft);
--lc-badge-fg: var(--lc-primary-strong);
/* The colour PatternFly paints current-item bars and tab indicators
with. Usually the primary, but a brand may mark "here" in an accent. */
--lc-active: var(--lc-primary);
--lc-active-strong: var(--lc-primary-strong);
--lc-focus-outline: 2px solid var(--lc-primary);
--lc-focus-offset: 2px;
--lc-secondary-hover-shadow: none;
/*
* One height for everything that reads as a control. PatternFly lays a
* toolbar out top-aligned and assumes they all match; the site's own
* controls are 50px ($control-height), which is roomy for a console.
*/
--lc-control-height: 40px;
/* The accent is far enough from the ink that a table link reads as a link
without a permanent underline. */
--lc-table-link-decoration: none;
--lc-transition: 0.2s; /* $transition-fast */
}
/* ------------------------------------------- PatternFly global palette map */
:root {
/*
* Typography. These four are the tokens PatternFly 5 actually reads --
* --FontFamily--text for body copy and --FontFamily--heading for titles,
* each with a variable-font twin that wins when it is defined. The
* --sans-serif names below them are the PatternFly 4 spelling and do
* nothing here; leaving only those is why headings kept coming out in
* RedHatDisplay while the body had already switched over.
*/
--pf-v5-global--FontFamily--text: var(--lc-font-text);
--pf-v5-global--FontFamily--text--vf: var(--lc-font-text);
--pf-v5-global--FontFamily--heading: var(--lc-font-head);
--pf-v5-global--FontFamily--heading--vf: var(--lc-font-head);
/*
* Type scale. The site runs on a 16px body with 1.6 leading and puts every
* piece of interface text in Outfit; PatternFly's own scale is a step
* tighter and is one of the reasons a themed console still reads as
* Keycloak.
*/
--pf-v5-global--FontSize--xs: 0.78rem; /* $eyebrow-size */
--pf-v5-global--FontSize--sm: 0.85rem; /* $label-size */
--pf-v5-global--FontSize--md: 1rem;
--pf-v5-global--FontSize--lg: 1.05rem; /* $body-lg */
--pf-v5-global--FontSize--xl: 1.2rem; /* $panel-title-size */
--pf-v5-global--FontSize--2xl: 1.3rem; /* $card-title-size */
--pf-v5-global--FontSize--3xl: 1.6rem; /* $section-heading-sm-size */
--pf-v5-global--FontSize--4xl: 2.15rem; /* $title-size, lower bound */
--pf-v5-global--LineHeight--md: 1.6;
--pf-v5-global--LineHeight--sm: 1.4;
/* Links on the site are not underlined until you point at them. */
--pf-v5-global--link--TextDecoration: none;
--pf-v5-global--link--TextDecoration--hover: underline;
/*
* Chrome surfaces. PatternFly derives the masthead from dark-100 and the
* page sidebar from --pf-v5-c-page__sidebar--BackgroundColor, which is
* itself declared at :root. Both are set to the site's white here; the
* text on them is fixed further down, on the components themselves.
*/
--pf-v5-c-page__sidebar--BackgroundColor: var(--lc-chrome-bg);
/* Light surfaces. */
--pf-v5-global--BackgroundColor--100: var(--lc-surface);
--pf-v5-global--BackgroundColor--200: var(--lc-surface-soft);
--pf-v5-global--BackgroundColor--light-100: var(--lc-surface);
--pf-v5-global--BackgroundColor--light-200: var(--lc-surface-soft);
--pf-v5-global--BackgroundColor--light-300: var(--lc-page-bg);
/* Text on light surfaces. */
--pf-v5-global--Color--100: var(--lc-ink);
--pf-v5-global--Color--200: var(--lc-muted);
--pf-v5-global--Color--dark-100: var(--lc-ink);
--pf-v5-global--Color--dark-200: var(--lc-muted);
/* Hairlines. */
--pf-v5-global--BorderColor--100: var(--lc-border-strong);
--pf-v5-global--BorderColor--200: var(--lc-border-strong);
--pf-v5-global--BorderColor--300: var(--lc-border);
/* Accents. active-color--400 is what PatternFly paints the current-item
bar in the vertical navigation with, so branding it brands the nav. */
--pf-v5-global--primary-color--100: var(--lc-primary);
--pf-v5-global--primary-color--200: var(--lc-primary-strong);
--pf-v5-global--primary-color--dark-100: var(--lc-primary);
--pf-v5-global--primary-color--light-100: var(--lc-active);
--pf-v5-global--active-color--100: var(--lc-active);
--pf-v5-global--active-color--200: var(--lc-active-strong);
--pf-v5-global--active-color--400: var(--lc-active);
--pf-v5-global--link--Color: var(--lc-accent);
--pf-v5-global--link--Color--hover: var(--lc-accent-strong);
--pf-v5-global--link--Color--dark: var(--lc-accent);
--pf-v5-global--link--Color--dark--hover: var(--lc-accent-strong);
--pf-v5-global--danger-color--100: var(--lc-danger);
--pf-v5-global--danger-color--200: var(--lc-danger-strong);
/* Semantic colours keep their meaning; success only changes shade, so the
checkmarks the console scatters around read as the brand rather than as
PatternFly. Warning and danger stay as they are -- amber and red carry
meaning no palette should overwrite. */
--pf-v5-global--success-color--100: var(--lc-success);
--pf-v5-global--success-color--200: var(--lc-success-strong);
/* PatternFly's own radii, used by the odds and ends this sheet does not
name explicitly. */
--pf-v5-global--BorderRadius--sm: var(--lc-radius-control);
--pf-v5-global--BorderRadius--lg: var(--lc-radius-pill);
}
/* ------------------------------------------------------------------ shell */
body {
font-family: var(--lc-font-text);
color: var(--lc-ink);
background-color: var(--lc-page-bg);
}
/* The pre-React loading screen is plain markup in index.ftl, so it needs the
brand applied directly rather than through a token. */
.keycloak__loading-container {
background: var(--lc-surface-soft);
color: var(--lc-ink);
}
#loading-text {
color: var(--lc-muted);
font-family: var(--lc-font-head);
}
/* Controls ease between their states on the site rather than snapping. */
a,
button,
input,
select,
textarea,
.pf-v5-c-button,
.pf-v5-c-nav__link {
transition:
color var(--lc-transition) ease,
background-color var(--lc-transition) ease,
border-color var(--lc-transition) ease,
box-shadow var(--lc-transition) ease,
opacity var(--lc-transition) ease;
}
:focus-visible {
outline: var(--lc-focus-outline);
outline-offset: var(--lc-focus-offset);
}
/* --------------------------------------------------------------- masthead */
/*
* The masthead and the page sidebar are the "chrome". PatternFly treats them
* as dark bands: besides the fill, it remaps --pf-v5-global--Color--100 *on
* these elements* to its light-on-dark value, and draws the item separators
* from a near-black palette entry. All three have to move together, or the
* navigation ends up invisible -- white on white for a light chrome, or dark
* on dark if only the fill is changed.
*
* Everything here runs through the --lc-chrome-* tokens, so the same rules
* describe a white header and a dark one; only the values differ.
*
* The second selector repeats PatternFly's own compound
* (`.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain`) because it has to match its
* specificity to win.
*/
.pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
--pf-v5-global--Color--100: var(--lc-chrome-text);
--pf-v5-global--Color--200: var(--lc-chrome-muted);
/* PatternFly reaches for the light-on-dark pair from inside the chrome as
well -- flyout menus, section titles. Point them at the same values so
the chrome is described once, whichever way round it is. */
--pf-v5-global--Color--light-100: var(--lc-chrome-text);
--pf-v5-global--Color--light-200: var(--lc-chrome-muted);
}
/* Link buttons sitting in the masthead read on the chrome, not on the page. */
.pf-v5-c-masthead .pf-v5-c-button {
--pf-v5-c-button--m-link--Color: var(--lc-chrome-link);
--pf-v5-c-button--m-link--hover--Color: var(--lc-chrome-link-hover);
}
.pf-v5-c-masthead {
--pf-v5-c-masthead--BackgroundColor: var(--lc-chrome-bg);
--pf-v5-c-masthead--item-border-color--base: var(--lc-chrome-border);
--pf-v5-c-masthead__main--before--BorderBottomColor: var(
--lc-chrome-border
);
border-bottom: var(--lc-chrome-rule);
backdrop-filter: var(--lc-chrome-blur);
}
/* The brand ![]()
already gets a height from the console's own CSS module; it
only needs a free width so the logo keeps its aspect ratio. */
.pf-v5-c-masthead__brand img {
width: auto;
}
/* -------------------------------------------------------- sidebar and nav */
/*
* Same three-part fix as the masthead. `.pf-v5-c-page__header` is the v4 name
* PatternFly still lists alongside the sidebar in that remap, so it is
* repeated here for the same reason.
*/
.pf-v5-c-page__sidebar,
.pf-v5-c-page__header {
--pf-v5-global--Color--100: var(--lc-chrome-text);
--pf-v5-global--Color--200: var(--lc-chrome-muted);
--pf-v5-global--Color--light-100: var(--lc-chrome-text);
--pf-v5-global--Color--light-200: var(--lc-chrome-muted);
}
/* The sidebar's edge is its own token: a brand may mark the masthead with a
thick accent rule and still want a plain hairline down the sidebar. */
.pf-v5-c-page__sidebar {
border-inline-end: var(--lc-sidebar-rule);
}
/*
* Navigation. The site's links are muted until you point at them, the current
* one is full-strength text with an accent bar beside it, and nothing carries
* a fill (Navigation.vue / Navbar.vue). PatternFly's defaults are the
* light-on-dark set, so every one of them has to be restated.
*/
.pf-v5-c-nav {
--pf-v5-c-nav__link--Color: var(--lc-nav-link);
--pf-v5-c-nav__link--hover--Color: var(--lc-nav-current);
--pf-v5-c-nav__link--focus--Color: var(--lc-nav-current);
--pf-v5-c-nav__link--active--Color: var(--lc-nav-current);
--pf-v5-c-nav__link--m-current--Color: var(--lc-nav-current);
--pf-v5-c-nav__link--BackgroundColor: transparent;
--pf-v5-c-nav__link--hover--BackgroundColor: var(--lc-nav-hover-bg);
--pf-v5-c-nav__link--focus--BackgroundColor: var(--lc-nav-hover-bg);
--pf-v5-c-nav__link--active--BackgroundColor: var(--lc-nav-current-bg);
--pf-v5-c-nav__link--m-current--BackgroundColor: var(--lc-nav-current-bg);
--pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(
--lc-nav-current-bg
);
/* ::before is the hairline between items -- quiet. ::after is the bar
beside the current item and inherits the brand from active-color--400. */
--pf-v5-c-nav__link--before--BorderColor: var(--lc-nav-separator);
--pf-v5-c-nav__item--before--BorderColor: var(--lc-nav-separator);
--pf-v5-c-nav--c-divider--BackgroundColor: var(--lc-chrome-border);
/* The flyout the collapsed sidebar opens is a chrome surface too. */
--pf-v5-c-nav--c-menu--BackgroundColor: var(--lc-chrome-bg);
--pf-v5-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--lc-chrome-bg);
--pf-v5-c-nav__section-title--Color: var(--lc-chrome-muted);
--pf-v5-c-nav__section-title--BorderBottomColor: var(--lc-chrome-border);
--pf-v5-c-nav__scroll-button--Color: var(--lc-chrome-text);
--pf-v5-c-nav__link--FontWeight: 400;
font-family: var(--lc-font-head);
}
/* PatternFly has no weight token for the current item. */
.pf-v5-c-nav__link.pf-m-current {
font-weight: 600;
}
/*
* PatternFly stacks the page heading and the page body in two separate
* sections, so their paddings meet and leave a hole between the subtitle and
* the first section heading. Half it on both sides.
*/
.pf-v5-c-page__main-section {
--pf-v5-c-page__main-section--PaddingTop: 16px;
--pf-v5-c-page__main-section--PaddingBottom: 16px;
}
/* --------------------------------------------------------------- headings */
.pf-v5-c-title {
font-family: var(--lc-font-head);
color: var(--lc-ink);
line-height: 1.05;
}
/*
* The page heading. The admin console does not use .pf-v5-c-title for it -- it
* renders a bare inside .pf-v5-c-content -- so that shape is listed too,
* scoped to the main region so the sidebar is not caught by it.
*/
.pf-v5-c-title.pf-m-2xl,
.pf-v5-c-title.pf-m-3xl,
.pf-v5-c-title.pf-m-4xl,
.pf-v5-c-page__main .pf-v5-c-content > h1 {
font-family: var(--lc-font-head);
font-size: 2.15rem;
font-weight: 700;
line-height: 1.05;
text-transform: none;
color: var(--lc-ink);
/* PatternFly already spaces the heading block; the site's own margin on
top of that leaves a hole between the title and the line under it. */
margin-bottom: 4px;
}
.pf-v5-c-title.pf-m-xl,
.pf-v5-c-title.pf-m-lg {
font-weight: 700;
color: var(--lc-ink);
}
/* Section labels in the sidebar take the site's eyebrow treatment. Scoped to
titles inside a real .pf-v5-c-nav__section -- the admin console's realm row
is also a __section-title but sits directly under .pf-v5-c-nav. */
.pf-v5-c-nav__section > .pf-v5-c-nav__section-title {
font-size: var(--pf-v5-global--FontSize--xs);
font-weight: 700;
text-transform: var(--lc-eyebrow-transform);
letter-spacing: var(--lc-eyebrow-spacing);
}
/* ---------------------------------------------------------------- buttons */
.pf-v5-c-button {
--pf-v5-c-button--BorderRadius: var(--lc-radius-button);
/* The outline is drawn by ::after, which has its own radius variable --
set only the first and an outlined button gets a square ring. */
--pf-v5-c-button--after--BorderRadius: var(--lc-radius-button);
--pf-v5-c-button--FontWeight: 600;
--pf-v5-c-button--m-primary--Color: var(--lc-on-primary);
--pf-v5-c-button--m-primary--BackgroundColor: var(--lc-primary);
--pf-v5-c-button--m-primary--hover--Color: var(--lc-on-primary-hover);
--pf-v5-c-button--m-primary--hover--BackgroundColor: var(
--lc-primary-hover-bg
);
--pf-v5-c-button--m-primary--focus--Color: var(--lc-on-primary-hover);
--pf-v5-c-button--m-primary--focus--BackgroundColor: var(
--lc-primary-hover-bg
);
--pf-v5-c-button--m-primary--active--Color: var(--lc-on-primary-hover);
--pf-v5-c-button--m-primary--active--BackgroundColor: var(
--lc-primary-hover-bg
);
--pf-v5-c-button--m-secondary--Color: var(--lc-ink);
--pf-v5-c-button--m-secondary--BackgroundColor: var(--lc-secondary-bg);
--pf-v5-c-button--m-secondary--after--BorderColor: var(
--lc-secondary-border
);
--pf-v5-c-button--m-secondary--hover--Color: var(--lc-ink);
--pf-v5-c-button--m-secondary--hover--BackgroundColor: var(
--lc-secondary-hover-bg
);
--pf-v5-c-button--m-secondary--hover--after--BorderColor: var(
--lc-secondary-hover-border
);
--pf-v5-c-button--m-link--Color: var(--lc-accent);
--pf-v5-c-button--m-link--hover--Color: var(--lc-accent-strong);
--pf-v5-c-button--m-danger--BackgroundColor: var(--lc-danger);
--pf-v5-c-button--m-danger--hover--BackgroundColor: var(--lc-danger-strong);
font-family: var(--lc-font-head);
}
/*
* Padding is set in em so it tracks the label, and only on the variants that
* actually paint a shape -- link and plain buttons stay text, and the controls
* glued into an input group are excluded below.
*
* Room comes from a smaller label rather than a taller button: at PatternFly's
* stock 1rem the button grows past the height of the inputs it shares a
* toolbar with and breaks the row.
*/
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary,
.pf-v5-c-button.pf-m-danger,
.pf-v5-c-button.pf-m-warning {
--pf-v5-c-button--FontSize: 0.9375rem;
--pf-v5-c-button--PaddingTop: 0.7em;
--pf-v5-c-button--PaddingBottom: 0.7em;
--pf-v5-c-button--PaddingLeft: 1.4em;
--pf-v5-c-button--PaddingRight: 1.4em;
}
/*
* Case, tracking and weight are the call to action's, not every filled
* variant's: a brand that sets its primary button in uppercase does not
* usually shout on "Cancel" and "Delete" as well.
*
* The menu-toggle variant is listed with it because the console's call to
* action is sometimes a split dropdown ("Assign role", "Add mapper") and
* sometimes a plain button -- they have to read as the same control.
*/
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-menu-toggle.pf-m-primary {
font-weight: 600;
text-transform: none;
letter-spacing: 0;
box-shadow: var(--lc-shadow-button);
}
.pf-v5-c-button.pf-m-secondary {
font-weight: var(--lc-secondary-weight);
}
.pf-v5-c-button.pf-m-secondary:hover {
box-shadow: var(--lc-secondary-hover-shadow);
}
.pf-v5-c-button.pf-m-primary:hover {
box-shadow: var(--lc-shadow-button-hover);
}
/* The compact variant keeps the same proportions at a smaller scale. */
.pf-v5-c-button.pf-m-small {
--pf-v5-c-button--FontSize: 0.8125rem;
--pf-v5-c-button--PaddingTop: 0.4em;
--pf-v5-c-button--PaddingBottom: 0.4em;
--pf-v5-c-button--PaddingLeft: 1.2em;
--pf-v5-c-button--PaddingRight: 1.2em;
}
/* Icon-only buttons have no shape to round. */
.pf-v5-c-button.pf-m-plain,
.pf-v5-c-toggle-group .pf-v5-c-button {
--pf-v5-c-button--BorderRadius: 0;
--pf-v5-c-button--after--BorderRadius: 0;
border-radius: 0;
}
/*
* A control button, a dropdown and a menu toggle standing on their own are
* fields: they take the field's corners and its horizontal inset. Squaring
* everything with a toggle in it -- which an earlier revision did -- left the
* console's filter dropdowns and typeahead selects as sharp boxes sitting next
* to rounded text inputs.
*/
.pf-v5-c-button.pf-m-control,
.pf-v5-c-menu-toggle,
.pf-v5-c-dropdown__toggle {
--pf-v5-c-button--BorderRadius: var(--lc-radius-field);
--pf-v5-c-button--after--BorderRadius: var(--lc-radius-field);
--pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md);
--pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
--pf-v5-c-menu-toggle--BorderRadius: var(--lc-radius-field);
border-radius: var(--lc-radius-field);
}
/*
* Inside an input group the pair has to read as ONE control: rounding stays on
* the outer edges only. Without this the text input kept all four corners and
* the copy button glued to it stayed square, so the two looked like separate
* controls that happened to touch.
*
* `> *` covers every shape the console glues together -- form control, text
* input group, button, menu toggle -- and comes after the rules above so it
* wins on order at equal specificity.
*/
.pf-v5-c-input-group > .pf-v5-c-input-group__item > * {
border-radius: 0;
}
.pf-v5-c-input-group > .pf-v5-c-input-group__item:first-child > * {
border-start-start-radius: var(--lc-radius-field);
border-end-start-radius: var(--lc-radius-field);
}
.pf-v5-c-input-group > .pf-v5-c-input-group__item:last-child > * {
border-start-end-radius: var(--lc-radius-field);
border-end-end-radius: var(--lc-radius-field);
}
/* The button's ring is drawn by ::after and needs the same corners. */
.pf-v5-c-input-group > .pf-v5-c-input-group__item > .pf-v5-c-button::after {
border-radius: inherit;
}
/*
* A search box, a filter dropdown and the button glued to it are fields, and
* they sit next to real form fields in every console toolbar. Give them the
* field's own fill and the same step-down text size, or they read as holes.
*/
.pf-v5-c-page__main .pf-v5-c-text-input-group {
--pf-v5-c-text-input-group--BackgroundColor: var(--lc-field-bg);
}
/*
* PAST -- a menu toggle is not always a field.
*
* The same component is the console's filter dropdown AND its call to action
* ("Assign role", "Add mapper" are MenuToggle pf-m-primary, not buttons). An
* earlier revision gave every non-plain toggle a flat `background-color`, which
* beat `--m-primary--BackgroundColor` while the variant kept its own
* light-on-dark text -- a white label on a cream fill, i.e. an invisible
* button. Set the component's *token*, and only for the variants that do not
* bring their own colours.
*/
.pf-v5-c-page__main
.pf-v5-c-menu-toggle:not(.pf-m-plain, .pf-m-primary, .pf-m-secondary),
.pf-v5-c-page__main .pf-v5-c-select__toggle {
--pf-v5-c-menu-toggle--BackgroundColor: var(--lc-field-bg);
--pf-v5-c-menu-toggle--hover--BackgroundColor: var(--lc-field-bg);
--pf-v5-c-menu-toggle--focus--BackgroundColor: var(--lc-field-bg);
--pf-v5-c-menu-toggle--active--BackgroundColor: var(--lc-field-bg);
--pf-v5-c-menu-toggle--m-expanded--BackgroundColor: var(--lc-field-bg);
}
/*
* The toggle variants that ARE buttons take the button palette, so a dropdown
* call to action and a plain one look like the same control.
*/
.pf-v5-c-menu-toggle {
--pf-v5-c-menu-toggle--m-primary--Color: var(--lc-on-primary);
--pf-v5-c-menu-toggle--m-primary--BackgroundColor: var(--lc-primary);
--pf-v5-c-menu-toggle--m-primary--hover--BackgroundColor: var(
--lc-primary-hover-bg
);
--pf-v5-c-menu-toggle--m-primary--focus--BackgroundColor: var(
--lc-primary-hover-bg
);
--pf-v5-c-menu-toggle--m-primary--active--BackgroundColor: var(
--lc-primary-hover-bg
);
--pf-v5-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(
--lc-primary-hover-bg
);
--pf-v5-c-menu-toggle--m-primary--m-expanded--Color: var(
--lc-on-primary-hover
);
--pf-v5-c-menu-toggle--m-primary--BorderRadius: var(--lc-radius-button);
--pf-v5-c-menu-toggle--m-secondary--Color: var(--lc-ink);
--pf-v5-c-menu-toggle--m-secondary--BackgroundColor: var(--lc-secondary-bg);
--pf-v5-c-menu-toggle--m-secondary--before--BorderColor: var(
--lc-secondary-border
);
--pf-v5-c-menu-toggle--m-secondary--hover--BackgroundColor: var(
--lc-secondary-hover-bg
);
--pf-v5-c-menu-toggle--m-secondary--hover--before--BorderColor: var(
--lc-secondary-hover-border
);
--pf-v5-c-menu-toggle--m-secondary--BorderRadius: var(--lc-radius-button);
--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
--lc-primary
);
--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(
--lc-primary-hover-bg
);
}
.pf-v5-c-page__main .pf-v5-c-text-input-group__text-input,
.pf-v5-c-page__main
.pf-v5-c-menu-toggle:not(.pf-m-plain, .pf-m-primary, .pf-m-secondary),
.pf-v5-c-page__main .pf-v5-c-select__toggle {
font-size: 0.9375rem;
}
/*
* PAST -- one control height, not per-component padding.
*
* PatternFly lays a toolbar out with `--pf-v5-c-toolbar--AlignItems--base:
* flex-start` and assumes every control in the row is the same height; its own
* are. Sizing fields by padding and buttons by em-padding, as an earlier
* revision did, made a 39px search box sit next to a 30px button and a 20px
* checkbox, all hanging from the top edge -- the "scattered toolbar".
*
* So: one height token for everything that reads as a control, and the row
* centred through PatternFly's own alignment token.
*/
.pf-v5-c-page__main .pf-v5-c-toolbar {
--pf-v5-c-toolbar--AlignItems--base: center;
}
.pf-v5-c-page__main .pf-v5-c-text-input-group,
.pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain),
.pf-v5-c-page__main .pf-v5-c-select__toggle,
.pf-v5-c-page__main .pf-v5-c-button.pf-m-control,
.pf-v5-c-page__main .pf-v5-c-button.pf-m-primary,
.pf-v5-c-page__main .pf-v5-c-button.pf-m-secondary,
.pf-v5-c-page__main .pf-v5-c-button.pf-m-tertiary,
.pf-v5-c-page__main .pf-v5-c-button.pf-m-danger,
.pf-v5-c-page__main .pf-v5-c-button.pf-m-warning,
.pf-v5-c-form-control {
min-height: var(--lc-control-height);
}
/* The compact variant opts out -- it is meant to be smaller. */
.pf-v5-c-page__main .pf-v5-c-button.pf-m-small {
min-height: 0;
}
/*
* Height only -- never the inline padding. A search group reserves its left
* inset for the magnifier through .pf-v5-c-text-input-group__text.pf-m-icon,
* and overriding padding-inline on the input drops the icon on top of the
* placeholder.
*/
/*
* A control button is glued to a field, so its ring has to be the field's ring
* on all four sides. PatternFly gives the bottom edge its own token, echoing
* the underline of its own form controls -- ours are outlined boxes, so a
* different colour there just draws a coloured hook around the corner once the
* button is rounded.
*/
.pf-v5-c-page__main .pf-v5-c-button.pf-m-control {
--pf-v5-c-button--m-control--BackgroundColor: var(--lc-surface);
--pf-v5-c-button--m-control--hover--BackgroundColor: var(--lc-surface-soft);
--pf-v5-c-button--m-control--after--BorderTopColor: var(--lc-field-outline);
--pf-v5-c-button--m-control--after--BorderRightColor: var(
--lc-field-outline
);
--pf-v5-c-button--m-control--after--BorderBottomColor: var(
--lc-field-outline
);
--pf-v5-c-button--m-control--after--BorderLeftColor: var(
--lc-field-outline
);
}
/* ------------------------------------------------------------------ forms */
/*
* The site's fields are fully outlined rounded boxes -- Vuetify's `outlined`
* variant. PatternFly's are underlined: `::before` draws the top, right and
* left borders with a zero-width bottom, and `::after` draws the bottom rule
* that thickens on focus.
*
* So: close `::before` into a full frame, give both pseudo elements the
* wrapper's radius, and switch the `::after` rule off in every state. The
* frame colour is a single local variable, so the states below only have to
* reassign that one name.
*/
.pf-v5-c-form-control {
--lc-field-border: var(--lc-field-outline);
--pf-v5-c-form-control--before--BorderTopColor: var(--lc-field-border);
--pf-v5-c-form-control--before--BorderRightColor: var(--lc-field-border);
--pf-v5-c-form-control--before--BorderBottomColor: var(--lc-field-border);
--pf-v5-c-form-control--before--BorderLeftColor: var(--lc-field-border);
--pf-v5-c-form-control--before--BorderBottomWidth: var(
--pf-v5-global--BorderWidth--sm
);
--pf-v5-c-form-control--after--BorderBottomWidth: 0;
--pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: 0;
--pf-v5-c-form-control--m-success--after--BorderBottomWidth: 0;
--pf-v5-c-form-control--m-warning--after--BorderBottomWidth: 0;
--pf-v5-c-form-control--m-error--after--BorderBottomWidth: 0;
--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: 0;
--pf-v5-c-form-control--BackgroundColor: var(--lc-field-bg);
--pf-v5-c-form-control--m-placeholder--Color: var(--lc-muted);
/* The site's controls are 50px tall; PatternFly ships 32px. Meeting it
most of the way, with the text a step below body size. */
--pf-v5-c-form-control--FontSize: 0.9375rem;
--pf-v5-c-form-control--inset--base: 14px;
--pf-v5-global--spacer--form-element: 11px;
border-radius: var(--lc-radius-field);
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
border-radius: inherit;
}
.pf-v5-c-form-control:hover {
--lc-field-border: var(--lc-field-hover-border);
}
/*
* The focus ring belongs on the wrapper, not the inner control. PatternFly's
* .pf-v5-c-form-control is a holding the real input, so an outline on
* the input is drawn inside it and the wrapper's own frame covers its edges.
*/
.pf-v5-c-form-control:focus-within {
--lc-field-border: var(--lc-field-focus-border);
box-shadow: var(--lc-field-focus-ring);
}
.pf-v5-c-form-control.pf-m-error {
--lc-field-border: var(--lc-danger);
}
.pf-v5-c-form-control > input:focus-visible,
.pf-v5-c-form-control > select:focus-visible,
.pf-v5-c-form-control > textarea:focus-visible {
outline: none;
}
.pf-v5-c-form {
--pf-v5-c-form__label-text--FontWeight: 600;
--pf-v5-c-form__label-required--Color: var(--lc-danger);
/* PatternFly gives the label column 9.375rem, which Czech labels overrun. */
--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 10.5rem;
}
.pf-v5-c-form__label-text {
font-family: var(--lc-font-head);
font-size: 0.85rem;
text-transform: none;
}
/* --------------------------------------------------- cards, tabs, panels */
.pf-v5-c-card {
--pf-v5-c-card--BackgroundColor: var(--lc-surface);
--pf-v5-c-card--BoxShadow: var(--lc-shadow-card);
border: 1px solid var(--lc-card-border);
border-top: var(--lc-card-accent);
border-radius: var(--lc-radius-card);
}
.pf-v5-c-tabs {
--pf-v5-c-tabs__link--Color: var(--lc-muted);
--pf-v5-c-tabs__item--m-current__link--Color: var(--lc-ink);
--pf-v5-c-tabs__link--before--border-color--base: transparent;
--pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(
--lc-primary
);
font-family: var(--lc-font-head);
}
/* No weight tokens on tabs either. */
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
font-weight: 600;
}
.pf-v5-c-jump-links {
--pf-v5-c-jump-links__link-text--Color: var(--lc-muted);
--pf-v5-c-jump-links__link--hover__link-text--Color: var(--lc-ink);
--pf-v5-c-jump-links__item--m-current__link-text--Color: var(--lc-ink);
--pf-v5-c-jump-links__list--before--BorderColor: var(--lc-border);
--pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(
--lc-primary
);
}
.pf-v5-c-switch {
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(
--lc-primary
);
}
.pf-v5-c-label {
--pf-v5-c-label--BorderRadius: var(--lc-radius-pill);
}
/* Dropdown panels are surfaces like a card, not bare boxes. */
.pf-v5-c-menu {
--pf-v5-c-menu--BoxShadow: var(--lc-shadow-card);
border-radius: var(--lc-radius-control);
}
.pf-v5-c-menu__content {
border-radius: inherit;
}
/* Neither the alert nor the modal box has a radius token. */
.pf-v5-c-alert {
border-radius: var(--lc-radius-control);
}
.pf-v5-c-modal-box {
--pf-v5-c-modal-box--BoxShadow: var(--lc-shadow-card-hover);
border-radius: var(--lc-radius-card);
}
/* -------------------------------------------------------------- tables */
/*
* PAST -- PatternFly aligns table cells on the text baseline
* (`td { vertical-align: baseline }`), which only looks centred while the type
* scale is PatternFly's own. With the site's scale a row's checkbox, its text
* and its kebab menu end up on three different lines. A data row is a single
* line of related things, so centre them.
*/
.pf-v5-c-table > thead > tr > *,
.pf-v5-c-table > tbody > tr > * {
vertical-align: middle;
}
/*
* PAST -- in a data grid the link IS the navigation, and the brand's "links do
* not underline" rule takes away its only affordance. Colour alone is not
* enough when the accent sits close to the body colour, so a table link always
* underlines on hover, and a brand whose accent is too close to its ink says so
* with --lc-table-link-decoration.
*/
.pf-v5-c-table a,
.pf-v5-c-data-list a:not(.pf-v5-c-button) {
text-decoration: var(--lc-table-link-decoration);
text-underline-offset: 0.2em;
}
.pf-v5-c-table a:hover,
.pf-v5-c-table a:focus-visible,
.pf-v5-c-data-list a:not(.pf-v5-c-button):hover,
.pf-v5-c-data-list a:not(.pf-v5-c-button):focus-visible {
text-decoration: underline;
}
/* --------------------------------------------------- lists and statuses */
/*
* The account console lists sessions and credentials in a data list rather
* than a table, and without help it has none of the site's list treatment --
* so the same information looks like two different products depending on
* which console you opened.
*/
.pf-v5-c-data-list {
--pf-v5-c-data-list--BorderTopColor: var(--lc-border);
--pf-v5-c-data-list__item--BorderBottomColor: var(--lc-border);
}
/*
* The unit to paint is the ROW, not the item. Device activity renders every
* session as a .pf-v5-c-data-list__item-row inside ONE
* .pf-v5-c-data-list__item, so colouring the item paints the whole list as a
* single slab with no boundary anywhere.
*/
.pf-v5-c-data-list > .pf-v5-c-data-list__item {
background-color: transparent;
border-block-end-color: var(--lc-border);
}
/*
* Two shapes to cover. A list of sessions is one item holding many rows, and
* there the row is the unit. A single-row item (a credential, an "is not set
* up" notice) is the panel itself -- its row shrinks to its content and can
* sit centred, so filling the row there paints a band floating mid-page.
*/
.pf-v5-c-data-list__item-row:not(:only-child):nth-of-type(odd) {
background-color: var(--lc-zebra);
}
.pf-v5-c-data-list__item-row + .pf-v5-c-data-list__item-row {
border-block-start: 1px solid var(--lc-border);
}
.pf-v5-c-data-list__item-row:not(:only-child):hover {
background-color: var(--lc-row-hover);
}
.pf-v5-c-data-list
> .pf-v5-c-data-list__item:has(> .pf-v5-c-data-list__item-row:only-child) {
background-color: var(--lc-surface-soft);
}
/*
* Inside a row PatternFly gives the label and the value the same ink and 24px
* of gap, so a session reads as a wall of equally weighted text. Demote the
* label the way the site's table header is demoted against its cells, and pull
* the grid together so one session is a block you can take in at a glance.
*/
.pf-v5-c-data-list .pf-v5-c-description-list {
--pf-v5-c-description-list--RowGap: 14px;
--pf-v5-c-description-list__group--RowGap: 2px;
}
.pf-v5-c-data-list .pf-v5-c-description-list__term {
font-family: var(--lc-font-head);
font-size: 0.78rem;
font-weight: 600;
color: var(--lc-muted);
text-transform: var(--lc-eyebrow-transform);
letter-spacing: var(--lc-eyebrow-spacing);
}
.pf-v5-c-data-list .pf-v5-c-description-list__description {
font-size: var(--pf-v5-global--FontSize--sm);
}
/*
* Status pills. PatternFly ships them in its own semantic palette -- the
* "current session" marker is pale green, the realm marker pale blue -- and
* both fight a page built from one accent. Danger keeps its red, because that
* one carries meaning the brand cannot replace.
*/
.pf-v5-c-page__main .pf-v5-c-label.pf-m-green,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-blue,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-cyan,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-purple {
background-color: var(--lc-accent-soft);
}
.pf-v5-c-page__main .pf-v5-c-label.pf-m-green .pf-v5-c-label__content,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-blue .pf-v5-c-label__content,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-cyan .pf-v5-c-label__content,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-purple .pf-v5-c-label__content {
color: var(--lc-accent-strong);
}
.pf-v5-c-page__main .pf-v5-c-label.pf-m-green .pf-v5-c-label__content::before,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-blue .pf-v5-c-label__content::before,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-cyan .pf-v5-c-label__content::before,
.pf-v5-c-page__main .pf-v5-c-label.pf-m-purple .pf-v5-c-label__content::before {
border-color: transparent;
}
/* ---------------------------------------------------------------- misc */
::selection {
background: var(--lc-primary-soft-md);
color: var(--lc-ink);
}
/*
* Safety net. theme.properties sets darkMode=false so index.ftl never adds
* this class, but a page cached from an earlier build still carries it and
* would otherwise get PatternFly's dark palette on our light surfaces.
* `:where` keeps the specificity at zero so nothing above is disturbed.
*/
:where(.pf-v5-theme-dark) {
--pf-v5-global--BackgroundColor--100: var(--lc-surface);
--pf-v5-global--BackgroundColor--200: var(--lc-surface-soft);
--pf-v5-global--Color--100: var(--lc-ink);
--pf-v5-global--Color--200: var(--lc-muted);
}
/* ------------------------------------------------------- admin-only bits */
/*
* Data tables. The account console has none; the admin console is mostly
* tables, so this is where the site's list treatment matters most.
*/
.pf-v5-c-table {
--pf-v5-c-table--BorderColor: var(--lc-border);
--pf-v5-c-table--cell--FontSize: var(--pf-v5-global--FontSize--sm);
--pf-v5-c-table__sort--m-selected__button--Color: var(--lc-ink);
--pf-v5-c-table__sort--m-selected__sort-indicator--Color: var(--lc-primary);
}
.pf-v5-c-table > thead {
--pf-v5-c-table--cell--FontWeight: 600;
--pf-v5-c-table--cell--Color: var(--lc-muted);
--pf-v5-c-table--cell--FontSize: 0.78rem;
--pf-v5-c-table--BorderColor: var(--lc-border-strong);
--pf-v5-c-table--border-width--base: 2px;
}
/*
* The header is separated by a rule rather than by a filled band.
*
* A band cannot be painted reliably here: the admin console's tables carry a
* trailing actions column with no matching header cell -- five header cells
* for six columns -- and CSS creates no anonymous cell to paint in. Under
* `border-collapse: collapse` Chrome paints row and row-group backgrounds only
* behind the cells that exist, so a fill on the cells, on the row or on
* `thead` all stop one column short of the right edge, and a pseudo element
* pushed behind them with a negative z-index disappears under the page. The
* collapsed bottom border is the one thing that does span the whole width.
*/
.pf-v5-c-table > thead > tr > * {
background-color: transparent;
text-transform: var(--lc-eyebrow-transform);
letter-spacing: var(--lc-eyebrow-spacing);
}
.pf-v5-c-table > tbody > tr:nth-child(odd) {
background-color: transparent;
}
.pf-v5-c-table > tbody > tr:hover {
background-color: var(--lc-row-hover);
}
/*
* The welcome screen's logo. The console caps it with `max-width: 114px`,
* a figure tuned for Keycloak's own wide wordmark; a logo with a different
* aspect ratio comes out either as a 20px sliver or as a large square. Cap
* both dimensions instead, and never upscale a small mark.
*/
.keycloak__dashboard_icon {
max-width: 260px;
max-height: 88px;
width: auto;
height: auto;
margin-bottom: 12px;
}
/*
* The realm row in the sidebar. Its "Current realm" badge is a PatternFly
* blue label, which on a white sidebar is the loudest thing on the page, and
* the row itself is a __section-title so it would otherwise pick up the
* eyebrow treatment and shout a realm name in uppercase.
*/
.pf-v5-c-nav > .pf-v5-c-nav__section-title {
display: flex;
gap: 10px;
align-items: center;
padding-block: 14px;
color: var(--lc-chrome-text);
font-family: var(--lc-font-head);
font-size: var(--pf-v5-global--FontSize--md);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.pf-v5-c-page__sidebar .pf-v5-c-label {
background-color: var(--lc-badge-bg);
}
.pf-v5-c-page__sidebar .pf-v5-c-label .pf-v5-c-label__content {
color: var(--lc-badge-fg);
}
.pf-v5-c-page__sidebar .pf-v5-c-label .pf-v5-c-label__content::before {
border-color: transparent;
}
/* The realm selector sits in the sidebar, which is a light surface here. */
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle {
--pf-v5-c-menu-toggle--Color: var(--lc-chrome-text);
--pf-v5-c-menu-toggle--BackgroundColor: transparent;
--pf-v5-c-menu-toggle--before--BorderBottomColor: var(--lc-chrome-border);
}