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

61
wwwroot/css/src/calendar-layout-css.css
View file

@ -322,67 +322,20 @@ swp-allday-container {
font-size: 0.75rem;
border-radius: 3px;
/* Event type colors - normal state */
&[data-type="meeting"] {
background: var(--color-event-meeting);
color: var(--color-text);
}
&[data-type="meal"] {
background: var(--color-event-meal);
color: var(--color-text);
}
&[data-type="work"] {
background: var(--color-event-work);
color: var(--color-text);
}
&[data-type="milestone"] {
background: var(--color-event-milestone);
color: var(--color-text);
}
&[data-type="personal"] {
background: var(--color-event-personal);
color: var(--color-text);
}
&[data-type="deadline"] {
background: var(--color-event-milestone);
color: var(--color-text);
}
/* Color system using color-mix() */
--b-text: var(--color-text);
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
color: var(--b-text);
border-left: 4px solid var(--b-primary);
/* Dragging state */
&.dragging {
opacity: 1;
}
/* Highlight state for all event types */
/* Highlight state */
&.highlight {
&[data-type="meeting"] {
background: var(--color-event-meeting-hl) !important;
}
&[data-type="meal"] {
background: var(--color-event-meal-hl) !important;
}
&[data-type="work"] {
background: var(--color-event-work-hl) !important;
}
&[data-type="milestone"] {
background: var(--color-event-milestone-hl) !important;
}
&[data-type="personal"] {
background: var(--color-event-personal-hl) !important;
}
&[data-type="deadline"] {
background: var(--color-event-milestone-hl) !important;
}
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix)) !important;
}
/* Overflow indicator styling */