Auto-Hide Bookmark Bar + Toolbar/Sidebar (Unless Hovered Over)

dylan404

I looked on this forum and found something similar to this, but nothing exactly matched it. I have them split up into two different .css files.

The first file auto-hides the bookmarks bar unless the address, bookmarks, or tab bar is hovered over. It also ensures that the bookmarks bar is always shown on any "internal" page (start page, dashboard, etc), even when not hovered over.
CSS 1 (bookmarksBarAutoHide.css):

/* Auto-hide Bookmark Bar except on Internal Pages */
/* Hides booksmark bar on all non-internal pages by default */
#browser:not(.internal) .bookmark-bar {
  visibility: hidden;
  position: absolute !important;
  width: 100%;
  z-index: 4;
  transform: translateY(-100%);
  top: 40px;

}
/* Shows the bookmarks bar once hovered over */
#browser:not(.internal) .bookmark-bar:hover,
#browser:not(.internal) .bookmark-bar:focus-within,
#browser:not(.internal) .mainbar:hover ~ .bookmark-bar,
#browser:not(.internal) #header:hover ~ #main .bookmark-bar {
  visibility: visible;
  transform: translateY(0);
}
/* Permanently shows bookmarks bar on "internal" pages */
#main:has(#webview-container .webpageview.internal.active) .bookmark-bar {
  visibility: visible;
  position: relative !important;
  width: 100%;
  transform: translateY(0) !important;
  z-index: auto !important;
  top: -1px;
}

The second file auto-hides the toolbar/sidebar unless it is hovered over.
CSS 2 (toolbarAutoHide.css):

/* Auto-hide Sidebar/Toolbar */
/* Hides toolbar when not hovered over */
#panels-container {
  position: absolute !important;
  width: 0 !important;
  transition: width 0.2s ease-in-out !important;
  z-index: 1;
}
/* Shows toolbar when hovered over */
#panels-container:hover {
  width: 41px !important;
}
*/ Changes panels width to 100% */
#panels-container .panel {
  width: 100% !important;
}

I have only tried these on my pc, so let me know if they work for everyone else.

Alenn

Hello and thank you.
Can you please specify how to use Viv settings to be able to use this?
And to clarify, I don't know proper naming of the containers so:

part to be hover over
hiding part
F4 hide 1) so there is neither, and should I set "float" in settings?