From 744fe2c2249f29d4b406502778cee20c305eabb6 Mon Sep 17 00:00:00 2001 From: Kyle Pope Date: Fri, 13 Mar 2026 14:05:31 +0800 Subject: [PATCH] Fix calendar weekend tint: target fc-daygrid-day-frame not td MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- frontend/src/index.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 822657c..a15d758 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -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 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; }