/* * Fraznet branding for the admin console (React / PatternFly v5). * Loaded after the app's own CSS bundle, so these overrides win. * The masthead logo comes from the `logo` theme property; this file handles * the brand color, the Lato font and sizing the logo in the masthead. */ /* ---- Lato (bundled locally) ---- */ @font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/lato-400.woff2) format('woff2'); 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; } @font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/lato-400-ext.woff2) format('woff2'); 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:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/lato-700.woff2) format('woff2'); 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; } @font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap; src:url(../fonts/lato-900.woff2) format('woff2'); 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; } /* ---- palette + font tokens (recolors primary buttons, links, active nav) ---- */ :root { --pf-v5-global--primary-color--100: #428bca; --pf-v5-global--primary-color--200: #3071a9; --pf-v5-global--active-color--100: #428bca; --pf-v5-global--link--Color: #3071a9; --pf-v5-global--link--Color--hover: #285e8e; --pf-v5-global--FontFamily--text: 'Lato', 'Helvetica Neue', Arial, sans-serif; --pf-v5-global--FontFamily--heading: 'Lato', 'Helvetica Neue', Arial, sans-serif; } /* ---- dark mode ---- theme.properties sets darkMode=true, so index.ftl adds .pf-v5-theme-dark to when the OS asks for dark and PatternFly recolors its own surfaces (#1b1d21 page, #212427 panels, #e0e0e0 text). Only the Frazil overrides need a dark counterpart: PF5 defines its dark tokens on the zero-specificity :where(.pf-v5-theme-dark), so the :root block above outranks them and the brand blue would otherwise stay too dark to read (#428bca is 4.3:1 on the dark panel, #3071a9 links only 3.0:1). These are the same lifted blues the login theme uses in dark, so both screens match. */ :root.pf-v5-theme-dark { --pf-v5-global--primary-color--100: #5aa2da; --pf-v5-global--primary-color--200: #6cb2e8; --pf-v5-global--active-color--100: #5aa2da; --pf-v5-global--link--Color: #6cb2e8; --pf-v5-global--link--Color--hover: #8fc9f0; } /* Explicit primary-button recolor as a safety net. */ .pf-v5-c-button.pf-m-primary { --pf-v5-c-button--m-primary--BackgroundColor: #428bca; --pf-v5-c-button--m-primary--hover--BackgroundColor: #3071a9; --pf-v5-c-button--m-primary--active--BackgroundColor: #285e8e; --pf-v5-c-button--m-primary--focus--BackgroundColor: #3071a9; } /* Dark mode: PF5 swaps the primary button to a deeper blue with a white label (and would otherwise paint our blue fill with its dark label color). Frazil's darker blue keeps white text at 5.2:1 where the base #428bca is 3.6:1. */ .pf-v5-theme-dark .pf-v5-c-button.pf-m-primary { --pf-v5-c-button--m-primary--BackgroundColor: #3071a9; --pf-v5-c-button--m-primary--hover--BackgroundColor: #3579b3; --pf-v5-c-button--m-primary--focus--BackgroundColor: #3579b3; --pf-v5-c-button--m-primary--active--BackgroundColor: #285e8e; --pf-v5-c-button--m-primary--Color: #fff; } /* Size the Frazil wordmark to fit the masthead. */ .pf-v5-c-masthead .pf-v5-c-brand, .pf-v5-c-masthead__brand img { max-height: 36px; width: auto; }