/* ========================================================================== Postal — Frutiger Metro account console theme Same design language as the login theme: flat color, sharp corners, lowercase bold type, underline-only inputs. NOTE: the account console is a React app (not Freemarker templates like login), so it shares PatternFly v5 class names but the DOM structure is different in places. These selectors target the common PatternFly components (page header, cards, nav, buttons, forms) which should cover most of the surface — but some panels may need selector tweaks once you see it live, since React apps sometimes generate additional wrapper classes that aren't documented. ========================================================================== */ :root { --metro-accent: #6A00FF; --metro-accent-dark: #52009E; --metro-bg: #1D1D1D; --metro-panel: #6A00FF; --metro-text: #FFFFFF; } body { background-color: var(--metro-bg) !important; font-family: 'Segoe UI', 'Segoe UI Web', 'Open Sans', Arial, sans-serif; color: var(--metro-text); } /* Kill rounded corners globally */ * { border-radius: 0 !important; } /* Top masthead / header bar */ .pf-v5-c-masthead, .pf-v5-c-page__header { background-color: var(--metro-bg) !important; box-shadow: none !important; border-bottom: 2px solid var(--metro-accent) !important; } /* Side navigation — flat panel, no active-item pill/rounded highlight */ .pf-v5-c-nav, .pf-v5-c-page__sidebar { background-color: #141414 !important; box-shadow: none !important; } .pf-v5-c-nav__link { color: #FFFFFFAA !important; text-transform: lowercase; border-left: 4px solid transparent !important; } .pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link:hover { color: var(--metro-text) !important; background-color: #00000033 !important; border-left: 4px solid var(--metro-accent) !important; } /* The main content area (right of the sidebar) keeps its own white background independent of — same class of bug we hit on the login page's input wrapper. Force it dark so the white text we set globally is actually readable, instead of white-on-white. */ .pf-v5-c-page, .pf-v5-c-page__main, .pf-v5-c-page__main-section, .pf-v5-c-page__main-body, main { background-color: var(--metro-bg) !important; } /* Force every text element inside the main content to white — PatternFly's own component styles set dark text assuming a light card background, which our global body color rule doesn't reliably override once nested deep enough */ .pf-v5-c-page__main-section *, .pf-v5-c-form label, .pf-v5-c-form__label-text, .pf-v5-c-form__helper-text, h1, h2, h3, h4, h5, h6, p, span, div { color: var(--metro-text) !important; } /* ...except text sitting on the white login-style panels/cards (the flat purple tiles), which already sets its own white — and except links, which get their own accent-appropriate color below */ .pf-v5-c-card, .pf-v5-c-card * { color: var(--metro-text) !important; } a, a * { color: var(--metro-text) !important; } /* Replace the default Keycloak masthead logo/wordmark with your own — this hides the built-in brand image; drop your logo at account/resources/img/logo.png and it'll show via the background-image below. Swap dimensions to match your actual logo's aspect ratio. */ .pf-v5-c-brand, .pf-v5-c-masthead__brand img, .pf-v5-c-brand img { display: none !important; } .pf-v5-c-masthead__brand { background-image: url('../img/logo.png'); background-repeat: no-repeat; background-position: left center; background-size: contain; width: 44px; height: 42px; } /* Cards become flat solid tiles instead of white boxes with shadow */ .pf-v5-c-card { background-color: var(--metro-panel) !important; box-shadow: none !important; border: none !important; color: var(--metro-text) !important; } .pf-v5-c-card__title { text-transform: lowercase; font-weight: 600; } /* Inputs — same flat underline treatment as login */ .pf-v5-c-form-control, input[type="text"], input[type="email"], input[type="password"] { background: transparent !important; border: none !important; border-bottom: 2px solid #FFFFFF55 !important; border-radius: 0 !important; color: var(--metro-text) !important; box-shadow: none !important; outline: none !important; } .pf-v5-c-form-control:focus { border-bottom: 2px solid var(--metro-text) !important; } /* Buttons — flat, solid, sharp corners */ .pf-v5-c-button.pf-m-primary { background-color: #FFFFFF !important; color: var(--metro-accent) !important; border: none !important; font-weight: 600; text-transform: lowercase; } .pf-v5-c-button.pf-m-primary:hover { background-color: #E6D9FF !important; } .pf-v5-c-button.pf-m-secondary { background-color: transparent !important; color: var(--metro-text) !important; border: 2px solid var(--metro-text) !important; } /* Tables (sessions, devices, etc.) — flat rows, no zebra gradient */ .pf-v5-c-table { background-color: transparent !important; color: var(--metro-text) !important; } .pf-v5-c-table tr { border-bottom: 1px solid #FFFFFF22 !important; } /* ========================================================================== Catch-all: the account console (React) wraps things in components whose class names vary by page — data lists for "applications", plain native inputs for password/2FA fields, etc. Rather than chase every specific PatternFly class, kill white backgrounds on every generic container and form element site-wide, then re-assert the few elements that should intentionally stay colored (cards, primary button) below — later rules win, so those stay correct even though this block is broad. ========================================================================== */ div, section, article, ul, li, table, thead, tbody, tr, td, th, input, textarea, select, .pf-v5-c-data-list, .pf-v5-c-data-list__item, .pf-v5-c-data-list__item-content, .pf-v5-c-data-list__cell, .pf-v5-c-empty-state, .pf-v5-c-list, .pf-v5-c-form-control, .pf-v5-c-input-group { background-color: transparent !important; background: transparent !important; } input, textarea, select { border: none !important; border-bottom: 2px solid #FFFFFF55 !important; color: var(--metro-text) !important; box-shadow: none !important; outline: none !important; } input:focus, textarea:focus, select:focus { border-bottom: 2px solid var(--metro-text) !important; } /* Re-assert intentionally colored elements so the catch-all above doesn't flatten them — must stay below the catch-all to win */ .pf-v5-c-masthead, .pf-v5-c-page__header { background-color: var(--metro-bg) !important; } .pf-v5-c-nav, .pf-v5-c-page__sidebar { background-color: #141414 !important; } .pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link:hover { background-color: #00000033 !important; } .pf-v5-c-card { background-color: var(--metro-panel) !important; } .pf-v5-c-button.pf-m-primary { background-color: #FFFFFF !important; color: var(--metro-accent) !important; } .pf-v5-c-button.pf-m-primary:hover { background-color: #E6D9FF !important; } /* Status badges/labels (e.g. "Current session") — PatternFly's Label component uses its own light background + light text combo that reads as white-on-white against our dark theme */ .pf-v5-c-label { background-color: var(--metro-accent) !important; color: #FFFFFF !important; border: none !important; } .pf-v5-c-label__text { color: #FFFFFF !important; }