/* RumbleTab "Midnight Pulp" overrides for the Keycloak account (v3) and * admin (v2) console SPAs (Keycloak 26.5.4). Loaded after the bundled * PatternFly v5 entryStyles via theme.properties styles=. * * Strategy: remap the PatternFly v5 global palette variables on :root * so the ENTIRE console goes ink-navy/cream in both light and dark OS * schemes (the SPAs only toggle .pf-v5-theme-dark; we override both), * then hard-brand the shell: masthead #070B14 with the official * wordmark PNG (canonical source site/assets/wordmark.png, delivered * via theme.properties logo=/img/wordmark.png) and a red bottom border, * red primary buttons, yellow links, red active-nav accent. Served * shell markup (verified): *
... SPA renders .pf-v5-c-page / .pf-v5-c-masthead / * .pf-v5-c-masthead__brand / .pf-v5-c-nav__link (classes confirmed in * the shipped account-ui/admin-ui bundles). * Brand rule: no yellow in or around the mark; masthead stays cream/red. */ @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700;800&display=swap'); :root { --rt-ink: #EAE6D8; --rt-cream: #F4ECDD; --rt-dim: rgba(234, 230, 216, .58); --rt-red: #D3352B; --rt-red-deep: #BA261C; --rt-yellow: #F2C118; --rt-outline: #05070D; --rt-glass: rgba(216, 226, 255, .06); --rt-glass-bd: rgba(216, 226, 255, .14); } /* ---------- Global PatternFly palette remap (light AND dark) ---------- */ :root, :root.pf-v5-theme-dark { --pf-v5-global--FontFamily--text: 'Karla', sans-serif; /* Surfaces */ --pf-v5-global--BackgroundColor--100: #131A2C; --pf-v5-global--BackgroundColor--150: #0C111E; --pf-v5-global--BackgroundColor--200: #0C111E; --pf-v5-global--BackgroundColor--dark-100: #0C111E; --pf-v5-global--BackgroundColor--dark-200: #0C111E; --pf-v5-global--BackgroundColor--dark-300: #0C111E; --pf-v5-global--BackgroundColor--dark-400: rgba(216, 226, 255, .10); /* Text */ --pf-v5-global--Color--100: #EAE6D8; --pf-v5-global--Color--200: rgba(234, 230, 216, .58); --pf-v5-global--Color--dark-100: #EAE6D8; --pf-v5-global--Color--dark-200: rgba(234, 230, 216, .58); /* Borders */ --pf-v5-global--BorderColor--100: rgba(216, 226, 255, .14); --pf-v5-global--BorderColor--200: rgba(216, 226, 255, .14); --pf-v5-global--BorderColor--300: rgba(216, 226, 255, .14); --pf-v5-global--BorderColor--dark-100: rgba(216, 226, 255, .14); /* Accents */ --pf-v5-global--primary-color--100: #D3352B; --pf-v5-global--primary-color--200: #BA261C; --pf-v5-global--primary-color--300: #BA261C; --pf-v5-global--active-color--100: #D3352B; --pf-v5-global--link--Color: #F2C118; --pf-v5-global--link--Color--hover: #D3352B; } /* ---------- Page shell ---------- */ html, body, #app { height: 100%; background: #070B14; } body { background: radial-gradient(120% 90% at 50% 0%, #131A2C 0%, #0C111E 55%, #070B14 100%) fixed !important; } /* Pre-React loading splash (inline-styled white in index.ftl). */ .keycloak__loading-container { background-color: #070B14 !important; color: #EAE6D8 !important; } .pf-v5-c-page { --pf-v5-c-page--BackgroundColor: transparent; background: radial-gradient(120% 90% at 50% 0%, #131A2C 0%, #0C111E 55%, #070B14 100%) fixed !important; } .pf-v5-c-page__main, .pf-v5-c-page__main-section { background: transparent !important; color: var(--rt-ink); } /* ---------- Masthead (logo zone: cream/red only, never yellow) ---------- */ .pf-v5-c-masthead { background: #070B14 !important; border-bottom: 2px solid var(--rt-red); } /* The brand img src is the official wordmark PNG, injected via * theme.properties logo=/img/wordmark.png (account console renders it * with a hashed CSS-module class, admin with .keycloak__pageheader_brand; * both sit inside .pf-v5-c-masthead__brand). */ .pf-v5-c-masthead__brand img, img.keycloak__pageheader_brand { display: block; height: 44px; width: auto; } .pf-v5-c-masthead a, .pf-v5-c-masthead .pf-v5-c-button { color: var(--rt-cream); } .pf-v5-c-masthead .pf-v5-c-toolbar { background: transparent; } /* ---------- Sidebar / nav ---------- */ .pf-v5-c-page__sidebar { background: rgba(12, 17, 30, .96) !important; border-right: 1px solid var(--rt-glass-bd); } .pf-v5-c-nav__link { color: var(--rt-ink) !important; } .pf-v5-c-nav__link:hover { background: rgba(216, 226, 255, .08) !important; } .pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link { background: rgba(211, 53, 43, .16) !important; color: var(--rt-cream) !important; box-shadow: inset 4px 0 0 var(--rt-red); } /* ---------- Content panels ---------- */ .pf-v5-c-card { background: var(--rt-glass) !important; border: 1px solid var(--rt-glass-bd); border-radius: 14px; color: var(--rt-ink); } .pf-v5-c-title, .pf-v5-c-content, .pf-v5-c-form__label-text, .pf-v5-c-tab-content { color: var(--rt-ink); } /* ---------- Buttons ---------- */ .pf-v5-c-button.pf-m-primary { background: linear-gradient(180deg, var(--rt-red), var(--rt-red-deep)) !important; background-color: var(--rt-red) !important; color: #F7EDD4 !important; border-radius: 10px; } .pf-v5-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:focus { background: var(--rt-red-deep) !important; color: #F7EDD4 !important; } .pf-v5-c-button.pf-m-secondary { color: var(--rt-ink) !important; border: 1px solid rgba(234, 230, 216, .55); border-radius: 10px; background: rgba(7, 11, 20, .4) !important; } /* ---------- Links (outside the masthead) ---------- */ .pf-v5-c-page a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link) { color: var(--rt-yellow); } .pf-v5-c-page a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):hover { color: var(--rt-red); } /* ---------- Tabs ---------- */ .pf-v5-c-tabs__link { color: var(--rt-dim); } .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link { color: var(--rt-cream); } .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after, .pf-v5-c-tabs__link::after { border-color: var(--rt-red) !important; }