Refactor sidebar panel animation in zen-sidebar-panel.inc.xhtml and z…

…en-styles/zen-animations.css
zen-browser · Oct 27, 2024 · ea871aa · ea871aa
1 parent be376ef
commit ea871aa
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 deletions.
diff --git a/src/browser/base/content/zen-styles/zen-sidebar-panels.css b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
@@ -192,6 +192,10 @@
 #zen-sidebar-web-panel-browser-containers {
   height: 100%;
   position: relative;
+
+  @media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
+    mix-blend-mode: multiply;
+  }
 }
 
 #zen-sidebar-introduction-panel {
@@ -237,3 +241,41 @@
   text-align: center;
   display: block;
 }
+
+#zen-sidebar-web-panel[pinned] {
+  --sideper: 4000px;
+  transform-origin: 50% 20%;
+}
+
+#zen-sidebar-web-panel[pinned]:not([hidden]) {
+  animation: better-sidebar-pinned-show 0.15s ease-in-out forwards !important;
+}
+
+#zen-sidebar-web-panel[pinned][hidden] {
+  animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
+}
+
+/** UNPINNED **/
+#zen-sidebar-web-panel {
+  --sideper: 4000px;
+  /* Sets perspective */
+  transform-origin: 50% 20%;
+}
+
+#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel * {
+  opacity: 0;
+  animation: better-sidebar-intro-show 0.5s 0.4s ease-out forwards !important;
+}
+
+#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel p {
+  animation: better-sidebar-intro-show 0.5s 0.8s ease-out forwards !important;
+}
+
+#zen-sidebar-web-panel:not([hidden]) {
+  animation: better-sidebar-show 0.15s ease-in-out forwards !important;
+}
+
+#zen-sidebar-web-panel[hidden] {
+  animation: better-sidebar-hide 0.15s ease-in-out forwards !important;
+}
+
diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css
@@ -73,41 +73,3 @@
 #toolbar-menubar {
   display: none !important;
 }
-
-#zen-sidebar-web-panel[pinned] {
-  --sideper: 4000px;
-  transform-origin: 50% 20%;
-}
-
-#zen-sidebar-web-panel[pinned]:not([hidden]) {
-  animation: better-sidebar-pinned-show 0.15s ease-in-out forwards !important;
-}
-
-#zen-sidebar-web-panel[pinned][hidden] {
-  animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
-}
-
-/** UNPINNED **/
-#zen-sidebar-web-panel {
-  --sideper: 4000px;
-  /* Sets perspective */
-  transform-origin: 50% 20%;
-}
-
-
-#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel * {
-  opacity: 0;
-  animation: better-sidebar-intro-show 0.5s 0.4s ease-out forwards !important;
-}
-
-#zen-sidebar-web-panel:not([hidden]) #zen-sidebar-introduction-panel p {
-  animation: better-sidebar-intro-show 0.5s 0.8s ease-out forwards !important;
-}
-
-#zen-sidebar-web-panel:not([hidden]) {
-  animation: better-sidebar-show 0.15s ease-in-out forwards !important;
-}
-
-#zen-sidebar-web-panel[hidden] {
-  animation: better-sidebar-hide 0.15s ease-in-out forwards !important;
-}