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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user