diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index 2c7872b4..2bf741e9 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -326,15 +326,17 @@ a:hover { border-color: var(--amber); background: rgba(250, 179, 135, 0.05); } -/* The spinner is a faint amber ring with one brighter arc on top - that rotates around the icon — classic CSS spinner shape. The - previous version coloured two adjacent border sides amber, which - rendered as a rotating L-corner ("_|") rather than a smooth - orbiting arc (mara on #804). Faint-ring + bright-arc reads - unambiguously as a loading spinner. +/* The spinner is a single rotating arc — a transparent ring with + only the top side coloured amber. As it rotates, the visible arc + sweeps around the icon like a classic loading indicator. Earlier + shapes (two-adjacent-sides → L-corner; faint-ring + bright-arc → + reads as a static border) didn't read unambiguously as a spinner + — this one has no full ring, only the moving arc. - Override the icon's overflow:hidden so the ring can sit just - outside the square; it composes naturally with the mauve + The 3px stroke + thicker rounded radius gives the arc enough + visual weight that it doesn't disappear at typical viewport + sizes. Override the icon's overflow:hidden so the ring can sit + just outside the square; it composes naturally with the mauve selected-ring (selected + running shows both). */ @keyframes container-icon-spin { from { transform: rotate(0deg); } @@ -346,11 +348,11 @@ a:hover { .container-row.pending-running > .container-icon::after { content: ''; position: absolute; - inset: -4px; - border-radius: 10px; - border: 2px solid rgba(250, 179, 135, 0.2); + inset: -5px; + border-radius: 11px; + border: 3px solid transparent; border-top-color: var(--amber); - animation: container-icon-spin 1s linear infinite; + animation: container-icon-spin 0.9s linear infinite; pointer-events: none; } .container-row .head {