Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhances event color styling with flexible metadata system

Browse source 
Introduces a new color customization approach for calendar events using CSS custom properties and metadata

- Adds support for dynamic color assignment via event metadata
- Implements a flexible color utility class system
- Replaces hardcoded event type colors with a more generic color-mix() approach
- Provides broader color palette for event styling
This commit is contained in:
Janus C. H. Knudsen 2025-11-25 23:48:30 +01:00
parent d8b9f6dabd
commit be551f88e5
7 changed files with 269 additions and 4135 deletions
Download patch file Download diff file Expand all files Collapse all files

38
wwwroot/css/calendar-base-css.css
View file

@ -41,22 +41,28 @@
--color-work-hours: rgba(255, 255, 255, 0.9);
--color-current-time: #ff0000;
/* Event colors - Updated with month-view-expanded.html color scheme */
--color-event-meeting: #e8f5e8;
--color-event-meeting-border: #4caf50;
--color-event-meeting-hl: #c8e6c9;
--color-event-meal: #fff8e1;
--color-event-meal-border: #ff9800;
--color-event-meal-hl: #ffe0b2;
--color-event-work: #fff8e1;
--color-event-work-border: #ff9800;
--color-event-work-hl: #ffe0b2;
--color-event-milestone: #ffebee;
--color-event-milestone-border: #f44336;
--color-event-milestone-hl: #ffcdd2;
--color-event-personal: #f3e5f5;
--color-event-personal-border: #9c27b0;
--color-event-personal-hl: #e1bee7;
/* Named color palette for events */
--b-color-red: #e53935;
--b-color-pink: #d81b60;
--b-color-magenta: #c200c2;
--b-color-purple: #8e24aa;
--b-color-violet: #5e35b1;
--b-color-deep-purple: #4527a0;
--b-color-indigo: #3949ab;
--b-color-blue: #1e88e5;
--b-color-light-blue: #03a9f4;
--b-color-cyan: #3bc9db;
--b-color-teal: #00897b;
--b-color-green: #43a047;
--b-color-light-green: #8bc34a;
--b-color-lime: #c0ca33;
--b-color-yellow: #fdd835;
--b-color-amber: #ffb300;
--b-color-orange: #fb8c00;
--b-color-deep-orange: #f4511e;
/* Base mix for color-mix() function */
--b-mix: #fff;
/* UI colors */
--color-background: #ffffff;