Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fitness: fix light/dark theme with semantic CSS variables
All checks were successful
CI / update (push) Successful in 1m57s
Details

Browse Source 
Replace hardcoded Nord color references with semantic CSS variables
across all fitness components and pages. Use --color-primary instead
of --nord8 for interactive elements (auto-switches between --nord10
in light mode and --nord8 in dark mode). Change RPE color from
--nord13 (yellow) to --nord12 (orange) for better light mode contrast.
Fix mobile responsiveness on measure page form inputs.
This commit is contained in:
Alexander Bocken
2026-03-19 09:08:24 +01:00
parent 48f381e215
commit 6c6abe9f6c
15 changed files with 166 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/fitness/ExerciseName.svelte
View File

@@ -14,7 +14,7 @@
<style>
.exercise-link {
color: var(--nord8);
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
}

37
src/lib/components/fitness/ExercisePicker.svelte
View File

@@ -100,7 +100,7 @@
width: 100%;
max-width: 500px;
max-height: 85vh;
background: var(--nord0, #2e3440);
background: var(--color-bg-secondary);
border-radius: 16px 16px 0 0;
display: flex;
flex-direction: column;
@@ -111,7 +111,7 @@
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid var(--nord3);
border-bottom: 1px solid var(--color-border);
}
.picker-header h2 {
margin: 0;
@@ -120,7 +120,7 @@
.close-btn {
background: none;
border: none;
color: var(--nord4);
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.25rem;
}
@@ -129,31 +129,31 @@
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--nord3);
color: var(--nord4);
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.picker-search input {
flex: 1;
background: transparent;
border: none;
color: inherit;
color: var(--color-text-primary);
font-size: 0.9rem;
outline: none;
}
.picker-search input::placeholder {
color: var(--nord3);
color: var(--color-text-muted);
}
.picker-filters {
display: flex;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--nord3);
border-bottom: 1px solid var(--color-border);
}
.picker-filters select {
flex: 1;
background: var(--nord1);
background: var(--color-bg-elevated);
color: inherit;
border: 1px solid var(--nord3);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.35rem 0.5rem;
font-size: 0.8rem;
@@ -172,14 +172,14 @@
padding: 0.75rem 1rem;
background: none;
border: none;
border-bottom: 1px solid var(--nord3, rgba(0,0,0,0.05));
border-bottom: 1px solid var(--color-border);
color: inherit;
text-align: left;
cursor: pointer;
font: inherit;
}
.exercise-item:hover {
background: var(--nord1, rgba(0,0,0,0.05));
background: var(--color-surface-hover);
}
.ex-name {
font-weight: 600;
@@ -187,22 +187,13 @@
}
.ex-meta {
font-size: 0.75rem;
color: var(--nord4);
color: var(--color-text-secondary);
text-transform: capitalize;
}
.no-results {
padding: 2rem;
text-align: center;
color: var(--nord4);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .picker-panel {
background: white;
}
}
:global(:root[data-theme="light"]) .picker-panel {
background: white;
color: var(--color-text-secondary);
}
@media (min-width: 600px) {

15
src/lib/components/fitness/FitnessChart.svelte
View File

@@ -145,24 +145,13 @@
<style>
.chart-container {
background: var(--nord1, #f8f8f8);
background: var(--color-surface);
border-radius: 12px;
padding: 1rem;
border: 1px solid var(--nord3, #ddd);
border: 1px solid var(--color-border);
}
canvas {
max-width: 100%;
height: 100% !important;
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .chart-container {
background: white;
border-color: var(--nord4);
}
}
:global(:root[data-theme="light"]) .chart-container {
background: white;
border-color: var(--nord4);
}
</style>

6
src/lib/components/fitness/RestTimer.svelte
View File

@@ -56,12 +56,12 @@
}
.bg-ring {
fill: none;
stroke: var(--nord3, #ddd);
stroke: var(--color-border);
stroke-width: 4;
}
.progress-ring {
fill: none;
stroke: var(--nord8);
stroke: var(--color-primary);
stroke-width: 4;
stroke-linecap: round;
transition: stroke-dashoffset 1s linear;
@@ -70,7 +70,7 @@
font-size: 1.25rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--nord8);
color: var(--color-primary);
z-index: 1;
}
</style>

27
src/lib/components/fitness/SessionCard.svelte
View File

@@ -94,16 +94,16 @@
display: block;
text-decoration: none;
color: inherit;
background: var(--accent-dark);
background: var(--color-surface);
border: none;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 1rem;
transition: transform 150ms ease, box-shadow 150ms ease;
}
.session-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-md);
}
.session-card:active {
transform: translateY(0);
@@ -118,7 +118,7 @@
}
.session-date {
font-size: 0.75rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
.exercise-list {
font-size: 0.8rem;
@@ -130,22 +130,22 @@
padding: 0.15rem 0;
}
.ex-sets {
color: var(--nord4);
color: var(--color-text-secondary);
}
.ex-best {
font-weight: 600;
font-size: 0.78rem;
}
.more {
color: var(--nord8);
color: var(--color-primary);
font-style: italic;
}
.card-footer {
display: flex;
gap: 1rem;
font-size: 0.75rem;
color: var(--nord4);
border-top: 1px solid var(--nord3, rgba(0,0,0,0.1));
color: var(--color-text-secondary);
border-top: 1px solid var(--color-border);
padding-top: 0.5rem;
}
.stat {
@@ -156,15 +156,4 @@
.stat.pr {
color: var(--nord13);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .session-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .session-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
</style>

31
src/lib/components/fitness/SetTable.svelte
View File

@@ -124,7 +124,7 @@
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 600;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 0.4rem 0.5rem;
text-align: center;
letter-spacing: 0.05em;
@@ -132,15 +132,15 @@
tbody td {
padding: 0.35rem 0.5rem;
text-align: center;
border-top: 1px solid var(--nord3, rgba(0,0,0,0.1));
border-top: 1px solid var(--color-border);
}
.col-set {
width: 2.5rem;
font-weight: 700;
color: var(--nord4);
color: var(--color-text-secondary);
}
.col-prev {
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.8rem;
}
.col-weight, .col-reps {
@@ -153,14 +153,14 @@
width: 2.5rem;
}
tr.completed {
background: rgba(163, 190, 140, 0.1);
background: color-mix(in srgb, var(--nord14) 10%, transparent);
}
input {
width: 100%;
max-width: 4rem;
text-align: center;
background: var(--nord1, #f0f0f0);
border: 1px solid var(--nord3, #ddd);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 0.3rem 0.25rem;
font-size: 0.875rem;
@@ -171,7 +171,7 @@
}
input:focus {
outline: none;
border-color: var(--nord8);
border-color: var(--color-primary);
}
.check-btn {
display: flex;
@@ -180,9 +180,9 @@
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 2px solid var(--nord3);
border: 2px solid var(--color-border);
background: transparent;
color: var(--nord4);
color: var(--color-text-secondary);
cursor: pointer;
transition: all 150ms;
margin: 0 auto;
@@ -192,15 +192,4 @@
border-color: var(--nord14);
color: white;
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) input {
background: var(--nord6, #eceff4);
border-color: var(--nord4);
}
}
:global(:root[data-theme="light"]) input {
background: var(--nord6, #eceff4);
border-color: var(--nord4);
}
</style>

27
src/lib/components/fitness/TemplateCard.svelte
View File

@@ -57,10 +57,10 @@
display: flex;
flex-direction: column;
text-align: left;
background: var(--accent-dark);
background: var(--color-surface);
border: none;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 1rem;
cursor: pointer;
transition: transform 150ms ease, box-shadow 150ms ease;
@@ -70,7 +70,7 @@
}
.template-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
box-shadow: var(--shadow-md);
}
.template-card:active {
transform: translateY(0);
@@ -89,42 +89,31 @@
.menu-btn {
background: none;
border: none;
color: var(--nord4);
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.15rem;
border-radius: 4px;
}
.menu-btn:hover {
color: var(--nord8);
color: var(--color-primary);
}
.exercise-preview {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
.exercise-preview li {
padding: 0.1rem 0;
}
.exercise-preview .more {
color: var(--nord8);
color: var(--color-primary);
font-style: italic;
}
.last-used {
margin: 0.5rem 0 0;
font-size: 0.75rem;
color: var(--nord4);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .template-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .template-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
color: var(--color-text-secondary);
}
</style>

33
src/routes/fitness/exercises/+page.svelte
View File

@@ -73,10 +73,10 @@
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
color: var(--nord4);
box-shadow: var(--shadow-sm);
color: var(--color-text-secondary);
}
.search-bar input {
flex: 1;
@@ -87,7 +87,7 @@
outline: none;
}
.search-bar input::placeholder {
color: var(--nord3);
color: var(--color-text-muted);
}
.filters {
display: flex;
@@ -96,8 +96,8 @@
.filters select {
flex: 1;
padding: 0.4rem 0.5rem;
background: var(--accent-dark);
border: 1px solid var(--nord3, #ddd);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
color: inherit;
font-size: 0.8rem;
@@ -113,10 +113,10 @@
padding: 0.75rem 0;
text-decoration: none;
color: inherit;
border-bottom: 1px solid var(--nord3, rgba(0,0,0,0.08));
border-bottom: 1px solid var(--color-border);
}
.exercise-row:hover {
background: rgba(136, 192, 208, 0.05);
background: var(--color-surface-hover);
}
.exercise-info {
display: flex;
@@ -128,25 +128,12 @@
}
.exercise-meta {
font-size: 0.75rem;
color: var(--nord4);
color: var(--color-text-secondary);
text-transform: capitalize;
}
.no-results {
text-align: center;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 2rem 0;
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .search-bar,
:global(:root:not([data-theme])) .filters select {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .search-bar,
:global(:root[data-theme="light"]) .filters select {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
</style>

51
src/routes/fitness/exercises/[id]/+page.svelte
View File

@@ -185,7 +185,7 @@
.tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--nord3, #ddd);
border-bottom: 2px solid var(--color-border);
}
.tab {
flex: 1;
@@ -194,7 +194,7 @@
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
@@ -202,8 +202,8 @@
text-align: center;
}
.tab.active {
color: var(--nord8);
border-bottom-color: var(--nord8);
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.tab-content {
padding: 0.5rem 0;
@@ -235,7 +235,7 @@
.target { background: rgba(208, 135, 112, 0.2); color: var(--nord12); }
.secondary {
font-size: 0.8rem;
color: var(--nord4);
color: var(--color-text-secondary);
text-transform: capitalize;
}
h3 {
@@ -254,13 +254,13 @@
/* History */
.empty {
text-align: center;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 2rem 0;
}
.history-session {
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 0.75rem;
margin-bottom: 0.6rem;
}
@@ -271,7 +271,7 @@
font-size: 0.85rem;
}
.history-date {
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.8rem;
}
.history-sets {
@@ -282,7 +282,7 @@
.history-sets th {
text-align: center;
font-size: 0.7rem;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 0.25rem;
letter-spacing: 0.05em;
}
@@ -291,7 +291,7 @@
padding: 0.25rem;
}
.rpe {
color: var(--nord13);
color: var(--nord12);
font-size: 0.75rem;
}
@@ -314,13 +314,13 @@
flex-direction: column;
align-items: center;
padding: 1rem;
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
}
.record-label {
font-size: 0.7rem;
color: var(--nord4);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
@@ -328,7 +328,7 @@
.record-value {
font-size: 1.3rem;
font-weight: 700;
color: var(--nord8);
color: var(--color-primary);
}
.records-table {
width: 100%;
@@ -338,30 +338,17 @@
.records-table th {
text-align: left;
font-size: 0.7rem;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 0.4rem 0.5rem;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--nord3);
border-bottom: 1px solid var(--color-border);
}
.records-table td {
padding: 0.4rem 0.5rem;
border-bottom: 1px solid var(--nord3, rgba(0,0,0,0.05));
border-bottom: 1px solid var(--color-border);
}
.rec-date {
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.75rem;
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .history-session,
:global(:root:not([data-theme])) .record-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .history-session,
:global(:root[data-theme="light"]) .record-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
</style>

10
src/routes/fitness/history/+page.svelte
View File

@@ -72,7 +72,7 @@
}
.empty {
text-align: center;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 3rem 0;
}
.month-group {
@@ -81,7 +81,7 @@
.month-header {
font-size: 0.85rem;
font-weight: 600;
color: var(--nord4);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 0.5rem;
@@ -95,14 +95,14 @@
align-self: center;
padding: 0.6rem 2rem;
background: transparent;
border: 1px solid var(--nord3);
border: 1px solid var(--color-border);
border-radius: 8px;
color: var(--nord8);
color: var(--color-primary);
font-weight: 600;
cursor: pointer;
}
.load-more:hover {
border-color: var(--nord8);
border-color: var(--color-accent);
}
.load-more:disabled {
opacity: 0.6;

51
src/routes/fitness/history/[id]/+page.svelte
View File

@@ -159,7 +159,7 @@
.session-date {
margin: 0.2rem 0 0;
font-size: 0.8rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
.delete-btn {
background: none;
@@ -189,22 +189,22 @@
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.7rem;
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: var(--shadow-sm);
font-size: 0.8rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
.stat-pill.pr {
color: var(--nord13);
border-color: var(--nord13);
background: rgba(235, 203, 139, 0.1);
background: color-mix(in srgb, var(--nord13) 10%, transparent);
}
.exercise-block {
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 1rem;
}
.exercise-title {
@@ -219,7 +219,7 @@
.sets-table th {
text-align: center;
font-size: 0.7rem;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 0.3rem 0.4rem;
letter-spacing: 0.05em;
font-weight: 600;
@@ -227,23 +227,23 @@
.sets-table td {
text-align: center;
padding: 0.35rem 0.4rem;
border-top: 1px solid var(--nord3, rgba(0,0,0,0.08));
border-top: 1px solid var(--color-border);
}
.set-num {
font-weight: 700;
color: var(--nord4);
color: var(--color-text-secondary);
}
.rpe {
color: var(--nord13);
color: var(--nord12);
}
.est1rm {
color: var(--nord8);
color: var(--color-primary);
font-weight: 600;
}
.prs-section {
background: rgba(235, 203, 139, 0.08);
border: 1px solid rgba(235, 203, 139, 0.3);
background: color-mix(in srgb, var(--nord13) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--nord13) 30%, transparent);
border-radius: 12px;
padding: 1rem;
}
@@ -271,7 +271,7 @@
font-weight: 600;
}
.pr-type {
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.75rem;
}
.pr-value {
@@ -281,9 +281,9 @@
}
.notes-section {
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 1rem;
}
.notes-section h2 {
@@ -293,21 +293,6 @@
.notes-section p {
margin: 0;
font-size: 0.85rem;
color: var(--nord4);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .exercise-block,
:global(:root:not([data-theme])) .notes-section,
:global(:root:not([data-theme])) .stat-pill {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .exercise-block,
:global(:root[data-theme="light"]) .notes-section,
:global(:root[data-theme="light"]) .stat-pill {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
color: var(--color-text-secondary);
}
</style>

49
src/routes/fitness/measure/+page.svelte
View File

@@ -230,19 +230,20 @@
h3 {
margin: 0.75rem 0 0.25rem;
font-size: 0.85rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
/* Form */
.measure-form {
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 1rem;
}
.form-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.form-group {
flex: 1;
@@ -254,27 +255,27 @@
.form-group label {
font-size: 0.7rem;
font-weight: 600;
color: var(--nord4);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.form-group input {
padding: 0.4rem 0.5rem;
border: 1px solid var(--nord3);
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--nord0, white);
background: var(--color-bg-elevated);
color: inherit;
font-size: 0.85rem;
}
.form-group input:focus {
outline: none;
border-color: var(--nord8);
border-color: var(--color-primary);
}
.save-btn {
width: 100%;
margin-top: 0.75rem;
padding: 0.7rem;
background: var(--nord8);
background: var(--color-primary);
color: white;
border: none;
border-radius: 8px;
@@ -298,13 +299,13 @@
flex-direction: column;
align-items: center;
padding: 0.75rem;
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
}
.stat-label {
font-size: 0.7rem;
color: var(--nord4);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
@@ -315,7 +316,7 @@
.stat-value small {
font-size: 0.7rem;
font-weight: 400;
color: var(--nord4);
color: var(--color-text-secondary);
}
/* Body parts */
@@ -327,11 +328,11 @@
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--nord3, rgba(0,0,0,0.05));
border-bottom: 1px solid var(--color-border);
font-size: 0.85rem;
}
.body-label {
color: var(--nord4);
color: var(--color-text-secondary);
}
.body-value {
font-weight: 600;
@@ -341,24 +342,8 @@
.stat-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .measure-form,
:global(:root:not([data-theme])) .stat-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
.form-row {
flex-direction: column;
}
:global(:root:not([data-theme])) .form-group input {
background: var(--nord6, #eceff4);
}
}
:global(:root[data-theme="light"]) .measure-form,
:global(:root[data-theme="light"]) .stat-card {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
:global(:root[data-theme="light"]) .form-group input {
background: var(--nord6, #eceff4);
}
</style>

19
src/routes/fitness/profile/+page.svelte
View File

@@ -120,9 +120,9 @@
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
}
.avatar {
width: 56px;
@@ -137,7 +137,7 @@
.subtitle {
margin: 0.15rem 0 0;
font-size: 0.85rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
.section-heading {
font-size: 1.1rem;
@@ -145,18 +145,7 @@
}
.empty-chart {
text-align: center;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 2rem 0;
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .user-section {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .user-section {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
</style>

84
src/routes/fitness/workout/+page.svelte
View File

@@ -324,7 +324,7 @@
.start-empty-btn {
width: 100%;
padding: 0.9rem;
background: var(--nord8);
background: var(--color-primary);
color: white;
border: none;
border-radius: 10px;
@@ -342,7 +342,7 @@
}
.template-count {
font-size: 0.8rem;
color: var(--nord4);
color: var(--color-text-secondary);
margin: 0.25rem 0 0.75rem;
}
.template-grid {
@@ -352,7 +352,7 @@
}
.no-templates {
text-align: center;
color: var(--nord4);
color: var(--color-text-secondary);
padding: 2rem 0;
}
@@ -376,9 +376,9 @@
max-width: 420px;
max-height: 85vh;
overflow-y: auto;
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
@@ -390,7 +390,7 @@
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid var(--nord3);
border-bottom: 1px solid var(--color-border);
}
.modal-header h2 {
margin: 0;
@@ -399,7 +399,7 @@
.close-btn {
background: none;
border: none;
color: var(--nord4);
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.25rem;
}
@@ -417,18 +417,18 @@
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--nord3, rgba(0,0,0,0.05));
border-bottom: 1px solid var(--color-border);
font-size: 0.85rem;
}
.tex-name {
font-weight: 600;
}
.tex-sets {
color: var(--nord4);
color: var(--color-text-secondary);
}
.modal-meta {
font-size: 0.75rem;
color: var(--nord4);
color: var(--color-text-secondary);
margin-top: 0.75rem;
}
.modal-actions {
@@ -436,7 +436,7 @@
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
border-top: 1px solid var(--nord3);
border-top: 1px solid var(--color-border);
}
.modal-start {
display: flex;
@@ -444,7 +444,7 @@
justify-content: center;
gap: 0.4rem;
padding: 0.65rem;
background: var(--nord8);
background: var(--color-primary);
color: white;
border: none;
border-radius: 8px;
@@ -463,7 +463,7 @@
gap: 0.4rem;
padding: 0.65rem;
background: transparent;
border: 1px solid var(--nord3);
border: 1px solid var(--color-border);
border-radius: 8px;
color: inherit;
font-weight: 600;
@@ -471,7 +471,7 @@
cursor: pointer;
}
.modal-edit:hover {
border-color: var(--nord8);
border-color: var(--color-primary);
}
.modal-delete {
display: flex;
@@ -495,8 +495,8 @@
.editor-name {
width: 100%;
padding: 0.5rem;
background: var(--nord1);
border: 1px solid var(--nord3);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 8px;
color: inherit;
font-size: 1rem;
@@ -505,11 +505,11 @@
}
.editor-name:focus {
outline: none;
border-color: var(--nord8);
border-color: var(--color-primary);
}
.editor-exercise {
background: var(--nord1, #f8f8f8);
border: 1px solid var(--nord3, #ddd);
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.75rem;
margin-bottom: 0.5rem;
@@ -549,25 +549,25 @@
width: 1.5rem;
text-align: center;
font-size: 0.75rem;
color: var(--nord4);
color: var(--color-text-secondary);
font-weight: 700;
}
.editor-set-row input {
width: 4rem;
text-align: center;
padding: 0.3rem;
background: var(--nord0);
border: 1px solid var(--nord3);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 6px;
color: inherit;
font-size: 0.8rem;
}
.editor-set-row input:focus {
outline: none;
border-color: var(--nord8);
border-color: var(--color-primary);
}
.set-x {
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.8rem;
}
.set-remove {
@@ -584,7 +584,7 @@
.editor-add-set {
background: none;
border: none;
color: var(--nord8);
color: var(--color-primary);
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
@@ -598,43 +598,17 @@
width: 100%;
padding: 0.6rem;
background: transparent;
border: 1px dashed var(--nord3);
border: 1px dashed var(--color-border);
border-radius: 8px;
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
margin-top: 0.5rem;
}
.editor-add-exercise:hover {
border-color: var(--nord8);
color: var(--nord8);
border-color: var(--color-primary);
color: var(--color-primary);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .modal-panel {
background: var(--nord5);
}
:global(:root:not([data-theme])) .editor-exercise {
background: var(--nord6);
}
:global(:root:not([data-theme])) .editor-name {
background: var(--nord6);
}
:global(:root:not([data-theme])) .editor-set-row input {
background: white;
}
}
:global(:root[data-theme="light"]) .modal-panel {
background: var(--nord5);
}
:global(:root[data-theme="light"]) .editor-exercise {
background: var(--nord6);
}
:global(:root[data-theme="light"]) .editor-name {
background: var(--nord6);
}
:global(:root[data-theme="light"]) .editor-set-row input {
background: white;
}
</style>

52
src/routes/fitness/workout/active/+page.svelte
View File

@@ -179,10 +179,10 @@
justify-content: space-between;
position: sticky;
top: 3.5rem;
background: var(--nord0, #2e3440);
background: var(--color-bg-primary);
z-index: 10;
padding: 0.5rem 0;
border-bottom: 1px solid var(--nord3);
border-bottom: 1px solid var(--color-border);
}
.topbar-left {
display: flex;
@@ -191,29 +191,29 @@
}
.pause-btn {
background: none;
border: 1px solid var(--nord3);
border: 1px solid var(--color-border);
border-radius: 6px;
color: var(--nord4);
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.3rem;
display: flex;
align-items: center;
}
.pause-btn:hover {
border-color: var(--nord8);
color: var(--nord8);
border-color: var(--color-primary);
color: var(--color-primary);
}
.elapsed {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 1.1rem;
color: var(--nord4);
color: var(--color-text-secondary);
}
.elapsed.paused {
color: var(--nord13);
}
.finish-btn {
background: var(--nord8);
background: var(--color-primary);
color: white;
border: none;
border-radius: 8px;
@@ -226,7 +226,7 @@
.workout-name-input {
background: transparent;
border: none;
border-bottom: 1px solid var(--nord3);
border-bottom: 1px solid var(--color-border);
color: inherit;
font-size: 1.2rem;
font-weight: 700;
@@ -235,7 +235,7 @@
outline: none;
}
.workout-name-input:focus {
border-bottom-color: var(--nord8);
border-bottom-color: var(--color-primary);
}
.rest-timer-section {
@@ -248,16 +248,16 @@
.skip-rest {
background: none;
border: none;
color: var(--nord8);
color: var(--color-primary);
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
}
.exercise-block {
background: var(--accent-dark);
background: var(--color-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-sm);
padding: 1rem;
}
.exercise-header {
@@ -283,16 +283,16 @@
margin-top: 0.5rem;
padding: 0.4rem;
background: transparent;
border: 1px dashed var(--nord3);
border: 1px dashed var(--color-border);
border-radius: 8px;
color: var(--nord4);
color: var(--color-text-secondary);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
}
.add-set-btn:hover {
border-color: var(--nord8);
color: var(--nord8);
border-color: var(--color-primary);
color: var(--color-primary);
}
.workout-actions {
@@ -308,7 +308,7 @@
gap: 0.4rem;
width: 100%;
padding: 0.75rem;
background: var(--nord8);
background: var(--color-primary);
color: white;
border: none;
border-radius: 10px;
@@ -333,20 +333,4 @@
background: rgba(191, 97, 106, 0.1);
}
@media (prefers-color-scheme: light) {
:global(:root:not([data-theme])) .workout-topbar {
background: white;
}
:global(:root:not([data-theme])) .exercise-block {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
}
:global(:root[data-theme="light"]) .workout-topbar {
background: white;
}
:global(:root[data-theme="light"]) .exercise-block {
background: var(--nord5);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
</style>