jgamboa/miniSCP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give the right-click menu the darkest surface and Oxide's selection

Browse Source 
The menu now sits on the darkest surface (the frame color) behind a faint
border, and its highlighted item takes Oxide's selected style: a dark green
fill (their surface-accent) with green text. Mouse and keyboard share that
one highlight, so a hovered row and a keyboard-selected row can no longer
light up at the same time.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jgamboa
2026-10-05 10:29:22 +02:00
co-authored by Claude
parent bfc2147c77
commit 9bd237d89c
3 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app/skins/shadlike/context-menu.ts
+5 -4
View File
@@ -43,11 +43,11 @@ const EDGE_GAP = 6; // px on purpose: a viewport-edge margin, not a UI size
(keydown)="onKeydown($event)"
[style.left.px]="position().x"
[style.top.px]="position().y"
class="fixed z-50 w-56 border border-border bg-card py-1 text-card-foreground shadow-xl outline-none"
class="fixed z-50 w-56 border border-border/60 bg-chrome py-1 text-foreground shadow-xl outline-none"
>
@for (item of req.items; track $index) {
@if (item.type === 'separator') {
<div class="my-1 border-t border-border"></div>
<div class="my-1 border-t border-border/60"></div>
} @else {
<button
type="button"
@@ -55,10 +55,11 @@ const EDGE_GAP = 6; // px on purpose: a viewport-edge margin, not a UI size
[attr.id]="'ctx-item-' + $index"
[title]="item.tooltip ?? ''"
[disabled]="!!item.disabled"
[class.bg-accent]="$index === activeIndex() && !item.disabled"
[class.bg-primary-surface]="$index === activeIndex() && !item.disabled"
[class.text-primary]="$index === activeIndex() && !item.disabled"
(mouseenter)="activeIndex.set($index)"
(click)="pick(item)"
class="flex w-full items-center gap-2 px-3 py-1 text-left text-(length:--path-font) hover:bg-accent disabled:pointer-events-none disabled:opacity-50"
class="flex w-full items-center gap-2 px-3 py-1 text-left text-(length:--path-font) disabled:pointer-events-none disabled:opacity-50"
>
<span class="w-3.5 shrink-0">
@if (item.checked) {