Add tracker health badges for magnets

css/style.css

@@ -74,6 +74,44 @@ header img {
   box-shadow: var(--shadow-md);
 }
 
+.video-card .stream-health {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  font-size: 1.1rem;
+  line-height: 1;
+  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
+}
+
+.video-card .stream-health[data-stream-health-state="good"] {
+  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
+}
+
+.video-card .stream-health[data-stream-health-state="none"] {
+  opacity: 0.85;
+}
+
+.video-card .stream-health[data-stream-health-state="noresp"],
+.video-card .stream-health[data-stream-health-state="unknown"] {
+  opacity: 0.6;
+}
+
+.video-card .stream-health[data-stream-health-state="checking"] {
+  animation: stream-health-pulse 1.2s ease-in-out infinite alternate;
+}
+
+@keyframes stream-health-pulse {
+  from {
+    transform: scale(0.95);
+    opacity: 0.65;
+  }
+  to {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+}
+
 .video-card--enter {
   opacity: 0;
   animation: video-card-fade-in 220ms ease-out forwards;