From d07fb134012ed77e33090ad582aa1f3682012e03 Mon Sep 17 00:00:00 2001 From: ZGaetano Date: Sat, 23 May 2026 09:53:17 -0400 Subject: [PATCH] ui: search + right-click menu polish so they read as real controls - Topbar search now sits on bg-2 with a stronger border, subtle inset highlight, and a hover state. Search icon and kbd hint get more contrast. Focus state lifts the field with a soft accent ring. - Search results dropdown gets a slightly inset header look so the list reads as connected to the field. - Right-click context menu (ctx-menu) gets a stronger background, a tighter section header, separator color tuning, and a soft outline so it feels like a popover instead of floating text. --- services/web-ui/public/styles-fixes.css | 164 ++++++++++++++++++++++++ 1 file changed, 164 insertions(+) diff --git a/services/web-ui/public/styles-fixes.css b/services/web-ui/public/styles-fixes.css index 051c3ff..1a39d65 100644 --- a/services/web-ui/public/styles-fixes.css +++ b/services/web-ui/public/styles-fixes.css @@ -69,3 +69,167 @@ .stat-card .label, .stat-card .value, .stat-card .delta { position: relative; z-index: 1; } .stat-card .spark { z-index: 0; } + +/* ============================================================ + Search bar polish — give it a real container so it doesn't + read as floating text on the topbar background. + ============================================================ */ +.topbar .search, +.search-wrap .search { + background: var(--bg-2); + border: 1px solid var(--border-strong); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.03), + 0 1px 0 rgba(0, 0, 0, 0.25); + color: var(--text-1); + transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; +} +.topbar .search:hover, +.search-wrap .search:hover { + background: var(--bg-3); + border-color: var(--border-stronger); +} +.topbar .search:focus-within, +.search-wrap .search:focus-within, +.topbar .search.is-open, +.search-wrap .search.is-open { + background: var(--bg-2); + border-color: var(--accent); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.04), + 0 0 0 3px var(--accent-soft); +} +.topbar .search input::placeholder, +.search-wrap .search input::placeholder { + color: var(--text-3); +} +.topbar .search .search-icon, +.search-wrap .search .search-icon { + color: var(--text-2); +} +.topbar .search:focus-within .search-icon, +.search-wrap .search:focus-within .search-icon { + color: var(--accent-text); +} +.topbar .search .kbd, +.search-wrap .search .kbd { + background: var(--bg-1); + border-color: var(--border-stronger); + color: var(--text-2); +} + +/* Library-local "Filter assets" search — same container treatment, + keep its compact width. */ +.library-toolbar .search { + background: var(--bg-2); + border: 1px solid var(--border-strong); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.03), + 0 1px 0 rgba(0, 0, 0, 0.25); +} +.library-toolbar .search:hover { background: var(--bg-3); border-color: var(--border-stronger); } +.library-toolbar .search:focus-within { + border-color: var(--accent); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.04), + 0 0 0 3px var(--accent-soft); +} + +/* Open-state dropdown: visually connect it to the input. */ +.search-wrap .search.is-open { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.search-results { + background: var(--bg-2); + border-color: var(--border-stronger); + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -1px; + padding: 6px; +} +.search-result { + padding: 8px 10px; +} +.search-result + .search-result { margin-top: 1px; } +.search-result:hover { background: var(--hover-strong); } +.search-result.active { + background: var(--accent-soft); + outline: 1px solid var(--accent-soft-2); + outline-offset: -1px; +} + +/* ============================================================ + Right-click context menu — pop it forward off the page so it + reads as a menu, not a floating list. + ============================================================ */ +.ctx-menu { + background: var(--bg-2); + border: 1px solid var(--border-stronger); + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.04) inset, + 0 18px 40px rgba(0, 0, 0, 0.55), + 0 4px 10px rgba(0, 0, 0, 0.35); + padding: 6px; + min-width: 240px; + animation: ctxFadeIn 90ms ease-out both; +} +@keyframes ctxFadeIn { + from { opacity: 0; transform: translateY(-2px) scale(0.985); } + to { opacity: 1; transform: translateY(0) scale(1); } +} +.ctx-menu .ctx-header { + padding: 8px 10px 8px; + font-size: 10.5px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-3); + border-bottom: 1px solid var(--border); + margin: 0 -2px 6px; +} +.ctx-menu .ctx-divider { + background: var(--border-strong); + margin: 6px 2px; +} +.ctx-menu .ctx-section-label { + font-size: 9.5px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.09em; + color: var(--text-4); + padding: 8px 10px 4px; +} +.ctx-menu button { + padding: 7px 10px; + border-radius: 5px; + gap: 10px; + color: var(--text-1); +} +.ctx-menu button + button { margin-top: 1px; } +.ctx-menu button:hover:not(:disabled) { + background: var(--accent-soft); + color: var(--accent-text); +} +.ctx-menu button:hover:not(:disabled) svg { color: var(--accent); } +.ctx-menu button:disabled { color: var(--text-3); } +.ctx-menu button:disabled svg { color: var(--text-4); } +.ctx-menu button.danger:hover:not(:disabled) { + background: var(--danger-soft); + color: var(--danger); +} +.ctx-menu button.danger:hover:not(:disabled) svg { color: var(--danger); } + +/* Row-popover menu (Users page etc.) — match the same polish so the + app feels consistent. */ +.row-menu { + background: var(--bg-2); + border: 1px solid var(--border-stronger); + box-shadow: + 0 1px 0 rgba(255, 255, 255, 0.04) inset, + 0 14px 32px rgba(0, 0, 0, 0.5); + padding: 6px; +} +.row-menu button { padding: 7px 10px; border-radius: 5px; } +.row-menu button:hover { background: var(--accent-soft); color: var(--accent-text); } +.row-menu button.danger:hover { background: var(--danger-soft); color: var(--danger); }