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

4
src/components/EventOverlay.vue
View File

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