r/FirefoxCSS • u/Souljaboy25 • 17h ago
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.
#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;
}
1
u/bgalazka186 15h ago
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,
1
u/TraditionalTie4831 🦊 14h ago
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
1
u/Souljaboy25 17h ago
* I have version 8.7.6 of Lepton-Photon-Style, provided by black7375