fix: add visual selected state for active key in key tree

The active/selected classes were already applied via :class binding
but had no CSS styles defined. Add:
- .active: indigo background tint + 3px left accent border (box-shadow
  inset to avoid layout shift) + bold accent-colored key name
- .selected: subtle indigo background for multi-select checked items
This commit is contained in:
2026-07-12 10:46:34 +08:00
parent 8340630dd4
commit e39ec7afce
@@ -792,6 +792,31 @@ onUnmounted(() => {
color: var(--text-primary);
}
/* Selected key (value shown in detail panel) */
.leaf-item.active {
background: var(--bg-card-active);
box-shadow: inset 3px 0 0 var(--accent);
color: var(--accent-light);
}
.leaf-item.active .tree-name {
color: var(--accent-light);
font-weight: 600;
}
.leaf-item.active:hover {
background: var(--bg-card-active);
}
/* Multi-select checked */
.leaf-item.selected {
background: rgba(99, 102, 241, 0.06);
}
.leaf-item.selected:hover {
background: rgba(99, 102, 241, 0.1);
}
.folder-item {
font-weight: 600;
color: var(--text-primary);