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);
|
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 {
|
.folder-item {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
|
|||||||
Reference in New Issue
Block a user