Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
34 changes: 34 additions & 0 deletions themes/c9435f71-1735-470f-901e-4995c64c0bbd/chrome.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@

@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
.tabbrowser-tab:is([soundplaying], [muted]) {
/* Create colored indicator bar on the right edge of tabs with audio */
& .tab-background::after {
content:'';
position: absolute;
width: 4px !important;
border-radius: 4px !important;
height: 80% !important;
top: 50%;
left: calc(100% - 4px) !important;
transform: translateY(-50%);
background-color: var(--zen-colors-primary) !important;
}

/* Make indicator smaller and more subtle for inactive tabs */
&:not([selected='true']) .tab-background::after{
height: 33.33% !important;
background-color: var(--zen-colors-secondary) !important;
}

/* Expand indicator on hover over inactive tabs */
&:not([selected='true']):hover .tab-background::after{
height: 80% !important;
background-color: var(--zen-colors-secondary) !important;
}

/* Hide the speaker icon when the indicator bar is shown */
& .tab-icon-overlay[soundplaying] {
display: none !important;
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions themes/c9435f71-1735-470f-901e-4995c64c0bbd/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@

# Audio Tab Stripe

Display an indicator on the 'Now playing' tab when the sidebar is collapsed. This is helpful if you've installed the 'Hide tab mute' Zen browser theme and want to quickly identify which tab is currently playing sound.

This is a fork of [benstone326: Now playing indicator](https://github.com/benstone326/zen-mods), which has not been updated for over a year. This fork represents a fresh start with significant improvements and starts at version 1.0.0.

## Version 1.0.0

- Fixed CSS variable names to use correct Zen Browser variables (`--zen-colors-primary` and `--zen-colors-secondary`)
- Hide the speaker icon when the indicator bar is shown to reduce visual clutter
- Active tabs use primary color, inactive tabs use secondary color
- Increased indicator height to 80% in active tab or hover

## Original Version 1.2.1 (archived)

- Fixed issue with YT video opened in new tab and the indicator shows up, hence the video is not playing.

## Compatibility

Please note that other themes may conflict with this one. If you experience any issues, please disable this theme and report the issue to the theme maintainer.
14 changes: 14 additions & 0 deletions themes/c9435f71-1735-470f-901e-4995c64c0bbd/theme.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"id": "c9435f71-1735-470f-901e-4995c64c0bbd",
"name": "Audio Tab Stripe",
"description": "Display an indicator on the 'Now playing' tab when the sidebar is collapsed.",
"homepage": "https://github.com/itacentury/zen-mods/tree/main",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/c9435f71-1735-470f-901e-4995c64c0bbd/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/c9435f71-1735-470f-901e-4995c64c0bbd/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/c9435f71-1735-470f-901e-4995c64c0bbd/image.png",
"author": "itacentury",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-11-08",
"updatedAt": "2025-11-08"
}