Merge pull request #1430 from JLBlk/UpdateSuperPins

Update Mod: SuperPins

themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css

@@ -28,6 +28,7 @@
             #zen-essentials-container {
                 grid-template-columns: repeat(auto-fit,
                         minmax(var(--essentials-width), auto)) !important;
+                min-width: var(--essentials-width) !important;
             }
         }
 
@@ -83,27 +84,51 @@
             }
         }
 
-        /*The actual grid layout*/
+        /* Make pinned tabs auto-grow to span full width of row */
+        @media (-moz-bool-pref: "uc.pins.auto-grow") {
+            #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab[pinned] {
+                width: auto !important;
+                min-width: var(--tab-pinned-min-width-expanded) !important;
+                flex: 1 1 auto !important;
+            }
+
+            #vertical-pinned-tabs-container>.zen-workspace-tabs-section {
+                display: flex !important;
+                flex-wrap: wrap !important;
+                flex-direction: row !important;
+            }
+        }
+
+        @media (not (-moz-bool-pref: "uc.pins.auto-grow")) {
             #vertical-pinned-tabs-container>.zen-workspace-tabs-section {
                 grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)) !important;
                 display: grid !important;
+            }
+        }
+
+        /*The actual grid layout*/
+        #vertical-pinned-tabs-container>.zen-workspace-tabs-section:has(> :nth-child(2)) {
+            padding: 0 var(--zen-toolbox-padding) !important;
             overflow: hidden !important;
-            gap: 3px !important;
+            padding-bottom: 17px !important;
+            gap: 3px 3px !important;
         }
 
         #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab[pinned] {
             --toolbarbutton-inner-padding: 0;
         }
 
-        /*fixing the weird seperator behaviour by removing it*/
+        #vertical-pinned-tabs-container > .zen-workspace-tabs-section > * {
+            margin: 0 !important;
+        }
+
         .vertical-pinned-tabs-container-separator {
-            display: none !important;
+            position: absolute !important;
+            bottom: 7px !important;
+            left: 50% !important;
+            transform: translateX(-50%) !important;
+            width: calc(100% - var(--zen-toolbox-padding) * 2) !important;
         }
-
-        #tabbrowser-arrowscrollbox .tabbrowser-tab:first-child {
-            margin-top: 5px !important;
-        }
-
     }
 
     /* Make Essentials look more box like */
@@ -113,6 +138,40 @@
         }
     }
 
+    /* Make Essentials auto-grow to span full width of a row */
+    @media (-moz-bool-pref: "uc.essentials.auto-grow") {
+        .tabbrowser-tab[zen-essential="true"] {
+            width: auto !important;
+            min-width: var(--essentials-width) !important;
+            flex: 1 1 0 !important;
+            box-sizing: border-box !important;
+        }
+
+        #zen-essentials-container {
+            display: flex !important;
+            flex-wrap: wrap !important;
+            flex-direction: row !important;
+            box-sizing: border-box !important;
+            min-width: 0 !important;
+            height: auto !important;
+            width: 100% !important;
+        }
+
+        #navigator-toolbox {
+            min-width: min-content !important;
+        }
+    }
+
+    /* Puts Essentials at the bottom */
+    :has(#theme-SuperPins[uc-essentials-position="bottom"]) {
+        #zen-essentials-container {
+            order: 999 !important;
+            margin-top: auto !important;
+            padding-top: 5px !important;
+            padding-bottom: 4px !important;
+        }
+    }
+
     /* Adds a little bg to the pinned tabs */
     @media (-moz-bool-pref: "uc.pins.bg") {
         @media (prefers-color-scheme: light) {
@@ -179,5 +238,125 @@
                     minmax(var(--essentials-width), auto)) !important;
             gap: var(--essentials-gap) var(--essentials-gap) !important;
         }
