Update Theme: SuperPins

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

@@ -1,139 +1,151 @@
-@media (-moz-bool-pref: "zen.tabs.vertical") {   
-  /* Makes pinned tabs transparent (when toggled) */
-  :root:has(#theme-SuperPins[uc-pins-color-scheme="transparent"]) {
-    .tabbrowser-tab[pinned]:not(:hover):not([selected="true"]) .tab-stack .tab-background {
-      background-color: transparent !important;
-    }
+@media (-moz-bool-pref: "zen.tabs.vertical") {
+
+  /* Makes essentials transparent (when toggled) */
+  :root:has(#theme-SuperPins[uc-essentials-color-scheme="transparent"]) {
+      .tabbrowser-tab[zen-essential="true"]:not(:hover):not([selected="true"]) .tab-stack .tab-background {
+          background-color: transparent !important;
+      }
   }
-
-  /* Make pinned tabs taller (when toggled) */
-  @media (-moz-bool-pref: "uc.pins.tall") and (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) {
-    .tabbrowser-tab[pinned] { 
-      min-height: 43px !important;
-    }
-  }  
-
+
   @media (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) {
 
-    /* Set width of pinned tabs (Dropdown) */
-    :root:has(#theme-SuperPins[uc-pins-width="Thin"]) {
-      --pins-width: 50px;
-    }
-    :root:has(#theme-SuperPins[uc-pins-width="Normal"]) {
-      --pins-width: 60px;
-    }
-    :root:has(#theme-SuperPins[uc-pins-width="Wide"]) {
-      --pins-width: 70px;
-    }
-
-    :root:has(#theme-SuperPins[uc-pins-width="Thin"],
-              #theme-SuperPins[uc-pins-width="Normal"],
-              #theme-SuperPins[uc-pins-width="Wide"]) {
-              #vertical-pinned-tabs-container {
-                grid-template-columns: repeat(auto-fit, minmax(var(--pins-width), auto)) !important;
-              }
-    }
-
-    /* Set margin between pinned tabs (Dropdown) */
-    :root:has(#theme-SuperPins[uc-pins-gap="Small"]) {
-      --pins-gap: 0px;
-    }
-    :root:has(#theme-SuperPins[uc-pins-gap="Normal"]) {
-      --pins-gap: 2px;
-    }
-    :root:has(#theme-SuperPins[uc-pins-gap="Big"]) {
-      --pins-gap: 5px;
-    }
-
-    :root:has(#theme-SuperPins[uc-pins-gap="Small"],
-              #theme-SuperPins[uc-pins-gap="Normal"],
-              #theme-SuperPins[uc-pins-gap="Big"]) {
-                #vertical-pinned-tabs-container {
-                  gap: var(--pins-gap) var(--pins-gap) !important;
-                }
-    }
-
-    @media (-moz-bool-pref: "uc.pins.tall") {
-      .tabbrowser-tab[pinned] { 
-        min-height: 43px !important;
-      }
-    }
-  }
-
-  /* Make pinned tabs look more box like */
-  @media (-moz-bool-pref: "uc.pins.box-like-corners") {
-    .tabbrowser-tab[pinned] .tab-stack .tab-background{
-      border-radius: 5px !important;
-    }
-  }
+      /* Set width of Essentials (Dropdown) */
+      :root:has(#theme-SuperPins[uc-essentials-width="Thin"]) {
+          --essentials-width: 50px;
+      }
+      :root:has(#theme-SuperPins[uc-essentials-width="Normal"]) {
+          --essentials-width: 60px;
+      }
+      :root:has(#theme-SuperPins[uc-essentials-width="Wide"]) {
+          --essentials-width: 70px;
+      }
 
-  /* Adds border to pinned tabs (when toggled) */
-  @media (-moz-bool-pref: "uc.pins.border") {
-    .tabbrowser-tab[pinned] .tab-stack .tab-background{
-      border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black), color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
-    }
-  }
-
-  /* Hides unloaded tabs when tab bar is collapsed (when toggled)*/
-  @media (not (-moz-bool-pref: "zen.view.sidebar-expanded")) {
-    :root:has(#theme-SuperPins[uc-pins-only-show-active="Normal"]) {
-      .tabbrowser-tab[pinned][pending="true"] {
-        position: absolute !important; /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
-        visibility: hidden !important;
+      :root:has(#theme-SuperPins[uc-essentials-width="Thin"], #theme-SuperPins[uc-essentials-width="Normal"], #theme-SuperPins[uc-essentials-width="Wide"]) {
+          #zen-essentials-container {
+              grid-template-columns: repeat(auto-fit, minmax(var(--essentials-width), auto)) !important;
+          }
       }
-    }
 
-    /* Shows all pins when user is hovering over them when tab bar is collapsed */
-    :root:has(#theme-SuperPins[uc-pins-only-show-active="OnHover"]) {
-      .tabbrowser-tab[pinned][pending="true"] {
-        position: absolute !important; /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
-        visibility: hidden !important;
+      /* Set margin between Essentials (Dropdown) */
+      :root:has(#theme-SuperPins[uc-essentials-gap="Small"]) {
+          --essentials-gap: 0px;
+      }
+      :root:has(#theme-SuperPins[uc-essentials-gap="Normal"]) {
+          --essentials-gap: 2px;
+      }
+      :root:has(#theme-SuperPins[uc-essentials-gap="Big"]) {
+          --essentials-gap: 5px;
       }
 
-      #vertical-pinned-tabs-container:hover .tabbrowser-tab[pinned][pending="true"] {
-        position: relative !important;
-        visibility: visible !important;
+      :root:has(#theme-SuperPins[uc-essentials-gap="Small"], #theme-SuperPins[uc-essentials-gap="Normal"], #theme-SuperPins[uc-essentials-gap="Big"]) {
+          #zen-essentials-container {
+              gap: var(--essentials-gap) var(--essentials-gap) !important;
+          }
       }
+  }
 
+  /* Enables legacy layout for pinned tabs (icon only in grid) */
+  @media (-moz-bool-pref: "uc.pins.legacy-layout") {
       #vertical-pinned-tabs-container {
-        position: relative;
+          display: grid !important;
+          grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)) !important;
+          overflow-y: auto !important;
+          overflow-x: hidden !important;
+          scrollbar-width: thin !important;
+      }
+
+      .tab-close-button {
+          display: none !important;
+      }
+
+      #vertical-pinned-tabs-container .tab-label-container {
+          display: none !important;
+      }
+
+      #vertical-pinned-tabs-container .tab-icon-image {
+          margin: 0 !important;
+      }
+  }
+
+  /* Make Essentials look more box like */
+  @media (-moz-bool-pref: "uc.essentials.box-like-corners") {
+      .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
+          border-radius: 5px !important;
       }
