pmOS-tweaks/fenix-fox
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use CSS containment to make hide_tabs_with_one_tab work reasonably

Browse source
This commit is contained in:
MrOtherGuy 2022-12-18 13:49:56 +02:00
parent 024f9dcee7
commit 7ef22f7807
1 changed files with 32 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
chrome/hide_tabs_with_one_tab.css
View file

@ -13,17 +13,6 @@ See the above repository for updates as well as full license text. */
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox{ min-height: 0 !important; }
:root:not([customizing]) #tabs-newtab-button,
:root:not([customizing]) #TabsToolbar-customization-target > .toolbarbutton-1,
:root:not([customizing]) #TabsToolbar .titlebar-button{
-moz-appearance: none !important;
height: 0px;
padding-top: 0px !important;
padding-bottom: 0px !important;
-moz-box-align: stretch;
margin: 0 !important;
}
.accessibility-indicator,
.private-browsing-indicator{
height: unset !important;
@ -36,23 +25,10 @@ See the above repository for updates as well as full license text. */
.tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{
visibility: collapse !important;
/* These seem unnecessary, but they achieve compatibility with hide_tabs_with_one_tab.css */
min-height: 0 !important;
height: 0;
}
/* Button re-styling */
#tabs-newtab-button{ transform: scale(0.8); }
#tabs-newtab-button:hover{
background-color: var(--toolbarbutton-hover-background);
border-radius: var(--tab-border-radius);
}
#tabs-newtab-button > .toolbarbutton-icon{
padding: 0 !important;
transform: scale(0.5);
background-color: transparent !important;
}
/* Fix window controls not being clickable */
:root[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive]{
transition: height 0ms steps(1) 80ms;
@ -70,3 +46,35 @@ See the above repository for updates as well as full license text. */
}
#TabsToolbar .titlebar-button > .toolbarbutton-icon{ padding: 0 13px !important }
}
#tabbrowser-tabs:not([overflowing="true"]) ~ #alltabs-button{
display: none;
}
#tabbrowser-arrowscrollbox-periphery,
#private-browsing-indicator-with-label,
#TabsToolbar > .titlebar-buttonbox-container{
contain: strict;
contain-intrinsic-height: 0px;
}
#tabbrowser-arrowscrollbox-periphery{
contain-intrinsic-width: 36px;
padding-inline-end: 3px;
}
#private-browsing-indicator-with-label{
contain-intrinsic-width: 116px;
}
#TabsToolbar > .titlebar-buttonbox-container{
contain-intrinsic-width: var(--uc-window-control-width,138px);
margin-bottom: 0 !important;
}
@media (-moz-platform: linux){
#TabsToolbar > .titlebar-buttonbox-container{
contain-intrinsic-width: var(--uc-window-control-width,105px);
}
}
@media (-moz-platform: macos){
#TabsToolbar > .titlebar-buttonbox-container{
contain-intrinsic-width: var(--uc-window-control-width,72px);
}
}