+
+        #vertical-pinned-tabs-container>.zen-workspace-tabs-section>.tabbrowser-tab[pinned] {
+            min-width: var(--essentials-width) !important;
+        }
+    }
+    /* pins height */
+  :root:has(#theme-SuperPins[uc-pinned-height="small"]) {
+      #navigator-toolbox[zen-sidebar-expanded="true"]
+          #vertical-pinned-tabs-container:has(tab:not([hidden]))
+          .tabbrowser-tab {
+          height: 40px !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-pinned-height="normal"]) {
+      #navigator-toolbox[zen-sidebar-expanded="true"]
+          #vertical-pinned-tabs-container:has(tab:not([hidden]))
+          .tabbrowser-tab {
+          height: 50px !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-pinned-height="large"]) {
+      #navigator-toolbox[zen-sidebar-expanded="true"]
+          #vertical-pinned-tabs-container:has(tab:not([hidden]))
+          .tabbrowser-tab {
+          height: 60px !important;
+      }
+  }
+  /* favicon size */
+  :root:has(#theme-SuperPins[uc-favicon-size="small"]) {
+      .tab-throbber,
+      .tab-icon-pending,
+      .tab-icon-image,
+      .tab-sharing-icon-overlay,
+      .tab-icon-overlay {
+          height: 16px !important;
+          width: 16px !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-favicon-size="normal"]) {
+      .tab-throbber,
+      .tab-icon-pending,
+      .tab-icon-image,
+      .tab-sharing-icon-overlay,
+      .tab-icon-overlay {
+          height: 18px !important;
+          width: 18px !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-favicon-size="large"]) {
+      .tab-throbber,
+      .tab-icon-pending,
+      .tab-icon-image,
+      .tab-sharing-icon-overlay,
+      .tab-icon-overlay {
+          height: 20px !important;
+          width: 20px !important;
+      }
+  }
+  /* workspace icons size */
+  :root:has(#theme-SuperPins[uc-workspace-icon-size="x-small"]) {
+      #zen-workspaces-button {
+          font-size: x-small !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-workspace-icon-size="small"]) {
+      #zen-workspaces-button {
+          font-size: small !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-workspace-icon-size="medium"]) {
+      #zen-workspaces-button {
+          font-size: medium !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-workspace-icon-size="large"]) {
+      #zen-workspaces-button {
+          font-size: large !important;
+      }
+  }
+  /* current workspace icons size */
+  :root:has(#theme-SuperPins[uc-workspace-current-icon-size="small"]) {
+      .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
+          font-size: 12px !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-workspace-current-icon-size="normal"]) {
+      .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
+          font-size: 14.5px !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-workspace-current-icon-size="large"]) {
+      .zen-current-workspace-indicator .zen-current-workspace-indicator-icon {
+          font-size: 16px !important;
+      }
+  }
+    
+  /* Ensure that the browser uses SuperPins dim rather than the built-in dim-pending. */
+  .tab-icon-image[pending="true"], .tabbrowser-tab[pending="true"] .tab-text {
+    opacity: 1 !important;
+  }
+
+  /* If dim-type is set to icons. */
+  :root:has(#theme-SuperPins[uc-tabs-dim-type="icons"]) {
+    .tab-icon-image[pending="true"] {
+      opacity: 0.5 !important;
+    }
+  }
+
+  /* If dim-type is set to text. */
+  :root:has(#theme-SuperPins[uc-tabs-dim-type="text"]) {
+    .tabbrowser-tab[pending="true"] .tab-text {
+      opacity: 0.5 !important;
+    }
+  }
+
+  /* If dim-type is set to icon + text. */
+  :root:has(#theme-SuperPins[uc-tabs-dim-type="both"]) {
+    .tab-icon-image[pending="true"], .tabbrowser-tab[pending="true"] .tab-text {
+      opacity: 0.5 !important;
+    }
   } 
 }

themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json

@@ -68,6 +68,25 @@
         "type": "checkbox",
         "disabledOn": []
     },
+    {
+        "property": "uc.essentials.auto-grow",
+        "label": "Makes the Essentials auto-grow to fit the full width of its row.",
+        "type": "checkbox",
+        "disabledOn": []
+    },
+    {
+        "property": "uc.essentials.position",
+        "label": "Select the position of Essentials",
+        "type": "dropdown",
+        "placeholder": "Top",
+        "disabledOn": [],
+        "options": [
+            {
+                "label": "Bottom",
+                "value": "bottom"
+            }
+        ]
+    },
     {
         "property": "uc.superpins.border",
         "label": "Add a border around Pins/Essentials",
@@ -95,6 +114,12 @@
         "type": "checkbox",
         "disabledOn": []
     },
