@zvoove/unity-ui 2.46.0 → 2.47.0

package/dist/theme.css

@@ -520,6 +520,19 @@
       transform: scale(1);
     }
   }
+
+  @keyframes ai-gradient-move {
+    0% {
+      background-position:
+        0% 0%,
+        0% 50%;
+    }
+    100% {
+      background-position:
+        0% 0%,
+        200% 50%;
+    }
+  }
 }
 
 @layer base {
@@ -753,6 +766,38 @@
     animation: indeterminate 2s ease-in-out infinite;
   }
 
+  /*
+   * Moving multi-color gradient ring for an "AI is working" affordance.
+   * Classic two-background border trick: an inner solid layer clipped to
+   * padding-box (the fill) sits on top of a gradient layer clipped to
+   * border-box (the ring) — pair with a transparent border of the desired
+   * width. The gradient repeats its first color at the end and animates
+   * exactly one pattern-width, so the loop has no visible seam.
+   */
+  .ai-gradient-border {
+    background-image:
+      linear-gradient(var(--color-surface), var(--color-surface)),
+      linear-gradient(
+        90deg,
+        var(--color-primary),
+        var(--color-tertiary),
+        var(--color-pink),
+        var(--color-secondary),
+        var(--color-steel-blue),
+        var(--color-primary)
+      );
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+    background-size:
+      100% 100%,
+      300% 100%;
+    animation: ai-gradient-move 6s linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
   .animate-circular-indeterminate {
     animation: circular-indeterminate 1.2s ease-in-out infinite;
   }