feat: add overdue dose indication in UI with corresponding styles

This commit is contained in:
Daniel Volz
2025-12-24 09:41:55 +01:00
parent b5171b1fe2
commit c5e03a787d
2 changed files with 43 additions and 3 deletions
+34
View File
@@ -448,6 +448,40 @@ textarea {
color: var(--text-secondary);
}
/* Overdue (past, not taken) doses */
.dose-item.overdue {
background: var(--warning-bg);
border-color: rgba(252, 211, 77, 0.4);
}
.dose-item.overdue .dose-time {
color: var(--warning);
}
.dose-item.overdue .dose-btn.take {
background: var(--warning-bg);
border-color: var(--warning);
color: var(--warning);
}
.dose-item.overdue .dose-btn.take:hover {
background: var(--warning);
color: #1a1a2e;
}
/* Overdue AND taken = show it was late */
.dose-item.overdue.taken {
background: rgba(252, 211, 77, 0.08);
border-color: rgba(252, 211, 77, 0.2);
opacity: 0.6;
}
.dose-item.overdue.taken .dose-time,
.dose-item.overdue.taken .dose-usage {
text-decoration: line-through;
color: var(--text-secondary);
}
.dose-time {
font-weight: 600;
color: var(--accent-light);