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

Fix weekend tint visibility, dot spacing, and event FOUC

Browse Source 
Weekend tint: hsl(0 0% 6%) was lighter than page bg #0a0a0a (imperceptible).
Changed to hsl(0 0% 2%) = #050505 for visible darkening. Added rule for
fc-daygrid-day-frame to paint above FC6 internal layers.

Dot spacing: Reduced padding from 1px 4px to 1px 2px for tighter edge gap.

FOUC fix: Moved umbra-event class from eventDidMount (post-paint) to
eventClassNames (synchronous pre-mount). eventDidMount now only sets
the --event-color CSS custom property.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-13 02:43:33 +08:00
parent d6f5975fb9
commit e18c94cd83
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/calendar/CalendarPage.tsx
View File

@ -507,7 +507,6 @@ export default function CalendarPage() {
if (color) { if (color) {
info.el.style.setProperty('--event-color', color); info.el.style.setProperty('--event-color', color);
} }
info.el.classList.add('umbra-event');
}, []); }, []);
const renderEventContent = useCallback((arg: EventContentArg) => { const renderEventContent = useCallback((arg: EventContentArg) => {
@ -705,6 +704,7 @@ export default function CalendarPage() {
dayHeaderFormat={{ weekday: 'short', day: 'numeric', month: 'numeric' }} dayHeaderFormat={{ weekday: 'short', day: 'numeric', month: 'numeric' }}
slotEventOverlap={false} slotEventOverlap={false}
eventDidMount={handleEventDidMount} eventDidMount={handleEventDidMount}
eventClassNames={() => ['umbra-event']}
eventContent={renderEventContent} eventContent={renderEventContent}
/> />
</div> </div>

14
frontend/src/index.css
View File

@ -167,19 +167,25 @@
/* Weekend column tint */ /* Weekend column tint */
.fc .fc-day-sat, .fc .fc-day-sat,
.fc .fc-day-sun { .fc .fc-day-sun {
background-color: hsl(0 0% 6%); background-color: hsl(0 0% 2%);
} }
/* Weekend tint: header cells (higher specificity to override .fc-col-header-cell) */ /* Weekend tint: header cells (higher specificity to override .fc-col-header-cell) */
.fc .fc-col-header-cell.fc-day-sat, .fc .fc-col-header-cell.fc-day-sat,
.fc .fc-col-header-cell.fc-day-sun { .fc .fc-col-header-cell.fc-day-sun {
background-color: hsl(0 0% 6%) !important; background-color: hsl(0 0% 2%) !important;
} }
/* Weekend tint: timegrid column cells */ /* Weekend tint: timegrid column cells */
.fc .fc-timegrid-col.fc-day-sat, .fc .fc-timegrid-col.fc-day-sat,
.fc .fc-timegrid-col.fc-day-sun { .fc .fc-timegrid-col.fc-day-sun {
background-color: hsl(0 0% 6%); background-color: hsl(0 0% 2%);
}
/* Weekend tint: daygrid frame layer (paints above td background in FC6) */
.fc .fc-day-sat .fc-daygrid-day-frame,
.fc .fc-day-sun .fc-daygrid-day-frame {
background-color: hsl(0 0% 2%);
} }
.fc .fc-col-header-cell { .fc .fc-col-header-cell {
@ -246,7 +252,7 @@
.fc .fc-daygrid-event.umbra-event { .fc .fc-daygrid-event.umbra-event {
font-size: 0.75rem; font-size: 0.75rem;
padding: 1px 4px; padding: 1px 2px;
line-height: 1.4; line-height: 1.4;
} }