Add theme: Sidebar Expand on Hover

themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/chrome.css

@@ -0,0 +1,152 @@
+
+@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.hide_workspace_indicator") {
+    #zen-current-workspace-indicator {
+        display: none !important;
+    }
+}
+
+.tab-content {
+    justify-content: space-between !important;
+    padding: 0 var(--tab-inline-padding) !important;
+    gap: var(--tab-inline-padding);
+    width: 100% !important;
+}
+
+.tabbrowser-tab {
+    width: 100% !important;
+    margin: 0 !important;
+}
+
+.tab-label-container {
+    display: inline-block !important;
+}
+
+#TabsToolbar {
+    padding-top: var(--zen-element-separation) !important;
+    --tab-collapsed-width: 44px !important;
+    width: var(--tab-collapsed-width) !important;
+    transition: 120ms width cubic-bezier(.24, -0.01, .58, 1) !important;
+    overflow: clip;
+    position: relative;
+}
+
+#vertical-pinned-tabs-container:has(tab:not([hidden])) {
+    & .tabbrowser-tab {
+        max-width: unset !important;
+    }
+}
+
+#zen-sidebar-top-buttons {
+    margin: 0 !important;
+    width: var(--tab-collapsed-width) !important;
+}
+
+@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.custom_background") {
+    #TabsToolbar::before {
+        position: absolute;
+        content: "";
+        width: 100%;
+        height: calc(100% + var(--zen-element-separation));
+        top: calc(0px - var(--zen-element-separation));
+        opacity: 0.0;
+        transition: 60ms opacity ease-in 60ms;
+        z-index: -1;
+        background: var(--zen-main-browser-background-toolbar) !important;
+        background-attachment: fixed !important;
+        background-size: 2000px !important;
+        backdrop-filter: blur(5px) !important;
+    }
+
+#TabsToolbar:hover::before {
+        opacity: 1.0 !important;
+        ;
+        transition: 60ms opacity ease-out;
+    }
+}
+
+#TabsToolbar:hover {
+    width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
+    box-shadow: 1px -1px black;
+
+}
+
+.tab-background {
+    width: calc(100% - 4px) !important;
+}
+
+#zen-sidebar-icons-wrapper {
+    justify-content: space-evenly !important;
+    display: flex;
+    flex-direction: row !important;
+    transition: gap 120ms ease-in-out !important;
+}
+
+#zen-workspaces-button {
+    flex-direction: row !important;
+}
+
+@media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
+  #zen-sidebar-icons-wrapper {
+      justify-content: start !important;
+      padding-left: calc((var(--tab-collapsed-width) - 36px ) / 2) !important;;
+  }
+}
+
+@media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
+    #TabsToolbar:not(#TabsToolbar:hover) {
+        #zen-sidebar-icons-wrapper {
+            gap: 0 !important;
+            ;
+        }
+
+#zen-workspaces-button {
+            gap: 0 !important;
+
+&:not([as-button="true"]) {
+                & toolbarbutton {
+                    &[active="true"]::after {
+                        left: 50% !important;
+                        bottom: -2px !important;
+                    }
+                }
+            }
+
+&:not([as-button="true"]) {
+                & toolbarbutton {
+                    &:not([active="true"]) {
+                        width: 0 !important;
+                    }
+                }
+            }
+        }
+
+#zen-sidebar-icons-wrapper> :not(#zen-workspaces-button) {
+            width: 0 !important;
+        }
+    }
+
+#zen-workspaces-button {
+        &:not([as-button="true"]) {
+            & toolbarbutton {
+                &[active="true"]::after {
+                    animation: none !important;
+                }
+            }
+        }
+
+&:not([as-button="true"]) {
+            & toolbarbutton {
+                &:not([active="true"]) {
+                    transition: width 120ms ease-in-out !important;
+                    overflow: hidden;
+                }
+            }
+        }
+    }
+
+#zen-sidebar-icons-wrapper> :not(#zen-workspaces-button) {
+        transition: width 120ms ease-in-out !important;
+        width: 42px;
+        overflow: hidden !important;
+    }
+}

themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json

@@ -0,0 +1,26 @@
+[
+    {
+        "property": "theme.sidebar_expand_on_hover.hide_workspace_indicator",
+        "label": "Hide top workspace indicator",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "theme.sidebar_expand_on_hover.custom_background",
+        "label": "My theme overwrites the #TabsToolbar background (e.g. catppuccin)",
+        "type": "checkbox",
+        "defaultValue": false
+    },
+    {
+        "property": "theme.sidebar_expand_on_hover.collapse_buttons",
+        "label": "Collapse the buttons to only show current workspace",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "theme.sidebar_expand_on_hover.expanded_width",
+        "label": "Width of the expanded sidebar",
+        "type": "string",
+        "defaultValue": "300px"
+    }
+]

themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md

@@ -0,0 +1,14 @@
+
+# Sidebar Expand on Hover
+
+## Description
+
+With this mod the sidebar expands when you hover it. It only works when the browser layout setting is set to collapsed toolbar.
+
+Addionally this mod collapses the buttons below the tabs to provide a smoother experience. Per default your active workspace is shown while the sidebar is collapsed (only works when the workspace switcher is placed there).
+
+## Preferences
+- **Hide top workspace indicator**: since the active workspace is already shown below, this theme hides the workspace indicator at the top, if you don't want this: deactivate this setting. *(default: on)*
+- **My theme overwrites the #TabsToolbar background (e.g. catppuccin)**: Some themes overwrite the background property of #TabsToolbar (e.g. catppuccin). If you notice some visual issues while the sidebar is expanded due to the use of a theme: try activating this settings and hope that is helps *(default: off)*
+- **Collapse the buttons to only show current workspace**: If you don't wish for your buttons to only show your current workspace when collapsed (or you don't even have the workspace switcher there): deactivate this setting and it shows the first button instead when collapsed *(default: on)*
+- **Width of the expanded sidebar**: Here you can change the width of the expanded sidebar *(default: 300px)*

themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/theme.json

@@ -0,0 +1,15 @@
+{
+    "id": "bd92a9a0-1c00-4187-a66e-94c389fa5a59",
+    "name": "Sidebar Expand on Hover",
+    "description": "Readds the expand on hover feature to zen with a few extra features",
+    "homepage": "https://github.com/Uiniel/zen-mods/tree/main/sidebar-expand-on-hover",
+    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/chrome.css",
+    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md",
+    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/image.png",
+    "author": "Uiniel",
+    "version": "1.0.0",
+    "tags": [],
+    "createdAt": "2024-12-10",
+    "updatedAt": "2024-12-10",
+    "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json"
+}