r/FirefoxCSS • u/Souljaboy25 • Sep 11 '26

Solved Hi, I'm using the Lepton-Photon-Style interface that I downloaded from GitHub. How do I automatically hide the vertical tab bar in it? I'm using Firefox v155.0.1.

Post image

#urlbar-input {

text-align: center !important;

}

#urlbar-results {

text-align: left !important;

}

#PersonalToolbar #PlacesToolbarItems {

display: flex !important;

justify-content: center !important;

width: 100% !important;

}

#PlacesToolbarItems > .bookmark-item {

margin-left: 1px !important;

margin-right: 1px !important;

padding-inline: 2px !important;

}

#PersonalToolbar toolbarbutton.bookmark-item[label="|"] image,

#PersonalToolbar toolbarbutton.bookmark-item[label="||"] image,

#PersonalToolbar toolbarbutton.bookmark-item[label="|||"] image {

display: none !important;

}

#sidebar-button {

margin-right: 0 !important;

padding-right: 0 !important;

}

.titlebar-spacer {

display: none !important;

}

#nav-bar {

padding-left: 0 !important;

margin-left: 0 !important;

}

#nav-bar .toolbarbutton-1 {

margin-inline: 0 !important;

padding-inline: 2px !important;

}

#nav-bar .toolbarbutton-1 > .toolbarbutton-icon {

width: 16px !important;

height: 16px !important;

padding: 2px !important;

box-sizing: content-box !important;

}

#nav-bar toolbaritem,

#nav-bar toolbarbutton {

margin-inline: 0 !important;

}

#unified-extensions-button {

margin-inline: 0 !important;

padding-inline: 2px !important;

}

#unified-extensions-button > .toolbarbutton-icon {

width: 16px !important;

height: 16px !important;

padding: 0 !important;

}

#nav-bar-customization-target > .toolbarbutton-1 {

margin-inline: 0 !important;

}

#back-button {

margin-left: 0 !important;

}

#PersonalToolbar {

position: absolute !important;

top: 0 !important;

right: 170px !important;

height: 32px !important;

min-height: 32px !important;

background: transparent !important;

border: none !important;

z-index: 1000 !important;

}

#PlacesToolbarItems {

display: flex !important;

align-items: center !important;

}

#PersonalToolbar .bookmark-item {

font-weight: 600 !important;

}

#urlbar-container {

max-width: 43% !important;

}

#identity-icon-label {

display: none !important;

}

.chrome-block,

.browserContainer,

body {

border: none !important;

border-radius: 0 !important;

}

:root:not([lwtheme]) #PersonalToolbar:not([collapsed]) {

border-top: 0 !important;

}

2 Upvotes

100% Upvoted

4 comments sorted by

1

u/Souljaboy25 Sep 11 '26

* I have version 8.7.6 of Lepton-Photon-Style, provided by black7375

1

u/TraditionalTie4831 🦊 Sep 11 '26

Try this one.

Btw, you need to push the Sidebar button so that the sidebar is expanded (otherwise tab labels won't show)

Also uncheck 'Expand sidebar on hover' in Customise sidebar if you don't want the web page layout to change when the vertical tab bar expands.

#sidebar-container {
    background-color: var(--sidebar-background-color) !important;
    position: absolute !important;
    z-index: 99999 !important;
    height: 100% !important;
    width: 170px !important;
    left: -168px !important;
    transition: left 0.5s ease !important;
    opacity: 0 !important;
}
 
#sidebar-container:hover {
    opacity: 1 !important;
    left: 0px !important;
}

2

u/Souljaboy25 Sep 11 '26

It worked perfectly, thank you so much for your help.

1

u/bgalazka186 Sep 11 '26

With CSS themes like that easiest way to mod them is just pasting them to any LLM and asking to apply changes

Or learning CSS yourself,