+    {
+        "property": "uc.pins.auto-grow",
+        "label": "Makes pinned tabs auto-grow to fit the full width of its row.",
+        "type": "checkbox",
+        "disabledOn": []
+    },
     {
         "property": "uc.pins.bg",
         "label": "Adds a background to the pinned tabs",
@@ -114,9 +139,107 @@
         "disabledOn": []
     },
     {
-        "property": "zen.tabs.dim-pending",
+        "property": "uc.tabs.dim-type",
-        "label": "Dims unloaded tabs",
+        "label": "Dim the selected parts of a tab when it is unloaded",
-        "type": "checkbox",
+        "type": "dropdown",
-        "disabledOn": []
+        "disabledOn": [],
+        "options": [
+            {
+                "label": "Icons + Text",
+                "value": "both"
+            },
+            {
+                "label": "Icons only",
+                "value": "icons"
+            },
+            {
+                "label": "Text only",
+                "value": "text"
+            }
+        ]
+    },
+    {
+        "property": "uc.pinned.height",
+        "label": "Height of Pinned tabs",
+        "type": "dropdown",
+        "placeholder": "Default",
+        "options": [
+            {
+                "label": "Small",
+                "value": "small"
+            },
+            {
+                "label": "Normal",
+                "value": "normal"
+            },
+            {
+                "label": "Large",
+                "value": "large"
+            }
+        ]
+    },
+    {
+        "property": "uc.favicon.size",
+        "label": "Size of tabs favicons",
+        "type": "dropdown",
+        "placeholder": "Default",
+        "options": [
+            {
+                "label": "Small",
+                "value": "small"
+            },
+            {
+                "label": "Normal",
+                "value": "normal"
+            },
+            {
+                "label": "Large",
+                "value": "large"
+            }
+        ]
+    },
+    {
+        "property": "uc.workspace.icon.size",
+        "label": "Size of workspace icons",
+        "type": "dropdown",
+        "placeholder": "Default",
+        "options": [
+            {
+                "label": "Extra Small",
+                "value": "x-small"
+            },
+            {
+                "label": "Small",
+                "value": "small"
+            },
+            {
+                "label": "Medium",
+                "value": "medium"
+            },
+            {
+                "label": "Large",
+                "value": "large"
+            }
+        ]
+    },
+    {
+        "property": "uc.workspace.current.icon.size",
+        "label": "Size of current workspace indicator icon",
+        "type": "dropdown",
+        "placeholder": "Default",
+        "options": [
+            {
+                "label": "Small",
+                "value": "small"
+            },
+            {
+                "label": "Normal",
+                "value": "normal"
+            },
+            {
+                "label": "Large",
+                "value": "large"
+            }
+        ]
     }
 ]

themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md

@@ -3,14 +3,22 @@
 This **Zen Mod** elevates your experience with pinned tabs and Essentials by making some UI/UX changes.
 
 ## Features (toggle in Zens Mod settings):
+  - Increase the width of Essentials/Pins (This can be controlled through a dropdown)
+  - Controllable Margins between Essentials/Pins (3 Options Dropdown)
+  - Move Essentials to the bottom ([@CosmoCreeper](https://github.com/CosmoCreeper))
+  - Grid Layout for pinned tabs (Similar to Essentials, icon only)
+  - Auto-Grow for pinned tabs & Essentials to fit the full width of its row. ([@CosmoCreeper](https://github.com/CosmoCreeper))
+  - Subtle Background for pinned tabs
+  - Border around pinned tabs and/or Essentials
+  - Box like corners for Essentials (less rounded corners)
+  - Make Essentials transparent
+  - Hide the workspace indicator between Essentials and Pins
+  - Load pinned tabs only when using them, instead of loading all of them on startup
+  - Dim unloaded tabs ([@CosmoCreeper](https://github.com/CosmoCreeper))
+  - Customize height of Pinned tabs (Small, Normal, Large) ([@gabry-ts](https://github.com/gabry-ts))
+  - Adjust tab favicon size (Small, Normal, Large) ([@gabry-ts](https://github.com/gabry-ts))
+  - Change workspace icons size (Extra Small, Small, Medium, Large) ([@gabry-ts](https://github.com/gabry-ts))
+  - Control the current workspace indicator icon size (Small, Normal, Large) ([@gabry-ts](https://github.com/gabry-ts))
 
-- Increase the width of Essentials/Pins (This can be controlled through a dropdown)
+## Credits
-- Controllable Margins between Essentials/Pins (3 Options Dropdown)
+- Huge Thanks to [@CosmoCreeper](https://github.com/CosmoCreeper) and [@gabry-ts](https://github.com/gabry-ts) for their incredible work!
-- Grid Layout for pinned tabs (Similar to Essentials, icon only)
-- Subtle Background for pinned tabs
-- Border around pinned tabs and/or Essentials
-- Box like corners for Essentials (less rounded corners)
-- Make Essentials transparent
-- Hide the workspace indicator between Essentials and Pins
-- Load pinned tabs only when using them, instead of loading all of them on startup
-- Dim unloaded tabs

themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json

@@ -7,7 +7,7 @@
     "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md",
     "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png",
     "author": "JLBlk",
-    "version": "1.4.5",
+    "version": "1.5.0",
     "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json",
     "tags": [
         "tabs"