/* ========================================================================== Moulticast - Keycloak account console (theme id: moulticast) Loaded after PatternFly 5, which is compiled into the account console's JavaScript bundle. The markup and the layout are PatternFly's and cannot be changed from a theme, so this file works the way PatternFly is meant to be themed: it re-points PatternFly's own custom properties - the `--pf-v5-global--*` tokens plus a handful of component-level ones - to the Glauca values, then adds a short list of rules for the few places where the login theme's shape differs from PatternFly's rather than just its colour (the gradient masthead, the bordered form field, the Bootstrap focus ring). Same token names and same values as the login theme's login.css, so the two files diff cleanly. They cannot share a stylesheet: Keycloak resolves `resources/` per theme type, so a login theme and an account theme have separate resource roots. Change a colour in both. The console's chrome is the login page's chrome: the masthead carries the brand gradient the login page uses on , the sidebar is the navy at the middle of that gradient, and the content sits on a white surface the way the login card does. Dark mode: PatternFly's own `.pf-v5-theme-dark` class, which the parent theme's inline script sets from `prefers-color-scheme`. ========================================================================== */ :root { /* ----- Brand ramp (Tailwind v1 / Chakra scale) ------------------------ */ --login-primary: #3182ce; --login-primary-dark: #2b6cb0; --login-primary-darker: #2c5282; --login-primary-rgb: 49, 130, 206; --login-navy: #2a4365; --login-teal: #319795; /* gray-700, not gray-600: white on #718096 measures 4.0:1, which misses WCAG AA for normal text. #4a5568 gives 7.5:1 on the same white label. */ --login-secondary: #4a5568; --login-secondary-dark: #2d3748; --login-success: #38a169; --login-warning: #ecc94b; --login-danger: #e53e3e; --login-danger-dark: #9b2c2c; --login-offwhite: #f7fafc; /* ----- Semantic tokens ------------------------------------------------ These are what the rest of the file uses, and the only things the dark variant re-points. */ --login-gradient: linear-gradient(270deg, var(--login-teal), var(--login-navy), var(--login-primary)); --login-card-bg: #fff; --login-surface: var(--login-navy); --login-surface-hover: #1f3350; --login-subtle-bg: var(--login-offwhite); --login-input-bg: #fff; --login-fg: #212529; --login-muted-fg: #4a5568; --login-accent-fg: var(--login-navy); --login-on-accent: var(--login-offwhite); --login-border-color: #dee2e6; /* Accents that sit *on* the navy chrome - the current-page bar in the sidebar, focus rings there. --login-primary is only 1.8:1 against the navy, so the marker is lifted to blue-300, which clears it comfortably in both variants. */ --login-on-surface-accent: #63b3ed; /* Secondary text and quiet controls on the gradient / navy chrome. The two rgba() values are deliberately alpha rather than a solid: they sit on the gradient, which is a different colour at each end. */ --login-on-accent-muted: #cbd5e0; --login-on-accent-border: rgba(255, 255, 255, 0.35); --login-on-accent-hover-bg: rgba(255, 255, 255, 0.12); /* Label colour for a primary button whose ground has been lightened - see the dark block below. */ --login-on-primary-inverse: #10161f; /* ----- Geometry and type ---------------------------------------------- */ --login-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --login-radius: 0.375rem; --login-radius-lg: 0.5rem; --login-card-radius: 0.75rem; --login-focus-ring: 0 0 0 0.25rem rgba(var(--login-primary-rgb), 0.25); /* ---------------------------------------------------------------------- PatternFly globals, re-pointed. Most components derive their colours from these, so this block does the bulk of the work - and because the values below are themselves `var(--login-*)`, the dark block further down only has to re-point the Glauca tokens, not repeat this list. ---------------------------------------------------------------------- */ --pf-v5-global--FontFamily--text: var(--login-font-family); --pf-v5-global--FontFamily--text--vf: var(--login-font-family); --pf-v5-global--FontFamily--heading: var(--login-font-family); --pf-v5-global--FontFamily--heading--vf: var(--login-font-family); --pf-v5-global--primary-color--100: var(--login-primary); --pf-v5-global--primary-color--200: var(--login-primary-darker); --pf-v5-global--primary-color--light-100: var(--login-primary); --pf-v5-global--primary-color--dark-100: var(--login-primary); --pf-v5-global--active-color--100: var(--login-primary); --pf-v5-global--active-color--400: var(--login-primary); --pf-v5-global--secondary-color--100: var(--login-muted-fg); --pf-v5-global--BackgroundColor--100: var(--login-card-bg); --pf-v5-global--BackgroundColor--light-100: var(--login-card-bg); --pf-v5-global--BackgroundColor--150: var(--login-subtle-bg); --pf-v5-global--BackgroundColor--200: var(--login-subtle-bg); --pf-v5-global--BackgroundColor--light-200: var(--login-subtle-bg); --pf-v5-global--BackgroundColor--light-300: var(--login-subtle-bg); /* PatternFly's "dark" grounds are its chrome - masthead and sidebar. On this theme that chrome is the brand navy. */ --pf-v5-global--BackgroundColor--dark-100: var(--login-surface); --pf-v5-global--BackgroundColor--dark-200: var(--login-surface); --pf-v5-global--BackgroundColor--dark-300: var(--login-surface-hover); --pf-v5-global--BackgroundColor--dark-400: var(--login-surface-hover); --pf-v5-global--Color--100: var(--login-fg); --pf-v5-global--Color--200: var(--login-muted-fg); --pf-v5-global--Color--light-100: var(--login-on-accent); --pf-v5-global--Color--light-200: var(--login-on-accent-muted); --pf-v5-global--Color--dark-100: var(--login-fg); --pf-v5-global--Color--dark-200: var(--login-muted-fg); --pf-v5-global--BorderColor--100: var(--login-border-color); --pf-v5-global--BorderColor--light-100: var(--login-border-color); --pf-v5-global--BorderColor--200: var(--login-muted-fg); --pf-v5-global--BorderColor--300: var(--login-border-color); --pf-v5-global--link--Color: var(--login-primary); --pf-v5-global--link--Color--light: var(--login-primary); --pf-v5-global--link--Color--dark: var(--login-primary); --pf-v5-global--link--Color--hover: var(--login-primary-darker); --pf-v5-global--link--Color--light--hover: var(--login-primary-darker); --pf-v5-global--link--Color--dark--hover: var(--login-primary-darker); --pf-v5-global--link--Color--visited: var(--login-primary); --pf-v5-global--danger-color--100: var(--login-danger); --pf-v5-global--danger-color--200: var(--login-danger-dark); --pf-v5-global--success-color--100: var(--login-success); --pf-v5-global--warning-color--100: var(--login-warning); --pf-v5-global--info-color--100: var(--login-teal); /* PatternFly's three disabled tokens are text / ground / lighter ground - none of them is a border colour. Pointing --300 at a mid grey turns every disabled input into a solid slab, so both grounds stay subtle and the muted text carries the state, which is also what Bootstrap's disabled control looks like. */ --pf-v5-global--disabled-color--100: var(--login-muted-fg); --pf-v5-global--disabled-color--200: var(--login-subtle-bg); --pf-v5-global--disabled-color--300: var(--login-subtle-bg); --pf-v5-global--BorderRadius--sm: var(--login-radius); --pf-v5-global--BorderRadius--lg: var(--login-radius-lg); --pf-v5-global--FontWeight--bold: 700; /* Bootstrap's shadows are softer and cooler than PatternFly's. */ --pf-v5-global--BoxShadow--sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --pf-v5-global--BoxShadow--md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* ----- Component-level ------------------------------------------------ */ --pf-v5-c-page--BackgroundColor: var(--login-subtle-bg); --pf-v5-c-page__main-section--BackgroundColor: var(--login-card-bg); --pf-v5-c-card--BackgroundColor: var(--login-card-bg); } /* -------------------------------------------------------------------------- Dark variant. `pf-v5-theme-dark` is put on by the parent theme's inline script, from prefers-color-scheme. The blues are lifted one step up the ramp (600 -> 500/300) because #3182ce does not carry enough contrast against a dark surface. Same values as the login theme's [data-bs-theme="dark"] block. -------------------------------------------------------------------------- */ .pf-v5-theme-dark { --login-primary: #4299e1; --login-primary-dark: #63b3ed; --login-primary-darker: #90cdf4; --login-primary-rgb: 66, 153, 225; --login-gradient: linear-gradient(270deg, #1d4044, #131820, #1c3559); --login-card-bg: #232b38; --login-surface: #2d3748; --login-surface-hover: #3a4556; --login-subtle-bg: #1a202c; --login-input-bg: #1a202c; --login-fg: #e2e8f0; --login-muted-fg: #a0aec0; --login-accent-fg: #90cdf4; --login-on-accent: #f7fafc; --login-border-color: #3d4859; --login-on-surface-accent: #90cdf4; --login-on-accent-muted: #a0aec0; /* The status colours also lift a step: #e53e3e and #38a169 are chosen to carry a white label, and neither clears 4.5:1 as *text* on the dark card. */ --login-danger: #fc8181; --login-danger-dark: #feb2b2; --login-success: #68d391; --login-warning: #f6e05e; /* Everything else is already expressed as var(--login-*) in the :root block, so re-pointing the tokens above is enough. Only the shadows, which are not tokens, are repeated. */ --pf-v5-global--BoxShadow--sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4); --pf-v5-global--BoxShadow--md: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); } /* -------------------------------------------------------------------------- Page shell -------------------------------------------------------------------------- */ body { background-color: var(--login-subtle-bg); color: var(--login-fg); font-family: var(--login-font-family); } /* The loading screen in the parent's index.ftl is an inline