mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-31 06:20:48 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix: Pinned Tab - Close button width & build missing file #378

Browse source
This commit is contained in:
alstjr7375 2022-05-04 04:39:14 +09:00
parent 305f6eb477
commit a0fe7b59f7
2 changed files with 74 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

32
css/leptonChrome.css
View file

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

51
src/tabbar/clipped_tab/_pinned_close_button.scss Normal file
View file

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