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

Fix calendar view visual inconsistencies with glassmorphism

Browse Source 
FullCalendar backgrounds were opaque while the toolbar used semi-transparent
glassmorphism cards, creating a patchy look. Now all FC elements match:
- Page background: transparent (ambient shows through grid)
- Column headers: semi-transparent (0.65 opacity)
- Neutral background: semi-transparent (0.65 opacity)
- More-popover: semi-transparent with backdrop blur

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-12 13:59:15 +08:00
parent 01c276fc8d
commit 8d854b703e
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/index.css
View File

@ -93,8 +93,8 @@
--fc-event-bg-color: hsl(var(--accent-color)); --fc-event-bg-color: hsl(var(--accent-color));
--fc-event-border-color: hsl(var(--accent-color)); --fc-event-border-color: hsl(var(--accent-color));
--fc-event-text-color: hsl(0 0% 98%); --fc-event-text-color: hsl(0 0% 98%);
--fc-page-bg-color: hsl(0 0% 3.9%); --fc-page-bg-color: transparent;
--fc-neutral-bg-color: hsl(0 0% 8%); --fc-neutral-bg-color: hsl(0 0% 8% / 0.65);
--fc-neutral-text-color: hsl(0 0% 98%); --fc-neutral-text-color: hsl(0 0% 98%);
--fc-list-event-hover-bg-color: hsl(0 0% 10%); --fc-list-event-hover-bg-color: hsl(0 0% 10%);
--fc-today-bg-color: hsl(var(--accent-color) / 0.08); --fc-today-bg-color: hsl(var(--accent-color) / 0.08);
@ -144,7 +144,7 @@
} }
.fc .fc-col-header-cell { .fc .fc-col-header-cell {
background-color: hsl(0 0% 8%); background-color: hsl(0 0% 8% / 0.65);
border-color: var(--fc-border-color); border-color: var(--fc-border-color);
} }
@ -195,7 +195,9 @@
/* ── FullCalendar "+more" popover fixes ── */ /* ── FullCalendar "+more" popover fixes ── */
.fc .fc-more-popover { .fc .fc-more-popover {
background-color: hsl(0 0% 8%); background-color: hsl(0 0% 8% / 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-color: hsl(0 0% 14.9%); border-color: hsl(0 0% 14.9%);
border-radius: 0.5rem; border-radius: 0.5rem;
min-width: 220px; min-width: 220px;
@ -203,7 +205,7 @@
} }
.fc .fc-more-popover .fc-popover-header { .fc .fc-more-popover .fc-popover-header {
background-color: hsl(0 0% 11%); background-color: hsl(0 0% 11% / 0.8);
color: hsl(0 0% 98%); color: hsl(0 0% 98%);
padding: 8px 12px; padding: 8px 12px;
border-radius: 0.5rem 0.5rem 0 0; border-radius: 0.5rem 0.5rem 0 0;