Add theme: Tab Bar Tweaks

This commit is contained in:
Janb0 2025-05-29 19:06:28 +00:00 committed by GitHub
parent 3141fc304a
commit 2e53b1be95
5 changed files with 180 additions and 0 deletions

View file

@ -0,0 +1,97 @@
/* TAB TWEAKS */
/* no workspace indicator */
@media (-moz-bool-pref: "theme.tabbartweaks.hideworkspace"){
vbox.zen-workspace-tabs-section.zen-current-workspace-indicator {
display: none !important;
}
}
/* tab-bar size */
:root[zen-compact-mode="true"] {
toolbox#navigator-toolbox.browser-toolbox-background {
padding-top: var(--theme-tabbartweaks-tobseparation) !important; /*default 34px*/
padding-bottom: var(--theme-tabbartweaks-bottomseparation) !important; /*default 4px*/
margin: 0px !important;
bottom: 0px !important;
top: 0px !important;
height: 100% !important;
}
}
:root[zen-compact-mode="false"] {
#TabsToolbar {
margin-top: calc(var(--theme-tabbartweaks-tobseparation) - 38px) !important;
margin-bottom: var(--theme-tabbartweaks-bottomseparation) !important;
}
}
/* tabs */
:root:has(#theme-Tab-Bar-Tweaks[theme-tabbartweaks-tabbehaviour="stretch"]){
vbox.zen-workspace-tabs-section.zen-workspace-normal-tabs-section {
display: flex !important;
}
}
:root:has(#theme-Tab-Bar-Tweaks[theme-tabbartweaks-tabbehaviour="gototop"]){
vbox.zen-workspace-tabs-section.zen-workspace-normal-tabs-section {
display: block !important;
align-content: start !important;
}
}
:root:has(#theme-Tab-Bar-Tweaks[theme-tabbartweaks-tabbehaviour="gototmiddle"]){
vbox.zen-workspace-tabs-section.zen-workspace-normal-tabs-section {
display: block !important;
align-content: center !important;
}
}
:root:has(#theme-Tab-Bar-Tweaks[theme-tabbartweaks-tabbehaviour="gototbottom"]){
vbox.zen-workspace-tabs-section.zen-workspace-normal-tabs-section {
display: block !important;
align-content: end !important;
}
}
/* tab behaviour */
tab.tabbrowser-tab {
flex-grow: 1 !important;
}
vbox.tab-label-container {
flex-flow: row !important;
display: flex !important;
}
label.tab-text.tab-label {
flex-grow: 1 !important;
text-align: left !important;
}
@media (-moz-bool-pref: "theme.tabbartweaks.centernames") {
label.tab-text.tab-label {
flex-grow: 1 !important;
text-align: center !important;
}
}
label.tab-text.tab-label {
max-width: 100% !important;
}
label.tab-reset-pin-label {
width: 0px !important;
}
/* full height close buttons */
@media (-moz-bool-pref: "theme.tabbartweaks.fullclose"){
image.tab-close-button {
height: calc(100% - 4px) !important;
width: 40px !important;
padding: 12px !important;
margin-right: -6px !important;
border-radius: 8px !important;
border-bottom-left-radius: 0px !important;
border-top-left-radius: 0px !important;
display: block !important;
}
#tabbrowser-tabs[orient="vertical"] {
&[expanded] {
& .tabbrowser-tab {
&:not(:hover) .tab-close-button:not([selected]) {
opacity: 0 !important;
}
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

View file

@ -0,0 +1,57 @@
[
{
"property": "theme.tabbartweaks.hideworkspace",
"label": "Hide workspace indicator",
"type": "checkbox",
"defaultValue": false
},
{
"property": "theme.tabbartweaks.centernames",
"label": "Center tab names",
"type": "checkbox",
"defaultValue": false
},
{
"property": "theme.tabbartweaks.fullclose",
"label": "Large close tab button",
"type": "checkbox",
"defaultValue": false
},
{
"property": "theme.tabbartweaks.topseparation",
"label": "Top margin",
"type": "string",
"defaultValue": "34px"
},
{
"property": "theme.tabbartweaks.bottomseparation",
"label": "Bottom margin",
"type": "string",
"defaultValue": "4px"
},
{
"property": "theme.tabbartweaks.tabbehaviour",
"label": "Tab behaviour",
"type": "dropdown",
"placeholder": "Go to top",
"defaultValue": "gototop",
"options": [
{
"label": "Go to the top",
"value": "gototop"
},
{
"label": "Go to the middle",
"value": "gototmiddle"
},
{
"label": "Go to the bottom",
"value": "gotobottom"
},
{
"label": "Stretch",
"value": "stretch"
}
]
}
]

View file

@ -0,0 +1,11 @@
! This mod works only for "multiple toolbars" browser layout so far !
Customization options:
- Change distance between the tab bar and the top/bottom edge of the window.
- Stretch tabs to occupy the full height of the tab bar.
- Move tabs to the bottom or middle of the tab bar.
- Center tab names.
- Expand close tab button to occupy full height of the tab.
You can find these options by going to about:preferences#zenMarketplace and clicking the gear icon under Tab Bar Tweaks.

View file

@ -0,0 +1,15 @@
{
"id": "10f54be0-e52f-405c-81d7-4835aa435b86",
"name": "Tab Bar Tweaks",
"description": "this mod allows for better customization of your tab bar.",
"homepage": "https://github.com/Janb0/Zen-Browser-Mods/tree/84b39dedf1c5d1b779d254b0ed1eea5c983783a9/Tab%20Bar%20Tweaks",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/10f54be0-e52f-405c-81d7-4835aa435b86/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/10f54be0-e52f-405c-81d7-4835aa435b86/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/10f54be0-e52f-405c-81d7-4835aa435b86/image.png",
"author": "Janb0",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-05-29",
"updatedAt": "2025-05-29",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/10f54be0-e52f-405c-81d7-4835aa435b86/preferences.json"
}