Miguel Palhas
e8e98baf4d
Ports catalog.ts's tree renderer to components under src/components/sidebar/, following docs/SIDEBAR.md: two-line cards behind a 5px activity rail, adaptive meta line (duration, detail, program, diff stat), collapsible folders, j/k walk, inline rename and a right-click menu. The nav walk reads a pure model (model.ts) rather than the DOM, so the rule that an expanded folder header is skipped and a collapsed one is not is testable without a render. Rail motion needs @keyframes, so it stays in sidebar.css rather than the Tailwind config. Closes #244
50 lines
825 B
CSS
50 lines
825 B
CSS
/* Motion for the activity rail (docs/SIDEBAR.md): a hard blink while
|
|
AwaitingInput, a fast flash while Error. Active and Idle are solid and
|
|
still — colour alone is the signal. Kept as real CSS rather than Tailwind
|
|
utilities because both need @keyframes of their own. */
|
|
|
|
@keyframes maestro-rail-blink {
|
|
0%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
50.01%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes maestro-rail-flash {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
15% {
|
|
opacity: 0.25;
|
|
}
|
|
30% {
|
|
opacity: 1;
|
|
}
|
|
45% {
|
|
opacity: 0.25;
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rail-blink {
|
|
animation: maestro-rail-blink 1.2s steps(1) infinite;
|
|
}
|
|
|
|
.rail-flash {
|
|
animation: maestro-rail-flash 1.4s ease-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rail-blink,
|
|
.rail-flash {
|
|
animation: none;
|
|
}
|
|
}
|