Overview calendar: mark today in amber so it can't pass for the selected day
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:
2 files changed
+12
-5
No files matched your search
+6
-3
@@ -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-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; }
|
||||
/* Today: the date number in a filled badge (like a calendar app), so it can't be mistaken for
|
||||
the selected day, which gets the outline and a tint */
|
||||
.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; }
|
||||
/* Today: amber stripe across the top and an amber badge on the date. Blue is kept for the
|
||||
selected day (outline and tint), so the two never look alike, even when today is selected. */
|
||||
.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); }
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user