Firefox Autohide Toolbar Custom CSS

setup.md

How to Use Custom CSS in Firefox

Enable CSS Customization

• Go to about:config in the address bar.

• Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to True

Setting Up Custom CSS

• Go to about:support in the address bar.

• Find the "Profile Directory" line.

• Click the "Open Directory" button. Your profile folder will open.

• Inside your profile folder, create a new folder called "chrome" (all lowercase).

• Inside chrome folder, create a new an css file, name it exactly userChrome.css.

• Paste my Custom CSS and save it.

• Restart Firefox.

useChrome.css

/*
  ================================================================================
   Auto-Ocultar Barra de Ferramentas do Firefox (CSS para userChrome.css)
  ================================================================================
   Este código oculta a barra de ferramentas principal do Firefox (abas, endereço,
   favoritos) e a exibe apenas quando o mouse é movido para o topo da tela
   ou quando a barra de ferramentas está em uso.
  ================================================================================
*/


/*
  ================================================================================
   1. ESTADO PADRÃO (BARRA DE FERRAMENTAS OCULTA)
  ================================================================================
   Esta seção define a aparência da barra de ferramentas quando ela está
   recolhida, deixando apenas uma fina linha no topo como gatilho.
  ================================================================================
*/

/* Oculta a barra de endereço e a de favoritos.
   Usamos uma margem negativa para "deslizar" as barras para cima, para fora
   da área visível. Este método é mais estável que animar a altura. */
#nav-bar,
#PersonalToolbar {
    margin-top: -40px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: margin-top 150ms ease-out, opacity 150ms ease-out !important;
    z-index: -1 !important; /* Garante que fiquem atrás de outros elementos quando ocultas. */
}

/* Transforma a barra de abas em uma fina linha de gatilho no topo.
   A barra em si tem altura zero, e usamos a BORDA INFERIOR para criar a linha
   visível que o usuário irá interagir. */
#TabsToolbar {
    max-height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important; /* Garante que nada dentro da barra vaze para fora. */

    /* Esta é a linha de gatilho. Altere a cor e a espessura aqui. */
    border-bottom: 2px solid #555555 !important;

    /* Define a animação para quando a barra reaparecer. */
    transition: max-height 150ms ease-out !important;
}

/* Oculta o conteúdo visual das abas (ícones, texto, etc.) quando a barra
   está recolhida, para uma aparência mais limpa. */
#TabsToolbar .tab-background,
#TabsToolbar .tab-content,
#TabsToolbar .new-tab-button,
#TabsToolbar #alltabs-button {
    opacity: 0 !important;
    transition: opacity 50ms linear !important;
}


/*
  ================================================================================
   2. ESTADO VISÍVEL (BARRA DE FERRAMENTAS APARECE)
  ================================================================================
   Esta seção define TODAS as condições que farão a barra de ferramentas
   reaparecer e se manter estável.
  ================================================================================
*/

/* Lista de Gatilhos:
   - #navigator-toolbox:hover -> Passar o mouse sobre a área da barra.
   - #navigator-toolbox:focus-within -> Clicar ou usar o teclado em qualquer item da barra.
   - :root:has(...) -> Condições especiais para manter a barra aberta, como:
     - #appMenu-popup[visible="true"] -> O menu principal (sanduíche) está aberto.
     - #urlbar-results[open] -> A lista de sugestões da barra de endereço está aberta.
     - #urlbar-input-container[focused="true"] -> O cursor está piscando na barra de endereço.
   - #main-window[customizing="true"] -> O Firefox está no modo de personalização.
*/

/* Regra para restaurar a barra de endereço e a de favoritos. */
:is(#navigator-toolbox:hover, #navigator-toolbox:focus-within) :is(#nav-bar, #PersonalToolbar),
:root:has(#appMenu-popup[visible="true"], #urlbar-results[open], #urlbar-input-container[focused="true"]) :is(#nav-bar, #PersonalToolbar),
#main-window[customizing="true"] :is(#nav-bar, #PersonalToolbar) {
    margin-top: 0 !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

/* Regra para restaurar a barra de abas. */
:is(#navigator-toolbox:hover, #navigator-toolbox:focus-within) #TabsToolbar,
:root:has(#appMenu-popup[visible="true"], #urlbar-results[open], #urlbar-input-container[focused="true"]) #TabsToolbar,
#main-window[customizing="true"] #TabsToolbar {
    max-height: 40px !important; /* Restaura a altura original. */
    border-bottom-color: transparent !important; /* Esconde a linha de gatilho quando a barra está expandida. */
}

/* Regra para restaurar o conteúdo das abas. */
:is(#navigator-toolbox:hover, #navigator-toolbox:focus-within) :is(.tab-background, .tab-content, .new-tab-button, #alltabs-button),
:root:has(#appMenu-popup[visible="true"], #urlbar-results[open], #urlbar-input-container[focused="true"]) :is(.tab-background, .tab-content, .new-tab-button, #alltabs-button),
#main-window[customizing="true"] :is(.tab-background, .tab-content, .new-tab-button, #alltabs-button) {
    opacity: 1 !important;
    transition-delay: 100ms !important; /* Um pequeno atraso para uma transição mais suave. */
}