WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

feat(web-ui): style the asset right-click menu (.ctx-menu)

Browse source 
The AssetContextMenu in screens-library.jsx has shipped without
matching styles, so the menu rendered as raw HTML on the page. Adds
.ctx-menu / .ctx-header / .ctx-divider / .ctx-section-label / .ctx-empty
plus button + danger styles matching the existing .row-menu look.
This commit is contained in:
Zac Gaetano 2026-05-23 00:04:25 -04:00
parent f186cdeacd
commit f474a77bcb
1 changed files with 72 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
services/web-ui/public/styles-rest.css
View file

@ -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);
}