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

117
wwwroot/css/calendar-events-css.css
View file

@ -2,6 +2,8 @@
/* Event base styles */
swp-day-columns swp-event {
--b-text: var(--color-text);
position: absolute;
border-radius: 3px;
overflow: hidden;
@ -10,10 +12,14 @@ swp-day-columns swp-event {
z-index: 10;
left: 2px;
right: 2px;
color: var(--color-text);
font-size: 12px;
padding: 4px 6px;
/* Color system using color-mix() */
background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
color: var(--b-text);
border-left: 4px solid var(--b-primary);
/* Enable container queries for responsive layout */
container-type: size;
container-name: event;
@ -25,43 +31,6 @@ swp-day-columns swp-event {
gap: 2px 4px;
align-items: start;
/* Event types */
&[data-type="meeting"] {
background: var(--color-event-meeting);
border-left: 4px solid var(--color-event-meeting-border);
color: var(--color-text);
}
&[data-type="meal"] {
background: var(--color-event-meal);
border-left: 4px solid var(--color-event-meal-border);
color: var(--color-text);
}
&[data-type="work"] {
background: var(--color-event-work);
border-left: 4px solid var(--color-event-work-border);
color: var(--color-text);
}
&[data-type="milestone"] {
background: var(--color-event-milestone);
border-left: 4px solid var(--color-event-milestone-border);
color: var(--color-text);
}
&[data-type="personal"] {
background: var(--color-event-personal);
border-left: 4px solid var(--color-event-personal-border);
color: var(--color-text);
}
&[data-type="deadline"] {
background: var(--color-event-milestone);
border-left: 4px solid var(--color-event-milestone-border);
color: var(--color-text);
}
/* Dragging state */
&.dragging {
position: absolute;
@ -72,31 +41,10 @@ swp-day-columns swp-event {
width: auto;
}
/* Hover state - highlight colors */
&:hover[data-type="meeting"] {
background: var(--color-event-meeting-hl);
/* Hover state */
&:hover {
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
}
&:hover[data-type="meal"] {
background: var(--color-event-meal-hl);
}
&:hover[data-type="work"] {
background: var(--color-event-work-hl);
}
&:hover[data-type="milestone"] {
background: var(--color-event-milestone-hl);
}
&:hover[data-type="personal"] {
background: var(--color-event-personal-hl);
}
&:hover[data-type="deadline"] {
background: var(--color-event-milestone-hl);
}
}
swp-day-columns swp-event:hover {
@ -218,10 +166,14 @@ swp-multi-day-event {
white-space: nowrap;
text-overflow: ellipsis;
/* Event type colors */
&[data-type="milestone"] {
background: var(--color-event-milestone);
color: var(--color-event-milestone-border);
/* 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);
&:hover {
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
}
/* Continuation indicators */
@ -259,6 +211,19 @@ swp-multi-day-event {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* All-day events */
swp-allday-event {
--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);
cursor: pointer;
transition: background-color 200ms ease;
&:hover {
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
}
}
}
/* Event creation preview */
@ -351,3 +316,23 @@ swp-event-group swp-event {
swp-allday-container swp-event.transitioning {
transition: grid-area 200ms ease-out, grid-row 200ms ease-out, grid-column 200ms ease-out;
}
/* Color utility classes */
.is-red { --b-primary: var(--b-color-red); }
.is-pink { --b-primary: var(--b-color-pink); }
.is-magenta { --b-primary: var(--b-color-magenta); }
.is-purple { --b-primary: var(--b-color-purple); }
.is-violet { --b-primary: var(--b-color-violet); }
.is-deep-purple { --b-primary: var(--b-color-deep-purple); }
.is-indigo { --b-primary: var(--b-color-indigo); }
.is-blue { --b-primary: var(--b-color-blue); }
.is-light-blue { --b-primary: var(--b-color-light-blue); }
.is-cyan { --b-primary: var(--b-color-cyan); }
.is-teal { --b-primary: var(--b-color-teal); }
.is-green { --b-primary: var(--b-color-green); }
.is-light-green { --b-primary: var(--b-color-light-green); }
.is-lime { --b-primary: var(--b-color-lime); }
.is-yellow { --b-primary: var(--b-color-yellow); }
.is-amber { --b-primary: var(--b-color-amber); }
.is-orange { --b-primary: var(--b-color-orange); }
.is-deep-orange { --b-primary: var(--b-color-deep-orange); }