feat: show call participants in room list (Discord-style)

apps/web/res/css/_animations.pcss

@@ -0,0 +1,82 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * React Transition Group animations are prefixed with 'mx_rtg--' so that we
+ * know they should not be used anywhere outside of React Transition Groups.
+*/
+
+.mx_rtg--fade-enter {
+    opacity: 0;
+}
+.mx_rtg--fade-enter-active {
+    opacity: 1;
+    transition: opacity 300ms ease;
+}
+.mx_rtg--fade-exit {
+    opacity: 1;
+}
+.mx_rtg--fade-exit-active {
+    opacity: 0;
+    transition: opacity 300ms ease;
+}
+
+:root {
+    --hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
+}
+
+@keyframes mx--anim-pulse {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes mx_Dialog_lightbox_background_keyframes {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: $lightbox-background-bg-opacity;
+    }
+}
+
+@keyframes mx_ImageView_panel_keyframes {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@media (prefers-reduced-motion) {
+    @keyframes mx--anim-pulse {
+        /* Override all keyframes in reduced-motion */
+    }
+
+    @keyframes mx_Dialog_lightbox_background_keyframes {
+        /* Override all keyframes in reduced-motion */
+    }
+
+    @keyframes mx_ImageView_panel_keyframes {
+        /* Override all keyframes in reduced-motion */
+    }
+
+    .mx_rtg--fade-enter-active {
+        transition: none;
+    }
+    .mx_rtg--fade-exit-active {
+        transition: none;
+    }
+}