mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-07 08:55: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