docs/_static/css/search.css

/* ====================================================================== */
/* Sidebar search box                                                     */
/* ====================================================================== */

.search-box {
    position: sticky;
    top: 0;
    z-index: 5;
    background: inherit;
    padding: 12px;
}

/* Dim the rest of the page while the search input is focused. */
.search-overlay {
    position: fixed;
    inset: var(--topbar-height) 0 0 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 95;
    transition: opacity 0.15s ease;
}

body.search-focused .search-overlay {
    opacity: 1;
}

body.search-focused .left-sidebar {
    z-index: 96;
}

body.search-focused .left-sidebar > :not(.search-box) {
    opacity: 0.35;
    transition: opacity 0.15s ease;
}

.search-box form {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box input[type="text"] {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 60px 4px 12px;
    font: inherit;
    font-size: 13px;
    border: 1px solid #555;
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box input[type="text"]:focus {
    outline: none;
    border-color: #7ab3d4;
    box-shadow: 0 0 0 2px rgba(122, 179, 212, 0.3);
}

.search-kbd {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    pointer-events: none;
    color: #999;
    font-size: 10px;
    transition: opacity 0.15s ease;
}

/* Hide the hint while the input is focused (redundant cue). */
body.search-focused .search-kbd {
    opacity: 0;
}

.search-kbd kbd,
.shortcut-flyout-list kbd,
.article kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px 1px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: var(--kbd-text);
    background: var(--kbd-bg);
    border: 1px solid var(--kbd-border);
    border-bottom-width: 1.5px;
    border-radius: 3px;
}

/* Bigger pills: the '?' help flyout and the keyboard keys in prose /
   tables on the "About this site" page (body content, not a hint). */
.shortcut-flyout-list kbd,
.article kbd {
    padding: 4px 7px;
    font-size: 12px;
    vertical-align: baseline;
}

/* ====================================================================== */
/* Search results page                                                    */
/* ====================================================================== */

/* ---- Big search input (top of page) -------------------------------- */

.search-page-form {
    position: relative;
    display: flex;
    align-items: stretch;
    margin: 0 0 1.5em;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-page-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.search-page-icon {
    align-self: center;
    padding: 0 0.4em 0 0.9em;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.search-page-input {
    flex: 1;
    min-width: 0;
    padding: 0.7em 0.4em;
    font-size: 1.15rem;
    font-family: var(--font-body);
    color: var(--text);
    background: transparent;
    border: none;
    outline: none;
    box-sizing: border-box;
}

.search-page-btn {
    flex-shrink: 0;
    padding: 0 1.4em;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.search-page-btn:hover {
    color: var(--accent);
    background: var(--bg-key);
}

/* ---- Result cards -------------------------------------------------- */

/* "Search finished, found N pages..." strapline. */
p.search-summary {
    font-size: 0.9em;
    font-weight: 500;
    margin: 0 0 1em 0;
    color: var(--text-muted);
}

ul.search {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

ul.search > li {
    list-style: none;
    margin: 0;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 6px;
    line-height: normal;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] ul.search > li {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Compact card: link-only result with no description. */
ul.search > li:not(:has(> span)):not(:has(> p.context)) {
    padding: 8px 16px;
}

ul.search > li > a,
ul.search > li > a:visited,
ul.search > li > a *,
ul.search > li > a:visited * {
    flex: 1;
    font-weight: bold;
    color: var(--accent);
    text-decoration: none;
}

ul.search > li > a:hover {
    text-decoration: underline;
}

/* Description chip e.g. "(Python class, in API reference)" */
ul.search > li > span:not(.highlighted) {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-key);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.1em 0.55em;
    align-self: center;
    opacity: 0.85;
    white-space: nowrap;
}

/* Context paragraph (snippet under the title), aligned with the
   icon column. */
ul.search > li > p.context {
    flex-basis: 100%;
    margin: 0 0 0 28px;
    font-size: 0.9em;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

ul.search .highlighted,
ul.search > li > p.context .highlighted {
    background: var(--bg-search-highlight);
    padding: 0 2px;
    border-radius: 2px;
}

/* Active row when navigating with ArrowUp / ArrowDown. */
ul.search > li.search-result-active {
    background: var(--bg-key);
    outline: none;
}

/* ---- Result icons via FontAwesome ::before ------------------------- */

/* Icon column. Page-specific glyph comes from --doc-icon (set per page
   in doc-icons.css, shared with the sidebar); the kind fallback below
   covers results whose target page has no icon. */
ul.search > li::before {
    content: var(--doc-icon, "\f0f6");  /* generic doc */
    font-family: var(--doc-icon-font, "Font Awesome 7 Free");
    font-weight: var(--doc-icon-weight, 900);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 4px;
    margin-right: 2px;
    width: 1.2em;
    text-align: center;
    color: var(--text-muted);
}

/* Fallbacks by Sphinx SearchResultKind, used only when the target page
   has no --doc-icon. */
ul.search > li.kind-title::before { content: var(--doc-icon, "\f0c1"); }   /* link */
ul.search > li.kind-object::before { content: var(--doc-icon, "\f085"); }  /* cogs */
ul.search > li.kind-text::before { content: var(--doc-icon, "\f0f6"); }    /* doc text */
ul.search > li.kind-index::before { content: var(--doc-icon, "\f097"); }   /* bookmark */

/* Blog results get a "Blog >" breadcrumb prefix on the link itself. */
ul.search > li:has(> a[href^="blog/"]) > a::before,
ul.search > li:has(> a[href*="/blog/"]) > a::before {
    content: "Blog > ";
}