diff --git a/services/web-ui/public/styles-rest.css b/services/web-ui/public/styles-rest.css index 45fa35d..f579e50 100644 --- a/services/web-ui/public/styles-rest.css +++ b/services/web-ui/public/styles-rest.css @@ -564,67 +564,6 @@ } /* ========== Admin tables ========== */ -/* ── Right-click context menu (Library, etc.) ─────────────────────── */ -.ctx-menu { - position: fixed; - z-index: 1000; - min-width: 200px; - max-width: 280px; - background: var(--bg-1); - border: 1px solid var(--border-stronger); - border-radius: 6px; - box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); - padding: 4px; - display: flex; - flex-direction: column; - user-select: none; -} -.ctx-menu .ctx-header { - padding: 6px 10px 4px; - font-size: 11px; - color: var(--text-3); - text-transform: uppercase; - letter-spacing: 0.06em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.ctx-menu .ctx-section-label { - padding: 6px 10px 2px; - font-size: 10.5px; - color: var(--text-4); - text-transform: uppercase; - letter-spacing: 0.06em; -} -.ctx-menu .ctx-divider { - height: 1px; - background: var(--border); - margin: 4px 0; -} -.ctx-menu .ctx-empty { - padding: 6px 10px; - font-size: 11.5px; - color: var(--text-3); - font-style: italic; -} -.ctx-menu button { - display: flex; - align-items: center; - gap: 8px; - background: transparent; - border: 0; - color: var(--text-1); - font-size: 12.5px; - padding: 7px 10px; - border-radius: 4px; - cursor: pointer; - text-align: left; -} -.ctx-menu button:hover:not(:disabled) { background: var(--bg-3); } -.ctx-menu button:disabled { opacity: 0.45; cursor: default; } -.ctx-menu button.danger { color: var(--danger); } -.ctx-menu button.danger:hover { background: var(--danger-soft); } - /* ── Row popover menu (Users, etc.) ────────────────────────────────── */ .row-menu { position: absolute; @@ -879,3 +818,101 @@ } .token-footnote svg { color: var(--warning); flex-shrink: 0; margin-top: 2px; } .token-footnote strong { color: var(--warning); } + +/* ========== Global Search ========== */ +.search-wrap { + position: relative; + flex-shrink: 0; +} +.search-wrap .search { + width: 280px; +} +.search-wrap .search.is-open { + border-color: var(--accent); + background: var(--bg-2); +} +.search-results { + position: absolute; + top: calc(100% + 6px); + right: 0; + width: 440px; + max-width: 90vw; + max-height: 460px; + overflow-y: auto; + background: var(--bg-1); + border: 1px solid var(--border-stronger); + border-radius: var(--r-md); + box-shadow: var(--shadow-pop); + padding: 4px; + z-index: 60; +} +.search-empty { + padding: 18px 12px; + text-align: center; + font-size: 12px; + color: var(--text-3); +} +.search-result { + display: grid; + grid-template-columns: 24px 1fr auto; + align-items: center; + gap: 10px; + padding: 8px 10px; + border-radius: var(--r-sm); + cursor: pointer; + color: var(--text-1); +} +.search-result.active { + background: var(--accent-soft); +} +.search-result-icon { + width: 24px; height: 24px; + border-radius: 5px; + background: var(--bg-3); + color: var(--text-2); + display: grid; place-items: center; + flex-shrink: 0; +} +.search-result.active .search-result-icon { + background: var(--accent-soft-2); + color: var(--accent-text); +} +.search-result-text { + min-width: 0; + display: flex; + flex-direction: column; + gap: 1px; +} +.search-result-label { + font-size: 12.5px; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.search-result-sub { + font-size: 11px; + color: var(--text-3); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.search-result-kind { + font-family: var(--font-mono); + font-size: 9.5px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-4); + background: var(--bg-2); + border: 1px solid var(--border); + padding: 2px 6px; + border-radius: 99px; + flex-shrink: 0; +} +.search-result-kind.kind-asset { color: #B4C3FF; border-color: rgba(91,124,250,0.25); } +.search-result-kind.kind-project { color: #FFD89B; border-color: rgba(245,166,35,0.25); } +.search-result-kind.kind-recorder { color: #FFAFAF; border-color: rgba(255,91,91,0.25); } +.search-result-kind.kind-job { color: #9EE7D2; border-color: rgba(45,212,168,0.25); } +.search-result-kind.kind-user { color: #D5B8FF; border-color: rgba(181,124,250,0.25); } +.search-result-kind.kind-nav { color: var(--text-2); }