Spaces:
Running
Running
Cursor Agent
Zimuzo Ejinkeonye
feat: add premium loading motion across scorer and agent
97f9abe unverified | .bar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 40; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| height: 44px; | |
| padding: 0 14px; | |
| border-bottom: 1px solid var(--surface-glass-border, var(--border-subtle)); | |
| background: var(--surface-glass, var(--surface-card)); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| } | |
| .barLive::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| height: 2px; | |
| width: 28%; | |
| pointer-events: none; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| var(--accent), | |
| var(--studio-accent-warm), | |
| transparent | |
| ); | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .barLive::after { | |
| animation: chromeLiveSweep 1.8s ease-in-out infinite; | |
| } | |
| } | |
| @keyframes chromeLiveSweep { | |
| 0% { | |
| transform: translateX(-130%); | |
| } | |
| 100% { | |
| transform: translateX(430%); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .barLive::after { | |
| animation: none; | |
| opacity: 0.7; | |
| } | |
| } | |
| .brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| text-decoration: none; | |
| color: var(--text-display); | |
| font-family: var(--font-display); | |
| font-size: 14px; | |
| font-weight: 550; | |
| letter-spacing: -0.03em; | |
| flex-shrink: 0; | |
| } | |
| .brand img { | |
| display: block; | |
| border-radius: var(--radius-xs, 4px); | |
| transition: filter var(--motion-sm) var(--ease-out); | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .brand:hover img { | |
| filter: drop-shadow(0 0 8px rgba(61, 190, 176, 0.45)); | |
| } | |
| } | |
| .nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 2px; | |
| min-width: 0; | |
| flex: 1; | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .nav::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .link { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 28px; | |
| padding: 0 10px; | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--muted); | |
| text-decoration: none; | |
| white-space: nowrap; | |
| transition: | |
| color var(--motion-xxs) var(--ease-soft), | |
| background var(--motion-xxs) var(--ease-soft); | |
| } | |
| .link:hover { | |
| color: var(--text); | |
| background: color-mix(in srgb, var(--accent) 8%, var(--surface-muted)); | |
| text-decoration: none; | |
| } | |
| .linkCurrent { | |
| color: var(--text-display); | |
| font-weight: 650; | |
| background: color-mix(in srgb, var(--accent) 12%, var(--surface-muted)); | |
| box-shadow: inset 0 -2px 0 var(--accent); | |
| } | |
| .end { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-shrink: 0; | |
| margin-left: auto; | |
| } | |
| .status { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| min-width: 0; | |
| max-width: min(42vw, 280px); | |
| font-size: 12px; | |
| color: var(--muted); | |
| line-height: 1.2; | |
| } | |
| .statusLabel { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .statusDot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| flex-shrink: 0; | |
| } | |
| .statusDotPulse { | |
| animation: chromeDotPulse 1.2s ease-in-out infinite; | |
| } | |
| @keyframes chromeDotPulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.45; | |
| transform: scale(0.85); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .statusDotPulse { | |
| animation: none; | |
| } | |
| } | |
| .statusActions { | |
| display: inline-flex; | |
| gap: 4px; | |
| } | |
| .statusBtn { | |
| font-size: 11px; | |
| font-weight: 600; | |
| padding: 0 10px; | |
| min-height: 28px; | |
| height: 28px; | |
| border-radius: 6px; | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--link); | |
| } | |
| .menuIcon { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| @media (max-width: 640px) { | |
| .statusLabel { | |
| display: none; | |
| } | |
| .brand span { | |
| display: none; | |
| } | |
| } | |