/* m27.ctxsearch.6: Global search -- top-bar launcher + Cmd-K palette. Brand lime is #CCFF00 per DESIGN_SYSTEM.md:25 (NOT searchable-select.js's off-spec lime value, deliberately not copied here). All new classes are stronghold-search-* (CLAUDE.md "stronghold- prefixed classes"); the top-bar layout context it extends is owned by sidebar.css (m27.ui-updates.1) and is NOT restyled here. */ /* ========================================================================== * Section A -- top-bar launcher + palette overlay * ========================================================================== */ /* Flex child between the mobile hamburger and the user chip. The user chip's auto start-margin rule (owned by sidebar.css) keeps it pinned right -- do NOT add competing margin rules here. */ .stronghold-search-launcher-wrap { flex: 1 1 auto; max-width: 36rem; min-width: 0; } /* On desktop, center the resting launcher on the VIEWPORT so it sits exactly where the engaged dialog pops (the dialog is portaled to and centered on the viewport). The top bar is shifted right by the sidebar, so absolute-center within it (left/top 50% + translate) and pull left by HALF the sidebar width to land on the true viewport center; using var(--sidebar-w) makes it auto-adjust when the sidebar collapses (16rem -> 4rem). Out of flex flow, so the user chip is the lone flex child and keeps its own right-pin (sidebar.css untouched). Width is clamped so it never overruns the content area. */ @media (min-width: 1024px) { .stronghold-search-launcher-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-inline-start: calc(var(--sidebar-w) / -2); width: min(36rem, calc(100vw - var(--sidebar-w) - 4rem)); max-width: none; flex: 0 0 auto; } } .stronghold-search-launcher { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(162, 162, 162, 0.20); border-radius: 0.375rem; color: #A2A2A2; font-size: 0.875rem; cursor: text; transition: border-color .15s ease, background-color .15s ease; text-align: start; } .stronghold-search-launcher:hover { border-color: rgba(162, 162, 162, 0.40); background: rgba(255, 255, 255, 0.05); } .stronghold-search-launcher:focus-visible { outline: none; border-color: #CCFF00; box-shadow: 0 0 0 2px rgba(204, 255, 0, .3); } .stronghold-search-launcher-icon { width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.7; } .stronghold-search-launcher-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Platform kbd hint (populated by JS). Hidden on narrow widths. */ .stronghold-search-kbd { flex-shrink: 0; padding: 0.125rem 0.375rem; font-family: Inter, system-ui, sans-serif; font-size: 0.6875rem; line-height: 1; color: #A2A2A2; background: rgba(162, 162, 162, 0.10); border: 1px solid rgba(162, 162, 162, 0.20); border-radius: 0.25rem; } @media (max-width: 640px) { .stronghold-search-kbd { display: none; } } /* ---- Overlay ---- */ .stronghold-search-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem 1rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); animation: stronghold-search-fade .12s ease; } .stronghold-search-backdrop[hidden] { display: none; } .stronghold-search-dialog { display: flex; flex-direction: column; width: 100%; max-width: 40rem; max-height: min(32rem, calc(100vh - 6rem)); background: #000000; border: 1px solid rgba(162, 162, 162, 0.20); border-radius: 0.5rem; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.8); overflow: hidden; animation: stronghold-search-pop .12s ease; } .stronghold-search-input { width: 100%; padding: 1rem 1.25rem; background: transparent; border: none; border-bottom: 1px solid rgba(162, 162, 162, 0.15); color: #EAEAEA; font-size: 1rem; font-family: Inter, system-ui, sans-serif; outline: none; } .stronghold-search-input::placeholder { color: #737373; } .stronghold-search-status { padding: 0.5rem 1.25rem; font-size: 0.75rem; color: #A2A2A2; } .stronghold-search-status:empty { display: none; } .stronghold-search-listbox { flex: 1 1 auto; overflow-y: auto; padding: 0.25rem 0; } .stronghold-search-group-header { display: flex; align-items: baseline; justify-content: space-between; padding: 0.5rem 1.25rem 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #A2A2A2; } .stronghold-search-jump-row { /* fast-path "Jump to" row -- visually distinct, above the groups */ border-inline-start: 2px solid #CCFF00; } .stronghold-search-footer-link { display: block; padding: 0.375rem 1.25rem 0.625rem; font-size: 0.75rem; color: #CCFF00; text-decoration: none; } .stronghold-search-footer-link:hover { text-decoration: underline; } .stronghold-search-hint { padding: 0.625rem 1.25rem; border-top: 1px solid rgba(162, 162, 162, 0.15); font-size: 0.6875rem; color: #737373; } .stronghold-search-hint code { padding: 0.0625rem 0.25rem; background: rgba(162, 162, 162, 0.12); border-radius: 0.1875rem; color: #A2A2A2; font-family: Monaco, Menlo, monospace; } .stronghold-search-empty { padding: 1.25rem; font-size: 0.8125rem; color: #737373; text-align: center; } @keyframes stronghold-search-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes stronghold-search-pop { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .stronghold-search-backdrop, .stronghold-search-dialog { animation: none; } } /* ========================================================================== * Section B -- shared result-row styling * (consumed UNCHANGED by /search -- m27.ctxsearch.7; do not fork it there) * ========================================================================== */ .stronghold-search-result-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem 1.25rem; color: #EAEAEA; text-decoration: none; cursor: pointer; border: none; background: transparent; text-align: start; } .stronghold-search-result-row:hover, .stronghold-search-result-row.is-active { background: rgba(204, 255, 0, 0.08); } .stronghold-search-result-row.is-active { box-shadow: inset 2px 0 0 #CCFF00; } .stronghold-search-result-thumb { flex-shrink: 0; width: 3.2rem; height: 1.8rem; object-fit: cover; border-radius: 0.1875rem; background: rgba(162, 162, 162, 0.15); display: flex; align-items: center; justify-content: center; color: #737373; font-size: 0.625rem; overflow: hidden; } .stronghold-search-result-body { flex: 1 1 auto; min-width: 0; } .stronghold-search-result-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: #EAEAEA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stronghold-search-result-snippet { font-size: 0.75rem; color: #A2A2A2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stronghold-search-result-snippet mark { /* explicit ts_headline emphasis */ background: rgba(204, 255, 0, 0.20); color: #CCFF00; padding: 0 0.0625rem; border-radius: 0.0625rem; } .stronghold-search-result-meta { flex-shrink: 0; font-size: 0.6875rem; color: #737373; white-space: nowrap; } /* Pipeline badges reuse existing .job-type-badge.vod / .job-type-badge.stream (Tailwind-composed inline in _job_row.html: vod = bg-brand-lime text-black, stream = bg-purple-500 text-white). No parallel badge system here. */ .stronghold-search-result-title .job-type-badge { flex-shrink: 0; font-size: 0.5625rem; padding: 0.0625rem 0.375rem; } /* ========================================================================== * Section C -- /search results page layout (m27.ctxsearch.7) * Page-LAYOUT-only rules. Sections A + B (the palette + shared result rows) * are UNCHANGED and reused verbatim by this page. No new global stylesheet * link is added -- base.html already links search.css (Prompt 6). * ========================================================================== */ .stronghold-search-page { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; } @media (max-width: 768px) { .stronghold-search-page { grid-template-columns: 1fr; } } /* -- Facet rail -- */ .stronghold-search-facets { display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(162, 162, 162, 0.20); border-radius: 0.5rem; } .stronghold-search-facet-section { display: flex; flex-direction: column; gap: 0.5rem; } .stronghold-search-facet-heading { margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #A2A2A2; } .stronghold-search-facet-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: #EAEAEA; cursor: pointer; } .stronghold-search-facet-option input[type="radio"], .stronghold-search-facet-option input[type="checkbox"] { accent-color: #CCFF00; flex-shrink: 0; } .stronghold-search-facet-subgroup { display: flex; flex-direction: column; gap: 0.375rem; margin-inline-start: 1.25rem; padding-inline-start: 0.5rem; border-inline-start: 1px solid rgba(162, 162, 162, 0.20); } .stronghold-search-facet-date { justify-content: space-between; } .stronghold-search-facet-empty { font-size: 0.75rem; color: #737373; } /* -- Results column -- */ .stronghold-search-results { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .stronghold-search-page-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #A2A2A2; } /* Shared page input style (query box + date facets). */ .stronghold-input { width: 100%; padding: 0.625rem 0.875rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(162, 162, 162, 0.20); border-radius: 0.375rem; color: #EAEAEA; font-size: 0.875rem; font-family: Inter, system-ui, sans-serif; outline: none; transition: border-color .15s ease; } .stronghold-input::placeholder { color: #737373; } .stronghold-input:focus { border-color: #CCFF00; box-shadow: 0 0 0 2px rgba(204, 255, 0, .25); } .stronghold-search-facet-date .stronghold-input { width: auto; flex: 1 1 auto; padding: 0.375rem 0.5rem; color-scheme: dark; } .stronghold-search-page-summary { font-size: 0.8125rem; color: #A2A2A2; min-height: 1rem; } .stronghold-search-page-summary:empty { display: none; } /* On the full page the result rows read as a stacked list with dividers. */ .stronghold-search-results #stronghold-search-page-list .stronghold-search-result-row, .stronghold-search-results #stronghold-search-page-jump .stronghold-search-result-row { padding-inline: 0.75rem; border-bottom: 1px solid rgba(162, 162, 162, 0.10); } /* -- Pagination -- */ .stronghold-search-page-pagination { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 0.25rem 0; font-size: 0.75rem; color: #A2A2A2; } .stronghold-search-page-pagination:empty { display: none; } .stronghold-search-pager-btn, .stronghold-search-clear-filters, .stronghold-search-retry { padding: 0.375rem 0.75rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(162, 162, 162, 0.20); border-radius: 0.375rem; color: #EAEAEA; font-size: 0.75rem; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .stronghold-search-pager-btn:hover, .stronghold-search-clear-filters:hover, .stronghold-search-retry:hover { border-color: #CCFF00; background: rgba(204, 255, 0, 0.08); } /* -- Empty / prompt / disabled / error states -- */ .stronghold-search-page-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; padding: 2rem 0.75rem; color: #A2A2A2; } .stronghold-search-page-empty[hidden] { display: none; } .stronghold-search-page-empty-title { font-size: 0.9375rem; color: #EAEAEA; } .stronghold-search-page-hint { font-size: 0.75rem; color: #737373; } .stronghold-search-page-range, .stronghold-search-page-indicator { color: #737373; }