mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 17:05:31 +02:00
Add theme: Container Tab Tweaks
This commit is contained in:
parent
5afb1dd7df
commit
628a17ca17
5 changed files with 207 additions and 0 deletions
101
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/chrome.css
Normal file
101
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/chrome.css
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
BIN
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/image.png
Normal file
BIN
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/image.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
61
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/preferences.json
Normal file
61
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/preferences.json
Normal 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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
30
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/readme.md
Normal file
30
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/readme.md
Normal 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.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## 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`
|
15
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/theme.json
Normal file
15
themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/theme.json
Normal 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"
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue