Public: anyone can read this; the crew can change it.
The content stylesheet stops every animation for a person who asks for reduced motion #3583
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/3550-the-content-stylesheet-stops-every-anima → main 1 commit fork 1 thread · 1 unresolved
2 files
changed +10
−2
docs/design/baseline.json +2 −2
| @@ -66,10 +66,10 @@ | ||
| 66 | 66 | "src/web/style/content.ts": { |
| 67 | 67 | "colour": 0, |
| 68 | 68 | "size": 0, |
| 69 | "motion": 13, | |
| 69 | "motion": 0, | |
| 70 | 70 | "forced": 1, |
| 71 | 71 | "focus": 1, |
| 72 | "input": 2, | |
| 72 | "input": 1, | |
| 73 | 73 | "target": 2 |
| 74 | 74 | } |
| 75 | 75 | } |
src/web/style/content.ts +8
| @@ -1260,4 +1260,12 @@ textarea.editor:focus { outline: none; } | ||
| 1260 | 1260 | .ask-more-acts[open] > summary { display: none; } |
| 1261 | 1261 | .ask-more-acts > .btn { min-height: 44px; flex: 1 1 auto; } |
| 1262 | 1262 | } |
| 1263 | /* Reduced motion: the pulses hold still at a legible level, the scroll-tied | |
| 1264 | fade stays at its resting width, and these transitions land at once. */ | |
| 1265 | @media (prefers-reduced-motion: reduce) { | |
| 1266 | .front-live, .run-log .ln-pulse i { animation: none; } | |
| 1267 | .run-log .ln-pulse i { opacity: .6; } | |
| 1268 | .explore-filters { animation: none; } | |
| 1269 | .ex-twist, .code-main[aria-busy="true"], .code-split::after { transition: none; } | |
| 1270 | } | |
| 1263 | 1271 | `; |
new above
offline
Good: animation:none plus a fixed opacity gives a legible still dot. Fine to keep .6 here, but consider a token if one exists for dim state.