/*! * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ /* * Pagefind Search Modal - Cmd+K Search * Minimal styling for search functionality only */ /* Search Modal */ .search-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; padding-top: 15vh; } .search-modal.active { display: flex; } .search-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); cursor: pointer; } .search-modal__container { position: relative; width: 90%; max-width: 600px; margin: 0 auto; background: white; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; border: 1px solid #dee2e6; } [data-bs-theme="dark"] .search-modal__container { background: #161b22; border-color: #30363d; } .search-modal__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #dee2e6; } [data-bs-theme="dark"] .search-modal__header { border-bottom-color: #30363d; } .search-modal__icon { color: #6c757d; flex-shrink: 0; width: 18px; height: 18px; } .search-modal__input { flex: 1; font-size: 16px; border: none; background: transparent; color: #1a1a1a; font-family: inherit; } [data-bs-theme="dark"] .search-modal__input { color: #e6edf3; } .search-modal__input:focus { outline: none; } .search-modal__input::placeholder { color: #adb5bd; } [data-bs-theme="dark"] .search-modal__input::placeholder { color: #6e7681; } .search-modal__close { background: transparent; border: none; color: #6c757d; cursor: pointer; padding: 6px; border-radius: 4px; transition: background 0.2s; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .search-modal__close:hover { background: #f8f9fa; } [data-bs-theme="dark"] .search-modal__close { color: #8b949e; } [data-bs-theme="dark"] .search-modal__close:hover { background: #21262d; } .search-modal__close svg { width: 16px; height: 16px; } .search-modal__results { max-height: 400px; overflow-y: auto; padding: 8px; } .search-modal__result-item { padding: 10px 12px; border-radius: 4px; cursor: pointer; display: flex; gap: 10px; text-decoration: none; color: inherit; transition: background 0.2s; margin-bottom: 4px; } .search-modal__result-item:hover, .search-modal__result-item--selected { background: #e9ecef; } [data-bs-theme="dark"] .search-modal__result-item:hover, [data-bs-theme="dark"] .search-modal__result-item--selected { background: #30363d; } .search-modal__result-icon { color: #6c757d; flex-shrink: 0; margin-top: 2px; width: 14px; height: 14px; } .search-modal__result-icon svg { width: 14px; height: 14px; } .search-modal__result-content { flex: 1; min-width: 0; } .search-modal__result-title { font-weight: 600; color: #1a1a1a; margin-bottom: 2px; font-size: 14px; } [data-bs-theme="dark"] .search-modal__result-title { color: #e6edf3; } .search-modal__result-breadcrumb { font-size: 11px; color: #6c757d; margin-bottom: 4px; } [data-bs-theme="dark"] .search-modal__result-breadcrumb { color: #8b949e; } .search-modal__result-excerpt { font-size: 12px; color: #6c757d; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } [data-bs-theme="dark"] .search-modal__result-excerpt { color: #8b949e; } .search-modal__no-results { text-align: center; padding: 48px 24px; color: #6c757d; } [data-bs-theme="dark"] .search-modal__no-results { color: #8b949e; } .search-modal__no-results p:first-child { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } [data-bs-theme="dark"] .search-modal__no-results p:first-child { color: #e6edf3; } .search-modal__no-results-hint { font-size: 13px; color: #adb5bd; } [data-bs-theme="dark"] .search-modal__no-results-hint { color: #6e7681; } .search-modal__footer { padding: 10px 16px; border-top: 1px solid #dee2e6; background: #f8f9fa; } [data-bs-theme="dark"] .search-modal__footer { border-top-color: #30363d; background: #0d1117; } .search-modal__shortcuts { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: #495057; font-weight: 500; } [data-bs-theme="dark"] .search-modal__shortcuts { color: #c9d1d9; } .search-modal__shortcuts span { display: flex; align-items: center; gap: 6px; } .search-modal__shortcuts kbd { padding: 3px 8px; background: white; border: 1px solid #dee2e6; border-radius: 4px; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; margin: 0; font-size: 11px; font-weight: 600; color: #495057; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } [data-bs-theme="dark"] .search-modal__shortcuts kbd { background: #21262d; border-color: #30363d; color: #c9d1d9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* ============================================ Search Button in Header - FIXED POSITIONING ============================================ */ .search-button { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: #dee2e6; cursor: pointer; transition: all 0.2s ease; font-size: 14px; font-family: inherit; height: 36px; margin-left: 16px; } .search-button:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: white; } .search-button__icon { flex-shrink: 0; width: 16px; height: 16px; } .search-button__text { font-weight: 400; font-size: 14px; color: inherit; } .search-button__shortcut { display: flex; gap: 2px; margin-left: 8px; padding: 2px 6px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } .search-button__shortcut span { font-size: 11px; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, 0.9); } /* Light theme adjustments */ [data-bs-theme="light"] .search-button { border-color: #dee2e6; background: white; color: #495057; } [data-bs-theme="light"] .search-button:hover { background: #f8f9fa; border-color: #adb5bd; color: #212529; } [data-bs-theme="light"] .search-button__shortcut { background: #e9ecef; border-color: #adb5bd; } [data-bs-theme="light"] .search-button__shortcut span { color: #495057; font-weight: 600; } @media (max-width: 768px) { .search-button__text, .search-button__shortcut { display: none; } .search-button { padding: 6px; width: 36px; justify-content: center; margin-left: 8px; } } /* Floating Search Button (Fallback) */ .pagefind-search-button { position: fixed; top: 20px; right: 20px; z-index: 9998; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #017cee; color: white; border: 1px solid rgba(1, 124, 238, 0.2); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 500; transition: all 0.2s ease; } .pagefind-search-button:hover { background: #0166c7; box-shadow: 0 4px 12px rgba(1, 124, 238, 0.25); transform: translateY(-1px); } .pagefind-search-button__icon { flex-shrink: 0; width: 18px; height: 18px; } .pagefind-search-button__text { color: white; font-weight: 500; } .pagefind-search-button__shortcut { display: flex; gap: 2px; padding: 3px 7px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; line-height: 1; } .pagefind-search-button__shortcut span { color: white; } @media (max-width: 768px) { .pagefind-search-button__text, .pagefind-search-button__shortcut { display: none; } .pagefind-search-button { width: 44px; height: 44px; padding: 10px; justify-content: center; } } /* Sidebar Search Button - Replaces Sphinx searchbox */ .sidebar-search-container { padding: 0; margin-bottom: 1rem; } .sidebar-search-button { position: static; width: 100%; justify-content: center; padding: 10px 12px; border-radius: 6px; } .sidebar-search-button .pagefind-search-button__text { flex: 1; } /* Light mode - subtle styling */ [data-bs-theme="light"] .sidebar-search-button { background: white; border-color: #dee2e6; color: #495057; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } [data-bs-theme="light"] .sidebar-search-button:hover { background: #f8f9fa; border-color: #adb5bd; color: #212529; } [data-bs-theme="light"] .sidebar-search-button .pagefind-search-button__icon { stroke: #6c757d; } [data-bs-theme="light"] .sidebar-search-button .pagefind-search-button__text { color: #495057; } [data-bs-theme="light"] .sidebar-search-button .pagefind-search-button__shortcut { background: #e9ecef; border-color: #adb5bd; } [data-bs-theme="light"] .sidebar-search-button .pagefind-search-button__shortcut span { color: #495057; } /* Dark mode - keep blue for visibility */ [data-bs-theme="dark"] .sidebar-search-button { background: #0166c7; } [data-bs-theme="dark"] .sidebar-search-button:hover { background: #017cee; } /* Hide floating button when sidebar button exists */ body:has(header .search-button) .pagefind-search-button, body:has(nav .search-button) .pagefind-search-button, body:has(.sidebar-search-button) .pagefind-search-button:not(.sidebar-search-button) { display: none; }