| @@ -156,8 +156,26 @@ | ||
| 156 | 156 | @media (prefers-reduced-motion: reduce) { |
| 157 | 157 | #xspeed-app [class*="xspeed-anim"] { animation: none !important; } |
| 158 | 158 | } |
| 159 | 159 | |
| 160 | +/* ---- Loader bar + live dot (DESIGN.md ยง24.55) ----------------------------- */ | |
| 161 | +/* | |
| 162 | + * A thin indeterminate bar for a wait with no progress to report, and a | |
| 163 | + * pulsing dot beside a status line that keeps updating on its own. Both are | |
| 164 | + * CSS here rather than Tailwind utilities because they need a pseudo-element | |
| 165 | + * and keyframes. Tokens only: --line, --primary, --success, --radius-pill. | |
| 166 | + */ | |
| 167 | +@keyframes xspeed-blink { 50% { opacity: .25; } } | |
| 168 | +@keyframes xspeed-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } | |
| 169 | +#xspeed-app .xspeed-loader-bar { height: 3px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; position: relative; max-width: 320px; } | |
| 170 | +#xspeed-app .xspeed-loader-bar::after { content: ""; position: absolute; inset: 0; width: 35%; border-radius: var(--radius-pill); background: var(--primary); animation: xspeed-slide 1.6s ease-in-out infinite; } | |
| 171 | +#xspeed-app .xspeed-live-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); margin-top: 6px; animation: xspeed-blink 1.6s ease-in-out infinite; } | |
| 172 | +#xspeed-app .xspeed-live-dot.is-done { background: var(--success); animation: none; } | |
| 173 | +@media (prefers-reduced-motion: reduce) { | |
| 174 | + #xspeed-app .xspeed-live-dot, #xspeed-app .xspeed-loader-bar::after { animation: none; } | |
| 175 | + #xspeed-app .xspeed-loader-bar::after { width: 100%; opacity: .4; } | |
| 176 | +} | |
| 177 | + | |
| 160 | 178 | /* ---- MCP discovery card (Overview, disconnected) ----------------------- */ |
| 161 | 179 | /* |
| 162 | 180 | * Three tinted surfaces for the "Control and optimize your site with AI" card. |
| 163 | 181 | * They live here rather than in a component because Tailwind cannot express an |
