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

Give the Sleep trend average line its own color

Browse Source 
All three blue lines were hard to tell apart; the N-day average is now
teal (the --weight token) and slightly more opaque, while the projected
tail stays blue on purpose — it continues today's line.
This commit is contained in:
Alexander Heldt
2026-07-15 13:18:42 +00:00
parent 9b6ee20b07
commit a1a6ec8720
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/changelog.json
+1
View File
@@ -1,4 +1,5 @@
[ [
{ "date": "2026-07-15", "text": "The Sleep trend average line is teal now, so it doesn't blend in with today's blue line and its projection" },
{ "date": "2026-07-15", "text": "Tapping a day in a chart selects it without jumping down to the history" }, { "date": "2026-07-15", "text": "Tapping a day in a chart selects it without jumping down to the history" },
{ "date": "2026-07-15", "text": "Meals with an amount logged show their grams in the day's history" }, { "date": "2026-07-15", "text": "Meals with an amount logged show their grams in the day's history" },
{ "date": "2026-07-15", "text": "Every 1-hour gridline on the sleep charts now shows its hour mark" }, { "date": "2026-07-15", "text": "Every 1-hour gridline on the sleep charts now shows its hour mark" },
src/style.css
+3 -3
View File
@@ -934,12 +934,12 @@ input.switch:checked::after { transform: translateX(18px); }
opacity: 0.75; opacity: 0.75;
} }
.chart-svg .trend-avg { .chart-svg .trend-avg {
stroke: var(--sleep); stroke: var(--weight); /* teal — keeps it apart from today's blue and its blue projected tail */
stroke-width: 1.5; stroke-width: 1.5;
stroke-dasharray: 4 3; stroke-dasharray: 4 3;
stroke-linejoin: round; stroke-linejoin: round;
fill: none; fill: none;
opacity: 0.7; opacity: 0.85;
} }
/* Today's projected tail: same weight/color as today so it reads as its /* Today's projected tail: same weight/color as today so it reads as its
continuation, dashed + faded because it hasn't happened yet. */ continuation, dashed + faded because it hasn't happened yet. */
@@ -955,7 +955,7 @@ input.switch:checked::after { transform: translateX(18px); }
.lg.trend-today .sw { background: var(--sleep); } .lg.trend-today .sw { background: var(--sleep); }
.lg.trend-projected .sw { background: color-mix(in srgb, var(--sleep) 40%, var(--surface)); } .lg.trend-projected .sw { background: color-mix(in srgb, var(--sleep) 40%, var(--surface)); }
.lg.trend-yesterday .sw { background: var(--muted); } .lg.trend-yesterday .sw { background: var(--muted); }
.lg.trend-avg .sw { background: color-mix(in srgb, var(--sleep) 55%, var(--surface)); } .lg.trend-avg .sw { background: var(--weight); }
.lg[hidden] { display: none; } .lg[hidden] { display: none; }
.chart-svg .hm-cell { stroke: none; } .chart-svg .hm-cell { stroke: none; }