From d396c2a8c3326f2f924f9e7efd11be0a23b69837 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Fri, 24 Nov 2023 01:12:31 +0000
Subject: [PATCH] add subtle glow to CalendarDoor numbers

---
 ui/src/components/calendar/CalendarDoor.vue | 22 ++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/calendar/CalendarDoor.vue b/ui/src/components/calendar/CalendarDoor.vue
index cceb71e..6c6a11e 100644
--- a/ui/src/components/calendar/CalendarDoor.vue
+++ b/ui/src/components/calendar/CalendarDoor.vue
@@ -4,10 +4,30 @@
     :visible="store.is_touch_device || force_visible"
     :rectangle="door.position"
   >
-    <div class="has-text-danger">{{ door.day }}</div>
+    <div class="has-text-danger glow">{{ door.day }}</div>
   </SVGRect>
 </template>
 
+<style lang="scss" scoped>
+@import "@/bulma-scheme";
+
+.glow {
+  -webkit-animation: glow 2s ease-in-out infinite alternate;
+  -moz-animation: glow 2s ease-in-out infinite alternate;
+  animation: glow 2s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+  from {
+    text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px $primary,
+      0 0 40px $primary, 0 0 50px $primary, 0 0 60px $primary, 0 0 70px $primary;
+  }
+  to {
+    text-shadow: 0 0 10px white;
+  }
+}
+</style>
+
 <script lang="ts">
 import { Door } from "@/lib/door";
 import { advent22Store } from "@/plugins/store";