From 217d6672408be55ada4fc72f9fa9888d69e5733e Mon Sep 17 00:00:00 2001
From: bmFtZQ <62812711+bmFtZQ@users.noreply.github.com>
Date: Sat, 8 May 2021 19:18:38 +0800
Subject: [PATCH] fix offset refresh button with Proton

---
 chrome/navbar/navbar.css | 49 +++++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/chrome/navbar/navbar.css b/chrome/navbar/navbar.css
index f065892..77c1d7c 100644
--- a/chrome/navbar/navbar.css
+++ b/chrome/navbar/navbar.css
@@ -105,30 +105,37 @@ panel .toolbarbutton-badge:not(.feature-callout) {
   padding-inline: 2px;
 }
 
-/* fix animation with the new Firefox icons (Firefox: 89 or higher) */
-@keyframes reload-stop-animation {
-  from { transform: translateX(0); }
-  to { transform: translateX(-450px); }
-}
-
-#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
-#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
-  animation-name: reload-stop-animation !important;
-}
-
-#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
-  animation-timing-function: steps(25) !important;
-  animation-duration: 417ms !important;
-}
-
-#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
-  animation-timing-function: steps(25) !important;
-  animation-duration: 417ms !important;
-}
-
 #reload-button>.toolbarbutton-animatable-box,
 #stop-button>.toolbarbutton-animatable-box,
 #nav-bar-overflow-button>.toolbarbutton-animatable-box {
   margin-inline-start: calc((16px + 2 * 12px - 18px) / 2) !important;
   width: 18px !important;
 }
+
+@media (-moz-proton) {
+  /* fix animation with the new Firefox icons (Firefox: 89 or higher) */
+  @keyframes reload-stop-animation {
+    from { transform: translateX(0); }
+    to { transform: translateX(-450px); }
+  }
+
+  #stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
+  #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+    animation-name: reload-stop-animation !important;
+  }
+
+  #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+    animation-timing-function: steps(25) !important;
+    animation-duration: 417ms !important;
+  }
+
+  #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+    animation-timing-function: steps(25) !important;
+    animation-duration: 417ms !important;
+  }
+
+  :where(#reload-button, #stop-button) > .toolbarbutton-icon,
+  :where(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
+    translate: 0 !important;
+  }
+}