Improve umbrella graph visualization
plugin-tests / test (push) Failing after 5s

This commit is contained in:
Svrnty
2026-05-26 06:15:27 -04:00
parent 4b1f2075ae
commit 28ffa92f6f
4 changed files with 598 additions and 20 deletions
+54 -1
View File
@@ -45,10 +45,21 @@
padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.umbrella-controls button:hover { border-color: var(--accent); color: var(--accent); }
.umbrella-controls button.active {
border-color: var(--accent-2);
color: var(--accent-2);
background: rgba(251,191,36,0.08);
}
.umbrella-filters {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; gap: 6px;
}
.umbrella-disclosure {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip {
background: var(--bg); color: var(--fg-dim);
border: 1px solid #2a2f3a; border-radius: 999px;
@@ -56,9 +67,51 @@
font-family: var(--mono);
}
.chip.active { color: var(--accent); border-color: var(--accent); background: rgba(110,231,183,0.08); }
.chip.disclosure-chip { border-style: dashed; }
.chip.disclosure-chip.active { border-style: solid; }
.umbrella-canvas { position: relative; display: grid; grid-template-columns: 1fr; }
.umbrella-canvas { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; }
.umbrella-cy { position: absolute; inset: 0; }
.umbrella-layer-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.umbrella-cy { z-index: 2; }
.layer-band {
position: absolute;
border: 1px solid rgba(231,234,240,0.10);
border-radius: 8px;
background: rgba(21,24,31,0.42);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.layer-band.collapsed {
opacity: 0.76;
}
.layer-band-label {
position: absolute;
left: 12px;
top: 8px;
display: flex;
gap: 8px;
align-items: baseline;
font-family: var(--mono);
color: var(--fg);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
background: rgba(15,17,21,0.72);
border-radius: 4px;
padding: 2px 6px;
}
.layer-band-label .count {
color: var(--fg-dim);
font-size: 10px;
}
.layer-band.collapsed .layer-band-label .count {
color: var(--accent-2);
}
.umbrella-side {
position: absolute; top: 0; right: 0; bottom: 0;
width: 420px; background: var(--bg-2);