/* overrides.css — small, deliberate overrides of vendored (PatternFly / FontAwesome) defaults that aren't in PatternFly itself. Loaded globally from layouts/_head.html, after the vendor stylesheets and pha.css. Keep this file tiny and well-commented; each rule should say what it patches and why. */ /* FontAwesome glyphs are designed against a 0 0 W 512 viewBox, but many decorated / rotated / cornered icons (gears, wine-bottle, the mars-* set, paperclip, …) bleed a few units past that box. An inline without the pf-v6-c-page chrome that normally paints the themed background. The body defaults to UA white, so in dark mode the themed text and link colors land on a white canvas and fail contrast (axe gates the dark-theme sweep). Painting the body with the global background token makes bare pages follow the theme; pages with chrome are unaffected — the page component covers the body. */ body { background-color: var(--pf-t--global--background--color--primary--default); } /* Alpine x-cloak must work on every page (the showcase shell's search menu * relies on it pre-init); tooltip.css carries a copy for standalone pages. */ [x-cloak] { display: none !important; } /* The docs bundle makes .ws-toc position: sticky but never gives it a top — * patternfly.org injects one from JS to sit below its sticky tab bar. We have * no such bar, so a plain top engages the stickiness. */ .ws-toc { top: 0; } /* Showcase-shell masthead search. Desktop: the results panel drops down from * the toggle, right-anchored. The toggle sits left of the GitHub and theme * buttons, so a right-anchored 320px panel needs ~450px of viewport; on * anything narrower its left portion lands past the viewport's left edge, * where it is unreachable (overflow to the left never produces a scrollbar). * Below the PF sm breakpoint the panel therefore anchors to the masthead * itself and spans the full width instead. */ .pha-global-search { position: relative; } .pha-global-search__menu { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: var(--pf-t--global--z-index--lg); min-width: 320px; } @media (width <= 575.98px) { .pf-v6-c-masthead:has(.pha-global-search) { position: relative; } .pha-global-search { position: static; } .pha-global-search__menu { inset-inline: var(--pf-t--global--spacer--md); min-width: 0; } } /* PatternFly's horizontal nav is designed as a scroll container — the core CSS hides the list's webkit scrollbar and PF React adds scroll buttons — but the plain CSS build never sets the overflow itself. A list wider than the masthead (the landing demo's nav at phone widths) therefore inflates the page and grows a document-level horizontal scrollbar. Restore the intended scroll behavior; lists that fit are unaffected. */ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list { overflow-x: auto; } /* Companion to the rule above: the page grid sizes its single column from the min-content of its rows, and the subnav row's flex default (min-width: auto) reports the nav's full unshrunk width. That props the whole page grid wider than the viewport (386px at a 360px phone on the landing demo) — the masthead and every section stretch to match, and the document grows a horizontal scrollbar. Letting the subnav shrink lets the list's scroll behavior engage instead. */ .pf-v6-c-page__main-subnav { min-width: 0; } /* The docs tab row uses the tabs component's nav mode (link-style items, no * ARIA tablist), but pf-m-nav restyles link hover to the pill radius — correct * for horizontal-nav pills, not for patternfly.org-style docs tabs, which keep * the default small corner radius. Restore the default token for this row. */ .ws-docs-tabs .pf-v6-c-tabs.pf-m-nav { --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default); }