From 3be8d36a3bbb2037a8373f821107d6ff0dd5d4bd Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 28 Apr 2022 10:45:09 +0900 Subject: [PATCH 1/4] 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"); + } } From e71c5c38a9998636c14c1b06792c12b85f628079 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 1 May 2022 01:38:38 +0900 Subject: [PATCH 2/4] Fix: Pinned Tab - Close button hide at `movingtab` exclude `always` option #378 Info: `#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab` is not working. Because `#tabbrowser-tabs > #tabbrowser-arrowscrollbox` is shadowroot. Co-authored-by: BPower0036 <80090789+BPower0036@users.noreply.github.com> --- css/leptonChrome.css | 21 ++++++++---------- .../selected_tab/_pinned_close_button.scss | 22 +++++++++---------- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0393908..f2e49c6 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4273,21 +4273,20 @@ } /*= Selected Tab - Pinned tab's close button =================================*/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-close-button { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover: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 */ + margin-inline: -1px !important; } - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-icon-stack { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } - .tabbrowser-tab[pinned][visuallyselected]:hover .tab-icon-image { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { display: none !important; } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { @@ -4297,8 +4296,7 @@ /* Looks like hover */ width: 24px !important; height: 24px !important; - margin-inline: -4px !important; - /* (24px - 16px) / 2 */ + margin-inline: -1px !important; } .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { width: 0 !important; @@ -4310,21 +4308,20 @@ } } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { - .tabbrowser-tab[pinned]:not([busy]):hover .tab-close-button { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover: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 */ + margin-inline: -1px !important; } - .tabbrowser-tab[pinned]:not([busy]):hover .tab-icon-stack { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } - .tabbrowser-tab[pinned]:hover .tab-icon-image { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { display: none !important; } } diff --git a/src/tabbar/selected_tab/_pinned_close_button.scss b/src/tabbar/selected_tab/_pinned_close_button.scss index 1ca2c04..54beb65 100644 --- a/src/tabbar/selected_tab/_pinned_close_button.scss +++ b/src/tabbar/selected_tab/_pinned_close_button.scss @@ -1,16 +1,16 @@ @mixin pinnedCloseButtonShow($prefix: "") { - #{$prefix} .tab-close-button { + #{$prefix}: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 */ + margin-inline: -1px !important; } } @mixin pinnedIconStackLayout($prefix: "") { - #{$prefix} .tab-icon-stack { + #{$prefix}:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; @@ -23,18 +23,18 @@ } .tabbrowser-tab[pinned] { - @include pinnedCloseButtonShow("&[visuallyselected]:not([busy]):hover"); - @include pinnedIconStackLayout("&[visuallyselected]:not([busy]):hover"); - @include pinnedIconHide("&[visuallyselected]:hover"); + @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover"); @include Option("userChrome.tab.close_button_at_pinned.always") { - @include pinnedCloseButtonShow("&[visuallyselected]:not([busy])"); - @include pinnedIconStackLayout("&[visuallyselected]:not([busy])"); + @include pinnedCloseButtonShow("&[visuallyselected]"); + @include pinnedIconStackLayout("&[visuallyselected]"); @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"); + @include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&:not([style*='transform: translateX']):hover"); } } From 305f6eb477a87651a1bc485944ed14bdd4ac7483 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 1 May 2022 01:40:04 +0900 Subject: [PATCH 3/4] Clean: `selected tab` -> `clipped tab` #378 Co-authored-by: BPower0036 <80090789+BPower0036@users.noreply.github.com> --- css/leptonChrome.css | 110 +++++++++--------- src/tabbar/_clipped_tab.scss | 5 + src/tabbar/_selected_tab.scss | 5 - .../selected_tab/_pinned_close_button.scss | 40 ------- 4 files changed, 60 insertions(+), 100 deletions(-) delete mode 100644 src/tabbar/selected_tab/_pinned_close_button.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f2e49c6..f43b6f5 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4271,61 +4271,6 @@ margin: unset !important; } } -/*= Selected Tab - Pinned tab's close button =================================*/ -@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover: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: -1px !important; - } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):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: -1px !important; - } - .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([style*="transform: translateX"]):hover: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: -1px !important; - } - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { - display: none !important; - } - } -} /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ @supports -moz-bool-pref("userChrome.tab.dynamic_separtor") { @@ -4743,6 +4688,61 @@ /* Redefine from 19px !important, Original: 17px = (width - padding) */ } } +/** Clipped tabs - Show close button at pinned tab ****************************/ +@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover: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: -1px !important; + } + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):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: -1px !important; + } + .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([style*="transform: translateX"]):hover: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: -1px !important; + } + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { + display: none !important; + } + } +} /** Clipped tabs - Always show tab icon ***************************************/ @supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") { .tab-icon-image:not([src], [pinned], [crashed], [busy]) { diff --git a/src/tabbar/_clipped_tab.scss b/src/tabbar/_clipped_tab.scss index ef4b341..8b237a8 100644 --- a/src/tabbar/_clipped_tab.scss +++ b/src/tabbar/_clipped_tab.scss @@ -8,6 +8,11 @@ @import "clipped_tab/show_close_button_at_hover"; } +/** Clipped tabs - Show close button at pinned tab ****************************/ +@include Option("userChrome.tab.close_button_at_pinned") { + @import "clipped_tab/pinned_close_button"; +} + /** 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/_selected_tab.scss b/src/tabbar/_selected_tab.scss index 0c422fd..8ef7dd8 100644 --- a/src/tabbar/_selected_tab.scss +++ b/src/tabbar/_selected_tab.scss @@ -22,8 +22,3 @@ @include Option("userChrome.tab.photon_like_contextline") { @import "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 deleted file mode 100644 index 54beb65..0000000 --- a/src/tabbar/selected_tab/_pinned_close_button.scss +++ /dev/null @@ -1,40 +0,0 @@ -@mixin pinnedCloseButtonShow($prefix: "") { - #{$prefix}: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: -1px !important; - } -} -@mixin pinnedIconStackLayout($prefix: "") { - #{$prefix}:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } -} -@mixin pinnedIconHide($prefix: "") { - #{$prefix} .tab-icon-image { - display: none !important; - } -} - -.tabbrowser-tab[pinned] { - @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover"); - @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover"); - @include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover"); - - @include Option("userChrome.tab.close_button_at_pinned.always") { - @include pinnedCloseButtonShow("&[visuallyselected]"); - @include pinnedIconStackLayout("&[visuallyselected]"); - @include pinnedIconHide("&[visuallyselected]"); - } - @include Option("userChrome.tab.close_button_at_pinned.background") { - @include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover"); - @include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover"); - @include pinnedIconHide("&:not([style*='transform: translateX']):hover"); - } -} From a0fe7b59f7699a2be92426cdc4796cb312335ab1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 4 May 2022 04:39:14 +0900 Subject: [PATCH 4/4] Fix: Pinned Tab - Close button width & build missing file #378 --- css/leptonChrome.css | 32 ++++++++---- .../clipped_tab/_pinned_close_button.scss | 51 +++++++++++++++++++ 2 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 src/tabbar/clipped_tab/_pinned_close_button.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f43b6f5..68a234f 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4690,13 +4690,25 @@ } /** Clipped tabs - Show close button at pinned tab ****************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { + #tabbrowser-tabs { + --uc-close-button-size: 24px; + --uc-close-button-padding: 6px; + --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); + } + + #tabbrowser-tabs[closebuttons="activetab"] { + --uc-close-button-size: 20px; + --uc-close-button-padding: 4px; + } + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover: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: -1px !important; + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; @@ -4711,9 +4723,10 @@ display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { width: 0 !important; @@ -4729,9 +4742,10 @@ display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ - width: 24px !important; - height: 24px !important; - margin-inline: -1px !important; + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; } .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; diff --git a/src/tabbar/clipped_tab/_pinned_close_button.scss b/src/tabbar/clipped_tab/_pinned_close_button.scss new file mode 100644 index 0000000..fd091b5 --- /dev/null +++ b/src/tabbar/clipped_tab/_pinned_close_button.scss @@ -0,0 +1,51 @@ +#tabbrowser-tabs { + --uc-close-button-size: 24px; + --uc-close-button-padding: 6px; + --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); +} +#tabbrowser-tabs[closebuttons="activetab"] { + --uc-close-button-size: 20px; + --uc-close-button-padding: 4px; +} + +@mixin pinnedCloseButtonShow($prefix: "") { + #{$prefix}:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + + /* Looks like hover */ + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; + } +} +@mixin pinnedIconStackLayout($prefix: "") { + #{$prefix}:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } +} +@mixin pinnedIconHide($prefix: "") { + #{$prefix} .tab-icon-image { + display: none !important; + } +} + +.tabbrowser-tab[pinned] { + @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover"); + + @include Option("userChrome.tab.close_button_at_pinned.always") { + @include pinnedCloseButtonShow("&[visuallyselected]"); + @include pinnedIconStackLayout("&[visuallyselected]"); + @include pinnedIconHide("&[visuallyselected]"); + } + @include Option("userChrome.tab.close_button_at_pinned.background") { + @include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover"); + @include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover"); + @include pinnedIconHide("&:not([style*='transform: translateX']):hover"); + } +}