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.
This commit is contained in:
parent
a8a2061eec
commit
d07fb13401
1 changed files with 164 additions and 0 deletions
|
|
@ -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); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue