Skip to content

[UPDATE] Audio Indicator Enhanced & Tab Preview Enhanced #1945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kaedriz wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[UPDATE] Audio Indicator Enhanced & Tab Preview Enhanced #1945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
33c6387
Update Mods
Kaedriz Mar 25, 2026
34cb305
Fix: Fix mixed up updateAt date
Kaedriz Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions themes/2317fd93-c3ed-4f37-b55a-304c1816819e/chrome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand All @@ -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;
}
}
Expand All @@ -92,26 +92,26 @@
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;
}
}
}

&[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] {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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]
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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"] {
Expand All @@ -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"] {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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]
Expand Down Expand Up @@ -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 */
Expand Down
4 changes: 3 additions & 1 deletion themes/2317fd93-c3ed-4f37-b55a-304c1816819e/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
6 changes: 3 additions & 3 deletions themes/2317fd93-c3ed-4f37-b55a-304c1816819e/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
"updatedAt": "2026-03-25"
}
111 changes: 64 additions & 47 deletions themes/87196c08-8ca1-4848-b13b-7ea41ee830e7/chrome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
Loading
Loading