rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix calendar weekend tint: target fc-daygrid-day-frame not td

Browse Source 
FC6 renders an fc-daygrid-day-frame div inside every daygrid td, painted
with --fc-neutral-bg-color (hsl 0 0% 8% / 0.65). This opaque-ish layer sits
on top of the td background, completely hiding any rgba white overlay applied
to the td itself. Previous attempts set the tint on the td — it was never
visible because the frame covered it.

Fix: apply 5% white color-mix overlay directly to fc-daygrid-day-frame for
month view, and !important on fc-timegrid-col for week/day view.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-13 14:05:31 +08:00
parent d9b5868343
commit 744fe2c224
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/index.css
View File

@ -165,21 +165,24 @@
}
/* Weekend column tint */
.fc .fc-day-sat,
.fc .fc-day-sun {
background-color: hsl(0 0% 100% / 0.03);
/* Month view: paint the fc-daygrid-day-frame (FC6 inner div) with 5% white overlay.
The parent <td> bg is hidden behind the frame painted by --fc-neutral-bg-color, so
the tint must target the frame itself, not the td. */
.fc .fc-day-sat .fc-daygrid-day-frame,
.fc .fc-day-sun .fc-daygrid-day-frame {
background-color: color-mix(in srgb, white 5%, transparent) !important;
}
/* Weekend tint: header cells (higher specificity to override .fc-col-header-cell) */
/* Weekend tint: header cells */
.fc .fc-col-header-cell.fc-day-sat,
.fc .fc-col-header-cell.fc-day-sun {
background-color: hsl(0 0% 100% / 0.03) !important;
background-color: color-mix(in srgb, white 5%, hsl(0 0% 8% / 0.65)) !important;
}
/* Weekend tint: timegrid column cells */
/* Weekend tint: timegrid column cells (week/day view) */
.fc .fc-timegrid-col.fc-day-sat,
.fc .fc-timegrid-col.fc-day-sun {
background-color: hsl(0 0% 100% / 0.03);
background-color: color-mix(in srgb, white 5%, transparent) !important;
}