Come identificare i selettori CSS specifici per la Browser Manager Sidebar di Floorp usando il Browser Toolbox.

 

La Browser Manager Sidebar (BMS) di Floorp è un componente personalizzato dell'interfaccia. Utilizzando il Browser Toolbox, è possibile isolare i selettori CSS che controllano il contenitore della barra, le icone delle app web e i pannelli laterali.

Procedura passo-passo per isolare la sidebar

1.Aprire il Browser Toolbox:

Premi Ctrl + Shift + Alt + I per aprire la finestra di debug dell'interfaccia.

2.Attivare lo strumento di selezione:

Fai clic sull'icona della freccia d'ispezione in alto a sinistra nel Browser Toolbox (oppure premi Ctrl + Shift + C).

3.Selezionare l'elemento sulla barra laterale:

Sposta il mouse sulla Browser Manager Sidebar di Floorp e fai clic su uno degli elementi:

• Fai clic sullo sfondo vuoto della barra per selezionare il contenitore principale.

• Fai clic su un'icona specifica (es. l'icona di un Web Panel o delle scorciatoie) per selezionare il singolo pulsante.

4.Analizzare l'albero DOM e individuare gli ID/Classi:

Nel pannello Inspector del Browser Toolbox, osserva l'elemento evidenziato. Cerca gli attributi id, class o attributi personalizzati di Floorp (es. floorp-bms).

Selettori CSS specifici di Floorp per la Browser Manager Sidebar

Ecco i principali selettori utilizzati da Floorp per gestire la sidebar e i relativi pannelli laterali:

Elemento dell'interfaccia
Selettore CSS principale
Descrizione

Contenitore principale Sidebar
#sidebar-box / #sidebar-main
La struttura esterna che racchiude l'intera barra laterale.

Barra delle icone (BMS)
#floorp-bms-sidebar / #sidebar-select-box
La striscia verticale dove risiedono le icone delle app web e dei tool.

Singoli pulsanti / Icone
#sidebar-select-box toolbarbutton
I pulsanti cliccabili delle varie applicazioni o schede laterali.

Pulsante di aggiunta Web Panel
#add-web-panel-button
Il pulsante + per aggiungere nuove scorciatoie web.

Contenitore del Web Panel (Finestra popout)
#sidebar-web-panel-providers
L'area in cui viene caricata la pagina web quando si apre un Web Panel.

Pannello delle schede verticali (se attivo)
#sidebar-box[sidebarcommand="treestyletab_..."]
Selettore condizionale per quando la sidebar ospita l'albero delle schede.

Esempi pratici di personalizzazione per userChrome.css

Puoi copiare ed incollare questi snippet nel tuo file userChrome.css:

1. Nascondere lo sfondo della Browser Manager Sidebar (Effetto Trasparente)

CSS

/* Rende trasparente lo sfondo della barra delle icone laterali */
#sidebar-select-box, #floorp-bms-sidebar {
  background-color: transparent !important;
  border-right: none !important;
}

2. Ridurre la larghezza della barra laterale per occupare meno spazio

CSS

/* Riduci la dimensione delle icone e la larghezza della striscia laterale */
#sidebar-select-box {
  min-width: 36px !important;
  max-width: 36px !important;
}

#sidebar-select-box toolbarbutton {
  padding: 4px !important;
}

3. Aggiungere un effetto hover alle icone della sidebar

CSS

/* Cambia colore e aggiunge un bordo al passaggio del mouse sulle icone */
#sidebar-select-box toolbarbutton:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease !important;
}

4. Arrotondare i bordi del pannello web (Web Panel) quando è aperto

CSS

/* Arrotonda gli angoli della finestra di sovrapposizione delle app web */
#sidebar-web-panel-providers,
.sidebar-panel {
  border-radius: 12px !important;
  margin: 6px !important;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3) !important;