diff --git a/services/web-ui/public/styles-rest.css b/services/web-ui/public/styles-rest.css index f579e50..59b6411 100644 --- a/services/web-ui/public/styles-rest.css +++ b/services/web-ui/public/styles-rest.css @@ -916,3 +916,75 @@ .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); } + +/* ========== Asset right-click menu ========== */ +.ctx-menu { + position: fixed; + z-index: 80; + min-width: 220px; + max-width: 280px; + background: var(--bg-1); + border: 1px solid var(--border-stronger); + border-radius: var(--r-md); + box-shadow: var(--shadow-pop); + padding: 4px; + display: flex; + flex-direction: column; + font-size: 12.5px; +} +.ctx-menu .ctx-header { + padding: 8px 10px 6px; + font-size: 11px; + font-weight: 600; + color: var(--text-3); + border-bottom: 1px solid var(--border); + margin-bottom: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.ctx-menu .ctx-divider { + height: 1px; + background: var(--border); + margin: 4px 2px; +} +.ctx-menu .ctx-section-label { + font-size: 9.5px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-4); + padding: 6px 10px 4px; +} +.ctx-menu .ctx-empty { + padding: 6px 10px 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; + width: 100%; +} +.ctx-menu button svg { color: var(--text-3); flex-shrink: 0; } +.ctx-menu button:hover:not(:disabled) { background: var(--bg-3); } +.ctx-menu button:hover:not(:disabled) svg { color: var(--text-1); } +.ctx-menu button:disabled { + opacity: 0.5; + cursor: default; +} +.ctx-menu button.danger { color: var(--danger); } +.ctx-menu button.danger svg { color: var(--danger); } +.ctx-menu button.danger:hover:not(:disabled) { + background: var(--danger-soft); +}