diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css index f29bb1f7..a14852f3 100644 --- a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css +++ b/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; + } } } - } } } diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png index 8375bee5..98299d41 100644 Binary files a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png and b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png differ diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json index 6c79439c..a7612264 100644 --- a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json +++ b/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": [] } -] \ No newline at end of file +] diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md index 3d2cc576..60a1a5aa 100644 --- a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md +++ b/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 diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json index 0fa85857..2e8a13c0 100644 --- a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json +++ b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json @@ -1,17 +1,17 @@ { "id": "ad97bb70-0066-4e42-9b5f-173a5e42c6fc", "name": "SuperPins", - "description": "This Zen Mod enhances pinned tabs, by making some UI/UX changes.", + "description": "This Zen Mod enhances pinned tabs/Essentials, by making some UI/UX changes.", "homepage": "https://github.com/JLBlk/Zen-Themes/tree/main/SuperPins", "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css", "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.7", + "version": "1.4.0", "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-31" -} \ No newline at end of file +}