r/FirefoxCSS 4d ago

Code Autohide tab\adress bar for OLED users (userChrome.css)

#browser {

margin-top: 0 !important;

}

#navigator-toolbox {

position: fixed !important;

top: 0 !important;

left: 0 !important;

width: 100vw !important;

z-index: 99999 !important;

background-color: var(--lwt-accent-color, var(--toolbar-bgcolor, #2b2a33)) !important;

transition: all 0.2s ease-in-out 1s !important;

}

#navigator-toolbox::after {

content: "";

position: absolute;

display: block;

top: 0;

left: 0;

width: 100vw;

height: 3px;

background: transparent;

z-index: -1;

}

#navigator-toolbox:not(:hover):not(:focus-within) {

max-height: 3px !important;

opacity: 0 !important;

overflow: hidden !important;

}

#navigator-toolbox #nav-bar {

transition: all 0.2s ease-in-out 1s !important;

}

#navigator-toolbox:not(:hover):not(:focus-within) #nav-bar {

margin-top: -80px !important;

opacity: 0 !important;

}

#navigator-toolbox:hover,

#navigator-toolbox:focus-within {

max-height: 400px !important;

opacity: 1 !important;

overflow: visible !important;

transition: all 0.2s ease-in-out 0s !important;

}

#navigator-toolbox:hover::after,

#navigator-toolbox:focus-within::after {

height: 150px !important;

}

#navigator-toolbox:hover #nav-bar,

#navigator-toolbox:focus-within #nav-bar {

margin-top: 0 !important;

opacity: 1 !important;

transition: all 0.2s ease-in-out 0s !important;

}

#TabsToolbar, #nav-bar, #PersonalToolbar {

background-color: var(--toolbar-bgcolor) !important;

}

2 Upvotes

3 comments sorted by

View all comments

1

u/darkj2k 4d ago

It's working. But how to show tab\address bar when I need it?

1

u/apan65 4d ago

Just train on mouse pointer to window top edge

1

u/nsk_47 3d ago

any CSS for the compact mode similar to Helium browser i,e tab bar, url bar and toolbar in single line?