From 5cb7c14fbdd2d98b14923abf772a3eeaf688f672 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 21 Mar 2022 11:56:26 +0900 Subject: [PATCH] Add: Option - Always show tab icon, Close button at hover, Sound Label --- src/tabbar/_clipped_tab.scss | 5 ++++ src/tabbar/_sound_tab.scss | 5 ++++ .../clipped_tab/_always_show_tab_icon.scss | 1 + .../_show_close_button_at_hover.scss | 22 ++++++++++++++++ src/tabbar/sound_tab/_show_label.scss | 3 +++ src/tabbar/sound_tab/_show_with_favicons.scss | 26 ++++++++++--------- user.js | 8 ++++-- 7 files changed, 56 insertions(+), 14 deletions(-) create mode 100644 src/tabbar/clipped_tab/_always_show_tab_icon.scss create mode 100644 src/tabbar/sound_tab/_show_label.scss diff --git a/src/tabbar/_clipped_tab.scss b/src/tabbar/_clipped_tab.scss index 92f04f4..ef4b341 100644 --- a/src/tabbar/_clipped_tab.scss +++ b/src/tabbar/_clipped_tab.scss @@ -7,3 +7,8 @@ @include Option("userChrome.tab.close_button_at_hover") { @import "clipped_tab/show_close_button_at_hover"; } + +/** Clipped tabs - Always show tab icon ***************************************/ +@include Option("userChrome.tab.always_show_tab_icon") { + @import "clipped_tab/always_show_tab_icon"; +} diff --git a/src/tabbar/_sound_tab.scss b/src/tabbar/_sound_tab.scss index 36daa65..23ca831 100644 --- a/src/tabbar/_sound_tab.scss +++ b/src/tabbar/_sound_tab.scss @@ -3,6 +3,11 @@ @import "sound_tab/hide_label"; } +/*= Sound Tab - Show Label ===================================================*/ +@include Option("userChrome.tab.sound_show_label") { + @import "sound_tab/show_label"; +} + /*= Sound Tab - Show with Favicons ===========================================*/ @include Option("userChrome.tab.sound_with_favicons") { @import "sound_tab/show_with_favicons"; diff --git a/src/tabbar/clipped_tab/_always_show_tab_icon.scss b/src/tabbar/clipped_tab/_always_show_tab_icon.scss new file mode 100644 index 0000000..8d1c8b6 --- /dev/null +++ b/src/tabbar/clipped_tab/_always_show_tab_icon.scss @@ -0,0 +1 @@ + diff --git a/src/tabbar/clipped_tab/_show_close_button_at_hover.scss b/src/tabbar/clipped_tab/_show_close_button_at_hover.scss index 14693ca..f2a6116 100644 --- a/src/tabbar/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tabbar/clipped_tab/_show_close_button_at_hover.scss @@ -15,6 +15,16 @@ visibility: visible !important; opacity: 1; } +@include Option("userChrome.tab.always_show_close_button_at_hover") { + .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + .tabbrowser-tab:hover .tab-close-button { + visibility: visible !important; + opacity: 1; + } +} /* Animate */ @include Animate { @@ -27,6 +37,18 @@ #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { transition: opacity 0.25s var(--animation-easing-function) !important; } + + @include Option("userChrome.tab.always_show_close_button_at_hover") { + /* Fade out */ + .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + transition: opacity 0.1s var(--animation-easing-function) !important; + } + + /* Fade in */ + .tabbrowser-tab:hover .tab-close-button { + transition: opacity 0.25s var(--animation-easing-function) !important; + } + } } /* Closed Button's icon thicker */ diff --git a/src/tabbar/sound_tab/_show_label.scss b/src/tabbar/sound_tab/_show_label.scss new file mode 100644 index 0000000..e288020 --- /dev/null +++ b/src/tabbar/sound_tab/_show_label.scss @@ -0,0 +1,3 @@ +.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){ + display: -moz-box !important; +} diff --git a/src/tabbar/sound_tab/_show_with_favicons.scss b/src/tabbar/sound_tab/_show_with_favicons.scss index d366d00..48fdac7 100644 --- a/src/tabbar/sound_tab/_show_with_favicons.scss +++ b/src/tabbar/sound_tab/_show_with_favicons.scss @@ -43,18 +43,20 @@ } /* None exist favicon - Size bigger */ -.tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { - transform: translateX(-0.5px) translateY(-1px); - inset-inline-end: 0 !important; - margin-inline-end: 0 !important; - padding: 0 !important; -} -.tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { - opacity: 0 !important; /* Favicon hidden */ -} -.tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label { - transform: translateX(3px); +@icnlude NotOption("userChrome.tab.always_show_tab_icon") { + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + transform: translateX(-0.5px) translateY(-1px); + inset-inline-end: 0 !important; + margin-inline-end: 0 !important; + padding: 0 !important; + } + .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; /* Favicon hidden */ + } + .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); + } } /* Busy - Show */ diff --git a/user.js b/user.js index 444ac64..041a65b 100644 --- a/user.js +++ b/user.js @@ -52,8 +52,12 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.tab.photon_like_radius", true); // == Theme Custom Settings ==================================================== -// user_pref("userChrome.padding.first_tab", true); -// user_pref("userChrome.padding.drag_space", true); +// user_pref("userChrome.padding.first_tab", true); +// user_pref("userChrome.padding.drag_space", true); + +// user_pref("userChrome.tab.always_show_tab_icon", true); +// user_pref("userChrome.tab.always_show_close_button_at_hover", true); // Need close_button_at_hover +// user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label // == Theme Default Settings =================================================== // -- User Chrome --------------------------------------------------------------