Use `autohide_tabstoolbar_v2.css`, `autohide_bookmarks_toolbar.css`, & `tabs_below_content_v2.css` together?

[guigirl42]

Hello

Thanks for your simply wonderful project! 🎉 🥳 👯‍♀️

For years i have used your autohide_bookmarks_toolbar.css, & since yesterday now also autohide_tabstoolbar_v2.css. Afaict they each continue working well, ie, no apparent conflicts with each other.

Today i decided i'd like to move the native FF horizontal tabstoolbar to the bottom of the browser window [yet continue autohiding it], so added your tabs_below_content_v2.css. When all three are active together, none works correctly. I was not surprised, but wondered if a fix might be trivial, or otherwise need complete redesign, which thus would be unrealistic of me.

Can you pls advise? Might there be some individual values i could edit in either [i presume] tabs_below_content_v2.css &/or autohide_tabstoolbar_v2.css to make all three be happy together... or should i just forget about having autohiding tabs at the bottom?

Btw, in case it's relevant; i do not use the native FF horizontal tabstoolbar usually, & so for years used another of your codeblocks to permanently hide it, because instead i use TreeStyleTab for its sophisticated tabs management. However with the recent introduction of the long awaited Firefox Split Tabs feature [i use Nightly], which atm can only be invoked graphically with the native tabs, i had to swap hide_tabs_toolbar_v2.css for autohide_tabstoolbar_v2.css.

[MrOtherGuy]

Autohiding needs to behave quite differently when tabs are below content. So what I would do is just remove autohide_tabstoolbar_v2.css and use something else entirely. In fact, when tabs are below content you can get around with simpler code.

So remove autohide_tabstoolbar_v2.css and use this instead:

:root{
  --uc-tabs-hide-animation-duration: 48ms;
  --uc-tabs-hide-animation-delay: 200ms;
  --uc-tabs-trigger-area-height: 4px;
}
#TabsToolbar{
  opacity: 0;
  bottom: 0;
  width: 100vw;
  position: absolute;
  z-index: 3;
  transform: translateY(calc((-1 * var(--uc-tabs-trigger-area-height)) + 2 * var(--tab-block-margin) + var(--tab-min-height)));
  transition: opacity 0ms linear var(--uc-tabs-hide-animation-delay),
              transform var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important;
}

#mainPopupSet:has( > #tab-group-editor > [panelopen], > #tabgroup-preview-panel[panelopen]) ~ #navigator-toolbox > #TabsToolbar,
#TabsToolbar:hover,
#navigator-toolbox[movingtab] > #TabsToolbar{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms, 0ms !important;
}

It could be improved but should get you started.

[guigirl42]

improved but should get you started

Thanks so much for such a fast reply! I have done as you suggested, & now indeed the native tabs are autohiding at the bottom, so that's marvellous.

The only problem is that the autohiding bookmarks bar, your autohide_bookmarks_toolbar.css, is now partly broken... hovering the pointer up there does _still_l reveal it, but most of it is entirely covered by the page content, so only the initial 260 px of it [ie, the width of my TreeStyleTab sidebar], is visible, the remainder presumably behind the page itself.

For now i shall disable that code, & live with the bookmarks bar being always visible... but if you think of a fix, ofc i'd be most grateful.

Thanks.

[MrOtherGuy]

Okay, for that you can just add this bit:

#PersonalToolbar{
  z-index: 3 !important;
}

[guigirl42]

It all works perfectly now. I'd really like to thank you very much! 🤗