Add: Tab - Sound icon with text #463

This commit is contained in:
alstjr7375 2023-04-17 03:08:00 +09:00
parent 4cd0a0149e
commit 5af723fa70
3 changed files with 55 additions and 12 deletions

42
css/leptonChrome.css generated
View file

@ -8080,10 +8080,18 @@
} }
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tabbrowser-tab { .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) { .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:not([crashed]),
.tab-icon-overlay[pinned][crashed][selected] { .tab-icon-overlay[pinned][crashed][selected] {
@ -8091,7 +8099,7 @@
top: 0 !important; top: 0 !important;
inset-inline-end: -9px !important; inset-inline-end: -9px !important;
z-index: 1 !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 */ /* Shape */
padding: 1.5px !important; padding: 1.5px !important;
border-radius: 10px !important; border-radius: 10px !important;
@ -8108,17 +8116,27 @@
} }
/* Label */ /* Label */
@supports not -moz-bool-pref("userChrome.hidden.tab_icon") { @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]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container[labeldirection="ltr"], .tab-label-container[labeldirection="ltr"],
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { .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]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container[labeldirection="rtl"], .tab-label-container[labeldirection="rtl"],
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { .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]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container .tab-label-container
@ -8128,17 +8146,27 @@
} }
@supports -moz-bool-pref("userChrome.hidden.tab_icon") { @supports -moz-bool-pref("userChrome.hidden.tab_icon") {
@supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { @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]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container[labeldirection="ltr"], .tab-label-container[labeldirection="ltr"],
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { .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]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container[labeldirection="rtl"], .tab-label-container[labeldirection="rtl"],
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { .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]) .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])
.tab-label-container .tab-label-container

View file

@ -32,9 +32,18 @@
/* Makes the speaker icon to always appear if the tab is playing (not only on hover) */ /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
.tabbrowser-tab { .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) { &:-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]), .tab-icon-overlay:not([crashed]),
@ -43,7 +52,7 @@
top: 0 !important; top: 0 !important;
inset-inline-end: -9px !important; inset-inline-end: -9px !important;
z-index: 1 !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 */ /* Shape */
padding: 1.5px !important; padding: 1.5px !important;
@ -64,13 +73,18 @@
@include _hidden_tabIcon_soundTabLabel { @include _hidden_tabIcon_soundTabLabel {
.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
.tab-label-container { .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], &[labeldirection=ltr],
&:not([labeldirection]):-moz-locale-dir(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], &[labeldirection=rtl],
&:not([labeldirection]):-moz-locale-dir(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));
} }
> * { > * {

View file

@ -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.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.sound_show_label", true); // Need remove sound_hide_label
// user_pref("userChrome.tab.container.on_top", true); // 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.tab.selected_bold", true);
// user_pref("userChrome.navbar.as_sidebar", true); // user_pref("userChrome.navbar.as_sidebar", true);