Tree styling update
More dense display
This commit is contained in:
+16
-5
@@ -27,6 +27,9 @@
|
|||||||
|
|
||||||
--border: 1px solid var(--secondary);
|
--border: 1px solid var(--secondary);
|
||||||
--border-dashed: 1px dashed var(--secondary);
|
--border-dashed: 1px dashed var(--secondary);
|
||||||
|
/* Subtle vertical rail for tree-nesting depth — quieter than --border so
|
||||||
|
it reads as a guide, not a divider. */
|
||||||
|
--border-guide: 1px solid var(--bg-panel-hover);
|
||||||
|
|
||||||
--space-1: 0.25rem;
|
--space-1: 0.25rem;
|
||||||
--space-2: 0.5rem;
|
--space-2: 0.5rem;
|
||||||
@@ -593,14 +596,16 @@ aside.sidebar:empty { display: none; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* === Tree picker === */
|
/* === Tree picker === */
|
||||||
.tree-picker { max-height: 60vh; overflow-y: auto; }
|
/* Rows are click targets (navigate / toggle), not prose — suppress the
|
||||||
|
text-selection highlight that double/drag clicks would otherwise leave,
|
||||||
|
matching the persistent .tree-sidebar rail. */
|
||||||
|
.tree-picker { max-height: 60vh; overflow-y: auto; user-select: none; }
|
||||||
.tree-row {
|
.tree-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-2);
|
gap: var(--space-1);
|
||||||
padding: 0.4rem var(--space-2);
|
padding: 0.25rem var(--space-1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
min-height: 2rem;
|
|
||||||
}
|
}
|
||||||
.tree-row:hover, .tree-row.is-selected { background: var(--bg-panel-hover); }
|
.tree-row:hover, .tree-row.is-selected { background: var(--bg-panel-hover); }
|
||||||
.tree-row.is-selected {
|
.tree-row.is-selected {
|
||||||
@@ -613,7 +618,13 @@ aside.sidebar:empty { display: none; }
|
|||||||
.tree-chevron { width: 1.25rem; color: var(--secondary); }
|
.tree-chevron { width: 1.25rem; color: var(--secondary); }
|
||||||
.tree-chevron.is-leaf { visibility: hidden; }
|
.tree-chevron.is-leaf { visibility: hidden; }
|
||||||
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
.tree-children { padding-left: var(--space-2); }
|
/* Each nesting level gets a vertical guide rail down its left edge so depth
|
||||||
|
stays scannable in the compact view (cf. VS Code / file-explorer trees). */
|
||||||
|
.tree-children {
|
||||||
|
margin-left: var(--space-2);
|
||||||
|
padding-left: var(--space-2);
|
||||||
|
border-left: var(--border-guide);
|
||||||
|
}
|
||||||
.tree-selected-path {
|
.tree-selected-path {
|
||||||
font-size: var(--font-sm);
|
font-size: var(--font-sm);
|
||||||
padding: var(--space-1) 0;
|
padding: var(--space-1) 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user