+  }
 
-      #vertical-pinned-tabs-container::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 10px;
-        background-color: transparent;
+  /* Adds border to Pins/Essentials (when toggled) */
+  :root:has(#theme-SuperPins[uc-superpins-border="essentials"]) {
+      #zen-essentials-container .tabbrowser-tab[zen-essential="true"] .tab-stack .tab-background {
+          border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black), color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-superpins-border="pins"]) {
+      .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background {
+          border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black), color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
+      }
+  }
+  :root:has(#theme-SuperPins[uc-superpins-border="both"]) {
+      .tabbrowser-tab[pinned] .tab-stack .tab-background {
+          border: 1px solid light-dark(color-mix(in srgb, var(--zen-colors-secondary) 80%, black), color-mix(in srgb, var(--zen-colors-secondary) 80%, white)) !important;
       }
+  }
 
-      #vertical-pinned-tabs-container::before:hover .tabbrowser-tab[pinned][pending="true"] {
-        position: relative !important;
-        visibility: visible !important;
+  /* Hides unloaded tabs when tab bar is collapsed (when toggled)*/
+  @media (not (-moz-bool-pref: "zen.view.sidebar-expanded")) {
+      :root:has(#theme-SuperPins[uc-pins-only-show-active="Normal"]) {
+          .tabbrowser-tab[pinned]:not([zen-essential="true"])[pending="true"] {
+              position: absolute !important;
+              /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
+              visibility: hidden !important;
+          }
+      }
+
+      /* Shows all pins when user is hovering over them when tab bar is collapsed */
+      :root:has(#theme-SuperPins[uc-pins-only-show-active="OnHover"]) {
+          .tabbrowser-tab[pinned]:not([zen-essential="true"])[pending="true"] {
+              position: absolute !important;
+              /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
+              visibility: hidden !important;
+          }
+
+          #vertical-pinned-tabs-container:hover .tabbrowser-tab[pinned]:not([zen-essential="true"])[pending="true"] {
+              position: relative !important;
+              visibility: visible !important;
+          }
+
+          #vertical-pinned-tabs-container {
+              position: relative;
+          }
+
+          #vertical-pinned-tabs-container::before {
+              content: '';
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 10px;
+              background-color: transparent;
+          }
+
+          #vertical-pinned-tabs-container::before:hover .tabbrowser-tab[pinned]:not([zen-essential="true"])[pending="true"] {
+              position: relative !important;
+              visibility: visible !important;
+          }
       }
-    }
   }
