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:
parent
043a294876
commit
a1263a9ed6
2 changed files with 13 additions and 6 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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); } }
|
||||
|
|
|
|||
Loading…
Reference in a new issue