From 8290a50c2ef3f7bb9d211b141d93fff14d602500 Mon Sep 17 00:00:00 2001
From: eclipse <eclipse@unterdemradar.de>
Date: Tue, 2 Sep 2025 20:37:07 +0200
Subject: [PATCH] improved display of event color-codes

---
 theme/static/css/custom.css | 53 ++++++++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/theme/static/css/custom.css b/theme/static/css/custom.css
index c668b31..77d7e7a 100644
--- a/theme/static/css/custom.css
+++ b/theme/static/css/custom.css
@@ -387,9 +387,6 @@ article form {
   50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
 }
 
-.events .tr-muted {
-  color: var(--pico-muted-color);
-}
 
 #events-legend {
   width: 100%;
@@ -397,28 +394,46 @@ article form {
   justify-content: center;
 }
 
-span.babelsberger-lesesalon, .babelsberger-lesesalon .event-info {
-  background-color: var(--tr-events-color-bls);
-}
-
-span.andere-welten, .andere-welten .event-info {
-  background-color: var(--tr-events-color-paw);
-}
-
 /* event list */
-.event-info {
-  vertical-align: top;
-  max-width: 240px;
+.events {
+  .tr-muted {
+    color: var(--pico-muted-color);
+  }
+
+  tr {
+    background: linear-gradient(100deg, color-mix(in srgb, var(--pico-background-color) 90%, white), 25%, var(--pico-background-color));
+
+    td {
+      background: unset;
+      border-bottom: none;
+    }
+  }
+
+  tr.babelsberger-lesesalon {
+    background: linear-gradient(100deg, var(--tr-events-color-bls), 25%, var(--pico-background-color));
+  }
+
+  tr.andere-welten {
+    background: linear-gradient(100deg, var(--tr-events-color-paw), 25%, var(--pico-background-color));
+  }
+
+  .event-info {
+    vertical-align: top;
+    max-width: 240px;
+  }
+
 }
 
 #content-body .event-detail {
+  height: 100%;
   vertical-align: top;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: stretch;
   gap: var(--pico-block-spacing-horizontal);
 
+
   img.event-flyer {
     max-height: calc(var(--tr-card-height) * .666);
     max-width: calc(var(--tr-smallest-width) * .666);
@@ -426,6 +441,14 @@ span.andere-welten, .andere-welten .event-info {
   }
 }
 
+span.babelsberger-lesesalon {
+  background: linear-gradient(100deg, color-mix(in srgb, var(--tr-events-color-bls) 75%, transparent), 75%, var(--pico-background-color));
+}
+
+span.andere-welten {
+  background: linear-gradient(100deg, color-mix(in srgb, var(--tr-events-color-paw) 75%, transparent), 75%, var(--pico-background-color));
+}
+
 
 /* flex settings for layout of cards */
 .cards {