Spaces:
Sleeping
Sleeping
Download src/components/RunForm.css from lewtun/running-dashboard: direct link, hf CLI and curl.
- Browser
- Download file 3.31 kB
-
https://huggingface.co/spaces/lewtun/running-dashboard/resolve/main/src/components/RunForm.css
- Command line
-
hf download hf://spaces/lewtun/running-dashboard/src/components/RunForm.css
-
curl -L -o RunForm.css https://huggingface.co/spaces/lewtun/running-dashboard/resolve/main/src/components/RunForm.css
3.31 kB
| .run-form h2 { | |
| margin: 0 0 1rem; | |
| font-size: 1.25rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.25rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--color-text-muted); | |
| } | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.5rem 0.75rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| font-size: 0.875rem; | |
| font-family: inherit; | |
| background: var(--color-card); | |
| color: var(--color-text); | |
| box-sizing: border-box; | |
| resize: vertical; | |
| } | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--color-primary); | |
| box-shadow: 0 0 0 4px var(--color-focus-ring); | |
| } | |
| .form-group input[type="date"], | |
| .form-group input[type="number"] { | |
| width: 100%; | |
| padding: 0.5rem 0.75rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| font-size: 1rem; | |
| background: var(--color-card); | |
| color: var(--color-text); | |
| box-sizing: border-box; | |
| } | |
| .form-group input:focus { | |
| outline: none; | |
| border-color: var(--color-primary); | |
| box-shadow: 0 0 0 4px var(--color-focus-ring); | |
| } | |
| .form-group input[type="range"] { | |
| width: 100%; | |
| accent-color: var(--color-primary); | |
| } | |
| .rpe-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.75rem; | |
| color: var(--color-text-muted); | |
| } | |
| .rpe-description { | |
| margin-top: 0.5rem; | |
| padding: 0.5rem 0.75rem; | |
| background: var(--color-bg-soft); | |
| border-radius: var(--radius); | |
| text-align: center; | |
| min-height: 2.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.125rem; | |
| } | |
| .rpe-effort { | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| color: var(--color-primary); | |
| } | |
| .rpe-detail { | |
| font-size: 0.75rem; | |
| color: var(--color-text-muted); | |
| } | |
| .form-group select { | |
| width: 100%; | |
| padding: 0.5rem 0.75rem; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius); | |
| font-size: 1rem; | |
| background: var(--color-card); | |
| color: var(--color-text); | |
| box-sizing: border-box; | |
| cursor: pointer; | |
| } | |
| .form-group select:focus { | |
| outline: none; | |
| border-color: var(--color-primary); | |
| box-shadow: 0 0 0 4px var(--color-focus-ring); | |
| } | |
| .injury-checkboxes { | |
| display: flex; | |
| gap: 1.25rem; | |
| margin-top: 0.25rem; | |
| } | |
| .injury-checkbox-label { | |
| display: flex ; | |
| align-items: center; | |
| gap: 0.375rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| color: var(--color-text); | |
| cursor: pointer; | |
| } | |
| .injury-checkbox-label input[type="checkbox"] { | |
| width: auto; | |
| accent-color: var(--color-primary); | |
| cursor: pointer; | |
| } | |
| .pain-inputs { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 0.75rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .pain-location-label { | |
| grid-column: 1 / -1; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--color-text-muted); | |
| } | |
| .btn-primary { | |
| width: 100%; | |
| padding: 0.625rem 1rem; | |
| border: none; | |
| border-radius: var(--radius); | |
| background: linear-gradient(135deg, var(--color-primary) 0%, #4aa8ff 100%); | |
| color: white; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| box-shadow: 0 14px 28px rgba(0, 113, 227, 0.2); | |
| transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 18px 32px rgba(0, 113, 227, 0.24); | |
| filter: saturate(1.05); | |
| } | |