diff --git a/themes/849212a2-6087-4cb6-8fa7-65500624dbad/chrome.css b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/chrome.css new file mode 100644 index 00000000..db3de522 --- /dev/null +++ b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/chrome.css @@ -0,0 +1,295 @@ + +@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; + } + } + +@media (-moz-bool-pref: "zen.view.sidebar-expanded") and (not (-moz-bool-pref: "zen.view.sidebar-expanded.on-hover")) { + +/* 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; + } + +: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; + } + } + +/* 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; + } + +: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 .tabbrowser-tab[pinned] .tab-close-button { + display: none !important; + } + +#vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-reset-button { + display: none !important; + } + +#vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-reset-pin-button { + display: none !important; + } + +#vertical-pinned-tabs-container .tabbrowser-tab[pinned] .tab-label-container { + display: none !important; + } + +/*disable icon shift when tab was renamed*/ + #navigator-toolbox[zen-sidebar-expanded="true"] { + & #tabbrowser-tabs { + & .tabbrowser-tab { + &[zen-pinned-changed="true"]:not([zen-essential])>.tab-stack>.tab-content>.tab-icon-stack { + left: unset !important; + } + } + } + } + +/*The actual grid layout*/ + #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; + overflow: hidden !important; + gap: 3px !important; + } + +/* WIP Somewhat fixes the bleeding of pins from other workspaces + #vertical-pinned-tabs-container > .zen-workspace-tabs-section[active] { + visibility: visible; + } + #vertical-pinned-tabs-container > .zen-workspace-tabs-section[hidden]{ + visibility: hidden; + }*/ + +#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-separator { + display: none !important; + } + +#tabbrowser-arrowscrollbox .tabbrowser-tab:first-child { + margin-top: 5px !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; + } + } + +/* Adds a little bg to the pinned tabs */ + @media (-moz-bool-pref: "uc.pins.bg") { + @media (prefers-color-scheme: light) { + :root { + --pins-bg-percentage: 40%; + } + } + +@media (prefers-color-scheme: dark) { + :root { + --pins-bg-percentage: 7%; + } + } + +/* background color of pinned tabs in a normal state (not hovered/selected) */ + .tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background { + background-color: color-mix(in srgb, white var(--pins-bg-percentage), transparent) !important; + } + +/* background color when hovering */ + .tabbrowser-tab[pinned]:not([zen-essential="true"]):hover .tab-stack .tab-background { + background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 3%), transparent) !important; + } + +/* background color when selected */ + .tabbrowser-tab[pinned]:not([zen-essential="true"])[selected="true"] .tab-stack .tab-background, + .tabbrowser-tab[pinned]:not([zen-essential="true"])[multiselected="true"] .tab-stack .tab-background { + background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 16%), transparent) !important; + } + +/* background color when selected and hovering*/ + .tabbrowser-tab[pinned]:not([zen-essential="true"])[selected="true"]:hover .tab-stack .tab-background, + .tabbrowser-tab[pinned]:not([zen-essential="true"])[multiselected="true"]:hover .tab-stack .tab-background { + background-color: color-mix(in srgb, white calc(var(--pins-bg-percentage) + 18%), transparent) !important; + } + } + +/* 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; + } + } + +/* Let pinned tabs have the same selected styling as essentials */ + @media (-moz-bool-pref: "uc.pins.essentials-layout") { + #vertical-pinned-tabs-container>.zen-workspace-tabs-section { + grid-template-columns: repeat(auto-fit, + minmax(var(--essentials-width), auto)) !important; + gap: var(--essentials-gap) var(--essentials-gap) !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; + } + } +} diff --git a/themes/849212a2-6087-4cb6-8fa7-65500624dbad/image.png b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/image.png new file mode 100644 index 00000000..72efc1b9 Binary files /dev/null and b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/image.png differ diff --git a/themes/849212a2-6087-4cb6-8fa7-65500624dbad/preferences.json b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/preferences.json new file mode 100644 index 00000000..0ec68dc0 --- /dev/null +++ b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/preferences.json @@ -0,0 +1,206 @@ +[ + { + "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", + "disabledOn": [], + "options": [ + { + "label": "Thin", + "value": "Thin" + }, + { + "label": "Normal", + "value": "Normal" + }, + { + "label": "Wide", + "value": "Wide" + } + ] + }, + { + "property": "uc.essentials.gap", + "label": "Select the gap between Essentials", + "type": "dropdown", + "placeholder": "Zen Default", + "defaultValue": "Normal", + "disabledOn": [], + "options": [ + { + "label": "Small", + "value": "Small" + }, + { + "label": "Normal", + "value": "Normal" + }, + { + "label": "Big", + "value": "Big" + } + ] + }, + { + "property": "uc.pins.essentials-layout", + "label": "Adds selected width and gap styles from Essentials to pinned tabs as well", + "type": "checkbox", + "disabledOn": [] + }, + { + "property": "uc.essentials.color-scheme", + "label": "Background/Color types of Essentials", + "type": "dropdown", + "placeholder": "Zen Default", + "disabledOn": [], + "options": [ + { + "label": "Transparent Background", + "value": "transparent" + } + ] + }, + { + "property": "uc.essentials.box-like-corners", + "label": "Makes the Essentials look more box like (Less rounded edges)", + "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.legacy-layout", + "label": "Makes pinned tabs look similar to Essentials (icon only in a grid)", + "type": "checkbox", + "disabledOn": [] + }, + { + "property": "uc.pins.bg", + "label": "Adds a background to the pinned tabs", + "type": "checkbox", + "disabledOn": [] + }, + { + "property": "zen.workspaces.show-workspace-indicator", + "label": "Shows the workspace-indicator between Essentials and Pins", + "type": "checkbox", + "disabledOn": [] + }, + { + "property": "browser.sessionstore.restore_pinned_tabs_on_demand", + "label": "Loads pinned tabs only when using them, instead of loading all of them on startup", + "type": "checkbox", + "disabledOn": [] + }, + { + "property": "zen.tabs.dim-pending", + "label": "Dims unloaded tabs", + "type": "checkbox", + "disabledOn": [] + }, + { + "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" + } + ] + } +] \ No newline at end of file diff --git a/themes/849212a2-6087-4cb6-8fa7-65500624dbad/readme.md b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/readme.md new file mode 100644 index 00000000..9b9ef462 --- /dev/null +++ b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/readme.md @@ -0,0 +1,22 @@ + +# SuperPins + +This **Zen Mod** elevates your experience with pinned tabs and Essentials by making some UI/UX changes. + +![image](https://raw.githubusercontent.com/JLBlk/Zen-Themes/refs/heads/main/SuperPins/image.png) + +## 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) + - 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 + - Customize height of Pinned tabs (Small, Normal, Large) + - Adjust tab favicon size (Small, Normal, Large) + - Change workspace icons size (Extra Small, Small, Medium, Large) + - Control the current workspace indicator icon size (Small, Normal, Large) diff --git a/themes/849212a2-6087-4cb6-8fa7-65500624dbad/theme.json b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/theme.json new file mode 100644 index 00000000..a98d8400 --- /dev/null +++ b/themes/849212a2-6087-4cb6-8fa7-65500624dbad/theme.json @@ -0,0 +1,15 @@ +{ + "id": "849212a2-6087-4cb6-8fa7-65500624dbad", + "name": "SuperPin2", + "description": "This Zen Mod enhances pinned tabs/Essentials, by making some UI/UX changes.", + "homepage": "https://github.com/gabry-ts/Zen-Themes/blob/main/SuperPins/image.png", + "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/849212a2-6087-4cb6-8fa7-65500624dbad/chrome.css", + "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/849212a2-6087-4cb6-8fa7-65500624dbad/readme.md", + "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/849212a2-6087-4cb6-8fa7-65500624dbad/image.png", + "author": "gabry-ts", + "version": "1.0.0", + "tags": [], + "createdAt": "2025-04-05", + "updatedAt": "2025-04-05", + "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/849212a2-6087-4cb6-8fa7-65500624dbad/preferences.json" +} \ No newline at end of file