Come creare un effetto auto-hide con CSS per la Browser Manager Sidebar di Floorp.

Ecco il codice CSS per implementare l'effetto auto-hide (scomparsa automatica) sulla Browser Manager Sidebar di Floorp.

Il metodo più fluido è la Modalità Overlay (Sovrapposizione): la barra si riduce a una striscia di pochi pixel sul bordo dello schermo e, quando ci passi sopra con il mouse, si espande sopra la pagina web senza rimpicciolire o far "saltare" il contenuto del sito.

Snippet 1: Auto-Hide per la barra delle icone (Browser Manager Sidebar)

Aggiungi questo blocco nel tuo file userChrome.css:

CSS

/* =========================================================
   Auto-Hide per la Browser Manager Sidebar di Floorp
   ========================================================= */

#sidebar-select-box,
#floorp-bms-sidebar {
  position: relative !important;
  z-index: 100 !important;
  min-width: 5px !important;
  max-width: 5px !important;
  opacity: 0.15 !important;
  /* Animazione fluida in uscita con un breve ritardo */
  transition: min-width 0.25s ease-in-out, 
              max-width 0.25s ease-in-out, 
              opacity 0.2s ease-in-out !important;
  transition-delay: 0.15s !important;
}

/* Stato espanso quando il cursore passa sopra la striscia */
#sidebar-select-box:hover,
#floorp-bms-sidebar:hover {
  min-width: 48px !important;
  max-width: 48px !important;
  opacity: 1 !important;
  /* Espansione immediata all'hover */
  transition-delay: 0s !important;
  box-shadow: 4px 0px 12px rgba(0, 0, 0, 0.35) !important;
}

Snippet 2: Auto-Hide completo (Barra delle icone + Web Panel aperto)

Se desideri nascondere automaticamente anche la finestra dei Web Panel (es. WhatsApp, Notion o le schede verticali aperte a lato) fino al passaggio del mouse:

CSS

/* =========================================================
   Auto-Hide per l'intera finestra del pannello laterale
   ========================================================= */

#sidebar-box {
  position: relative !important;
  z-index: 99 !important;
  min-width: 6px !important;
  max-width: 6px !important;
  opacity: 0.1 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-delay: 0.2s !important;
}

#sidebar-box:hover {
  min-width: 340px !important; /* Regola la larghezza desiderata del pannello */
  max-width: 340px !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
  box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.4) !important;
}

Personalizzazioni utili

Puoi modificare i seguenti parametri all'interno del codice in base alle tue preferenze:

• Soglia di attivazione (min-width: 5px nello stato normale): Se fai fatica a "beccare" la barra con il mouse, aumenta questo valore a 8px o 10px.

• Ritardo di chiusura (transition-delay: 0.15s): Evita che la barra si chiuda all'istante se il mouse esce accidentalmente dal bordo per una frazione di secondo.

• Opacità a riposo (opacity: 0.15): Rende la striscia leggermente visibile sul bordo. Impostala a 0 se desideri che sia completamente invisibile finché non viene sfiorata.

Doveroso ricordarsi di riavviare Floorp per applicare le modifiche salvate nel file userChrome.css.