96 lines
3.7 KiB
CSS
96 lines
3.7 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-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;
|
|
}
|
|
}
|
|
:where(#navigator-toolbox[movingtab] + #browser > #sidebar-main) > sidebar-main[expanded],
|
|
sidebar-main[expanded]: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-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-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; }
|
|
}
|