From 20a3ae83920d84649d76bc0edd5b3574e159d901 Mon Sep 17 00:00:00 2001 From: JLBlk <118555638+JLBlk@users.noreply.github.com> Date: Wed, 16 Apr 2025 21:43:13 +0200 Subject: [PATCH 1/4] Update readme.md --- .../readme.md | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md index 3f7bf0a1..c2767799 100644 --- a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md +++ b/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) -- 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 +## Credits +- Huge Thanks to [@CosmoCreeper](https://github.com/CosmoCreeper) and [@gabry-ts](https://github.com/gabry-ts) for their incredible work! From b801e2aecd322db6f529511012218317ce7c0001 Mon Sep 17 00:00:00 2001 From: JLBlk <118555638+JLBlk@users.noreply.github.com> Date: Wed, 16 Apr 2025 21:43:49 +0200 Subject: [PATCH 2/4] Update chrome.css --- .../chrome.css | 201 +++++++++++++++++- 1 file changed, 190 insertions(+), 11 deletions(-) diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css index 99e7bee3..3ec69cdb 100644 --- a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css +++ b/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 @@ } } + /* 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 { - grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)) !important; - display: grid !important; + #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; + } + } } From 4fdba09c7e1970d033551538f583c0b57e48ffaf Mon Sep 17 00:00:00 2001 From: JLBlk <118555638+JLBlk@users.noreply.github.com> Date: Wed, 16 Apr 2025 21:44:37 +0200 Subject: [PATCH 3/4] Update preferences.json --- .../preferences.json | 133 +++++++++++++++++- 1 file changed, 128 insertions(+), 5 deletions(-) diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json index 27b8a4b8..349ad319 100644 --- a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json +++ b/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", - "label": "Dims unloaded tabs", - "type": "checkbox", - "disabledOn": [] + "property": "uc.tabs.dim-type", + "label": "Dim the selected parts of a tab when it is unloaded", + "type": "dropdown", + "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" + } + ] } -] \ No newline at end of file +] From 24f93ea496d72805745d3151cf9b8fea73ef5283 Mon Sep 17 00:00:00 2001 From: JLBlk <118555638+JLBlk@users.noreply.github.com> Date: Wed, 16 Apr 2025 21:45:10 +0200 Subject: [PATCH 4/4] Update theme.json --- themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json b/themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/theme.json index da861ed8..770d53cf 100644 --- 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.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" ], "createdAt": "2024-08-28", "updatedAt": "2025-03-12" -} \ No newline at end of file +}