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

fitness: match WorkoutFab rest timer style to active page RestTimer
All checks were successful
CI / update (push) Successful in 2m1s
Details

Browse Source
This commit is contained in:
Alexander Bocken
2026-03-23 22:18:20 +01:00
parent 0f79170f02
commit 785341bf0b
1 changed files with 9 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -98,16 +98,16 @@ const restProgress = $derived(restTotal > 0 ? restSeconds / restTotal : 0);
} }
.rest-pill { .rest-pill {
position: relative; position: relative;
height: 2rem; height: 2.2rem;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
background: var(--color-bg-elevated); background: var(--nord0);
min-width: 10rem; min-width: 10rem;
} }
.rest-fill { .rest-fill {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: var(--color-primary); background: var(--blue);
border-radius: 8px; border-radius: 8px;
transition: width 1s linear; transition: width 1s linear;
} }
@@ -117,40 +117,31 @@ const restProgress = $derived(restTotal > 0 ? restSeconds / restTotal : 0);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.75rem; gap: 1rem;
z-index: 1; z-index: 1;
} }
.rest-time { .rest-time {
background: none; background: none;
border: none; border: none;
font-size: 0.85rem; font-size: 0.9rem;
font-weight: 700; font-weight: 700;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: var(--color-text-primary, inherit); color: white;
cursor: pointer; cursor: pointer;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.5rem;
} }
.rest-adj { .rest-adj {
background: none; background: none;
border: none; border: none;
color: var(--color-text-primary, inherit); color: white;
cursor: pointer; cursor: pointer;
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
padding: 0.2rem 0.3rem; padding: 0.2rem 0.4rem;
border-radius: 4px; border-radius: 4px;
opacity: 0.7; opacity: 0.7;
} }
.rest-adj:hover { .rest-adj:hover {
opacity: 1; opacity: 1;
} }
@media (prefers-color-scheme: dark) {
.rest-time, .rest-adj {
color: var(--nord10);
}
}
:global(:root[data-theme="dark"]) .rest-time,
:global(:root[data-theme="dark"]) .rest-adj {
color: var(--nord10);
}
</style> </style>