Spaces:
Running
Running
Claude
Claude Sonnet 5.5
feat(ui): extend the gold accent to keep/commit/buy actions
b6b62a2 unverified | .wrap { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-top: 2px; | |
| margin-bottom: 16px; | |
| } | |
| .wrap.compact { | |
| gap: 8px; | |
| margin-top: 0; | |
| } | |
| .balanceRow { | |
| font-size: 13px; | |
| color: var(--muted, #666); | |
| line-height: 1.4; | |
| } | |
| .balanceRow strong { | |
| color: var(--foreground, #eaeaea); | |
| font-weight: 600; | |
| } | |
| .packRow { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: stretch; | |
| gap: 8px; | |
| } | |
| .label { | |
| flex: 1 0 100%; | |
| font-size: 12px; | |
| color: var(--muted, #888); | |
| } | |
| .packBtn { | |
| appearance: none; | |
| font: inherit; | |
| font-size: 12px; | |
| font-weight: 500; | |
| line-height: 1.2; | |
| padding: 6px 12px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12)); | |
| background: transparent; | |
| color: var(--foreground, #e8e8ea); | |
| display: inline-flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 2px; | |
| transition: | |
| background 0.15s ease, | |
| border-color 0.15s ease, | |
| box-shadow 0.15s ease; | |
| } | |
| .packHint { | |
| font-size: 10px; | |
| font-weight: 400; | |
| color: var(--muted, #888); | |
| } | |
| .passBtn { | |
| border-color: rgba(255, 255, 255, 0.22); | |
| background: var(--surface-muted, rgba(255, 255, 255, 0.05)); | |
| } | |
| .packBtn:hover:not(:disabled) { | |
| background: var(--color-accent-warm-light, rgba(226, 179, 106, 0.14)); | |
| border-color: var(--color-accent-warm-border, rgba(226, 179, 106, 0.35)); | |
| box-shadow: 0 0 0 1px rgba(226, 179, 106, 0.12); | |
| } | |
| .packBtn:hover:not(:disabled) .packHint { | |
| color: var(--color-accent-warm, #e2b36a); | |
| } | |
| .packBtn:focus-visible { | |
| outline: 2px solid var(--color-accent-warm, #e2b36a); | |
| outline-offset: 2px; | |
| } | |
| .packBtn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* Slightly stronger affordance when shown next to an credit error */ | |
| .emphasize .packBtn { | |
| border-color: rgba(255, 255, 255, 0.2); | |
| background: var(--surface-muted, rgba(255, 255, 255, 0.04)); | |
| } | |
| .emphasize .packBtn:hover:not(:disabled) { | |
| background: color-mix(in srgb, var(--color-accent-warm, #e2b36a) 20%, var(--surface-card, #0f191c)); | |
| border-color: color-mix(in srgb, var(--color-accent-warm, #e2b36a) 60%, transparent); | |
| } | |