Merge pull request #661 from JLBlk/UpdateSuperPins

Update Theme: SuperPins
zen-browser · Oct 31, 2024 · 6905d97 · 6905d97
2 parents 12ed4ab + 6181c27
commit 6905d97
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 44 deletions.
diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css
@@ -1,29 +1,6 @@
-@media (-moz-bool-pref: "zen.tabs.vertical") {
-
-  /* COLOR POP of pinned tabs (when toggled) */
-  @media (-moz-bool-pref: "uc.pins.bg-color.pop") and (not (-moz-bool-pref: "uc.pins.disable-bg-color")) {
-    /* background color of pinned tabs in a normal state (not hovered/selected) */
-    .tabbrowser-tab[pinned] .tab-stack .tab-background {
-      background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 92%), hsl(from var(--zen-primary-color) h 25% 15%)) !important;
-    }
-    /* background color when hovering */
-    .tabbrowser-tab[pinned]:hover .tab-stack .tab-background{
-      background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 90%), hsl(from var(--zen-primary-color) h 25% 17%)) !important;
-    }
-    /* background color when selected */
-    .tabbrowser-tab[pinned][selected="true"] .tab-stack .tab-background,
-    .tabbrowser-tab[pinned][multiselected="true"] .tab-stack .tab-background {
-      background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 85%), hsl(from var(--zen-primary-color) h 25% 28%)) !important;
-    }
-    /* background color when hovering and selected */
-    .tabbrowser-tab[pinned][selected="true"]:hover .tab-stack .tab-background,
-    .tabbrowser-tab[pinned][multiselected="true"]:hover .tab-stack .tab-background{
-      background-color: light-dark(hsl(from var(--zen-primary-color) h 70% 83%), hsl(from var(--zen-primary-color) h 25% 30%)) !important;
-    }
-  }
-
+@media (-moz-bool-pref: "zen.tabs.vertical") {   
   /* Makes pinned tabs transparent (when toggled) */
-  @media (-moz-bool-pref: "uc.pins.disable-bg-color") {
+  :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;
     }
@@ -59,20 +36,20 @@
 
     /* Set margin between pinned tabs (Dropdown) */
     :root:has(#theme-SuperPins[uc-pins-gap="Small"]) {
-      --pins-gap: 1px;
+      --pins-gap: 0px;
     }
     :root:has(#theme-SuperPins[uc-pins-gap="Normal"]) {
-      --pins-gap: 3.5px;
+      --pins-gap: 2px;
     }
     :root:has(#theme-SuperPins[uc-pins-gap="Big"]) {
-      --pins-gap: 6px;
+      --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) calc(var(--pins-gap) + 3.5px) !important;
+                  gap: var(--pins-gap) var(--pins-gap) !important;
                 }
     }
 
@@ -93,7 +70,7 @@
   /* Adds border to pinned tabs (when toggled) */
   @media (-moz-bool-pref: "uc.pins.border") {
     .tabbrowser-tab[pinned] .tab-stack .tab-background{
-      border: 1px solid var(--zen-colors-border) !important;
+      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;
     }
   }
 

diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json
@@ -78,16 +78,17 @@
         ]
     },
     {
-        "property": "uc.pins.bg-color.pop",
-        "label": "Makes the colors of pinned tabs pop more",
-        "type": "checkbox",
-        "disabledOn": []
-    },
-    {
-        "property": "uc.pins.disable-bg-color",
-        "label": "Disables the background color of pinned tabs",
-        "type": "checkbox",
-        "disabledOn": []
+        "property": "uc.pins.color-scheme",
+        "label": "Background/Color types of pinned tabs",
+        "type": "dropdown",
+        "placeholder": "Zen Default",
+        "disabledOn": [],
+        "options": [
+            {
+                "label": "Transparent Background",
+                "value": "transparent"
+            }
+        ]
     },
     {
         "property": "browser.sessionstore.restore_pinned_tabs_on_demand",
@@ -101,4 +102,4 @@
         "type": "checkbox",
         "disabledOn": []
     }
-]
+]
diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md
@@ -9,7 +9,6 @@ This **Zen Mod** elevates your experience with pinned tabs and the tab bar in ge
   - Controllable Margins between pinned tabs (3 Options Dropdown)
   - Box like corners for pinned tabs (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)
-  - Color pop for pinned tabs (according to your accent color set in *Settings -> Look and Feel -> Theme Color*)
   - Make pinned tabs transparent
   - Load pinned tabs only when using them, instead of loading all of them on startup
   - Dim unloaded tabs
diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json
@@ -7,11 +7,11 @@
     "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.3.6",
+    "version": "1.3.7",
     "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json",
     "tags": [
         "tabs"
     ],
     "createdAt": "2024-08-28",
     "updatedAt": "2024-10-19"
-}
+}