Add theme: Container Tab Tweaks

themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/chrome.css

@@ -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);
+    }
+  }
+}

themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/preferences.json

@@ -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"
+            }
+        ]
+    }
+]

themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/readme.md

@@ -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`

themes/15ba7535-75ab-4a1d-ae2b-20ae88047b15/theme.json

@@ -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"
+}