From 3be8d36a3bbb2037a8373f821107d6ff0dd5d4bd Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 28 Apr 2022 10:45:09 +0900 Subject: [PATCH] Add: Option - Pinned tab button at hover #378 - `userChrome.tab.close_button_at_pinned.always` - `userChrome.tab.close_button_at_pinned.background` --- css/leptonChrome.css | 48 +++++++++++++++--- src/tabbar/_container_tab.scss | 1 + src/tabbar/_selected_tab.scss | 2 +- .../selected_tab/_pinned_close_button.scss | 49 ++++++++++++++----- 4 files changed, 80 insertions(+), 20 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7c2f73f..0393908 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4271,9 +4271,9 @@ margin: unset !important; } } -/*= Selected Tab - Photon like contextline ===================================*/ +/*= Selected Tab - Pinned tab's close button =================================*/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-close-button { display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ @@ -4282,16 +4282,52 @@ margin-inline: -4px !important; /* (24px - 16px) / 2 */ } - - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } - - .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-image { display: none !important; } + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -4px !important; + /* (24px - 16px) / 2 */ + } + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { + .tabbrowser-tab[pinned]:not([busy]):hover .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -4px !important; + /* (24px - 16px) / 2 */ + } + .tabbrowser-tab[pinned]:not([busy]):hover .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned]:hover .tab-icon-image { + display: none !important; + } + } } /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ diff --git a/src/tabbar/_container_tab.scss b/src/tabbar/_container_tab.scss index dbb8d66..b3a966d 100644 --- a/src/tabbar/_container_tab.scss +++ b/src/tabbar/_container_tab.scss @@ -50,6 +50,7 @@ .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { opacity: 0; } + // Don't hide at userChrome.tab.close_button_at_pinned.background } /* Pinned Tab - Titlechanged Indicator override */ diff --git a/src/tabbar/_selected_tab.scss b/src/tabbar/_selected_tab.scss index b5b262f..0c422fd 100644 --- a/src/tabbar/_selected_tab.scss +++ b/src/tabbar/_selected_tab.scss @@ -23,7 +23,7 @@ @import "selected_tab/photon_like_contextline"; } -/*= Selected Tab - Photon like contextline ===================================*/ +/*= Selected Tab - Pinned tab's close button =================================*/ @include Option("userChrome.tab.close_button_at_pinned") { @import "selected_tab/pinned_close_button"; } diff --git a/src/tabbar/selected_tab/_pinned_close_button.scss b/src/tabbar/selected_tab/_pinned_close_button.scss index e6bde8c..1ca2c04 100644 --- a/src/tabbar/selected_tab/_pinned_close_button.scss +++ b/src/tabbar/selected_tab/_pinned_close_button.scss @@ -1,17 +1,40 @@ -.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; +@mixin pinnedCloseButtonShow($prefix: "") { + #{$prefix} .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -4px !important; /* (24px - 16px) / 2 */ + /* Looks like hover */ + width: 24px !important; + height: 24px !important; + margin-inline: -4px !important; /* (24px - 16px) / 2 */ + } } -.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; +@mixin pinnedIconStackLayout($prefix: "") { + #{$prefix} .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } } -.tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { - display: none !important; +@mixin pinnedIconHide($prefix: "") { + #{$prefix} .tab-icon-image { + display: none !important; + } +} + +.tabbrowser-tab[pinned] { + @include pinnedCloseButtonShow("&[visuallyselected]:not([busy]):hover"); + @include pinnedIconStackLayout("&[visuallyselected]:not([busy]):hover"); + @include pinnedIconHide("&[visuallyselected]:hover"); + + @include Option("userChrome.tab.close_button_at_pinned.always") { + @include pinnedCloseButtonShow("&[visuallyselected]:not([busy])"); + @include pinnedIconStackLayout("&[visuallyselected]:not([busy])"); + @include pinnedIconHide("&[visuallyselected]"); + } + @include Option("userChrome.tab.close_button_at_pinned.background") { + @include pinnedCloseButtonShow("&:not([busy]):hover"); + @include pinnedIconStackLayout("&:not([busy]):hover"); + @include pinnedIconHide("&:hover"); + } }