/* ============================================================================= PAGEFIND COMPONENT UI — Mirantis theme integration Follows the body / body[data-theme="light"] selector pattern used in overrides/_index.sass, reusing MDS palette tokens throughout. CSS custom properties (--pf-*) are inherited even through `all: initial`, so overriding them on `body` is enough to theme all pagefind components. ============================================================================= */ /* ── Global --pf-* token overrides ─────────────────────────────────────────── */ /* Default = dark (matches the Mirantis theme default before JS sets data-theme) */ body { --pf-text: var(--mds-theme-palette-grey10); /* #d7dade */ --pf-text-secondary: var(--mds-theme-palette-grey20); /* #b9c2c9 */ --pf-text-muted: var(--mds-theme-palette-grey30); /* #a5b1ba */ --pf-background: var(--mds-theme-palette-grey90); /* #17222f */ --pf-border: var(--mds-theme-palette-grey70); /* #404d59 */ --pf-border-focus: var(--mds-theme-palette-grey50); /* #768491 */ --pf-hover: var(--mds-theme-palette-grey80); /* #26323f */ --pf-mark: var(--mds-theme-palette-grey10); --pf-scroll-shadow: rgba(0, 0, 0, 0.3); --pf-skeleton: var(--mds-theme-palette-grey80); --pf-skeleton-shine: var(--mds-theme-palette-grey70); --pf-outline-focus: var(--mds-theme-palette-marine40); /* #268aef */ --pf-modal-backdrop: rgba(0, 0, 0, 0.65); --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); --pf-error-bg: #2a1a1a; --pf-error-border: #5c2828; --pf-error-text: #f87171; --pf-error-text-secondary:#ef4444; /* Modal sizing — match pagefind defaults */ --pf-modal-max-width: 760px; --pf-modal-max-height: min(80dvh, 800px); --pf-modal-top: 10dvh; /* Typography */ --pf-font: "Open Sans", Roboto, var(--font-stack, sans-serif); --pf-input-font-size: 14px; --pf-result-title-font-size: 14px; --pf-result-excerpt-font-size:13px; /* Shape */ --pf-border-radius: 4px; } body[data-theme="light"] { --pf-text: var(--mds-theme-palette-grey90); /* #17222f */ --pf-text-secondary: var(--mds-theme-palette-grey70); /* #404d59 */ --pf-text-muted: var(--mds-theme-palette-grey40); /* #90a0ac */ --pf-background: var(--mds-theme-palette-white0); /* #ffffff */ --pf-border: var(--mds-theme-palette-white25); /* #e9ebee */ --pf-border-focus: var(--mds-theme-palette-grey40); /* #90a0ac */ --pf-hover: var(--mds-theme-palette-white15); /* #f2f3f5 */ --pf-mark: var(--mds-theme-palette-grey90); --pf-scroll-shadow: rgba(0, 0, 0, 0.06); --pf-skeleton: var(--mds-theme-palette-white25); --pf-skeleton-shine: var(--mds-theme-palette-white15); --pf-outline-focus: var(--mds-theme-palette-marine50); /* #0073ec */ --pf-modal-backdrop: rgba(0, 0, 0, 0.45); --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --pf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18); --pf-error-bg: #fef2f2; --pf-error-border: #fecaca; --pf-error-text: #dc2626; --pf-error-text-secondary: #b91c1c; } /* ── Hide modal body (filters + results) until the user types something ─────── */ pagefind-modal:has(.pf-input:placeholder-shown) pagefind-modal-body { display: none !important; } /* ── Sidebar trigger — make pagefind-modal-trigger fill the wrapper ─────────── */ /* Let the trigger grow as a flex item inside .sidebar-search-wrapper */ .sidebar-search-wrapper pagefind-modal-trigger { flex: 1 0 auto !important; min-width: 0 !important; /* The wrapper already provides the bottom border and height — remove pagefind's default block sizing */ display: flex !important; align-items: stretch !important; } /* Strip pagefind's default rounded-input look; match the Mirantis underline input */ .sidebar-search-wrapper .pf-trigger-btn { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; height: 26px !important; width: 100% !important; padding: 0 !important; gap: 4px !important; font-size: 12px !important; font-family: "Open Sans", Roboto, sans-serif !important; /* Inherit muted color used for placeholder + icons */ color: var(--pf-text-muted) !important; } .sidebar-search-wrapper .pf-trigger-btn:hover { background: transparent !important; border-color: transparent !important; } /* Reorder flex children to match the Mirantis input layout: [🔍] [Search text …] [⌘K] */ .sidebar-search-wrapper .pf-trigger-icon { order: 1 !important; /* Scale the mask icon to match the original 24 × 24 SVG size */ width: 16px !important; height: 16px !important; } .sidebar-search-wrapper .pf-trigger-text { order: 2 !important; flex: 1 !important; text-align: start !important; text-transform: capitalize !important; } .sidebar-search-wrapper .pf-trigger-shortcut { order: 3 !important; } /* Keyboard badge colours scoped to the sidebar */ body .sidebar-search-wrapper .pf-trigger-key { background: var(--mds-theme-palette-grey80) !important; border-color: var(--mds-theme-palette-grey60) !important; color: var(--mds-theme-palette-grey30) !important; } body[data-theme="light"] .sidebar-search-wrapper .pf-trigger-key { background: var(--mds-theme-palette-white15) !important; border-color: var(--mds-theme-palette-grey30) !important; color: var(--mds-theme-palette-grey60) !important; } /* The wrapper already colours the svg fill; do the same for the mask icon */ body .sidebar-search-wrapper .pf-trigger-icon { background: rgb(165, 177, 186) !important; /* --mds-theme-palette-grey30 */ } body[data-theme="light"] .sidebar-search-wrapper .pf-trigger-icon { background: rgb(64, 77, 89) !important; /* --mds-theme-palette-grey70 */ } /* Focus ring on the wrapper (mirrors the .focused class the existing JS adds) */ .sidebar-search-wrapper:focus-within { border-color: rgb(0, 115, 236) !important; /* --mds-theme-palette-marine50 */ } /* ── Filter dropdown ────────────────────────────────────────────────────────── */ /* Hide the virtual keyboard-navigation cursor (follows arrow keys, not mouse). */ .pf-dropdown-option-focused { outline: none !important; box-shadow: none !important; border-color: transparent !important; } /* "Apply" button — confirms multi-select filter choice and closes the dropdown */ .pf-done-btn { display: block !important; width: calc(100% - 16px) !important; margin: 6px 8px 4px !important; padding: 5px 14px !important; border: none !important; border-radius: var(--pf-border-radius) !important; background: var(--mds-theme-palette-marine50, #0073ec) !important; color: #fff !important; font: inherit !important; font-size: 13px !important; font-weight: 600 !important; text-align: center !important; cursor: pointer !important; transition: background 0.15s !important; } body .pf-done-btn:hover { background: var(--mds-theme-palette-marine60, #005ec2) !important; } /* Expand the menu to the widest option label instead of truncating. */ pagefind-filter-dropdown .pf-dropdown-menu { min-width: max-content !important; } pagefind-filter-dropdown .pf-dropdown-trigger-label, pagefind-filter-dropdown .pf-dropdown-option-label { overflow: visible !important; text-overflow: unset !important; white-space: nowrap !important; padding-inline-end: 32px !important; } /* When open: use flex-column layout so only .pf-dropdown-options scrolls. When closed: pagefind's defaults (overflow:hidden + max-height:0) hide the menu. JS (constrainDropdownHeight) sets max-height so the menu fits inside modal-body, so no overflow:visible on modal-body is needed and z-index stays correct. */ pagefind-filter-dropdown:has(.pf-dropdown-trigger.open) .pf-dropdown-menu { display: flex !important; flex-direction: column !important; overflow: visible !important; /* scroll lives on .pf-dropdown-options */ } /* Only this element scrolls — one scrollbar, no nesting conflict. */ pagefind-filter-dropdown .pf-dropdown-options { overflow-y: auto !important; overflow-x: hidden !important; flex: 1 1 auto !important; min-height: 0 !important; overscroll-behavior: contain !important; } /* ── Doc-type badge ─────────────────────────────────────────────────────────── */ .pf-result-badge { display: inline-block !important; margin-right: 8px !important; padding: 1px 7px !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.6 !important; border-radius: 3px !important; background: var(--pf-hover) !important; color: var(--pf-text-muted) !important; vertical-align: middle !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .pf-result-badge[data-pf-type="note"] { background: var(--color-admonition-title-background--note) !important; color: var(--color-admonition-title--note) !important; } .pf-result-badge[data-pf-type="tip"], .pf-result-badge[data-pf-type="hint"] { background: var(--color-admonition-title-background--tip) !important; color: var(--color-admonition-title--tip) !important; } .pf-result-badge[data-pf-type="important"] { background: var(--color-admonition-title-background--important) !important; color: var(--color-admonition-title--important) !important; } .pf-result-badge[data-pf-type="seealso"] { background: var(--color-admonition-title-background--seealso) !important; color: var(--color-admonition-title--seealso) !important; } .pf-result-badge[data-pf-type="danger"] { background: var(--color-admonition-title-background--danger) !important; color: var(--color-admonition-title--danger) !important; } .pf-result-badge[data-pf-type="admonition-todo"] { background: var(--color-admonition-title-background--admonition-todo) !important; color: var(--color-admonition-title--admonition-todo) !important; } .pf-result-badge[data-pf-type="warning"] { background: var(--color-admonition-title-background--warning) !important; color: var(--color-admonition-title--warning) !important; } .pf-result-badge[data-pf-type="caution"] { background: var(--color-admonition-title-background--caution) !important; color: var(--color-admonition-title--caution) !important; } /* ── Result title — bold ────────────────────────────────────────────────────── */ .pf-result-title { font-weight: 700 !important; } /* ── Result excerpt — allow up to 2 lines instead of the default single line ── */ .pf-result-excerpt { white-space: normal !important; overflow: hidden !important; text-overflow: unset !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; } /* ── Result URL path ────────────────────────────────────────────────────────── */ .pf-result-url { display: block; margin-top: 4px; font-size: 11px !important; color: var(--pf-text-muted) !important; word-break: break-all; position: relative; /* stay above the stretched pf-result-link::after overlay */ z-index: 1; } /* ── Permalink icon — rendered via CSS so pagefind never indexes it ─────────── */ /* html_permalinks_icon is set to "" in common_conf.py; this restores the visual ¶ */ .headerlink::after { content: "¶"; }