mathias/tapir
1
0
Fork 0
Code Issues 35 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): progress styles in tapir's own tokens -- a mono step log, a CSS spinner that respects reduced motion (ADR-035)

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
mathias
2026-10-02 09:00:23 +02:00
co-authored by Claude Sonnet 5.5
parent d0f2dcf838
commit d1dcb131f2
1 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/view.go
+24
View File
@@ -765,6 +765,30 @@ a.btn, a.btn:visited { color: var(--accent-fg); }
.flash-success { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }
.flash-error { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-line); }
/* upload progress (ADR-035): a log of phases that fills in as the job runs */
.steps { list-style: none; margin: var(--s3) 0; padding: 0; font-family: var(--mono); font-size: .86rem; }
.step { display: flex; align-items: baseline; gap: var(--s2); padding: .2rem 0; color: var(--muted); flex-wrap: wrap; }
.step-mark { flex: none; width: 1.1rem; text-align: center; }
.step-label { flex: 1 1 auto; }
.step-time { margin-left: auto; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.step-done { color: var(--fg); }
.step-done .step-mark { color: var(--mint); }
.step-running { color: var(--fg); font-weight: 600; }
.step-running .step-mark { color: var(--accent); }
.step-failed { color: var(--err-fg); }
.step-skipped, .step-pending { color: var(--muted); }
.step-skipped { opacity: .7; }
.step-pending { opacity: .75; }
.step-bar { flex: 1 0 100%; margin: 0 0 0 1.6rem; height: .5rem; accent-color: var(--accent); }
.step-count { flex: 1 0 100%; margin-left: 1.6rem; font-weight: 400; color: var(--muted); }
.spinner { display: inline-block; width: .8rem; height: .8rem; box-sizing: border-box; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: tapir-spin 1s linear infinite; }
@keyframes tapir-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-color: var(--accent); } }
.step-health { margin: var(--s2) 0; padding: var(--s2) var(--s3); border-radius: var(--radius); font-size: .9rem; border: 1px solid var(--line); }
.step-health-lost { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-line); }
.step-health-quiet { background: var(--accent-weak); color: var(--fg); border-color: var(--accent); }
.what-was-done summary { cursor: pointer; color: var(--muted); }
/* htmx loading feedback */
.htmx-indicator { opacity: 0; transition: opacity .2s; color: var(--muted); font-size: .8rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }