/* * Search popup — functional, restyleable shell for [gv_search]. * Everything is namespaced .gv-search-* and driven by the CSS variables below, * so the theme can retheme it by overriding a handful of custom properties (or * replace this file wholesale). No Tailwind dependency — works standalone. */ /* On :root, not on #gv-search. The overlay is moved to at init so no hidden header or nav popup can swallow it — which also takes it out of #gv-search's subtree, and any token declared there stops inheriting. The panel then paints with an unresolved var and renders transparent. Values follow the site's palette where it has an equivalent, so the popup blends and follows dark mode; each keeps its original as a fallback for installs without --gm-*. */ :root { --gv-search-accent: var(--gm-purple, #6831ff); --gv-search-bg: var(--gm-surface, #ffffff); --gv-search-fg: var(--gm-text, #1a1130); --gv-search-muted: var(--gm-text-muted, #6b6580); --gv-search-border: var(--gm-border, #e4dbff); --gv-search-active: color-mix(in srgb, var(--gm-purple, #6831ff) 8%, transparent); --gv-search-radius: 12px; } #gv-search { display: inline-flex; } .gv-search-trigger { display: inline-flex; align-items: center; justify-content: center; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; line-height: 0; } .gv-search-trigger:hover { color: var(--gv-search-accent); } [v-cloak] { display: none !important; } .gv-search-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; /* Same scrim as the comments' share modal: #0a0a0f at 25%. */ background: rgba(10, 10, 15, 0.25); backdrop-filter: blur(2px); } .gv-search-panel { width: 100%; max-width: 640px; max-height: 75vh; display: flex; flex-direction: column; background: var(--gv-search-bg); color: var(--gv-search-fg); border-radius: var(--gv-search-radius); box-shadow: 0 24px 60px rgba(20, 12, 40, 0.35); overflow: hidden; } .gv-search-inputrow { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--gv-search-border); } .gv-search-inputicon { color: var(--gv-search-muted); flex: 0 0 auto; } .gv-search-input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font-size: 17px; color: inherit; } .gv-search-input::placeholder { color: var(--gv-search-muted); } .gv-search-close { flex: 0 0 auto; border: 0; background: transparent; color: var(--gv-search-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; } .gv-search-close:hover { color: var(--gv-search-fg); } .gv-search-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--gv-search-border); } .gv-search-filter { border: 1px solid var(--gv-search-border); background: transparent; color: var(--gv-search-muted); border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .gv-search-filter:hover { color: var(--gv-search-fg); border-color: var(--gv-search-muted); } .gv-search-filter.is-on { background: var(--gv-search-accent); border-color: var(--gv-search-accent); color: #fff; } .gv-search-results { overflow-y: auto; padding: 8px; } .gv-search-hint { margin: 0; padding: 18px 12px; color: var(--gv-search-muted); font-size: 14px; } .gv-search-group { padding: 4px 0; } .gv-search-grouphead { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px 4px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gv-search-muted); } .gv-search-grouphead:hover { color: var(--gv-search-fg); } .gv-search-chevron { flex: 0 0 auto; display: inline-flex; line-height: 0; /* wrap tight to the SVG so it rotates in place */ transform-origin: center; transform: rotate(0deg); /* expanded: points down (v) */ transition: transform 0.15s ease; } .gv-search-chevron.is-collapsed { transform: rotate(-90deg); /* collapsed: points right (>) */ } .gv-search-grouplabel { flex: 0 1 auto; } .gv-search-count { margin-left: auto; font-weight: 700; background: var(--gv-search-border); color: var(--gv-search-fg); border-radius: 999px; padding: 1px 8px; font-size: 11px; } .gv-search-item { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: inherit; } .gv-search-item.is-active { background: var(--gv-search-active); } .gv-search-item-title { display: block; font-weight: 600; font-size: 15px; color: var(--gv-search-fg); } .gv-search-item-context { margin-left: 6px; font-weight: 400; font-size: 13px; color: var(--gv-search-muted); } .gv-search-item-excerpt { display: block; margin-top: 2px; font-size: 13px; color: var(--gv-search-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }