Merge pull request #950 from Uiniel/main

Update Sidebar Expand on Hover to 1.1.1
zen-browser · Jan 13, 2025 · 33b8b9a · 33b8b9a
2 parents 1bd79fb + 625da3b
commit 33b8b9a
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 37 deletions.
diff --git a/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/chrome.css b/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/chrome.css
@@ -1,9 +1,14 @@
+:root:has(#customization-container) {
+    /* Show flexible space in customiation mode in top buttons, since this mod allows them there */
+    #zen-sidebar-top-buttons-customization-target toolbarspring {
+        display: flex !important;
+    }
+}
 
 /* only use mod in collapsed toolbar mode */
 :root:has(#navigator-toolbox:not([zen-sidebar-expanded="true"])) {
-    #browser {
-        --tab-collapsed-width: 44px !important;
-    }
+    --zen-toolbox-max-width: 44px !important; /* Width of the collapsed sidebar */
+    --tab-collapsed-width: var(--zen-toolbox-max-width) !important; /* For automatic tab icon centering? */
 
     #navigator-toolbox {
         z-index: 4 !important;
@@ -12,21 +17,24 @@
 
     /* Move topbar buttons in the now empty space */
     @media not (-moz-bool-pref: "zen.view.compact") {
-        #zen-appcontent-wrapper {
-            overflow: visible !important;
+        #browser:has(#navigator-toolbox:not([zen-right-side="true"])) {
+            #zen-appcontent-wrapper {
+                overflow: visible !important;
 
-            #zen-appcontent-navbar-container {
-                margin-left: calc(0px - var(--tab-collapsed-width)) !important;
+                #zen-appcontent-navbar-container {
+                    margin-left: calc(0px - var(--zen-toolbox-max-width)) !important;
 
-                #nav-bar-customization-target > toolbarbutton:first-child {
-                    padding-inline-start: var(--toolbarbutton-outer-padding) !important;
+                    #nav-bar-customization-target > toolbarbutton:first-child {
+                        padding-inline-start: var(--toolbarbutton-outer-padding) !important;
+                    }
                 }
             }
         }
     }
 
-    @media not (-moz-bool-pref: "zen.view.compact.hide-tabbar"),
+    @media not (-moz-bool-pref: "zen.view.compact.hide-toolbar"),
     (not (-moz-bool-pref: "zen.view.compact")) {
+
         #navigator-toolbox {
             margin-top: var(--zen-toolbar-height) !important;
         }
@@ -35,6 +43,11 @@
             margin-top: calc(var(--zen-toolbar-height) + 2.2em) !important;
         }
     }
+
+    /* In compact mode (with topbar hidden) the topbar should be above the sidebar when hovered, while the sidebar should be above the page, doesn't work well with transitions but z-index is weird :c */
+    #browser:has(#zen-appcontent-navbar-container[zen-has-hover]) #navigator-toolbox {
+        z-index: 3 !important;
+    }
 
     #PersonalToolbar[collapsed=false] {
         height: 2.2em !important;
@@ -111,13 +124,27 @@
     }
 
     #titlebar {
-        width: var(--tab-collapsed-width) !important;
+        width: var(--zen-toolbox-max-width) !important;
         transition: var(--theme-sidebar_expand_on_hover-transition_speed) width cubic-bezier(.24, -0.01, .58, 1) !important;
         overflow: clip;
         position: relative;
         border-radius: 8px !important; /* Ensure rounded corners */
         overflow: hidden !important; /* Ensure child elements don't overflow */
     }
+
+    #navigator-toolbox[zen-right-side="true"] {
+        direction: rtl !important;
+
+        #titlebar {
+            direction: ltr !important;
+        }
+    }
+
+    @media (-moz-bool-pref: "theme.sidebar_expand_on_hover.inverted_tabs") {
+        .tabbrowser-tab {
+            direction: rtl !important;
+        }
+    }
 
     #vertical-pinned-tabs-container:has(tab:not([hidden])) {
         & .tabbrowser-tab {
@@ -143,25 +170,25 @@
         }
 
         #titlebar:hover::before,
-        #navigator-toolbox[zen-has-hover] #titlebar::before {
+        #titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button))::before,
+        #navigator-toolbox[zen-has-hover] #titlebar::before,
+        #navigator-toolbox[has-popup-menu] #titlebar::before,
+        #navigator-toolbox[movingtab] #titlebar::before {
             opacity: 1.0 !important;
             transition: 60ms opacity ease-out;
         }
     }
 
     #titlebar:hover,
-    #navigator-toolbox[zen-has-hover] #titlebar {
+    #titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button)),
+    #navigator-toolbox[zen-has-hover] #titlebar,
+    #navigator-toolbox[has-popup-menu] #titlebar,
+    #navigator-toolbox[movingtab] #titlebar{
         width: var(--theme-sidebar_expand_on_hover-expanded_width) !important;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
-
-        #zen-sidebar-top-buttons {
-            width: var(--theme-sidebar_expand_on_hover-expanded_width);
-        }
     }
 
     .tab-background {
-        border-top-right-radius: 8px !important;
-        border-bottom-right-radius: 8px !important;
         width: calc(100% - 4px) !important;
     }
 
@@ -194,8 +221,12 @@
     }
 
     #zen-sidebar-top-buttons {
-        width: var(--tab-collapsed-width);
-        transition: width var(--theme-sidebar_expand_on_hover-transition_speed) ease-in-out !important;
+        width: 100% !important;
+        min-height: unset !important;
+
+        #zen-sidebar-top-buttons-customization-target:not(:has(*)) {
+            padding: 0 !important;
+        }
     }
 
     #zen-sidebar-icons-wrapper,
@@ -205,13 +236,19 @@
         flex-direction: row !important;
         gap: 0 !important;
 
-        toolbarbutton {
+        & > :not(panel) {
             overflow: hidden !important;
             padding: 0 !important;
             width: 36px !important;
             height: 36px !important;
-            flex: auto !important;
-            transition: flex var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
+            flex-grow: 1 !important;
+            transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed), margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
+            margin-inline: 2px !important;
+        }
+
+        toolbarspring {
+            flex-grow: 100 !important;
+            display: flex !important;
         }
     }
 
@@ -224,37 +261,44 @@
 
         toolbarbutton {
             margin: 0 !important;
-            flex: auto !important;
-            transition: flex var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
+            flex-grow: 1 !important;
+            transition: flex-grow var(--theme-sidebar_expand_on_hover-transition_speed), width var(--theme-sidebar_expand_on_hover-transition_speed), margin-inline var(--theme-sidebar_expand_on_hover-transition_speed) linear !important;
+            margin-inline: 2px !important;
             overflow: hidden !important;
         }
     }
 
-    #navigator-toolbox:not([zen-has-hover]) #titlebar:not(#titlebar:hover) {
+    #navigator-toolbox:not([zen-has-hover],[has-popup-menu],[movingtab]) #titlebar:not(#titlebar:hover, #titlebar:has(toolbarbutton[open="true"]:not(#zen-sidepanel-button))) {
         #zen-workspaces-button {
             toolbarbutton:not([active="true"]) {
-                flex: 0 !important;
+                flex-grow: 0 !important;
                 width: 0 !important;
+                margin-inline: 0 !important;
             }
         }
 
         @media not (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
             #zen-sidebar-icons-wrapper > toolbarbutton:not(:first-child),
             #zen-sidebar-top-buttons-customization-target > toolbarbutton:not(:first-child) {
-                flex: 0 !important;
+                flex-grow: 0 !important;
                 width: 0 !important;
                 min-width: 0 !important;
+                margin-inline: 0 !important;
             }
         }
 
         @media (-moz-bool-pref: "theme.sidebar_expand_on_hover.collapse_buttons") {
-            #zen-sidebar-icons-wrapper:not(:has(#zen-workspaces-button)) > toolbarbutton:not(:first-child),
-            #zen-sidebar-top-buttons-customization-target:not(:has(#zen-workspaces-button)) > toolbarbutton:not(:first-child),
-            #zen-sidebar-icons-wrapper:has(#zen-workspaces-button) > toolbarbutton:not(#zen-workspaces-button),
-            #zen-sidebar-top-buttons-customization-target:has(#zen-workspaces-button) > toolbarbutton:not(#zen-workspaces-button) {
-                flex: 0 !important;
+            /* Show first child only when no visible workspace switcher */
+            #zen-sidebar-icons-wrapper:not(:has(#zen-workspaces-button:not([dont-show="true"]))) > *:not(:first-child),
+            #zen-sidebar-top-buttons-customization-target:not(:has(#zen-workspaces-button:not([dont-show="true"]))) > *:not(:first-child),
+            /* Show active workspace only when visible workspace switcher */
+            #zen-sidebar-icons-wrapper:has(#zen-workspaces-button:not([dont-show="true"])) > *:not(#zen-workspaces-button),
+            #zen-sidebar-top-buttons-customization-target:has(#zen-workspaces-button:not([dont-show="true"])) > *:not(#zen-workspaces-button) {
+                flex-grow: 0 !important;
                 width: 0 !important;
+                min-width: 0 !important;
+                margin-inline: 0 !important;
             }
         }
     }
-}
+}
diff --git a/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json b/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/preferences.json
@@ -21,6 +21,12 @@
         "property": "theme.sidebar_expand_on_hover.default_tab_background_shape",
         "label": "Default Tab Background Shape",
         "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "theme.sidebar_expand_on_hover.inverted_tabs",
+        "label": "Inverted Tab Direction",
+        "type": "checkbox",
         "defaultValue": false
     },
     {

diff --git a/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md b/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/readme.md
@@ -11,6 +11,7 @@ Addionally this mod collapses the buttons below the tabs to provide a smoother e
 - **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: deactivate this setting and it shows the first button instead when collapsed *(default: on)*
-- **Default Tab Background Shape**: When turned on every corner of the tab background is rounded (like in default zen) *(default: off)*
+- **Default Tab Background Shape**: When turned on every corner of the tab background is rounded (like in default zen) *(default: on)*
+- **Inverted Tab Direction**: Favicon on the right, title in the middle, close button on the left. Less moving parts when the sidebar is on the right. *(default: off)*
 - **Width of the expanded sidebar**: Here you can change the width of the expanded sidebar *(default: 300px)*
 - **Transition speed of the sidebar**: Speed of the collapsing/expanding animation *(default: 120ms)*
diff --git a/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/theme.json b/themes/bd92a9a0-1c00-4187-a66e-94c389fa5a59/theme.json
@@ -7,7 +7,7 @@
     "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.1.0",
+    "version": "1.1.1",
     "tags": [],
     "createdAt": "2024-12-10",
     "updatedAt": "2024-12-16",