Add theme: Container Tab Tweaks

This commit is contained in:
MihkelMK 2025-03-07 16:22:57 +00:00 committed by GitHub
parent 5afb1dd7df
commit 628a17ca17
5 changed files with 207 additions and 0 deletions

View file

@ -0,0 +1,101 @@
#tabbrowser-tabs {
& .tab-background {
position: relative;
}
& .tab-context-line {
position: absolute;
width: var(--container-line-width) !important;
height: var(--container-line-height) !important;
inset: var(--container-line-inset) !important;
}
}
/* DEFAULTS */
:root {
--container-line-thickness: 3px;
--container-line-length: 100%;
--container-underline-length: 2rem; /* expanded + on bottom */
--container-line-pos-left: 0 auto 0 0;
--container-line-pos-right: 0 0 0 auto;
--container-line-inset: var(--container-line-pos-left);
--container-line-width: var(--container-line-thickness);
--container-line-height: var(--container-line-length);
}
/* THICKNESS SETTINGS */
:root {
:has(#theme-Container-Tab-Tweaks[uc-container-tweaks-width="thin"]) {
--container-line-thickness: 2px;
}
&:has(#theme-Container-Tab-Tweaks[uc-container-tweaks-width="thick"]) {
--container-line-thickness: 5px;
}
}
/* RIGHT SIDE ALIGN TOGGLE */
:root {
@media (-moz-bool-pref: "uc.container-tweaks.align.right") {
--container-line-inset: var(--container-line-pos-right);
}
}
/* ALIGN TO BOTTOM ALWAYS */
:root {
&:has(#theme-Container-Tab-Tweaks[uc-container-tweaks-essentials="always"])
#zen-essentials-container {
--container-line-length: var(--container-underline-length);
--container-center-offset: calc(var(--container-line-length) / 2);
--container-line-pos-bottom: auto calc(50% - var(--container-center-offset))
0 auto;
--container-line-inset: var(--container-line-pos-bottom);
--container-line-width: var(--container-line-length);
--container-line-height: var(--container-line-thickness);
}
&:has(#theme-Container-Tab-Tweaks[uc-container-tweaks-pins="always"])
#vertical-pinned-tabs-container {
--container-line-length: var(--container-underline-length);
--container-center-offset: calc(var(--container-line-length) / 2);
--container-line-pos-bottom: auto calc(50% - var(--container-center-offset))
0 auto;
--container-line-inset: var(--container-line-pos-bottom);
--container-line-width: var(--container-line-length);
--container-line-height: var(--container-line-thickness);
}
}
/* ALIGN TO BOTTOM WHEN EXPANDED */
:root {
@media (-moz-bool-pref: "zen.view.sidebar-expanded") {
:has(#theme-Container-Tab-Tweaks[uc-container-tweaks-essentials="expanded"])
#zen-essentials-container {
--container-line-length: var(--container-underline-length);
--container-center-offset: calc(var(--container-line-length) / 2);
--container-line-pos-bottom: auto
calc(50% - var(--container-center-offset)) 0 auto;
--container-line-inset: var(--container-line-pos-bottom);
--container-line-width: var(--container-line-length);
--container-line-height: var(--container-line-thickness);
}
:has(#theme-Container-Tab-Tweaks[uc-container-tweaks-pins="expanded"])
#vertical-pinned-tabs-container {
--container-line-length: var(--container-underline-length);
--container-center-offset: calc(var(--container-line-length) / 2);
--container-line-pos-bottom: auto
calc(50% - var(--container-center-offset)) 0 auto;
--container-line-inset: var(--container-line-pos-bottom);
--container-line-width: var(--container-line-length);
--container-line-height: var(--container-line-thickness);
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View file

@ -0,0 +1,61 @@
[
{
"property": "uc.container-tweaks.align.right",
"label": "Align container color to the right",
"type": "checkbox"
},
{
"property": "uc.container-tweaks.essentials",
"label": "Underline essential tabs with their container color",
"type": "dropdown",
"placeholder": "Disabled",
"defaultValue": "expanded",
"disabledOn": [],
"options": [
{
"label": "Always",
"value": "always"
},
{
"label": "Expanded only",
"value": "expanded"
}
]
},
{
"property": "uc.container-tweaks.pins",
"label": "Underline pinned tabs with their container color",
"type": "dropdown",
"placeholder": "Disabled",
"defaultValue": "disabled",
"disabledOn": [],
"options": [
{
"label": "Always",
"value": "always"
},
{
"label": "Expanded only",
"value": "expanded"
}
]
},
{
"property": "uc.container-tweaks.width",
"label": "Select the width of container colored line",
"type": "dropdown",
"placeholder": "Zen Default",
"defaultValue": "default",
"disabledOn": [],
"options": [
{
"label": "Thin",
"value": "thin"
},
{
"label": "Thick",
"value": "thick"
}
]
}
]

View file

@ -0,0 +1,30 @@
# Container Tab Tweaks
Customize when and where the tab container indicator is displayed.
- Align to the right
- Make it an underline
- Different choices for expanded vs compacted
I didn't like the way essential tabs opened in containers looked so I made this collection of options as a solution.
![Screenshot of customized tabs](https://raw.githubusercontent.com/MihkelMK/zen-mods/refs/heads/main/container_tab_tweaks/image.png)
## Preferences
- Align container color to the right
- `boolean`
- Overwritten by underline option if specified
- Underline **essential** tabs with their container color
- Instead of having the container colored line in the front or back of the tab label, use it as an underline
- Options: `Always`, `Expanded Only`, `Disabled`
- Default: `Expanded Only`
- Underline **pinned** tabs with their container color
- Instead of having the container colored line in the front or back of the tab label, use it as an underline
- Options: `Always`, `Expanded Only`, `Disabled`
- Default: `Disabled`
- Select the width of container colored line
- Two options besides the default of `3px`
- Thin: `2px`
- Thick: `5px`

View file

@ -0,0 +1,15 @@
{
"id": "15ba7535-75ab-4a1d-ae2b-20ae88047b15",
"name": "Container Tab Tweaks",
"description": "Customize when and where the tab container indicator is displayed.",
"homepage": "https://github.com/MihkelMK/zen-mods/tree/main/container_tab_tweaks",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/image.png",
"author": "MihkelMK",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-03-07",
"updatedAt": "2025-03-07",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/preferences.json"
}