From a093ea6357ea9116f8650bc91532b8df970fbe2b Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Fri, 2 Jul 2021 15:23:03 +0100
Subject: [PATCH] Move RightPanel animation to compositor

---
 res/css/structures/_RightPanel.scss | 34 ++++++++++++++++++++++++++---
 res/css/views/beta/_BetaCard.scss   |  6 +++--
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 52a2a68b6a..3222fe936c 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -121,23 +121,51 @@ $pulse-color: $pinned-unread-color;
         box-shadow: 0 0 0 0 rgba($pulse-color, 1);
         animation: mx_RightPanel_indicator_pulse 2s infinite;
         animation-iteration-count: 1;
+
+        &::after {
+            content: "";
+            position: absolute;
+            width: inherit;
+            height: inherit;
+            top: 0;
+            left: 0;
+            transform: scale(1);
+            transform-origin: center center;
+            animation-name: mx_RightPanel_indicator_pulse_shadow;
+            animation-duration: inherit;
+            animation-iteration-count: inherit;
+            border-radius: 50%;
+            background: rgba($pulse-color, 1);
+        }
     }
 }
 
 @keyframes mx_RightPanel_indicator_pulse {
     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_RightPanel_indicator_pulse_shadow {
+    0% {
+        opacity: 0.7;
+    }
+
+    70% {
+        transform: scale(2.2);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
     }
 }
 
diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss
index 218c3dc3b2..2af4e79ecd 100644
--- a/res/css/views/beta/_BetaCard.scss
+++ b/res/css/views/beta/_BetaCard.scss
@@ -110,7 +110,6 @@ $dot-size: 12px;
     width: $dot-size;
     transform: scale(1);
     background: rgba($pulse-color, 1);
-    box-shadow: 0 0 0 0 rgba($pulse-color, 1);
     animation: mx_Beta_bluePulse 2s infinite;
     animation-iteration-count: 20;
     position: relative;
@@ -118,7 +117,10 @@ $dot-size: 12px;
     &::after {
         content: "";
         position: absolute;
-        inset: 0;
+        width: inherit;
+        height: inherit;
+        top: 0;
+        left: 0;
         transform: scale(1);
         transform-origin: center center;
         animation-name: mx_Beta_bluePulse_shadow;