From 6485b4504db76430f78f2df9b6d839a2247aea15 Mon Sep 17 00:00:00 2001 From: jvabn Date: Sun, 20 Apr 2025 20:36:18 -0700 Subject: [PATCH 1/3] Theme rewrite and multiple fixes - Rewrote theme to bring it up to date with latest Zen UI. - Improved appearance of split tabs. - Fixed issue with placement of sound icon in Essentials tabs. - Fixed overflow of Essential tab from tab container occurring when sound icon is present and tab is a specific width. - Fixed issue where sound icon was not displaying correctly in pinned tabs whose webpage was changed. - Added same icon styles to `activemedia-blocked` icon. --- .../chrome.css | 183 ++++++++++++++---- 1 file changed, 150 insertions(+), 33 deletions(-) diff --git a/themes/5c4d7772-d963-4672-ab03-e9d541438881/chrome.css b/themes/5c4d7772-d963-4672-ab03-e9d541438881/chrome.css index 3c293209..a9cfd2f6 100644 --- a/themes/5c4d7772-d963-4672-ab03-e9d541438881/chrome.css +++ b/themes/5c4d7772-d963-4672-ab03-e9d541438881/chrome.css @@ -1,36 +1,153 @@ -.tab-icon-overlay { - opacity: 1 !important; - margin: initial !important; - border: none !important; - 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; - } +:root { + --bmb-sound-icon-scale: 1.5; + --bmb-sound-icon-scale-essentials: 1.26; } -/* Mute button takes place of tab icon when tabs are not expanded */ -@media not (-moz-bool-pref: "zen.view.sidebar-expanded") { - .tab-icon-overlay { - margin: 0px !important; - transform: translate(-35%, 50%) scale(1.5) !important; - - /* Prevent button from being toggled if tab is not selected */ - &:is([soundplaying], [muted]):not([selected]) { - pointer-events: none !important; - } - } - - .tabbrowser-tab:is([soundplaying], [muted]) .tab-icon-image { - display: none !important; - } +/* ================== General ================== */ +/* Tab icon overlay styles */ +.tab-icon-overlay { + border: none !important; + transform: translate(130%, 44%) scale(var(--bmb-sound-icon-scale)) !important; + background-color: transparent !important; + transition: 0.2s; + + &:is([soundplaying], [muted], [activemedia-blocked]):not([selected]) { + display: block !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%, 25%) + 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; + } + } + } +} + +/* ================== 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; + } } From a7b1885963adbe21a44283afafca72d6b32365b4 Mon Sep 17 00:00:00 2001 From: jvabn Date: Sat, 26 Apr 2025 14:28:20 -0700 Subject: [PATCH 2/3] Added support for zen glance tab; slight adjustments to transform - Fixed issue where modded sound icon was not appearing correctly in zen glance tabs. - Slight adjustments to scale and position of sound icon. --- .../chrome.css | 46 ++++++++++++++++++- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/themes/5c4d7772-d963-4672-ab03-e9d541438881/chrome.css b/themes/5c4d7772-d963-4672-ab03-e9d541438881/chrome.css index a9cfd2f6..a5e95b6e 100644 --- a/themes/5c4d7772-d963-4672-ab03-e9d541438881/chrome.css +++ b/themes/5c4d7772-d963-4672-ab03-e9d541438881/chrome.css @@ -1,6 +1,7 @@ :root { --bmb-sound-icon-scale: 1.5; - --bmb-sound-icon-scale-essentials: 1.26; + --bmb-sound-icon-scale-essentials: 1.28; + --bmb-sound-icon-scale-glance: 1.15; } /* ================== General ================== */ @@ -57,7 +58,7 @@ & .tab-icon-overlay, & .tab-icon-stack { &:is([soundplaying], [muted], [activemedia-blocked]) { - transform: translate(20%, 25%) + transform: translate(20%, 24%) scale(var(--bmb-sound-icon-scale-essentials)) !important; display: block !important; /* Remove extra margin created for vanilla icons */ @@ -68,6 +69,47 @@ } } +/* ================== 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] { From 9c11bba40f02edc97298be48b75a7aad9a7eea41 Mon Sep 17 00:00:00 2001 From: "mr. m" <91018726+mauro-balades@users.noreply.github.com> Date: Sun, 27 Apr 2025 10:08:49 +0200 Subject: [PATCH 3/3] Update theme.json --- themes/5c4d7772-d963-4672-ab03-e9d541438881/theme.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/5c4d7772-d963-4672-ab03-e9d541438881/theme.json b/themes/5c4d7772-d963-4672-ab03-e9d541438881/theme.json index 43900664..e1cee341 100644 --- a/themes/5c4d7772-d963-4672-ab03-e9d541438881/theme.json +++ b/themes/5c4d7772-d963-4672-ab03-e9d541438881/theme.json @@ -7,8 +7,8 @@ "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", "author": "jvabn", - "version": "1.0.2", + "version": "1.0.3", "tags": [], "createdAt": "2024-10-12", "updatedAt": "2025-03-12" -} \ No newline at end of file +}