mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-08 09:19:59 +02:00
Merge pull request #1435 from jvabn/update-bigger-mute-button
This commit is contained in:
mr. m
GitHub
commit
57dea7dc01
2 changed files with 194 additions and 35 deletions
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue