Spaces:
Running
Running
Claude
Claude Sonnet 5.5
feat(ui): gold for the dashboard start button and strong-match highlights
ecf7f15 unverified | .root { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .track { | |
| flex: 1; | |
| height: 8px; | |
| background: var(--surface-muted, #f0f0f0); | |
| border-radius: var(--radius-sm, 6px); | |
| overflow: hidden; | |
| box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent); | |
| } | |
| .fill { | |
| position: relative; | |
| height: 100%; | |
| border-radius: var(--radius-sm, 6px); | |
| transform-origin: left center; | |
| overflow: hidden; | |
| transition: width 0.5s var(--ease-out, ease); | |
| } | |
| .fill::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.38), | |
| transparent | |
| ); | |
| transform: translateX(-120%); | |
| pointer-events: none; | |
| } | |
| .fillSuccess { | |
| background: linear-gradient( | |
| 90deg, | |
| color-mix(in srgb, var(--success) 85%, #000), | |
| var(--success) | |
| ); | |
| } | |
| /* High scores catch a gold sheen instead of white — same sweep, warmer light. */ | |
| .fillSuccess::after { | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| color-mix(in srgb, var(--studio-accent-warm, #e2b36a) 70%, #fff), | |
| transparent | |
| ); | |
| } | |
| .fillWarning { | |
| background: linear-gradient( | |
| 90deg, | |
| color-mix(in srgb, var(--warning) 85%, #000), | |
| var(--warning) | |
| ); | |
| } | |
| .fillDanger { | |
| background: linear-gradient( | |
| 90deg, | |
| color-mix(in srgb, var(--danger) 85%, #000), | |
| var(--danger) | |
| ); | |
| } | |
| .scoreValue { | |
| font-size: 13px; | |
| font-weight: 650; | |
| min-width: 3.2ch; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| font-family: var(--font-mono); | |
| letter-spacing: -0.03em; | |
| } | |
| .scoreSuccess { | |
| color: var(--success, #1d9e75); | |
| } | |
| .scoreWarning { | |
| color: var(--warning, #ba7517); | |
| } | |
| .scoreDanger { | |
| color: var(--danger, #e24b4a); | |
| } | |
| .reason { | |
| margin: 0; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| color: var(--muted); | |
| } | |
| .notes { | |
| margin: 0; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| color: var(--text); | |
| } | |
| .evidenceToggle { | |
| align-self: flex-start; | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| background: none; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--accent, var(--muted)); | |
| cursor: pointer; | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| } | |
| .evidenceList { | |
| margin: 0; | |
| padding: 0 0 0 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .evidencePositive, | |
| .evidenceNegative { | |
| font-size: 12px; | |
| line-height: 1.4; | |
| color: var(--text); | |
| font-style: italic; | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .fill { | |
| animation: scoreGrow 0.7s var(--ease-out, ease) both; | |
| } | |
| .fill::after { | |
| animation: scoreSheen 0.85s var(--ease-out, ease) 0.35s both; | |
| } | |
| } | |
| @keyframes scoreGrow { | |
| from { | |
| transform: scaleX(0.08); | |
| } | |
| to { | |
| transform: scaleX(1); | |
| } | |
| } | |
| @keyframes scoreSheen { | |
| to { | |
| transform: translateX(130%); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .fill, | |
| .fill::after { | |
| animation: none; | |
| } | |
| } | |
| .evidencePositive::marker { | |
| color: var(--success); | |
| } | |
| .evidenceNegative::marker { | |
| color: var(--danger); | |
| } | |