/*
* Brand styling for the Keycloak account console (parent: keycloak.v3).
*
* This sheet and admin/resources/css/hopskok-admin.css are deliberately
* identical apart from the admin-only section at the end of that file. 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.v3 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. Hopskok 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 Quicksand, so the theme ships
the same files the site loads through @fontsource. */
@font-face {
font-family: 'Quicksand Variable';
font-style: normal;
font-display: swap;
font-weight: 300 700;
src: url('../fonts/quicksand-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: 'Quicksand Variable';
font-style: normal;
font-display: swap;
font-weight: 300 700;
src: url('../fonts/quicksand-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. */
--hs-primary: #86a483; /* $color-primary, sage */
--hs-primary-strong: #66a15a; /* $color-primary-strong */
--hs-primary-soft: rgb(134 164 131 / 12%);
--hs-primary-soft-md: rgb(
114 196 105 / 12%
); /* .media-row.active in cms.sass */
--hs-primary-focus: rgb(102 161 90 / 22%);
--hs-field-outline: #e2e1e2; /* $color-surface-strong */
--hs-accent: #66a15a; /* links use $color-primary-strong */
--hs-accent-strong: #4a8443;
--hs-accent-soft: rgb(114 196 105 / 20%); /* .badge.ok in cms.sass */
--hs-danger: #eb5151; /* $color-error */
--hs-danger-strong: #d63a3a;
--hs-ink: #454545; /* $color-text */
--hs-muted: #9a9a9a; /* $color-text-muted */
/* Surfaces. Everything is white with warm grey washes; no tinted panels. */
--hs-surface: #ffffff; /* $color-surface */
--hs-surface-soft: #f7f7f7; /* $color-surface-soft */
--hs-surface-muted: #f2f1f2; /* $color-surface-muted */
--hs-surface-strong: #e2e1e2; /* $color-surface-strong */
--hs-border: #f2f1f2; /* every hairline in cms.sass */
--hs-border-strong: #e2e1e2;
/* Chrome -- masthead and sidebar. The site's navigation bar is plain white
with a hairline under it: no tint, no shadow, no blur (Navbar.vue). */
--hs-chrome-bg: #ffffff;
--hs-chrome-text: var(--hs-ink);
--hs-chrome-muted: var(--hs-muted);
--hs-chrome-border: var(--hs-border);
--hs-chrome-rule: 1px solid var(--hs-border);
--hs-chrome-link: var(--hs-accent);
--hs-chrome-link-hover: var(--hs-accent-strong);
--hs-sidebar-rule: 1px solid var(--hs-border);
--hs-chrome-blur: none;
--hs-page-bg: #ffffff;
/* Geometry -- $radius-* in tokens.sass. Compact corners; only buttons and
badges are pills. */
--hs-radius-card: 10px; /* $radius-card */
--hs-radius-field: 6px; /* $radius-control */
--hs-radius-control: 6px; /* $radius-control */
--hs-radius-button: 999px; /* $radius-pill */
--hs-radius-pill: 999px; /* $radius-pill */
--hs-shadow-card: 0 4px 16px rgb(0 0 0 / 6%); /* .panel in cms.sass */
--hs-shadow-card-hover: 0 6px 20px rgb(0 0 0 / 9%);
--hs-shadow-button: none;
--hs-shadow-button-hover: none;
/* Type. One family for everything, as on the site. */
--hs-font-text:
'Quicksand Variable', Quicksand, -apple-system, blinkmacsystemfont,
'Segoe UI', sans-serif;
--hs-font-head: var(--hs-font-text);
/* Nothing on this site is set in uppercase -- not headings, not table
headers, not labels. Small and quiet is how it separates levels. */
--hs-eyebrow-transform: none;
--hs-eyebrow-spacing: 0;
/* List rows separate by hairline, not by fill (cms.sass .media-row). */
/* Navigation. Navbar.vue keeps its links full-strength black, not muted,
and marks the current one by weight. */
--hs-nav-link: var(--hs-ink);
--hs-nav-current: var(--hs-ink);
--hs-nav-hover-bg: var(--hs-surface-soft);
--hs-nav-current-bg: var(--hs-surface-soft);
--hs-nav-separator: transparent;
/* Secondary button: the site fills it grey rather than outlining it
(main.sass: button.grey). */
--hs-secondary-bg: var(--hs-surface-muted);
--hs-secondary-border: transparent;
--hs-secondary-hover-bg: var(--hs-surface-strong);
--hs-secondary-hover-border: transparent;
/* Panels on the site are shadow-only, with no outline and no accent rule
(cms.sass: .panel). */
--hs-card-border: transparent;
--hs-card-accent: 1px solid transparent;
/* Success keeps its meaning but takes the brand's own green. */
--hs-success: #66a15a;
--hs-success-strong: #4a8443;
--hs-zebra: transparent;
--hs-row-hover: #fafafa;
/* Fields: white fill, grey outline, soft green halo on focus. */
--hs-field-bg: var(--hs-surface);
--hs-field-hover-border: var(--hs-primary);
--hs-field-focus-border: var(--hs-primary);
--hs-field-focus-ring: 0 0 0 4px var(--hs-primary-focus);
/* Filled button: white label, darker fill on hover. */
--hs-on-primary: var(--hs-surface);
--hs-on-primary-hover: var(--hs-surface);
--hs-primary-hover-bg: var(--hs-primary-strong);
--hs-secondary-weight: 600;
/* "Current realm" badge in the admin sidebar. */
--hs-badge-bg: var(--hs-primary-soft);
--hs-badge-fg: var(--hs-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. */
--hs-active: var(--hs-primary);
--hs-active-strong: var(--hs-primary-strong);
--hs-focus-outline: 2px solid var(--hs-primary-strong);
--hs-focus-offset: 2px;
--hs-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.
*/
--hs-control-height: 38px;
/* The accent is far enough from the ink that a table link reads as a link
without a permanent underline. */
--hs-table-link-decoration: none;
--hs-transition: 0.12s; /* the site's blanket 120ms */
}
/* ------------------------------------------- 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(--hs-font-text);
--pf-v5-global--FontFamily--text--vf: var(--hs-font-text);
--pf-v5-global--FontFamily--heading: var(--hs-font-head);
--pf-v5-global--FontFamily--heading--vf: var(--hs-font-head);
/*
* Type scale. The site sets its root to 15px on desktop and sizes
* everything in ems off it, so its headings are far smaller than
* PatternFly's -- h1 is 1.6em, roughly 24px. Reproducing that compactness
* matters more here than any single colour.
*/
--pf-v5-global--FontSize--xs: 0.6875rem; /* 11px */
--pf-v5-global--FontSize--sm: 0.8125rem; /* 13px, table cells */
--pf-v5-global--FontSize--md: 0.9375rem; /* 15px, $font-size-root-md */
--pf-v5-global--FontSize--lg: 1.0625rem; /* 17px */
--pf-v5-global--FontSize--xl: 1.125rem; /* 18px, h3 */
--pf-v5-global--FontSize--2xl: 1.3125rem; /* 21px, h2 */
--pf-v5-global--FontSize--3xl: 1.375rem;
--pf-v5-global--FontSize--4xl: 1.5rem; /* 24px, h1 */
--pf-v5-global--LineHeight--md: 1.4;
--pf-v5-global--LineHeight--sm: 1.35;
/* 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(--hs-chrome-bg);
/* Light surfaces. */
--pf-v5-global--BackgroundColor--100: var(--hs-surface);
--pf-v5-global--BackgroundColor--200: var(--hs-surface-soft);
--pf-v5-global--BackgroundColor--light-100: var(--hs-surface);
--pf-v5-global--BackgroundColor--light-200: var(--hs-surface-soft);
--pf-v5-global--BackgroundColor--light-300: var(--hs-page-bg);
/* Text on light surfaces. */
--pf-v5-global--Color--100: var(--hs-ink);
--pf-v5-global--Color--200: var(--hs-muted);
--pf-v5-global--Color--dark-100: var(--hs-ink);
--pf-v5-global--Color--dark-200: var(--hs-muted);
/* Hairlines. */
--pf-v5-global--BorderColor--100: var(--hs-border-strong);
--pf-v5-global--BorderColor--200: var(--hs-border-strong);
--pf-v5-global--BorderColor--300: var(--hs-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(--hs-primary);
--pf-v5-global--primary-color--200: var(--hs-primary-strong);
--pf-v5-global--primary-color--dark-100: var(--hs-primary);
--pf-v5-global--primary-color--light-100: var(--hs-active);
--pf-v5-global--active-color--100: var(--hs-active);
--pf-v5-global--active-color--200: var(--hs-active-strong);
--pf-v5-global--active-color--400: var(--hs-active);
--pf-v5-global--link--Color: var(--hs-accent);
--pf-v5-global--link--Color--hover: var(--hs-accent-strong);
--pf-v5-global--link--Color--dark: var(--hs-accent);
--pf-v5-global--link--Color--dark--hover: var(--hs-accent-strong);
--pf-v5-global--danger-color--100: var(--hs-danger);
--pf-v5-global--danger-color--200: var(--hs-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(--hs-success);
--pf-v5-global--success-color--200: var(--hs-success-strong);
/* PatternFly's own radii, used by the odds and ends this sheet does not
name explicitly. */
--pf-v5-global--BorderRadius--sm: var(--hs-radius-control);
--pf-v5-global--BorderRadius--lg: var(--hs-radius-pill);
}
/* ------------------------------------------------------------------ shell */
body {
font-family: var(--hs-font-text);
color: var(--hs-ink);
background-color: var(--hs-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(--hs-surface-soft);
color: var(--hs-ink);
}
#loading-text {
color: var(--hs-muted);
font-family: var(--hs-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(--hs-transition) ease,
background-color var(--hs-transition) ease,
border-color var(--hs-transition) ease,
box-shadow var(--hs-transition) ease,
opacity var(--hs-transition) ease;
}
:focus-visible {
outline: var(--hs-focus-outline);
outline-offset: var(--hs-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 --hs-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(--hs-chrome-text);
--pf-v5-global--Color--200: var(--hs-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(--hs-chrome-text);
--pf-v5-global--Color--light-200: var(--hs-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(--hs-chrome-link);
--pf-v5-c-button--m-link--hover--Color: var(--hs-chrome-link-hover);
}
.pf-v5-c-masthead {
--pf-v5-c-masthead--BackgroundColor: var(--hs-chrome-bg);
--pf-v5-c-masthead--item-border-color--base: var(--hs-chrome-border);
--pf-v5-c-masthead__main--before--BorderBottomColor: var(
--hs-chrome-border
);
border-bottom: var(--hs-chrome-rule);
backdrop-filter: var(--hs-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(--hs-chrome-text);
--pf-v5-global--Color--200: var(--hs-chrome-muted);
--pf-v5-global--Color--light-100: var(--hs-chrome-text);
--pf-v5-global--Color--light-200: var(--hs-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(--hs-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(--hs-nav-link);
--pf-v5-c-nav__link--hover--Color: var(--hs-nav-current);
--pf-v5-c-nav__link--focus--Color: var(--hs-nav-current);
--pf-v5-c-nav__link--active--Color: var(--hs-nav-current);
--pf-v5-c-nav__link--m-current--Color: var(--hs-nav-current);
--pf-v5-c-nav__link--BackgroundColor: transparent;
--pf-v5-c-nav__link--hover--BackgroundColor: var(--hs-nav-hover-bg);
--pf-v5-c-nav__link--focus--BackgroundColor: var(--hs-nav-hover-bg);
--pf-v5-c-nav__link--active--BackgroundColor: var(--hs-nav-current-bg);
--pf-v5-c-nav__link--m-current--BackgroundColor: var(--hs-nav-current-bg);
--pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(
--hs-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(--hs-nav-separator);
--pf-v5-c-nav__item--before--BorderColor: var(--hs-nav-separator);
--pf-v5-c-nav--c-divider--BackgroundColor: var(--hs-chrome-border);
/* The flyout the collapsed sidebar opens is a chrome surface too. */
--pf-v5-c-nav--c-menu--BackgroundColor: var(--hs-chrome-bg);
--pf-v5-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--hs-chrome-bg);
--pf-v5-c-nav__section-title--Color: var(--hs-chrome-muted);
--pf-v5-c-nav__section-title--BorderBottomColor: var(--hs-chrome-border);
--pf-v5-c-nav__scroll-button--Color: var(--hs-chrome-text);
--pf-v5-c-nav__link--FontWeight: 400;
font-family: var(--hs-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(--hs-font-head);
color: var(--hs-ink);
line-height: 1.3;
}
/*
* 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(--hs-font-head);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
text-transform: none;
color: var(--hs-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(--hs-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(--hs-eyebrow-transform);
letter-spacing: var(--hs-eyebrow-spacing);
}
/* ---------------------------------------------------------------- buttons */
.pf-v5-c-button {
--pf-v5-c-button--BorderRadius: var(--hs-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(--hs-radius-button);
--pf-v5-c-button--FontWeight: 600;
--pf-v5-c-button--m-primary--Color: var(--hs-on-primary);
--pf-v5-c-button--m-primary--BackgroundColor: var(--hs-primary);
--pf-v5-c-button--m-primary--hover--Color: var(--hs-on-primary-hover);
--pf-v5-c-button--m-primary--hover--BackgroundColor: var(
--hs-primary-hover-bg
);
--pf-v5-c-button--m-primary--focus--Color: var(--hs-on-primary-hover);
--pf-v5-c-button--m-primary--focus--BackgroundColor: var(
--hs-primary-hover-bg
);
--pf-v5-c-button--m-primary--active--Color: var(--hs-on-primary-hover);
--pf-v5-c-button--m-primary--active--BackgroundColor: var(
--hs-primary-hover-bg
);
--pf-v5-c-button--m-secondary--Color: var(--hs-ink);
--pf-v5-c-button--m-secondary--BackgroundColor: var(--hs-secondary-bg);
--pf-v5-c-button--m-secondary--after--BorderColor: var(
--hs-secondary-border
);
--pf-v5-c-button--m-secondary--hover--Color: var(--hs-ink);
--pf-v5-c-button--m-secondary--hover--BackgroundColor: var(
--hs-secondary-hover-bg
);
--pf-v5-c-button--m-secondary--hover--after--BorderColor: var(
--hs-secondary-hover-border
);
--pf-v5-c-button--m-link--Color: var(--hs-accent);
--pf-v5-c-button--m-link--hover--Color: var(--hs-accent-strong);
--pf-v5-c-button--m-danger--BackgroundColor: var(--hs-danger);
--pf-v5-c-button--m-danger--hover--BackgroundColor: var(--hs-danger-strong);
font-family: var(--hs-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.875rem;
--pf-v5-c-button--PaddingTop: 0.55em;
--pf-v5-c-button--PaddingBottom: 0.55em;
--pf-v5-c-button--PaddingLeft: 1.9em;
--pf-v5-c-button--PaddingRight: 1.9em;
}
/*
* 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(--hs-shadow-button);
}
.pf-v5-c-button.pf-m-secondary {
font-weight: var(--hs-secondary-weight);
}
.pf-v5-c-button.pf-m-secondary:hover {
box-shadow: var(--hs-secondary-hover-shadow);
}
.pf-v5-c-button.pf-m-primary:hover {
box-shadow: var(--hs-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(--hs-radius-field);
--pf-v5-c-button--after--BorderRadius: var(--hs-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(--hs-radius-field);
border-radius: var(--hs-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(--hs-radius-field);
border-end-start-radius: var(--hs-radius-field);
}
.pf-v5-c-input-group > .pf-v5-c-input-group__item:last-child > * {
border-start-end-radius: var(--hs-radius-field);
border-end-end-radius: var(--hs-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(--hs-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(--hs-field-bg);
--pf-v5-c-menu-toggle--hover--BackgroundColor: var(--hs-field-bg);
--pf-v5-c-menu-toggle--focus--BackgroundColor: var(--hs-field-bg);
--pf-v5-c-menu-toggle--active--BackgroundColor: var(--hs-field-bg);
--pf-v5-c-menu-toggle--m-expanded--BackgroundColor: var(--hs-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(--hs-on-primary);
--pf-v5-c-menu-toggle--m-primary--BackgroundColor: var(--hs-primary);
--pf-v5-c-menu-toggle--m-primary--hover--BackgroundColor: var(
--hs-primary-hover-bg
);
--pf-v5-c-menu-toggle--m-primary--focus--BackgroundColor: var(
--hs-primary-hover-bg
);
--pf-v5-c-menu-toggle--m-primary--active--BackgroundColor: var(
--hs-primary-hover-bg
);
--pf-v5-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(
--hs-primary-hover-bg
);
--pf-v5-c-menu-toggle--m-primary--m-expanded--Color: var(
--hs-on-primary-hover
);
--pf-v5-c-menu-toggle--m-primary--BorderRadius: var(--hs-radius-button);
--pf-v5-c-menu-toggle--m-secondary--Color: var(--hs-ink);
--pf-v5-c-menu-toggle--m-secondary--BackgroundColor: var(--hs-secondary-bg);
--pf-v5-c-menu-toggle--m-secondary--before--BorderColor: var(
--hs-secondary-border
);
--pf-v5-c-menu-toggle--m-secondary--hover--BackgroundColor: var(
--hs-secondary-hover-bg
);
--pf-v5-c-menu-toggle--m-secondary--hover--before--BorderColor: var(
--hs-secondary-hover-border
);
--pf-v5-c-menu-toggle--m-secondary--BorderRadius: var(--hs-radius-button);
--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
--hs-primary
);
--pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(
--hs-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.875rem;
}
/*
* 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(--hs-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(--hs-surface);
--pf-v5-c-button--m-control--hover--BackgroundColor: var(--hs-surface-soft);
--pf-v5-c-button--m-control--after--BorderTopColor: var(--hs-field-outline);
--pf-v5-c-button--m-control--after--BorderRightColor: var(
--hs-field-outline
);
--pf-v5-c-button--m-control--after--BorderBottomColor: var(
--hs-field-outline
);
--pf-v5-c-button--m-control--after--BorderLeftColor: var(
--hs-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 {
--hs-field-border: var(--hs-field-outline);
--pf-v5-c-form-control--before--BorderTopColor: var(--hs-field-border);
--pf-v5-c-form-control--before--BorderRightColor: var(--hs-field-border);
--pf-v5-c-form-control--before--BorderBottomColor: var(--hs-field-border);
--pf-v5-c-form-control--before--BorderLeftColor: var(--hs-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(--hs-field-bg);
--pf-v5-c-form-control--m-placeholder--Color: var(--hs-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.875rem;
--pf-v5-c-form-control--inset--base: 11px;
--pf-v5-global--spacer--form-element: 9px;
border-radius: var(--hs-radius-field);
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
border-radius: inherit;
}
.pf-v5-c-form-control:hover {
--hs-field-border: var(--hs-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 {
--hs-field-border: var(--hs-field-focus-border);
box-shadow: var(--hs-field-focus-ring);
}
.pf-v5-c-form-control.pf-m-error {
--hs-field-border: var(--hs-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(--hs-danger);
/* PatternFly gives the label column 9.375rem, which Czech labels overrun. */
--pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 10rem;
}
.pf-v5-c-form__label-text {
font-family: var(--hs-font-head);
font-size: 0.875rem;
text-transform: none;
}
/* --------------------------------------------------- cards, tabs, panels */
.pf-v5-c-card {
--pf-v5-c-card--BackgroundColor: var(--hs-surface);
--pf-v5-c-card--BoxShadow: var(--hs-shadow-card);
border: 1px solid var(--hs-card-border);
border-top: var(--hs-card-accent);
border-radius: var(--hs-radius-card);
}
.pf-v5-c-tabs {
--pf-v5-c-tabs__link--Color: var(--hs-muted);
--pf-v5-c-tabs__item--m-current__link--Color: var(--hs-ink);
--pf-v5-c-tabs__link--before--border-color--base: transparent;
--pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(
--hs-primary
);
font-family: var(--hs-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(--hs-muted);
--pf-v5-c-jump-links__link--hover__link-text--Color: var(--hs-ink);
--pf-v5-c-jump-links__item--m-current__link-text--Color: var(--hs-ink);
--pf-v5-c-jump-links__list--before--BorderColor: var(--hs-border);
--pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(
--hs-primary
);
}
.pf-v5-c-switch {
--pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(
--hs-primary
);
}
.pf-v5-c-label {
--pf-v5-c-label--BorderRadius: var(--hs-radius-pill);
}
/* Dropdown panels are surfaces like a card, not bare boxes. */
.pf-v5-c-menu {
--pf-v5-c-menu--BoxShadow: var(--hs-shadow-card);
border-radius: var(--hs-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(--hs-radius-control);
}
.pf-v5-c-modal-box {
--pf-v5-c-modal-box--BoxShadow: var(--hs-shadow-card-hover);
border-radius: var(--hs-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 --hs-table-link-decoration.
*/
.pf-v5-c-table a,
.pf-v5-c-data-list a:not(.pf-v5-c-button) {
text-decoration: var(--hs-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(--hs-border);
--pf-v5-c-data-list__item--BorderBottomColor: var(--hs-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(--hs-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(--hs-zebra);
}
.pf-v5-c-data-list__item-row + .pf-v5-c-data-list__item-row {
border-block-start: 1px solid var(--hs-border);
}
.pf-v5-c-data-list__item-row:not(:only-child):hover {
background-color: var(--hs-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(--hs-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(--hs-font-head);
font-size: 0.75rem;
font-weight: 600;
color: var(--hs-muted);
text-transform: var(--hs-eyebrow-transform);
letter-spacing: var(--hs-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(--hs-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(--hs-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(--hs-primary-soft-md);
color: var(--hs-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(--hs-surface);
--pf-v5-global--BackgroundColor--200: var(--hs-surface-soft);
--pf-v5-global--Color--100: var(--hs-ink);
--pf-v5-global--Color--200: var(--hs-muted);
}