yoyos/usmt-dash
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Overview calendar: mark today in amber so it can't pass for the selected day

Browse Source 
Today gets an amber stripe across the top, an amber badge on the date and
an amber edge; the selected day keeps the blue outline and tint.
This commit is contained in:
Johan Sandoval committed 2026-10-07 21:02:41 +00:00
1 parent 41ff9e2b49
commit 76068893ee
2 files changed
+12 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/overview.css
+6 -3
View File
@@ -123,9 +123,12 @@ table.ov-heat td { padding: 0; text-align: center; border: 0; background: none;
.ov-day-bar { height: 6px; margin-top: 3px; } .ov-day-bar { height: 6px; margin-top: 3px; }
.ov-has-day { cursor: pointer; background: var(--bg-card); border: 1px solid var(--border-color); } .ov-has-day { cursor: pointer; background: var(--bg-card); border: 1px solid var(--border-color); }
.ov-has-day:hover, .ov-has-day:focus-visible, .ov-day.ov-selected { border-color: #3498db; box-shadow: 0 0 0 1px #3498db; } .ov-has-day:hover, .ov-has-day:focus-visible, .ov-day.ov-selected { border-color: #3498db; box-shadow: 0 0 0 1px #3498db; }
/* Today: the date number in a filled badge (like a calendar app), so it can't be mistaken for /* Today: amber stripe across the top and an amber badge on the date. Blue is kept for the
the selected day, which gets the outline and a tint */ selected day (outline and tint), so the two never look alike, even when today is selected. */
.ov-today .ov-day-num { align-self: flex-start; background: #3498db; color: #fff; font-weight: 700; border-radius: 999px; min-width: 1.6em; padding: 0 0.4em; box-sizing: border-box; text-align: center; line-height: 1.55; } .ov-day-head { display: flex; align-items: center; gap: 5px; min-width: 0; }
.ov-today::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #f59e0b; border-radius: 6px 6px 0 0; }
.ov-today .ov-day-num { margin-top: 2px; background: #f59e0b; color: #1f2937; font-weight: 800; border-radius: 999px; min-width: 1.7em; padding: 0 0.4em; box-sizing: border-box; text-align: center; line-height: 1.6; }
.ov-day.ov-today:not(.ov-selected):not(:hover) { border-color: rgba(245,158,11,0.6); }
.ov-day.ov-selected { background: rgba(52,152,219,0.16); } .ov-day.ov-selected { background: rgba(52,152,219,0.16); }
web/overview.js
+6 -2
View File
@@ -484,8 +484,12 @@
for (let d = 1; d <= dim; d++) { for (let d = 1; d <= dim; d++) {
const date = new Date(m.getFullYear(), m.getMonth(), d); const date = new Date(m.getFullYear(), m.getMonth(), d);
const info = days[dayKey(date)]; const info = days[dayKey(date)];
const cell = el('div', 'ov-day' + (date.getTime() === today.getTime() ? ' ov-today' : '') + (date.getDay() % 6 === 0 ? ' ov-weekend' : '')); const isToday = date.getTime() === today.getTime();
cell.appendChild(el('span', 'ov-day-num', String(d))); const cell = el('div', 'ov-day' + (isToday ? ' ov-today' : '') + (date.getDay() % 6 === 0 ? ' ov-weekend' : ''));
const head = el('div', 'ov-day-head');
head.appendChild(el('span', 'ov-day-num', String(d)));
if (isToday) cell.title = 'Today';
cell.appendChild(head);
if (info) { if (info) {
cell.classList.add('ov-has-day'); cell.classList.add('ov-has-day');
const c3 = { todo: 0, doing: 0, done: 0 }; const c3 = { todo: 0, doing: 0, done: 0 };