diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ecdaf81..22b9475 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8080,10 +8080,18 @@ } /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ .tabbrowser-tab { - --uc-sound-tab-icon-position-x: -0.5px; + --uc-sound-tab-icon-position-x-default: -0.5px; + --uc-sound-tab-icon-position-x: var(--uc-sound-tab-icon-position-x-default); + --uc-sound-tab-icon-position-y: -6px; } .tabbrowser-tab:-moz-locale-dir(rtl) { - --uc-sound-tab-icon-position-x: 0.5px; + --uc-sound-tab-icon-position-x: calc(-1 * var(--uc-sound-tab-icon-position-x-default)); + } + @supports -moz-bool-pref("userChrome.tab.sound_with_favicons.with_text") { + .tabbrowser-tab:not([pinned]) { + --uc-sound-tab-icon-position-x-default: 7px; + --uc-sound-tab-icon-position-y: -1px; + } } .tab-icon-overlay:not([crashed]), .tab-icon-overlay[pinned][crashed][selected] { @@ -8091,7 +8099,7 @@ top: 0 !important; inset-inline-end: -9px !important; z-index: 1 !important; - transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px); + transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(var(--uc-sound-tab-icon-position-y)); /* Shape */ padding: 1.5px !important; border-radius: 10px !important; @@ -8108,17 +8116,27 @@ } /* Label */ @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label-container { + --uc-sound-tab-label-position-x-default: 4px; + } + @supports -moz-bool-pref("userChrome.tab.sound_with_favicons.with_text") { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label-container { + --uc-sound-tab-label-position-x-default: 8px; + } + } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="ltr"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { - --uc-sound-tab-label-position-x: 4px; + --uc-sound-tab-label-position-x: var(--uc-sound-tab-label-position-x-default); } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { - --uc-sound-tab-label-position-x: -4px; + --uc-sound-tab-label-position-x: calc(-1 * var(--uc-sound-tab-label-position-x-default)); } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container @@ -8128,17 +8146,27 @@ } @supports -moz-bool-pref("userChrome.hidden.tab_icon") { @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label-container { + --uc-sound-tab-label-position-x-default: 4px; + } + @supports -moz-bool-pref("userChrome.tab.sound_with_favicons.with_text") { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label-container { + --uc-sound-tab-label-position-x-default: 8px; + } + } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="ltr"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { - --uc-sound-tab-label-position-x: 4px; + --uc-sound-tab-label-position-x: var(--uc-sound-tab-label-position-x-default); } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { - --uc-sound-tab-label-position-x: -4px; + --uc-sound-tab-label-position-x: calc(-1 * var(--uc-sound-tab-label-position-x-default)); } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container diff --git a/src/tab/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss index 1b4ac30..f833143 100644 --- a/src/tab/sound_tab/_show_with_favicons.scss +++ b/src/tab/sound_tab/_show_with_favicons.scss @@ -32,9 +32,18 @@ /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ .tabbrowser-tab { - --uc-sound-tab-icon-position-x: -0.5px; + --uc-sound-tab-icon-position-x-default: -0.5px; + --uc-sound-tab-icon-position-x: var(--uc-sound-tab-icon-position-x-default); + --uc-sound-tab-icon-position-y: -6px; &:-moz-locale-dir(rtl) { - --uc-sound-tab-icon-position-x: 0.5px; + --uc-sound-tab-icon-position-x: calc(-1 * var(--uc-sound-tab-icon-position-x-default)); + } + + @include Option("userChrome.tab.sound_with_favicons.with_text") { + &:not([pinned]) { + --uc-sound-tab-icon-position-x-default: 7px; + --uc-sound-tab-icon-position-y: -1px; + } } } .tab-icon-overlay:not([crashed]), @@ -43,7 +52,7 @@ top: 0 !important; inset-inline-end: -9px !important; z-index: 1 !important; - transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(-6px); + transform: translateX(var(--uc-sound-tab-icon-position-x)) translateY(var(--uc-sound-tab-icon-position-y)); /* Shape */ padding: 1.5px !important; @@ -64,13 +73,18 @@ @include _hidden_tabIcon_soundTabLabel { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { .tab-label-container { + --uc-sound-tab-label-position-x-default: 4px; + @include Option("userChrome.tab.sound_with_favicons.with_text") { + --uc-sound-tab-label-position-x-default: 8px; + } + &[labeldirection=ltr], &:not([labeldirection]):-moz-locale-dir(ltr) { - --uc-sound-tab-label-position-x: 4px; + --uc-sound-tab-label-position-x: var(--uc-sound-tab-label-position-x-default); } &[labeldirection=rtl], &:not([labeldirection]):-moz-locale-dir(rtl) { - --uc-sound-tab-label-position-x: -4px; + --uc-sound-tab-label-position-x: calc(-1 * var(--uc-sound-tab-label-position-x-default)); } > * { diff --git a/user.js b/user.js index af9c5e9..da2dc7e 100644 --- a/user.js +++ b/user.js @@ -184,6 +184,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tab.close_button_at_hover.with_selected", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label // user_pref("userChrome.tab.container.on_top", true); +// user_pref("userChrome.tab.sound_with_favicons.with_text", true); // user_pref("userChrome.tab.selected_bold", true); // user_pref("userChrome.navbar.as_sidebar", true);