fix(ui): implement shimmer animation for GroundednessBadge (#17)

Reviewed-on: #17 Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Co-committed-by: Marek Jasiński <jasins.marek@gmail.com>
2026-05-07 17:17:52 +00:00
parent 2248a2b757
commit 140cf270cc
2 changed files with 49 additions and 32 deletions
@@ -0,0 +1,49 @@
+.groundedness-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.groundedness-badge.status-high {
+    color: var(--nexus-neon);
+    border-color: var(--nexus-neon);
+}
+
+.groundedness-badge.status-medium {
+    color: #ffaa00;
+    border-color: #ffaa00;
+}
+
+.groundedness-badge.status-low {
+    color: #ff4444;
+    border-color: #ff4444;
+}
+
+.shimmer {
+    background: linear-gradient(
+        120deg, 
+        rgba(255, 255, 255, 0) 30%, 
+        rgba(255, 255, 255, 0.3) 50%, 
+        rgba(255, 255, 255, 0) 70%
+    );
+    background-size: 200% 100%;
+    animation: shimmer-move 2s infinite linear;
+    display: inline-block;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+@keyframes shimmer-move {
+    0% {
+        background-position: 100% 0;
+    }
+    100% {
+        background-position: -100% 0;
+    }
+}