alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace the big clock with a timer pill in the frozen day bar

Browse Source 
The full-width asleep/awake card becomes a compact colored pill next to
the day controls: state emoji plus the live counter, with "since" moved
to the tooltip. One glance at the pinned bar now gives both the day and
the current state.
This commit is contained in:
Alexander Heldt
2026-07-13 20:40:01 +00:00
parent 0009e63d23
commit c103082ca5
4 changed files with 29 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+11 -25
View File
@@ -159,34 +159,20 @@ body::before {
opacity: 0.4;
cursor: not-allowed;
}
.big-clock {
text-align: center;
padding: 24px 16px;
}
.big-clock .bc-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 6px;
}
.big-clock .bc-time {
font-size: 3.25rem;
.bar-clock {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
line-height: 1.05;
letter-spacing: -0.01em;
flex-shrink: 0;
}
.big-clock .bc-since {
margin-top: 6px;
font-size: 0.8rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.big-clock.asleep { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sleep) 10%, var(--surface))); }
.big-clock.asleep .bc-time { color: var(--sleep); }
.big-clock.awake { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 10%, var(--surface))); }
.big-clock.awake .bc-time { color: var(--accent); }
.bar-clock[hidden] { display: none; }
.bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep); }
.bar-clock.awake { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); }
.grid {
display: grid;