feat: animate the UDT border gradient on the cards

1 files changed, 29 insertions, 1 deletions

diff --git a/static/deck.css b/static/deck.css
index 8b2416c..e200507 100644
--- a/static/deck.css
+++ b/static/deck.css
@@ -42,6 +42,12 @@ body {
 
 .panel { min-height: 0; min-width: 0; }
 
+@property --border-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
 .grid-stack-item-content.panel {
   position: absolute;
   display: flex;
@@ -50,10 +56,32 @@ body {
   overflow: hidden;
   border-radius: 16px;
   background: var(--udt-surface0);
-  border: 1px solid var(--udt-surface1);
+  border: 1px solid transparent;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
 }
 
+/* The same rotating three-hue gradient Hyprland draws on window borders,
+   read from ~/.cache/udt/udt-border.lua via /theme.css. */
+.grid-stack-item-content.panel::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: linear-gradient(var(--border-angle),
+    var(--udt-border-1), var(--udt-border-2), var(--udt-border-3), var(--udt-border-1));
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  animation: border-rotate 8s linear infinite;
+}
+
+@keyframes border-rotate {
+  to { --border-angle: 360deg; }
+}
+
 .panel-head {
   flex: none;
   display: flex;