rope/flowtrack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Open-ended predictions, faded past six weeks; upcoming periods list

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-18 09:58:55 +01:00
parent bb19bc0aeb
commit ce84bee359
6 changed files with 124 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

19
static/styles.css
View file

@ -223,6 +223,13 @@ main {
.day.fertile { background: var(--fertile-soft); }
.day.predicted { box-shadow: inset 0 0 0 2px var(--period); background: var(--period-soft); }
.day.period { background: var(--period); color: var(--period-ink); font-weight: 600; }
/* More than six weeks out: same marks, washed out. */
.day.fertile.faded { background: color-mix(in srgb, var(--fertile-soft) 45%, transparent); }
.day.predicted.faded {
background: color-mix(in srgb, var(--period-soft) 45%, transparent);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--period) 40%, transparent);
}
.day.faded .flow, .day.faded .mark.ovulation { opacity: 0.45; }
.day.today::after {
content: "";
position: absolute;
@ -253,6 +260,10 @@ main {
.key-period { background: var(--period); }
.key-predicted { background: var(--period-soft); box-shadow: inset 0 0 0 2px var(--period); }
.key-fertile { background: var(--fertile-soft); }
.key-predicted.faded {
background: color-mix(in srgb, var(--period-soft) 45%, transparent);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--period) 40%, transparent);
}
.key-ovulation { position: relative; background: var(--fertile-soft); }
.key-ovulation::after { content: ""; position: absolute; inset: 5px; border-radius: 999px; background: var(--fertile); }
.key-spotting, .key-symptoms { position: relative; }
@ -292,6 +303,14 @@ main {
}
.tooltip[hidden] { display: none; }
.upcoming { display: grid; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.upcoming li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.upcoming li:first-child { border-top: 0; padding-top: 0; }
.upcoming .when { font-weight: 600; }
.upcoming .likely { color: var(--ink-2); text-align: right; }
.upcoming .likely small { display: block; color: var(--muted); font-size: 0.78rem; }
.upcoming li.faded .when { color: var(--ink-2); font-weight: 500; }
.table-wrap { margin-top: 12px; overflow-x: auto; }
.history { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.history th { padding: 0 0 8px; color: var(--muted); font-size: 0.8rem; font-weight: 600; text-align: left; }