Merge 424a9d9c63 into 856819918b

themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css

@@ -0,0 +1,81 @@
+
+@keyframes bounce {
+    0% {
+      left: calc(-1 * var(--zen-sidebar-width));
+      opacity: 1;
+    }
+  
+    50% {
+      left: 0;
+    }
+  
+    100% {
+      left:-8px;
+    }
+  }
+  
+  @keyframes right-bounce {
+    0% {
+      right: calc(-1 * var(--zen-sidebar-width));
+      opacity: 1;
+    }
+  
+    50% {
+      right: 0;
+    }
+  
+    100% {
+      right: -14px;
+    }
+  }
+  
+  @keyframes fadeout {
+    0% {
+      left: -8px;
+      opacity: 1;
+    }
+  
+    100% {
+      left: calc(-1 * var(--zen-sidebar-width) + 5px);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeout-right {
+    0% {
+      right: -8px;
+      opacity: 1;
+    }
+  
+    100% {
+      right: calc(-1 * var(--zen-sidebar-width));
+      opacity: 1;
+    }
+  }
+  
+  @media (-moz-bool-pref: "zen.view.compact") {
+      #navigator-toolbox {
+        box-sizing: content-box !important;
+        animation: fadeout 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+        animation-fill-mode: forwards !important;
+        padding-left: 14px !important;
+  
+        @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
+          padding-left: 6px !important;
+          padding-right: 14px !important;
+         
+          animation: fadeout-right 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+          animation-fill-mode: forwards !important;
+        }
+  
+        &:is([zen-user-show], [zen-has-hover]), &:hover {
+          animation: bounce 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+          animation-fill-mode: forwards !important;
+  
+          @media (-moz-bool-pref: "zen.tabs.vertical.right-side") {
+            animation: right-bounce 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+            animation-fill-mode: forwards !important;
+          }
+        }
+      }
+    }

themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md

@@ -0,0 +1,10 @@
+
+# Compact Sidebar Micro-Animation
+
+Enhance the user experience of the [Zen Browser](https://zen-browser.app/) with a refined animation for the sidebar in compact mode. This mod introduces smooth, visually pleasing reveal and fadeout effects for the sidebar when hovered over.
+
+---
+
+Thumbnail
+
+![image](https://github.com/Nimit1705/Zen-sidebar-animation/blob/main/sidebar-animation-thumbnail.png?raw=tr

themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/theme.json

@@ -0,0 +1,14 @@
+{
+    "id": "f5de8fbe-1d14-4e73-a806-cecc8e2c6af7",
+    "name": "Sidebar animation",
+    "description": "Refines Zen's compact sidebar with smooth reveal and fadeout animation on hover.",
+    "homepage": "https://github.com/Nimit1705/Zen-sidebar-animation",
+    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css",
+    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md",
+    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/image.png",
+    "author": "Nimit1705",
+    "version": "1.0.0",
+    "tags": [],
+    "createdAt": "2025-01-02",
+    "updatedAt": "2025-01-02"
+}