From 33c6387759019e9595d8d007c58e31285c5bccc4 Mon Sep 17 00:00:00 2001 From: Kaedriz Date: Wed, 25 Mar 2026 20:38:21 +0100 Subject: [PATCH 1/2] Update Mods Update both Audio Indicator Enhanced & Tab Preview Enhanced with bugfixes and missing customization to tab preview. --- .../chrome.css | 56 ++++----- .../readme.md | 4 +- .../theme.json | 6 +- .../chrome.css | 111 ++++++++++-------- .../preferences.json | 74 ++++++++---- .../readme.md | 4 +- .../theme.json | 6 +- 7 files changed, 153 insertions(+), 108 deletions(-) diff --git a/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/chrome.css b/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/chrome.css index b2cb96c3d..0fe6280c1 100644 --- a/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/chrome.css +++ b/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/chrome.css @@ -48,7 +48,7 @@ } /** Legacy Mode - Round circle */ -@media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.audioWave.enabled") { +@media not (-moz-pref("zen.mods.AudioIndicatorEnhanced.audioWave.enabled")) { #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:not([zen-glance-tab]) > .tab-stack @@ -64,7 +64,7 @@ background-repeat: no-repeat !important; background-position: center !important; - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled")) { &:hover { transition: transform 100ms ease-in-out, background-color 100ms ease-in-out !important; @@ -76,12 +76,12 @@ &[soundplaying] { /* Revert old icon */ - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") { - @media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.returnOldIcons")) { + @media not (-moz-pref("zen.mods.AudioIndicatorEnhanced.reverseAudioIcons")) { background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important; } - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.reverseAudioIcons")) { background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important; } } @@ -92,12 +92,12 @@ background-color: rgb(122, 31, 31) !important; /* Revert old icon */ - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") { - @media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.returnOldIcons")) { + @media not (-moz-pref("zen.mods.AudioIndicatorEnhanced.reverseAudioIcons")) { background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important; } - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.reverseAudioIcons")) { background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important; } } @@ -105,13 +105,13 @@ &[activemedia-blocked] { /* Revert old icon */ - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.returnOldIcons")) { background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg") !important; } } /* Revert new, zen's audio indicator */ - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.returnOldIcons") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.returnOldIcons")) { &[muted], &[soundplaying], &[activemedia-blocked] { @@ -149,7 +149,7 @@ background-color: hsl(0, 59%, 30%, 50%) !important; } - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled")) { &:hover { transform: scale(1.2); } @@ -158,7 +158,7 @@ } /* Patches for pinned tabs indicator while in SuperPins */ - @media (-moz-bool-pref: "uc.pins.legacy-layout") { + @media (-moz-pref("uc.pins.legacy-layout")) { #navigator-toolbox[zen-sidebar-expanded="true"] #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[pinned] @@ -187,7 +187,7 @@ background-color: hsl(0, 59%, 30%, 50%) !important; } - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled")) { &:hover { transform: scale(1.2); } @@ -227,7 +227,7 @@ } /* Large Essential Icons Mode */ - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.bigEssentialIcons.enabled") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.bigEssentialIcons.enabled")) { #navigator-toolbox #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[zen-essential="true"] { @@ -249,7 +249,7 @@ } /** Audio Wave version */ -@media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.audioWave.enabled") { +@media (-moz-pref("zen.mods.AudioIndicatorEnhanced.audioWave.enabled")) { /** Variables section */ /* Normal tab bar */ #tabbrowser-tabs[orient="vertical"] { @@ -263,7 +263,7 @@ } /* Patch for SuperPins */ - @media (-moz-bool-pref: "uc.pins.legacy-layout") { + @media (-moz-pref("uc.pins.legacy-layout")) { /* Pinned tab */ & .tabbrowser-tab[pinned] { --audio-button-top: -4px; @@ -288,13 +288,13 @@ /* Normal tab */ & .tabbrowser-tab { --audio-button-top: 0px; - --audio-button-left: 6px; + --audio-button-left: 0px; --audio-wave-top: 4px; - --audio-wave-left: -6px; + --audio-wave-left: 6px; } /* Patch for SuperPins */ - @media (-moz-bool-pref: "uc.pins.legacy-layout") { + @media (-moz-pref("uc.pins.legacy-layout")) { /* Pinned tab */ & .tabbrowser-tab[pinned] { --audio-button-top: 0px; @@ -319,11 +319,11 @@ /* Normal tab */ & .tabbrowser-tab { --audio-wave-top: 4px; - --audio-wave-left: 0px; + --audio-wave-left: -4px; } /* Patch for SuperPins */ - @media (-moz-bool-pref: "uc.pins.legacy-layout") { + @media (-moz-pref("uc.pins.legacy-layout")) { /* Pinned tab */ & .tabbrowser-tab[pinned] { --audio-wave-top: -2px; @@ -343,7 +343,7 @@ } /* Patch for SuperPins */ - @media (-moz-bool-pref: "uc.pins.legacy-layout") { + @media (-moz-pref("uc.pins.legacy-layout")) { /* Pinned tab */ & .tabbrowser-tab[pinned] { --audio-wave-top: 1px; @@ -387,11 +387,11 @@ > .tab-content > .tab-icon-stack > .tab-icon-overlay:not([crashed]) { - @media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { + @media not (-moz-pref("zen.mods.AudioIndicatorEnhanced.reverseAudioIcons")) { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important; } - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.reverseAudioIcons")) { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important; } } @@ -403,11 +403,11 @@ > .tab-content > .tab-icon-stack > .tab-icon-overlay:not([crashed]) { - @media not (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { + @media not (-moz-pref("zen.mods.AudioIndicatorEnhanced.reverseAudioIcons")) { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg") !important; } - @media (-moz-bool-pref: "zen.mods.AudioIndicatorEnhanced.reverseAudioIcons") { + @media (-moz-pref("zen.mods.AudioIndicatorEnhanced.reverseAudioIcons")) { list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg") !important; } } @@ -443,7 +443,7 @@ } /* Patches for SuperPins compatibility */ - @media (-moz-bool-pref: "uc.pins.legacy-layout") { + @media (-moz-pref("uc.pins.legacy-layout")) { /* Patch for pinned tabs with SuperPins */ #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[pinned] @@ -542,7 +542,7 @@ > .tab-stack > .tab-content > .tab-icon-stack::before { - width: calc(var(--zen-sidebar-width) - 14px) !important; + width: calc(var(--zen-sidebar-width) - 24px) !important; } /* Compatibility patch for hidden tab bar */ diff --git a/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/readme.md b/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/readme.md index 91501469d..e38dc3ae7 100644 --- a/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/readme.md +++ b/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/readme.md @@ -1,6 +1,8 @@ +# Enhanced Audio Indicator + Enhanced audio indicator on tabs, visible when playing videos & audios. Currently, mod is tailored to dark theme. For now, mostly just styles it differently, later some customization and matching to color theme is planned. -Works as of `1.7.4b` +Works as of `1.19.3b` diff --git a/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/theme.json b/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/theme.json index 7b494178a..f5b7cfd99 100644 --- a/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/theme.json +++ b/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/theme.json @@ -7,9 +7,9 @@ "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/readme.md", "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/image.png", "author": "Kaedriz", - "version": "1.3.1", + "version": "1.3.2", "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/2317fd93-c3ed-4f37-b55a-304c1816819e/preferences.json", "tags": [], "createdAt": "2024-12-06", - "updatedAt": "2025-10-29" -} \ No newline at end of file + "updatedAt": "2026-03-25" +} diff --git a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/chrome.css b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/chrome.css index 3f6d33ec8..e94c82c12 100644 --- a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/chrome.css +++ b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/chrome.css @@ -1,63 +1,80 @@ -#tab-preview-panel { - /* Matches Zen main background color, also supports gradients */ - @media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledBackgroundNative') { - --panel-background: var(--zen-main-browser-background-toolbar) !important; - } +@-moz-document url-prefix("chrome:") { + #tab-preview-panel { + /* Matches Zen main background color, also supports gradients */ + @media (-moz-pref("zen.mods.TabPreviewEnhanced.enabledBackgroundNative")) { + --panel-background: var( + --zen-main-browser-background-toolbar + ) !important; + } - /* Matches Zen panel radius */ - @media not (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') { - border-radius: var(--panel-border-radius) !important; - } + /* Matches Zen panel radius */ + @media not (-moz-pref("zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius")) { + border-radius: var(--panel-border-radius) !important; + } - /* Custom border radius for tab preview*/ - @media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') { - --panel-border-radius: var( - --zen-mods-TabPreviewEnhanced-borderRadiusAmount - ) !important; - } + /* Custom border radius for tab preview*/ + @media (-moz-pref("zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius")) { + --panel-border-radius: var( + --zen-mods-TabPreviewEnhanced-borderRadiusAmount + ) !important; + } - /* Removes border around tab preview */ - --zen-appcontent-border: transparent !important; + /* Removes border around tab preview */ + --zen-appcontent-border: transparent !important; - /* Shifts panel to the slightly right */ - /* TODO: Make customizable */ - margin-left: 0.5em !important; -} + /* Shifts panel slightly to the right */ + @media not (-moz-pref("zen.mods.TabPreviewEnhanced.enabledCustomMargin")) { + margin-left: 0.5em !important; + } -.tab-preview-thumbnail-container { - /* Fixes proper tab preview image sizing */ - &:has(canvas) { - @media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledMargins') { - /* Add padding around tab preview image */ - padding: var(--zen-element-separation); + @media (-moz-pref("zen.mods.TabPreviewEnhanced.enabledCustomMargin")) { + margin-left: var( + --zen-mods-TabPreviewEnhanced-marginAmount + ) !important; } + } - /* Hide border above preview */ - border-top: none !important; + .tab-preview-thumbnail-container { + /* Fixes proper tab preview image sizing */ + &:has(canvas) { + /* TODO: Rename to include padding instead of margin (on some breaking version, probably v2, as will break current preferences) */ + @media (-moz-pref("zen.mods.TabPreviewEnhanced.enabledMargins")) { + /* Add padding around tab preview image */ + padding: var(--zen-element-separation); + } - /* Hides padding between tab preview image and tab preview title */ - padding-top: 0 !important; + /* Hide border above preview */ + border-top: none !important; - /* Shrink preview to match added padding */ - /* TODO: Make optional */ - width: calc(var(--panel-width) - (var(--zen-element-separation) * 2)) px !important; - height: unset !important; + /* Hides padding between tab preview image and tab preview title */ + padding-top: 0 !important; - /* Some safety code to maintain aspect ratio */ - aspect-ratio: 2 / 1 !important; - } + /* Shrink preview to match added padding */ + @media (-moz-pref("zen.mods.TabPreviewEnhanced.shrinkPreview")) { + width: calc( + var(--panel-width) - (var(--zen-element-separation) * 2) + ) !important; + height: unset !important; + } - canvas { - /* Matches Zen panel radius */ - @media not (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') { - border-radius: calc(var(--panel-border-radius) / 1.3) !important; + /* Some safety code to maintain aspect ratio */ + aspect-ratio: 2 / 1 !important; } - /* Custom border radius for tab preview image */ - @media (-moz-bool-pref: 'zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius') { - border-radius: calc( - var(--zen-mods-TabPreviewEnhanced-borderRadiusAmount) / 1.3 - ) !important; + canvas { + /* Matches Zen panel radius */ + @media not (-moz-pref("zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius")) { + border-radius: calc( + var(--panel-border-radius) / 1.3 + ) !important; + } + + /* Custom border radius for tab preview image */ + @media (-moz-pref("zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius")) { + border-radius: calc( + var(--zen-mods-TabPreviewEnhanced-borderRadiusAmount) / 1.3 + ) !important; + } } } } diff --git a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/preferences.json b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/preferences.json index b1e5c02c7..793c1e32a 100644 --- a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/preferences.json +++ b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/preferences.json @@ -1,26 +1,50 @@ [ - { - "property": "zen.mods.TabPreviewEnhanced.enabledMargins", - "label": "Put margins around tab preview image", - "type": "checkbox", - "defaultValue": true - }, - { - "property": "zen.mods.TabPreviewEnhanced.enabledBackgroundNative", - "label": "Follows background color of Zen main browser (Workspaces included)", - "type": "checkbox", - "defaultValue": true - }, - { - "property": "zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius", - "label": "Enables custom border radius for tab preview", - "type": "checkbox", - "defaultValue": true - }, - { - "property": "zen.mods.TabPreviewEnhanced.borderRadiusAmount", - "label": "Amount of custom border radius (Only active if above is enabled)", - "type": "string", - "defaultValue": "10px" - } -] \ No newline at end of file + { + "property": "browser.tabs.hoverPreview.enabled", + "label": "Enable Zen's tab previews.", + "type": "checkbox", + "defaultValue": true + }, + { + "property": "zen.mods.TabPreviewEnhanced.enabledBackgroundNative", + "label": "Enable native background on tab previews.", + "type": "checkbox", + "defaultValue": true + }, + { + "property": "zen.mods.TabPreviewEnhanced.enabledMargins", + "label": "Enable padding on tab previews.", + "type": "checkbox", + "defaultValue": true + }, + { + "property": "zen.mods.TabPreviewEnhanced.enabledCustomMargin", + "label": "Enable custom left margin to tab preview containers.", + "type": "checkbox", + "defaultValue": false + }, + { + "property": "zen.mods.TabPreviewEnhanced.marginAmount", + "label": "Custom left margin (checkbox above must be enabled):", + "type": "string", + "defaultValue": "0.5em" + }, + { + "property": "zen.mods.TabPreviewEnhanced.enabledCustomBorderRadius", + "label": "Enable custom border radius on tab preview images.", + "type": "checkbox", + "defaultValue": false + }, + { + "property": "zen.mods.TabPreviewEnhanced.borderRadiusAmount", + "label": "Custom border radius (checkbox above must be enabled):", + "type": "string", + "defaultValue": "4px" + }, + { + "property": "zen.mods.TabPreviewEnhanced.shrinkPreview", + "label": "Shrink tab preview images to match added padding.", + "type": "checkbox", + "defaultValue": true + } +] diff --git a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/readme.md b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/readme.md index 34ed480f6..06df9ae66 100644 --- a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/readme.md +++ b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/readme.md @@ -1,3 +1,5 @@ +# Enhanced Tab Preview + Enhanced tab preview, which matches browser background color. Also adds padding around tab preview image, to synergize with the rest of the browser. @@ -5,4 +7,4 @@ For now, mostly just styles it differently, later some customization is planned. For bugs and discussion, go to project github. -Works as of `1.0.2-b.2` +Works as of `1.19.3b` diff --git a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json index c8a638d40..7ba508abc 100644 --- a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json +++ b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json @@ -7,8 +7,8 @@ "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/readme.md", "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/image.png", "author": "Kaedriz", - "version": "1.1.0", + "version": "1.1.1", "tags": [], "createdAt": "2024-12-20", - "updatedAt": "2025-02-07" -} \ No newline at end of file + "updatedAt": "2026-04-36" +} From 34cb3053fa85f8e3f702ba101a5f4e2c905b1509 Mon Sep 17 00:00:00 2001 From: Kaedriz Date: Wed, 25 Mar 2026 20:40:54 +0100 Subject: [PATCH 2/2] Fix: Fix mixed up updateAt date --- themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json index 7ba508abc..7ab4c0ffa 100644 --- a/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json +++ b/themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/theme.json @@ -10,5 +10,5 @@ "version": "1.1.1", "tags": [], "createdAt": "2024-12-20", - "updatedAt": "2026-04-36" + "updatedAt": "2026-03-26" }