/*
* CNM branding for the admin console.
*
* The palette is the one the vendored PatternFly 4 console carried inline in its index.ftl,
* translated to PatternFly 5's token names. The console reads these globals: the masthead takes
* --BackgroundColor--dark-100 and the sidebar --dark-300.
*/
:root {
--cnm-masthead: #435986;
--cnm-nav: #4a6294;
--cnm-nav-hover: #5470a8;
--cnm-primary: #4e6698;
}
/*
* Light only. Dark mode is PatternFly's own — the console ships it (kcDarkModeClass) and this
* palette was drawn for a light ground. The class lands on , which is what :root matches.
*/
:root:not(.pf-v5-theme-dark) {
--pf-v5-global--BackgroundColor--dark-100: var(--cnm-masthead);
--pf-v5-global--BackgroundColor--dark-200: var(--cnm-nav);
--pf-v5-global--BackgroundColor--dark-300: var(--cnm-masthead);
--pf-v5-global--BackgroundColor--dark-400: var(--cnm-nav-hover);
/* --300 as well as --100: the primary button resolves its background through --300. */
--pf-v5-global--primary-color--100: var(--cnm-primary);
--pf-v5-global--primary-color--300: var(--cnm-primary);
--pf-v5-global--primary-color--dark-100: var(--cnm-primary);
--pf-v5-global--active-color--100: var(--cnm-primary);
--pf-v5-global--link--Color: var(--cnm-primary);
--pf-v5-global--link--Color--hover: var(--cnm-nav-hover);
--pf-v5-global--focus-color--100: var(--cnm-primary);
}
/*
* The masthead keeps the brand in dark mode too, like the Account Console's. Unscoped so it
* outranks PatternFly's :where(.pf-v5-theme-dark) rule, which has no specificity of its own.
* Its toolbar needs the same treatment: the dark rule pins the toolbar to black-1000 separately,
* which would leave the brand ground showing only behind the logo.
*/
.pf-v5-c-masthead {
--pf-v5-c-masthead--BackgroundColor: var(--cnm-masthead);
}
.pf-v5-c-masthead .pf-v5-c-toolbar {
--pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
}
/*
* The brand. The console renders resources/logo.svg as an ![Logo]()
, so the colibri goes
* in that file; the wordmark is added here as text instead of being drawn into the SVG, which
* keeps it in the console's own font — a font referenced from inside an ![]()
-loaded SVG would
* not load.
*
* The colibri is navy line art, unreadable on this masthead, so it is flattened to white:
* brightness(0) blackens every pixel while keeping alpha, invert(1) turns that white.
*/
.pf-v5-c-masthead__brand {
align-items: center;
display: flex;
gap: 0.75rem;
}
.keycloak__pageheader_brand {
filter: brightness(0) invert(1);
height: 2.25rem;
}
.pf-v5-c-masthead__brand::after {
color: #ffffff;
content: "Teldat Authenticator";
font-size: 1.25rem;
font-weight: 600;
white-space: nowrap;
}