-  
+
   /* Hides unloaded tabs when tab bar is collapsed when in "Expand on hove" mode (when toggled) */
   @media (-moz-bool-pref: "zen.view.sidebar-expanded") and (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover") {
-    :root:has(#theme-SuperPins[uc-pins-only-show-active="Normal"]),
-    :root:has(#theme-SuperPins[uc-pins-only-show-active="OnHover"]) { 
-      #navigator-toolbox:not(
-        :is( 
-        #navigator-toolbox[zen-has-hover],
-        #navigator-toolbox:focus-within,
-        #navigator-toolbox[movingtab],
-        #navigator-toolbox[flash-popup],
-        #navigator-toolbox[has-popup-menu],
-        #navigator-toolbox:has(.tabbrowser-tab:active),
-        #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)))) {
-          .tabbrowser-tab[pinned][pending="true"] {
-            position: absolute !important; /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
-            visibility: hidden !important;
+      :root:has(#theme-SuperPins[uc-pins-only-show-active="Normal"]),
+      :root:has(#theme-SuperPins[uc-pins-only-show-active="OnHover"]) {
+          #navigator-toolbox:not( :is(#navigator-toolbox[zen-has-hover], #navigator-toolbox:focus-within, #navigator-toolbox[movingtab], #navigator-toolbox[flash-popup], #navigator-toolbox[has-popup-menu], #navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)))) {
+              .tabbrowser-tab[pinned]:not([zen-essential="true"])[pending="true"] {
+                  position: absolute !important;
+                  /* Using position: absolute and visibility: hidden instead of display:none stops the icons of unloaded tabs from loading when sidebar expands */
+                  visibility: hidden !important;
+              }
           }
       }
-    }
   }
 }

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

@@ -1,7 +1,7 @@
 [
     {
-        "property": "uc.pins.width",
-        "label": "Select the general width pinned tabs (The width before the pins start wrapping to the next row)",
+        "property": "uc.essentials.width",
+        "label": "Select the general width of Essentials (The width before the Essentials start wrapping to the next row)",
         "type": "dropdown",
         "placeholder": "Zen Default",
         "defaultValue": "Normal",
@@ -22,14 +22,14 @@
         ]
     },
     {
-        "property": "uc.pins.tall",
-        "label": "Increases the height of pinned tabs (Disabled when tab bar not expanded)",
+        "property": "uc.pins.legacy-layout",
+        "label": "Makes pinned tabs look similar to Essentials (icon only in a grid)",
         "type": "checkbox",
         "disabledOn": []
     },
     {
-        "property": "uc.pins.gap",
-        "label": "Select the gap between pinned tabs",
+        "property": "uc.essentials.gap",
+        "label": "Select the gap between Essentials",
         "type": "dropdown",
         "placeholder": "Zen Default",
         "defaultValue": "Normal",
@@ -50,21 +50,37 @@
         ]
     },
     {
-        "property": "uc.pins.box-like-corners",
-        "label": "Makes the pinned tabs look more box like (Less rounded edges)",
+        "property": "uc.essentials.box-like-corners",
+        "label": "Makes the Essentials look more box like (Less rounded edges)",
         "type": "checkbox",
         "disabledOn": []
     },
     {
-        "property": "uc.pins.border",
-        "label": "Creates a border around pinned tabs",
-        "type": "checkbox",
-        "disabledOn": []
+        "property": "uc.superpins.border",
+        "label": "Add a border around Pins/Essentials",
+        "type": "dropdown",
+        "placeholder": "Disabled",
+        "disabledOn": [],
+        "options": [
+            {
+                "label": "Pins only",
+                "value": "pins"
+            },
+            {
+                "label": "Essentials only",
+                "value": "essentials"
+            },
+            {
+                "label": "Pins + Essentials",
+                "value": "both"
+            }
+        ]
     },
     {
         "property": "uc.pins.only-show-active",
         "label": "Only shows loaded pinned tabs (when the tab bar is collapsed)",
         "type": "dropdown",
+        "placeholder": "Disabled",
         "disabledOn": [],
         "options": [
             {
@@ -78,8 +94,8 @@
         ]
     },
     {
-        "property": "uc.pins.color-scheme",
-        "label": "Background/Color types of pinned tabs",
+        "property": "uc.essentials.color-scheme",
+        "label": "Background/Color types of Essentials",
         "type": "dropdown",
         "placeholder": "Zen Default",
         "disabledOn": [],
@@ -102,4 +118,4 @@
         "type": "checkbox",
         "disabledOn": []
     }
-]
+]

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

@@ -1,14 +1,14 @@
 # SuperPins
 
-This **Zen Mod** elevates your experience with pinned tabs and the tab bar in general by making some UI changes.
+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 pinned tabs (This can be controlled through a dropdown)
-  - Taller pinned tabs
-  - Border around pinned tabs
-  - Controllable Margins between pinned tabs (3 Options Dropdown)
-  - Box like corners for pinned tabs (less rounded corners)
+  - Increase the width of Essentials (This can be controlled through a dropdown)
+  - Grid Layout for pinned tabs (Similar to Essentials, icon only)
+  - Border around pinned tabs and/or Essentials
+  - Controllable Margins between Essentials (3 Options Dropdown)
+  - Box like corners for Essentials (less rounded corners)
   - Hide unloaded pinned tabs when tab bar is collapsed (Additional option: Show all pinned tabs on hover even with tab bar collapsed)
-  - Make pinned tabs transparent
+  - Make Essentials transparent
   - Load pinned tabs only when using them, instead of loading all of them on startup
   - Dim unloaded tabs