| @@ -78,8 +78,14 @@ | ||
| 78 | 78 | --danger-tint: #FDECEC; |
| 79 | 79 | --info: #2AA7A0; |
| 80 | 80 | --info-tint: #E6F5F3; |
| 81 | 81 | |
| 82 | + /* Add-on: something sold separately from Pro (DESIGN.md §24.50). Orange so | |
| 83 | + it never reads as Pro's teal or the warning amber. --addon is text: 5.6:1 | |
| 84 | + on --addon-tint, 6.4:1 on --paper. */ | |
| 85 | + --addon: #9A4A0B; | |
| 86 | + --addon-tint: #FEF1E6; | |
| 87 | + | |
| 82 | 88 | /* Deep-sea rail (deliberately not near-black, to separate from WP's menu) */ |
| 83 | 89 | --rail-top: #14211F; |
| 84 | 90 | --rail-bottom: #0D1615; |
| 85 | 91 | --rail-text: #9FADAB; |
| @@ -127,8 +133,10 @@ | ||
| 127 | 133 | --info-tint: #0E2622; |
| 128 | 134 | --success-tint: #12251F; |
| 129 | 135 | --warning-tint: #251C0F; |
| 130 | 136 | --danger-tint: #2A1516; |
| 137 | + --addon: #FDBA74; | |
| 138 | + --addon-tint: #2A1A0E; | |
| 131 | 139 | } |
| 132 | 140 | |
| 133 | 141 | /* ---- Signature motion (used by the shell + later screens) -------------- */ |
| 134 | 142 | @keyframes xspeed-boltpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } |
| @@ -146,8 +154,26 @@ | ||
| 146 | 154 | .xspeed-anim-pop { animation: xspeed-pop .2s ease-out both; } |
| 147 | 155 | |
| 148 | 156 | @media (prefers-reduced-motion: reduce) { |
| 149 | 157 | #xspeed-app [class*="xspeed-anim"] { animation: none !important; } |
| 158 | +} | |
| 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; } | |
| 150 | 176 | } |
| 151 | 177 | |
| 152 | 178 | /* ---- MCP discovery card (Overview, disconnected) ----------------------- */ |
| 153 | 179 | /* |
