frontend: move shared spinner CSS out of dashboard.css into shared/base.css

asyncBtn() (shared/src/forms.js) is used by both the dashboard and the
per-agent UI, but its .spinner class + @keyframes spin animation only
lived in dashboard.css. The agent UI's loading spinner rendered as a
static unstyled glyph instead of the animated amber spinner the
dashboard gets. Moved the rule to shared/base.css, which both
common.css (dashboard) and agent.css already @import.
This commit is contained in:
iris 2026-07-27 18:32:54 +02:00
commit a1263a9ed6
2 changed files with 13 additions and 6 deletions

View file

@ -650,12 +650,6 @@ ul form.inline { display: inline-block; }
text-transform: uppercase;
}
.kind-spawn { color: var(--amber); border-color: var(--amber); }
.spinner {
display: inline-block;
animation: spin 1s linear infinite;
color: var(--amber);
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
details { margin-top: 0.5em; }
summary {
cursor: pointer;

View file

@ -11,3 +11,16 @@ body {
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
line-height: 1.6;
}
/* Loading spinner used by the shared `asyncBtn()` helper (forms.js)
swapped into a button's content while its async action is in flight.
Lives here (not in a per-page stylesheet) because asyncBtn itself is
shared between the dashboard and the per-agent UI; keeping the CSS
with the JS component it styles avoids one consumer rendering an
unstyled, unanimated glyph. */
.spinner {
display: inline-block;
animation: spin 1s linear infinite;
color: var(--amber);
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }