From 151566ba22d29cbfce2d7dee53a0f0286358f7ee Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 23 Sep 2025 11:52:39 -0600
Subject: [PATCH] Transparent event bars.

---
 src/assets/colors.css           | 35 ++++++++++++++++++---------------
 src/components/EventOverlay.vue |  4 ++--
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/assets/colors.css b/src/assets/colors.css
index 00a28de..c96de02 100644
--- a/src/assets/colors.css
+++ b/src/assets/colors.css
@@ -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 */
 }
diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index 8287540..a49d64a 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -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 {