a53bb3bf96
Previously we were showing tabs toolbar when the whole toolbox became hovered which would make using bookmarks and navigation toolbars pretty annoying.
98 lines
3.8 KiB
CSS
98 lines
3.8 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_tabstoolbar_v2.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* Requires Firefox 133 */
|
|
|
|
:root{
|
|
--uc-tabs-hide-animation-duration: 48ms;
|
|
--uc-tabs-hide-animation-delay: 200ms;
|
|
}
|
|
|
|
@media (-moz-bool-pref: "sidebar.verticalTabs"),
|
|
-moz-pref("sidebar.verticalTabs"){
|
|
#sidebar-main{
|
|
overflow: visible !important;
|
|
max-width: var(--tab-collapsed-width) !important;
|
|
z-index: var(--browser-area-z-index-toolbox-while-animating);
|
|
transition: z-index 0s linear var(--uc-tabs-hide-duration);
|
|
background: inherit;
|
|
}
|
|
sidebar-main{
|
|
--tab-pinned-horizontal-count: 5; /* This needs to match whatever is used in sidebar-main.css - currently 5 */
|
|
background: inherit;
|
|
overflow: hidden;
|
|
min-width: var(--tab-collapsed-width);
|
|
transition: min-width var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay);
|
|
border-inline: 0.01px solid var(--chrome-content-separator-color);
|
|
border-inline-width: 0 0.01px;
|
|
&:is([sidebar-positionend],[positionend]){
|
|
transition-property: min-width, transform;
|
|
border-inline-width: 0.01px 0;
|
|
}
|
|
}
|
|
sidebar-main:hover{
|
|
min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px);
|
|
transition-delay: 0ms !important;
|
|
&:is([sidebar-positionend],[positionend]){
|
|
transform: translateX(calc(var(--tab-collapsed-width) - 100%));
|
|
}
|
|
}
|
|
#sidebar-wrapper{
|
|
background: inherit;
|
|
}
|
|
}
|
|
@media not (-moz-bool-pref: "sidebar.verticalTabs"),
|
|
not -moz-pref("sidebar.verticalTabs"){
|
|
:root:not([customizing],[chromehidden~="menubar"]) #navigator-toolbox:has(> :is(#toolbar-menubar,#TabsToolbar):hover),
|
|
:root:not([customizing],[chromehidden~="menubar"]) #TabsToolbar{
|
|
margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
|
|
}
|
|
#toolbar-menubar:is([autohide=""],[autohide="true"]) + #TabsToolbar:not(:hover){
|
|
-moz-window-dragging: no-drag !important;
|
|
}
|
|
#toolbar-menubar:is([autohide=""],[autohide="true"]) + #TabsToolbar:not(:hover,[customizing])::before{
|
|
content: "";
|
|
display: flex;
|
|
position: absolute;
|
|
height: 6px;
|
|
width: 100vw;
|
|
visibility: visible;
|
|
}
|
|
#navigator-toolbox{
|
|
transition: margin-bottom var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important;
|
|
--browser-area-z-index-toolbox: 3;
|
|
}
|
|
#TabsToolbar:not([customizing]){
|
|
visibility: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: visibility 0ms linear var(--uc-tabs-hide-animation-delay),
|
|
margin-bottom var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important;
|
|
}
|
|
#navigator-toolbox:has(> :is(#toolbar-menubar,#TabsToolbar):hover),
|
|
#navigator-toolbox[movingtab]{
|
|
transition-delay: 0s !important;
|
|
> #TabsToolbar{
|
|
visibility: visible;
|
|
margin-bottom: 0px;
|
|
transition-delay: 0ms, 0ms !important;
|
|
}
|
|
}
|
|
@media (-moz-bool-pref: "userchrome.autohidetabs.show-while-inactive.enabled"),
|
|
-moz-pref("userchrome.autohidetabs.show-while-inactive.enabled"){
|
|
#navigator-toolbox:-moz-window-inactive{
|
|
margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height));
|
|
> #TabsToolbar{
|
|
visibility: visible;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
/* These rules make sure that height of tabs toolbar doesn't exceed tab-min-height */
|
|
#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
|
|
max-height: var(--tab-min-height);
|
|
}
|
|
.tab-label{ line-height: 20px !important; }
|
|
:root[uidensity="compact"] .tab-label{ line-height: 18px !important; }
|
|
}
|