mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 08:55:31 +02:00
Merge pull request #1430 from JLBlk/UpdateSuperPins
Update Mod: SuperPins
This commit is contained in:
mr. m
GitHub
commit
0ee2fa688d
4 changed files with 338 additions and 28 deletions
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*The actual grid layout*/
|
||||
/* 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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -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
|
||||
- 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))
|
||||
|
||||
## Credits
|
||||
- Huge Thanks to [@CosmoCreeper](https://github.com/CosmoCreeper) and [@gabry-ts](https://github.com/gabry-ts) for their incredible work!
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
"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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue