Hide search bar when not used

[weeebdev]

Describe the solution you'd like To be really minimalistic, is there an option to hide the upper search bar when it's not being used (typed in). Would be cool to have that! Here is how it looks for me now with the tab center ext.

[weeebdev]

tried https://github.com/andreasgrafen/cascade#url-bar-customisation, but it seems to not work for me

[weeebdev]

Found a solution to autohide the whole bar.

/* "Auto-hide" address bar unless focused (e.g. Ctrl-L) or tab bar is hovered. */
:root {
    --address-bar-height: 40px;
    --browser-offset: calc(-1 * (var(--address-bar-height) + 1px));
}
#navigator-toolbox-background {
    position: absolute !important;;
}
/*#navigator-toolbox-background ~ #browser {
    margin-top: var(--browser-offset) !important;
}*/
#navigator-toolbox-background:hover, #navigator-toolbox-background:focus-within {
    z-index: 9001 !important;
}

Here is how it looks like

[unseen-ninja]

This is a really neat tweak. Functionality on my end seems to differ a little tho. I have to uncomment the line from your snippet in order to actually hide the URL bar, and hovering/focussing the tab bar does not shot the URL bar again. I have to actively focus it via CTRL + L – or is that how it's supposed to be?

[weeebdev]

This is a really neat tweak. Functionality on my end seems to differ a little tho. I have to uncomment the line from your snippet in order to actually hide the URL bar, and hovering/focussing the tab bar does not shot the URL bar again. I have to actively focus it via CTRL + L – or is that how it's supposed to be?

Idk, I am using up to date Firefox Developer Edition and it works fine for me without uncommenting anything. However, address bar appears only on Ctrl + L, hovering doesn't work as well

[weeebdev]

Here is the link to the original post on Reddit: https://www.reddit.com/r/FirefoxCSS/comments/t73l90/need_help_making_address_bar_autohide/

[DarkKronicle]

I found that this works. (Ctrl + L and hover)

/* Some variables for quick configuration - play with numbers to find a perfect match for your setup */
:root {
    --sidebar-width: 40px;
    --panel-width: calc(100vw - 40px);
    --panel-hide-offset: -30px;
    --opacity-when-hidden: 0.05;
}

/* Auto-hide address bar */
#navigator-toolbox{
  position: fixed !important;
  /* Comment out following line to get 'slide-page-down' reveal, like in F11 fullscreen mode */ 
  display: block; 
  transition: margin-top 82ms 33ms linear, opacity 82ms 33ms linear !important; 
  z-index: 1;
  opacity: 1;
  /* Spacing on the left for sidebar */
  margin-left: var(--sidebar-width);
  /* Disabled the borders, as the bottom one seemed to have unwanted top padding sometimes */
  border: none !important;
}

#navigator-toolbox,
#navigator-toolbox > *{
  /* Reduced width for panel in order to not overflow the screen on the right side */
   width:  var(--panel-width); 
}

#navigator-toolbox:not(:focus-within):not(:hover){
  margin-top: var(--panel-hide-offset);
  opacity: var(--opacity-when-hidden);
}

/* Disable auto-hiding when in 'customize' mode */
:root[customizing] #navigator-toolbox{
  position: relative !important;
  opacity: 1 !important;
  margin-top: 0px;
}

Original post: https://www.reddit.com/r/FirefoxCSS/comments/lwf22i/autohide_address_bar_reveal_on_hover/

Some of the widths were modified to work with sidebar

[jacksongoode]

It would be quite nice to add this as a simple toggle flag for those who only want to have the url bar appear on Ctrl+L.

[kubakakauko]

After applying the one-line layout fix there seems to be an issue where focused tab / currently open tabs and animations such as reload are visible even though all else is hidden.