mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-30 14:10:23 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'pinned-close-button' into dev #378

Browse source
This commit is contained in:
alstjr7375 2022-05-07 00:44:57 +09:00
commit bd0988845c
6 changed files with 126 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

91
css/leptonChrome.css
View file

@ -4329,28 +4329,6 @@
margin: unset !important;
}
}
/*= Selected Tab - Photon like contextline ===================================*/
@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
.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;
}
}
/*= Unselected Tab - Divide line =============================================*/
/*= Unselected Tab - Dynamic Separator =======================================*/
@supports -moz-bool-pref("userChrome.tab.dynamic_separtor") {
@ -4777,6 +4755,75 @@
/* 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-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: 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;
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: 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;
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: 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;
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]) {

5
src/tabbar/_clipped_tab.scss
View file

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

1
src/tabbar/_container_tab.scss
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 */

5
src/tabbar/_selected_tab.scss
View file

@ -22,8 +22,3 @@
@include Option("userChrome.tab.photon_like_contextline") {
@import "selected_tab/photon_like_contextline";
}
/*= Selected Tab - Photon like contextline ===================================*/
@include Option("userChrome.tab.close_button_at_pinned") {
@import "selected_tab/pinned_close_button";
}

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

17
src/tabbar/selected_tab/_pinned_close_button.scss
View file

@ -1,17 +0,0 @@
.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;
}