Add: Option - Pinned tab button at hover #378

- `userChrome.tab.close_button_at_pinned.always`
- `userChrome.tab.close_button_at_pinned.background`
This commit is contained in:
alstjr7375 2022-04-28 10:45:09 +09:00
parent 979dd77ab3
commit 3be8d36a3b
4 changed files with 80 additions and 20 deletions

View file

@ -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 =======================================*/

View file

@ -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 */

View file

@ -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";
}

View file

@ -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");
}
}