Skip to content

Commit

Permalink
Merge pull request #739 from JLBlk/UpdateSuperPins
Browse files Browse the repository at this point in the history 
Update Theme: SuperPins
  • Loading branch information
@mauro-balades
mauro-balades authored Nov 9, 2024
2 parents 6769e74 + 0b7a8e6 commit afeb632
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 141 deletions.
244 changes: 128 additions & 116 deletions themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/chrome.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
}
Binary file modified themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 31 additions & 15 deletions themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/preferences.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand All @@ -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": [
{
Expand All @@ -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": [],
Expand All @@ -102,4 +118,4 @@
"type": "checkbox",
"disabledOn": []
}
]
]
14 changes: 7 additions & 7 deletions themes/ad97bb70-0066-4e42-9b5f-173a5e42c6fc/readme.md
View file
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit afeb632

Please sign in to comment.