From aac098900581b99ea0a53b510621e7cbd8f00388 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 2 Jul 2021 14:58:59 +0100
Subject: [PATCH] Make beta dot animation run on the compositor

---
 res/css/views/beta/_BetaCard.scss | 32 ++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss
index 1a8241b65f..218c3dc3b2 100644
--- a/res/css/views/beta/_BetaCard.scss
+++ b/res/css/views/beta/_BetaCard.scss
@@ -113,21 +113,47 @@ $dot-size: 12px;
     box-shadow: 0 0 0 0 rgba($pulse-color, 1);
     animation: mx_Beta_bluePulse 2s infinite;
     animation-iteration-count: 20;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        transform: scale(1);
+        transform-origin: center center;
+        animation-name: mx_Beta_bluePulse_shadow;
+        animation-duration: inherit;
+        animation-iteration-count: inherit;
+        border-radius: 50%;
+        background: rgba($pulse-color, 1);
+    }
 }
 
 @keyframes mx_Beta_bluePulse {
     0% {
         transform: scale(0.95);
-        box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
     }
 
     70% {
         transform: scale(1);
-        box-shadow: 0 0 0 10px rgba($pulse-color, 0);
     }
 
     100% {
         transform: scale(0.95);
-        box-shadow: 0 0 0 0 rgba($pulse-color, 0);
+    }
+}
+
+@keyframes mx_Beta_bluePulse_shadow {
+    0% {
+        opacity: 0.7;
+    }
+
+    70% {
+        transform: scale(2.2);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
     }
 }