diff --git a/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/chrome.css new file mode 100644 index 00000000..27511042 --- /dev/null +++ b/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; + } + } + } + } diff --git a/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/image.png b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/image.png new file mode 100644 index 00000000..b8b9e919 Binary files /dev/null and b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/image.png differ diff --git a/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/readme.md new file mode 100644 index 00000000..13237fa9 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/theme.json b/themes/f5de8fbe-1d14-4e73-a806-cecc8e2c6af7/theme.json new file mode 100644 index 00000000..149ab0aa --- /dev/null +++ b/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" +} \ No newline at end of file