FC applies its own weekend background to header <th> elements too.
Force weekend header cells to use the same hsl(0 0% 8% / 0.65) as
weekday headers with !important to override FC's built-in styling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
After 10+ attempts, semi-transparent HSL values on near-black backgrounds
produce visible teal artifacts in Firefox due to compositor divergence.
Weekday/weekend frames now use identical --fc-neutral-bg-color. FC's own
weekend td background is neutralised with transparent !important.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
hsl(0 0% 10% / 0.65) was visibly too bright vs weekday hsl(0 0% 8% / 0.65)
in Firefox. Reduced to hsl(0 0% 9% / 0.65) — 1% bump, subtle but present.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Firefox composites rgba(255,255,255,0.05) differently against the
fc-daygrid-day-frame's --fc-neutral-bg-color background, producing a
visible mismatch. Switched to absolute HSL values that match the base
pattern:
- Month frame: hsl(0 0% 10% / 0.65) — same alpha as neutral-bg but
slightly lighter (10% vs 8% lightness)
- Timegrid cols: hsl(0 0% 5.5%) — slightly above page bg (3.9%)
Cross-browser consistent since no alpha compositing is needed.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Header mismatch: Removed weekend tint from column headers — the white
overlay replaced the standard header bg (hsl 0 0% 8% / 0.65), creating
a non-flush look. Weekend differentiation now comes from body cells only.
Date format: dayHeaderFormat was applied globally, causing month view
headers to show dates like "Sat 10/1" instead of just "Sat". Moved to
per-view formats: month shows weekday only, week shows weekday + d/m,
day shows full weekday + day + month name.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
autoprefixer was silently stripping color-mix() during the PostCSS
build pipeline, causing the weekend tint background rules to produce
no output in the deployed CSS bundle. Replaced the three weekend
tint color-mix() calls with equivalent rgba(255,255,255,0.05) which
autoprefixer passes through unchanged.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
Both the <td> and its child fc-daygrid-day-frame had the 3% white overlay,
causing the frame area to compound to ~6% while td edges stayed at 3%.
This created an uneven "not flush" pattern. The td rule alone is sufficient.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
RCA finding: grayscale tints are imperceptible on near-black (#0a0a0a)
backgrounds. Deltas of 3-5 RGB units fall below human JND threshold
and OLED panels can clip them to identical output via gamma compression.
Changed from hsl(0 0% 5%) to hsl(0 0% 100% / 0.03) — a semi-transparent
white overlay that composites additively for visible contrast.
See .claude/context/RCA/rca-calendarbg.md for full investigation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Weekend bg raised from hsl(0 0% 2%) to hsl(0 0% 5%) across all 4 rules
(day cells, col headers, timegrid cols, daygrid-day-frame) so the tint is
visually distinct against the #0a0a0a page background
- Reduced .fc-daygrid-event-dot margin from default 4px each side to
0 2px 0 0 on umbra dot events, tightening the gap between dot and title
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
- index.css: add explicit .fc-col-header-cell.fc-day-sat/sun rules with
!important to override the generic header background, and cover
.fc-timegrid-col weekend cells so the tint reaches all views
- CalendarPage.tsx: render .fc-daygrid-event-dot manually in the timed
month-view eventContent branch — FC's eventContent hook replaces the
entire default inner content including the dot span, so the CSS target
had nothing to paint
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Month timed events: dot + title only, hover reveals translucent card
- Month all-day events: keep translucent fill
- Time right-aligned in month view (ml-auto)
- Week/day view: title on top, time underneath for better scanning
- Remove 2px left accent border from all events
- Set color:'transparent' on FC event data to prevent inline style conflicts
- Recurring repeat icon preserved in all views
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Browser paints cached Vite CSS (@layer base cyan defaults) before the
inline script populates the static style tag. Remove the competing
cyan defaults — accent vars now come exclusively from the static
<style id="umbra-accent"> tag in index.html, which the inline script
always populates with the correct color before first paint.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The inline script's style.setProperty values on <html> were being
stripped during Vite's CSS injection. Switch to injecting a <style>
tag with :root vars which persists in the DOM. Restore CSS defaults
as safety fallback. Update useTheme to sync both the style tag and
inline styles when settings load.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Guard useTheme effect to skip when settings are undefined, preventing
it from overwriting the inline script's cached color with cyan defaults.
Move CSS accent var defaults from index.css :root into the index.html
inline script so they are always set synchronously before paint.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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>
- Moved ambient from DashboardPage to AppLayout so all pages get the
drifting gradient effect, not just the dashboard
- Lightened card colors: --card 5% → 8%, --card-elevated 7% → 11%,
popover and FullCalendar backgrounds updated to match
- Renamed DashboardAmbient → AmbientBackground in layout/
- Glassmorphism class renamed dashboard-glass → ambient-glass,
applied at AppLayout content wrapper level
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Orbs repositioned centrally with larger ellipses (90%/80%) and higher
opacity (0.45/0.35) so glow is visible through glassmorphism cards
- Vignette reduced from 0.45 to 0.30, transparent zone expanded to 50%
- Card opacity reduced from 0.80 to 0.65 to let more ambient bleed through
- Added overflow-hidden on ambient container to prevent black bar artifacts
during drift animations
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Blurred circle approach was invisible on near-black backgrounds.
Use radial-gradient orbs at 25%/15% opacity instead, with semi-transparent
cards (backdrop-filter: blur) so the ambient effect shows through.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Negative z-index (-z-10) placed orbs behind the body's opaque background,
making them invisible. Moved all ambient layers (orbs, noise texture,
vignette) into the DashboardAmbient component as absolute-positioned
children at z-0, with content at z-10. Boosted orb opacities to 12%/7%
for perceptible effect. Removed CSS pseudo-element approach in favor of
inline React elements for better stacking control.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three layered effects to make the dashboard feel alive:
1. DashboardAmbient: two accent-colored drifting orbs at very low opacity
(0.04/0.025) with 120px blur — subtle depth and movement
2. Noise texture + radial vignette via CSS pseudo-elements — breaks the
flat digital surface and draws focus to center content
3. Card breathe animation: data-driven 4s pulsing glow on CalendarWidget
(when event in progress) and TodoWidget (when overdue todos exist)
All effects respect prefers-reduced-motion, use accent CSS vars (works
with any user-chosen accent color), and are GPU-composited (transform +
opacity only) for negligible performance cost.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- S-01/W-06/S-02/S-04: Extract MobileDetailOverlay shared component
with Escape key, body scroll lock, and ARIA dialog attributes.
Refactored Todos, Reminders, People, Locations, ProjectDetail.
- W-02: Add specificity contract comment to mobile-scale CSS
- W-03: Enforce 10px floor for text-[9px] on mobile
- W-05: Add sort dropdown to EntityTable mobile card view
- S-03: Export MOBILE/DESKTOP breakpoint constants from useMediaQuery,
updated all 8 consumer files to use constants
- S-06: Bump KanbanBoard TouchSensor tolerance from 5 to 8
- S-07: Hover state audit — no action needed, hoverOnlyWhenSupported
in Tailwind config already handles touch devices correctly
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace CSS-only panel hiding with isDesktop media query guard
in Todos, Reminders, People, Locations, ProjectDetail (W-01)
- Add touch-action: manipulation for mobile interactive elements (W-04)
- Bump FullCalendar more-link from 0.55rem to 0.625rem (W-07)
- Add aria-label on admin portal tab NavLinks (S-05)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add dark-themed FullCalendar "+more" popover with CSS X close button
(replaces broken font icon). Add pr-8 to all mobile Select dropdowns
to prevent text clipping under chevron. Normalize header gap to
gap-2 md:gap-4 across all page headers for tighter mobile layout.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Scale down all content text on mobile via .mobile-scale CSS class (excludes
navbar/UMBRA title). Hide calendar event times in month view (Google Calendar
style). Restructure CategoryFilterBar so categories display on a separate row
when toggled instead of being hidden behind the search bar. Reduce dashboard
widget density with hidden badges and tighter spacing on small screens.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Page titles: text-xl on mobile, text-2xl on desktop (7 pages)
- Stat cards: reduce padding/gap on mobile, hide icons below sm (3 pages)
- TodoItem: two-line layout on mobile (title row + metadata row)
- ReminderItem: same two-line treatment
- FullCalendar: smaller event font/padding on mobile via CSS media query
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@-moz-document url-prefix() was dead since Firefox 61 and
-moz-appearance: textfield has no effect on date inputs.
Firefox has no CSS pseudo-element for the date picker icon.
Fix: custom Calendar button resized to a full-height w-9 panel
with bg-background + rounded-r-md that completely occludes
Firefox's native icon underneath. Chromium still uses
::-webkit-calendar-picker-indicator to remove its native icon.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The opaque background overlay approach didn't fully cover Firefox's
native icon. Instead, use @-moz-document url-prefix() to apply
-moz-appearance: textfield which strips all native date input chrome
(including the calendar icon) in Firefox. Safe because the DatePicker
provides its own custom popup. Removed the bg-background z-[1]
workaround from the custom button.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Chromium's icon is hidden via ::-webkit-calendar-picker-indicator.
Firefox doesn't support that pseudo-element, so the custom Calendar
button now has bg-background + z-[1] to opaquely cover Firefox's
native icon. Removed invalid -moz pseudo-element rules.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replaces <input type="text"> with custom display format conversion
with native <input type="date"> / <input type="datetime-local"> for
exact visual parity with Chrome's built-in segmented editing UI.
Removes ~50 lines of isoToDisplay/displayToIso conversion code.
Hides native picker icon inside .datepicker-wrapper via CSS so only
the custom Calendar icon (opening the popup) is visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Custom date-picker.tsx with date/datetime modes, portal popup with
month/year dropdowns, min/max constraints, and hidden input for form
validation. Replaces all 10 native <input type="date"> and
<input type="datetime-local"> across LockScreen, SettingsPage,
PersonForm, TodoForm, TodoDetailPanel, TaskForm, TaskDetailPanel,
ProjectForm, ReminderForm, and ReminderDetailPanel. Adds Chromium
calendar icon invert CSS fallback.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove instant invalid:ring/border from Input component (was showing
red outline on empty required fields before any interaction)
- Add CSS rule: form[data-submitted] input:invalid shows red border
- Add global submit listener in main.tsx that sets data-submitted on forms
- Add required prop to Labels missing asterisks: PersonForm (First Name),
LocationForm (Location Name), CalendarForm (Name), LockScreen
(Username, Password, Confirm Password)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Custom toolbar replacing FullCalendar defaults (nav, today, view switcher)
- Calendar sidebar with visibility toggles, color dots, add/edit support
- CalendarForm dialog for creating/editing calendars with color swatches
- EventForm updated to use calendar dropdown instead of color picker
- CSS overrides: accent-tinted today highlight, now indicator, rounded event pills
- Types updated for Calendar interface and mixed id types
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
