Fix up Automatic Updates via Websocket | peer.directory

plugin-sites/peer.directory/www/css/style.css

@@ -355,7 +355,7 @@ th {
 
 tbody tr {
   border-top: 1px solid var(--border-color);
-  transition: background var(--transition-base);
+  transition: background var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
 }
 
 tbody tr:hover {
@@ -597,25 +597,80 @@ a:hover {
   background: var(--text-tertiary);
 }
 
+/* Smooth Update Animations */
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes highlightPulse {
+  0% {
+    background-color: rgba(99, 102, 241, 0.1);
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2);
+  }
+  50% {
+    background-color: rgba(99, 102, 241, 0.2);
+    box-shadow: 0 0 20px 5px rgba(99, 102, 241, 0.1);
+  }
+  100% {
+    background-color: inherit;
+    box-shadow: none;
+  }
+}
+
+tbody tr.fade-in {
+  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+tbody tr.fade-out {
+  animation: fadeOutDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+tbody tr.highlight {
+  animation: highlightPulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* Table container update animation */
+.table-container.updating {
+  transition: box-shadow var(--transition-slow);
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   .header {
     flex-direction: column;
     gap: var(--spacing-md);
   }
-  
+
   .header h1 {
     font-size: 1.5rem;
   }
-  
+
   .container {
     padding: var(--spacing-md);
   }
-  
+
   table {
     font-size: 0.875rem;
   }
-  
+
   th, td {
     padding: var(--spacing-sm);
   }