LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transparent event bars.

Browse Source
This commit is contained in:
Leo Vasanko
2025-09-23 11:52:39 -06:00
parent 7816ccd196
commit 151566ba22
2 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/assets/colors.css
View File

@@ -35,6 +35,9 @@
/* Vue component color mappings */ /* Vue component color mappings */
--bg: var(--panel); --bg: var(--panel);
--border-color: #ddd; --border-color: #ddd;
/* Event transparency */
--event-alpha: 0.7;
} }
/* Month tints (light) */ /* Month tints (light) */
@@ -77,28 +80,28 @@
/* Light mode — gray shades and colors */ /* Light mode — gray shades and colors */
.event-color-0 { .event-color-0 {
background: hsl(0, 0%, 85%); background: hsla(0, 0%, 85%, var(--event-alpha));
} /* lightest grey */ } /* lightest grey */
.event-color-1 { .event-color-1 {
background: hsl(0, 0%, 75%); background: hsla(0, 0%, 75%, var(--event-alpha));
} /* light grey */ } /* light grey */
.event-color-2 { .event-color-2 {
background: hsl(0, 0%, 65%); background: hsla(0, 0%, 65%, var(--event-alpha));
} /* medium grey */ } /* medium grey */
.event-color-3 { .event-color-3 {
background: hsl(0, 0%, 55%); background: hsla(0, 0%, 55%, var(--event-alpha));
} /* dark grey */ } /* dark grey */
.event-color-4 { .event-color-4 {
background: hsl(0, 70%, 70%); background: hsla(0, 70%, 70%, var(--event-alpha));
} /* red */ } /* red */
.event-color-5 { .event-color-5 {
background: hsl(90, 70%, 70%); background: hsla(90, 70%, 70%, var(--event-alpha));
} /* green */ } /* green */
.event-color-6 { .event-color-6 {
background: hsl(230, 70%, 70%); background: hsla(230, 70%, 70%, var(--event-alpha));
} /* blue */ } /* blue */
.event-color-7 { .event-color-7 {
background: hsl(280, 70%, 70%); background: hsla(280, 70%, 70%, var(--event-alpha));
} /* purple */ } /* purple */
/* Color tokens (dark) */ /* Color tokens (dark) */
@@ -178,27 +181,27 @@
} }
.event-color-0 { .event-color-0 {
background: hsl(0, 0%, 50%); background: hsla(0, 0%, 50%, var(--event-alpha));
} /* lightest grey */ } /* lightest grey */
.event-color-1 { .event-color-1 {
background: hsl(0, 0%, 40%); background: hsla(0, 0%, 40%, var(--event-alpha));
} /* light grey */ } /* light grey */
.event-color-2 { .event-color-2 {
background: hsl(0, 0%, 30%); background: hsla(0, 0%, 30%, var(--event-alpha));
} /* medium grey */ } /* medium grey */
.event-color-3 { .event-color-3 {
background: hsl(0, 0%, 20%); background: hsla(0, 0%, 20%, var(--event-alpha));
} /* dark grey */ } /* dark grey */
.event-color-4 { .event-color-4 {
background: hsl(0, 70%, 40%); background: hsla(0, 70%, 40%, var(--event-alpha));
} /* red */ } /* red */
.event-color-5 { .event-color-5 {
background: hsl(90, 70%, 30%); background: hsla(90, 70%, 30%, var(--event-alpha));
} /* green - darker for perceptional purposes */ } /* green - darker for perceptional purposes */
.event-color-6 { .event-color-6 {
background: hsl(230, 70%, 40%); background: hsla(230, 70%, 40%, var(--event-alpha));
} /* blue */ } /* blue */
.event-color-7 { .event-color-7 {
background: hsl(280, 70%, 40%); background: hsla(280, 70%, 40%, var(--event-alpha));
} /* purple */ } /* purple */
} }

4
src/components/EventOverlay.vue
View File

@@ -563,10 +563,10 @@ function applyRangeDuringDrag(st, startDate, endDate) {
align-items: center; align-items: center;
position: relative; position: relative;
user-select: none; user-select: none;
z-index: 1; z-index: 10;
text-align: center; text-align: center;
/* Ensure touch pointer events aren't turned into a scroll gesture; needed for reliable drag on mobile */
touch-action: none; touch-action: none;
backdrop-filter: blur(.05rem);
} }
.event-span.cont-prev { .event-span.cont-prev {