Add micro-interactions and transitions for page and table elements

Wrap page content in a new div for animation effects and implement fade-in transitions for table rows.
2025-12-27 10:35:40 -05:00
parent 872a1cae64
commit cb362d6754
3 changed files with 24 additions and 3 deletions
@@ -68,4 +68,23 @@

 .icon-button-hover-error:hover {
    color: var(--mud-palette-error) !important;
+}
+
+/* Micro-interactions: Table row transitions */
+.mud-table-row {
+    transition: background-color 0.2s ease;
+}
+
+/* Micro-interactions: Page transitions */
+.page-enter {
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }