Merge pull request #1435 from jvabn/update-bigger-mute-button

This commit is contained in:
mr. m 2025-04-27 10:09:02 +02:00 committed by GitHub
commit 57dea7dc01
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 194 additions and 35 deletions

View file

@ -1,36 +1,195 @@
.tab-icon-overlay { :root {
opacity: 1 !important; --bmb-sound-icon-scale: 1.5;
margin: initial !important; --bmb-sound-icon-scale-essentials: 1.28;
border: none !important; --bmb-sound-icon-scale-glance: 1.15;
margin-right: 35px !important;
transform: translate(130%, 45%) scale(1.5) !important;
background-color: transparent !important;
fill: light-dark(black, white) !important;
transition: 0.2s;
&:hover {
fill: var(--zen-primary-color) !important;
transition: 0.2s;
}
&:is([soundplaying], [muted]):not([selected]) {
display: block !important;
}
} }
/* Mute button takes place of tab icon when tabs are not expanded */ /* ================== General ================== */
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") { /* Tab icon overlay styles */
.tab-icon-overlay { .tab-icon-overlay {
margin: 0px !important; border: none !important;
transform: translate(-35%, 50%) scale(1.5) !important; transform: translate(130%, 44%) scale(var(--bmb-sound-icon-scale)) !important;
background-color: transparent !important;
/* Prevent button from being toggled if tab is not selected */ transition: 0.2s;
&:is([soundplaying], [muted]):not([selected]) {
pointer-events: none !important; &:is([soundplaying], [muted], [activemedia-blocked]):not([selected]) {
} display: block !important;
} }
}
.tabbrowser-tab:is([soundplaying], [muted]) .tab-icon-image {
display: none !important; /* Ensure sound icon is still visible when tab not selected */
} #navigator-toolbox:not([zen-sidebar-expanded])
#tabbrowser-tabs
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]):not(
[selected]
) {
display: block !important;
}
/* Fill sound button on hover; ensure icon is displayed */
#navigator-toolbox #tabbrowser-tabs .tabbrowser-tab {
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
&:is([soundplaying], [muted]) {
&:hover {
fill: var(--zen-colors-primary) !important;
transition: 0.2s;
display: block !important;
}
}
}
}
/* ================== Zen essentials (expanded tabs) ================== */
#navigator-toolbox[zen-sidebar-expanded] {
.tabbrowser-tab[zen-essential] {
/* Hide tab icon image for collapsed tabs and essentials */
&:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image {
display: none !important;
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay,
& .tab-icon-stack {
&:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translate(20%, 24%)
scale(var(--bmb-sound-icon-scale-essentials)) !important;
display: block !important;
/* Remove extra margin created for vanilla icons */
margin-inline-end: -2em !important;
margin-inline-start: -2em !important;
}
}
}
}
/* ================== Zen glance tab (expanded tabs) ================== */
#navigator-toolbox[zen-sidebar-expanded] {
.tabbrowser-tab[zen-glance-tab] {
/* Hide tab icon image */
&:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image {
display: none !important;
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay,
& .tab-icon-stack {
&:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translate(-10%, 25%)
scale(var(--bmb-sound-icon-scale-glance)) !important;
display: block !important;
margin: 0px !important;
}
}
}
}
/* ================== Zen glance tab (pinned and essentials) ================== */
#navigator-toolbox[zen-sidebar-expanded]
#tabbrowser-tabs
.tabbrowser-tab[zen-glance-tab] {
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
&:is([soundplaying], [muted], [activemedia-blocked]) {
margin: 0px !important;
transform: translate(-35%, 25%) scale(var(--bmb-sound-icon-scale-glance)) !important;
display: block !important;
}
}
}
/* ================== Pinned tab (tab page changed) ================== */
#navigator-toolbox[zen-sidebar-expanded] {
.tabbrowser-tab[zen-pinned-changed] {
/* Add extra space for sound button when reset tab button is active */
&:is([soundplaying], [muted], [activemedia-blocked]) {
.tab-reset-pin-button {
margin-right: 2.8em !important;
}
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
&:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translate(180%, 45%) scale(var(--bmb-sound-icon-scale)) !important;
}
}
}
}
/* ================== Expanded tabs ================== */
#navigator-toolbox[zen-sidebar-expanded] #tabbrowser-tabs .tabbrowser-tab {
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
&:is([soundplaying], [muted], [activemedia-blocked]) {
margin-right: 36px !important;
margin-left: 0px !important;
}
}
}
/* ================== Split view (expanded tabs) ================== */
#navigator-toolbox[zen-sidebar-expanded]
#tabbrowser-tabs
.tabbrowser-tab[split-view] {
/* Sound icon takes place of tab icon if tab is not pinned */
&:is([soundplaying], [muted], [activemedia-blocked]):not([pinned])
.tab-icon-image {
display: none !important;
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
/* Replace tab icon image with sound button; not needed if tab is pinned or essential */
&:is([soundplaying], [muted], [activemedia-blocked]):not(
[zen-essential],
[pinned]
) {
transform: translate(-40%, 46%) scale(var(--bmb-sound-icon-scale)) !important;
margin-right: 12px !important;
margin-left: 4px !important;
}
&:not([pinned]) {
margin-left: 0px !important;
}
}
}
/* ================== Collapsed tabs ================== */
#navigator-toolbox:not([zen-sidebar-expanded]) {
.tab-icon-overlay {
transform: translate(-40%, 46%) scale(var(--bmb-sound-icon-scale)) !important;
/* Prevent sound/media button from being toggled on click when collapsed tab out of focus */
&:is([soundplaying], [muted], [activemedia-blocked]):not([selected]) {
pointer-events: none !important;
}
}
.tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked])
.tab-icon-image {
display: none !important;
}
} }

View file

@ -7,8 +7,8 @@
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/5c4d7772-d963-4672-ab03-e9d541438881/readme.md", "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/5c4d7772-d963-4672-ab03-e9d541438881/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/5c4d7772-d963-4672-ab03-e9d541438881/image.png", "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/5c4d7772-d963-4672-ab03-e9d541438881/image.png",
"author": "jvabn", "author": "jvabn",
"version": "1.0.2", "version": "1.0.3",
"tags": [], "tags": [],
"createdAt": "2024-10-12", "createdAt": "2024-10-12",
"updatedAt": "2025-03-12" "updatedAt": "2025-03-12"
} }