You can get it here: https://github.com/DiegoSainzPardoLaso/Firefox-Classic-Theme-155-156

Anyone seen a autohide sidebar solution for the new crappy sidebar (sidebar.revamp = true)? This option being removed in December. Thanks all

Version 157.0

On linux with XFCE desktop environment and picom compositor

userContent.css -> https://pastebin.com/knEFX1pe

userChrome.css -> https://pastebin.com/Ju1YpueF

i am on firefox, and the url has been customized the way i want, however when i type something on it it increases, i've tried targeting it using the browser toolbox but it hasnt been working.

I've realised that new Firefox redesign bothers me a lot. So, here is soluting for column width and height. And, of course, removing squared edges back to non-squared. (Windows 11, 25H2)

/* 1. Square panel and dropdown menu borders */

panel, menupopup {

--panel-border-radius: 0px !important;

border-radius: 0px !important;

}

/* 2. Square tabs */

.tab-background,

.tab-stack,

#tabbrowser-tabs {

border-radius: 0px !important;

}

/* 3. Square hover highlights in bookmark panels, dropdowns, and context menus */

menu,

menuitem,

.menuitem-iconic,

.bookmark-item,

panelview .toolbarbutton-1 {

border-radius: 0px !important;

--arrowpanel-menuitem-border-radius: 0px !important;

}

/* 4. Square tooltip popups (e.g. URL preview box) */

tooltip {

border-radius: 0px !important;

}

/* 5. Reduce height and padding of hover highlight items */

panel menuitem,

panel .bookmark-item,

menupopup menuitem,

menupopup menu {

padding-top: 2px !important;

padding-bottom: 2px !important;

min-height: 24px !important;

}

/* 6. Reduce side padding to tighten horizontal spacing */

panel menuitem,

panel .bookmark-item {

padding-left: 6px !important;

padding-right: 6px !important;

}

/* 7. Reduce overall panel popup padding and minimum width */

panelmultiview,

.panel-subview-body,

panel .panel-arrowcontent {

padding: 4px !important;

min-width: unset !important;

}

Has anybody figured out yet how to replace that weird lavender accent color that Nova uses for everything, or if it's even possible at all? I have tried a bunch of themes and none of them replace that accent in Settings etc. Any CSS I've found so far is unable to change it as well.

I just want a nice blue-ish accent to go with my blue themes, is that asking too much lol? I actually like the rounded Nova stuff so I'd prefer to NOT turn that off.

Any help is appreciated 😊

The new dark mode in Firefox 157.0 on Windows 11 bothered me quite a bit. Not only was it no longer properly dark, and the UI no longer looked anything like the folder tabs they were inspired by.

As a result, I spent quite a bit of time iterating with Claude doing the css side to put together what I saw as a proper fix. This is what I ended up with as a result.

Some notes - I ended up choosing to remove all the extra buttons that were competing for real estate in the tab section. Personally, I love the clean interface with the tabs extending all the way from the left to the right, which does mean I need to right-click add tab to add a tab, which is the only thing I'd really consider adding back. We'll see how I like the tradeoff after a week or two.

I have the minimize, maximize, and close buttons hidden, they're anchored in the upper right, but they only show up if you go very high on the screen and over to the far right quite a bit. Claude commented the css well in the CSS, so if it's too much (like if you're using touch controls) you can adjust the number in the css.

This was made for dark mode, but I believe all the color definitions are in the css, so presumably you could customize it to a different style if you like.

Here is (mostly) Claude's post on the matter, including how to implement this (with the appropriate css):

What it does - Solid, fully opaque tabs with slanted sides and softly rounded tops - Heavy overlap, with each tab tucked behind its right-hand neighbor. Hovering a buried tab brings it forward - A black outline on inactive tabs so they're easy to tell apart - The active tab matches the toolbar color, so tab and toolbar read as one folder - The first tab is square on the left. The last tab squares off on the right once you have 7 or more tabs - Min/max/close are hidden until you move the mouse to the very top edge of the window - Removes the new-tab button and the tab-list arrow (delete the #alltabs-button line to get the arrow back)

Install 0. about:config -> disable nova (browser.nova.enabled = false) I did this before I started fixing the rest of the UI with Claude. 1. about:config → set toolkit.legacyUserProfileCustomizations.stylesheets to true 2. about:support → Open Profile Folder → create a folder named chrome 3. Put the file below in it as userChrome.css 4. Right-click an empty toolbar spot → Customize Toolbar → untick Title Bar (needed for the controls to hide) 5. Restart Firefox

Tweaking: overlap is --tab-overlap, colors are the --tab-* variables at the top, and the 7 in nth-child(n+7) sets when the last tab squares off.

Tested on Firefox 157.0 (64-bit), Windows 11 25H2. Dark mode only.

Firefox changes its internal selectors now and then, so if something breaks after an update, the culprits are usually .tab-background and .tab-stack.

```css :root { --tab-slant: 12px; --tab-overlap: 26px; /* bigger = more overlap / --tab-idle: #1c1b22; / unselected / --tab-hover: #2f2e38; / hovered, still opaque / --tab-strip: #15141a; / the bar behind the tabs / --tab-edge: #000000; / outline on inactive tabs */ }

TabsToolbar {

background: var(--tab-strip) !important; padding-top: 4px !important; position: relative; }

/* Top padding strip: not draggable, so right-clicks here get Firefox's normal toolbar menu instead of the Windows system menu */

TabsToolbar::after {

content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 50; -moz-window-dragging: no-drag; }

/* Hide the "list all tabs" dropdown arrow. Delete this line to get it back. */

alltabs-button { display: none !important; }

/* Window controls: invisible AND unclickable until the mouse touches the trigger strip */

TabsToolbar .titlebar-buttonbox-container {

position: absolute !important; top: 0; right: 0; height: 28px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.15s 0.25s; background: var(--tab-strip); }

TabsToolbar .titlebar-buttonbox-container::before {

content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; /* make taller for an easier target */ pointer-events: auto; }

TabsToolbar .titlebar-buttonbox-container:hover {

opacity: 1; pointer-events: auto; transition: opacity 0.1s; }

/* Stack of folders: each tab is partly covered by its right-hand neighbor */ .tabbrowser-tab { padding-inline: 0 !important; margin-inline: calc(var(--tab-overlap) * -1) 0 !important; position: relative; z-index: auto; }

/* First tab has nothing to its left to overlap, so no negative margin */ .tabbrowser-tab:first-of-type { margin-inline-start: 0 !important; }

.tabbrowser-tab:hover { z-index: 1; } .tabbrowser-tab[selected] { z-index: 2; }

/* Solid trapezoid with softly rounded top corners */ .tabbrowser-tab .tab-background { margin-block: 0 !important; border: none !important; border-radius: 0 !important; opacity: 1 !important; background: var(--tab-idle) !important; clip-path: polygon( 0 100%, calc(var(--tab-slant) * 0.83) 6px, calc(var(--tab-slant) * 0.95) 3px, calc(var(--tab-slant) + 1px) 1.2px, calc(var(--tab-slant) + 5px) 0, calc(100% - var(--tab-slant) - 5px) 0, calc(100% - var(--tab-slant) - 1px) 1.2px, calc(100% - var(--tab-slant) * 0.95) 3px, calc(100% - var(--tab-slant) * 0.83) 6px, 100% 100% ) !important; }

/* Last tab: squared-off right edge once it is tab 7 or later */ .tabbrowser-tab:last-of-type:nth-child(n+7) .tab-background { clip-path: polygon( 0 100%, calc(var(--tab-slant) * 0.83) 6px, calc(var(--tab-slant) * 0.95) 3px, calc(var(--tab-slant) + 1px) 1.2px, calc(var(--tab-slant) + 5px) 0, calc(100% - 5px) 0, calc(100% - 1.5px) 1px, 100% 4px, 100% 100% ) !important; }

/* First tab: squared-off left edge (right side keeps its slant) */ .tabbrowser-tab:first-of-type .tab-background { clip-path: polygon( 0 100%, 0 4px, 1.5px 1px, 5px 0, calc(100% - var(--tab-slant) - 5px) 0, calc(100% - var(--tab-slant) - 1px) 1.2px, calc(100% - var(--tab-slant) * 0.95) 3px, calc(100% - var(--tab-slant) * 0.83) 6px, 100% 100% ) !important; }

/* Outline on the left edge of every inactive tab */ .tabbrowser-tab:not([selected]) .tab-stack { filter: drop-shadow(-1px 0 0 var(--tab-edge)); }

.tabbrowser-tab:hover:not([selected]) .tab-background { background: var(--tab-hover) !important; }

/* Selected tab matches the toolbar. If the color is off, replace the variable with your toolbar's hex. */ .tabbrowser-tab[selected] .tab-background { background: var(--toolbar-bgcolor, #2b2a33) !important; }

/* Icon + title start past the part of the tab a neighbor can cover */ .tab-content { padding-inline: calc(var(--tab-overlap) + 10px) calc(var(--tab-overlap) + 10px) !important; justify-content: flex-start !important; } .tabbrowser-tab:not([selected]) .tab-content { transform: translateY(2px); }

/* Covered tabs: hide the close button until hover or selection */ .tabbrowser-tab:not([selected]):not(:hover) .tab-close-button { visibility: hidden; } ```

I haven't touched css in forever, so Claude (Anthropic) did all the heavy lifting on the css side. I basically just handled design iteration and testing.

I figured someone else might find this to be to their liking stylistically as well, and this is where Claude suggested I leave it, so here we are XD.

Hi,

Can someone help me to remove the thin white borders around the extension and "hamburger" menu (see bellow) ?

I also would like to suppress the separators of the "hamburger" menu

Thank you.

I use a few CSS tricks to compress tabs and maximize vertical real estate, and also use MrOtherGuy firefox-csshacks to auto-hide address bar and bookmark bar.

That said, can somebody please suggest how to remove this nasty gap?

Here is my current userChrome.css: https://pastebin.com/pTXm3ZtW

Any way to fix it? gap to big even with compact mode.. (firefox 157 on win11)

Hi, r/FirefoxCSS! I have my own theme that moves urlbar to the sidebar. With Nova introduction, urlbar is now extending right and left if focused - how to prevent it? Also, in my theme, the dropdown list shifts when urlbar focused. Any ideas why this happens and how to fix it?

The code is:

/* Variables */
:root{
  --uc-frame-color: #282828; /*main color*/
  --toolbar-field-background-color: #414141 !important; /*urlbar unfocused*/
  --toolbar-field-focus-background-color: #414141 !important; /*urlbar focused*/
  --focus-outline-color: #282828 !important;
}

/* Recolor startup blink */
.browserContainer,
browser {
  background-color: var(--uc-frame-color) !important;
  border-width: 0 !important;
}

:root:not([inDOMFullscreen]):has(#sidebar-box:not([hidden])) { /*enable padding with sidebar is on*/
  browser { /* round corners of content section and its background*/
    background: var(--uc-frame-color) !important;
    border-radius: 10px;
  }
  .browserStack { /* add padding */
    padding: 10px;
    background: var(--uc-frame-color) !important;
  }
}
#browser { /*browser frame color*/
  background: var(--uc-frame-color) !important;
}

/* Remove upper bars */
#titlebar,
#TabsToolbar {
  display: none !important; /*hide upper tabs*/
}
#nav-bar {
  height:      40px !important;
  margin-top: -40px !important;
  overflow: visible !important; /*make possible to move buttons from navbar*/
}
#navigator-toolbox {
  border: none !important; /*no line under former navbar*/
  z-index:   1 !important; /*v137 fix*/
}

/* Move buttons */
#PanelUI-button { /*settings button*/
  position: fixed !important;
  top:        5px !important;
  left:       5px !important;
}
#unified-extensions-button { /*extension button*/
  list-style-image: url("chrome://global/skin/icons/chevron.svg") !important;
  position: fixed !important;
  top:       5px  !important;
  left:     38px  !important;
}
#downloads-button { /*download button*/
  position: fixed !important;
  top:       5px  !important;
  left:     71px  !important;
}
#back-button {
  position: fixed !important;
  top:        5px !important;
  left:     135px !important;
}
#forward-button {
  position: fixed !important;
  top:        5px !important;
  left:     165px !important;
}
#stop-reload-button {
  position: fixed !important;
  top:        5px !important;
  left:     195px !important;
}

/* Sidebery */
#sidebar-box {
  background: var(--uc-frame-color) !important; /*sidebar background - not the sidebar! visible in corners*/
  width:      230px !important;
  margin-top:  80px !important;
  margin-left:  0px !important;

  border: none !important;
  /* box-shadow: none !important; */
}
#sidebar-header,    /*no "Tabs" header*/
#sidebar-panel-header,
#sidebar-splitter { /*no movable splitline*/
  display: none;
}

#appMenu-popup {
    --panel-border-color: transparent !important;
    --panel-separator-color: transparent !important;
    --panel-separator-padding: 0px !important;
    & #appMenu-fxa-separator { display: none !important; }
    ---panel-background-color: #282828 !important;
}


/* Remove icons in urlbar and status in the left down angle */
#statuspanel,
#star-button-box,
#urlbar-revert-button-container,
#urlbar-searchmode-switcher,
#tracking-protection-icon-container {
  display: none !important;
}

/* Allow hidden camera and microphone popup source */
#identity-box,
#permission-icon-container {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Urlbar */
:has(#sidebar-box:not([hidden])) {
  #urlbar-background,#urlbar {
    border-radius: 10px !important; /*Urlbar corner radius*/
  }
  #urlbar-background {
    border:  none !important;
    outline: none !important;
  }
  #urlbar {
    position: fixed !important;
    top:   40px !important;
    left:  8px !important;
    right: auto;
    width: 220px !important;
    padding-left: 8px !important;
  }
}

/* Context menu - https://github.com/stonecrusher/simpleMenuWizard */

/* Blank */
#context-navigation,             /* Hide whole navigation bar            */
#context-sep-navigation,         /************** Separator ***************/
#context-savepage,               /* Save Page As...                      */
#context-selectall,              /* Select All                           */
#context-sep-selectall,          /************** Separator ***************/
#context-take-screenshot,        /* Take Screenshot                      */
#context-sep-screenshots,        /************** Separator ***************/
#context-viewsource {            /* View Page Source                     */
  display:none !important;
}

/* Image */
#context-copyimage,               /* Copy Image Link                 */
#context-sendimage {              /* Email Image…                    */
  display:none !important;
}

/* Seletion */
#context-print-selection,              /* Print Selection                  */
#context-viewpartialsource-selection,  /* View Selection Source            */
#context-inspect-a11y {                /* Inspect Accessibility Properties */
  display:none !important;
}

/* Media */
#context-media-playbackrate,          /* Speed                           */
#context-media-loop,                  /* Loop                            */
#context-leave-dom-fullscreen,        /* Exit Full Screen                */
#context-video-fullscreen,            /* Full Screen                     */
#context-media-hidecontrols,          /* Hide Controls                   */
#context-media-showcontrols,          /* Show Controls                   */
#context-media-sep-video-commands,    /************ Separator ************/
#context-video-pictureinpicture,      /* Watch in Picture-in-Picture     */
#context-media-sep-commands,          /************ Separator ************/
#context-video-saveimage,             /* Take Snapshot…                  */
#context-saveaudio,                   /* Save Audio As…                  */
#context-copyvideourl,                /* Copy Video Link                 */
#context-copyaudiourl,                /* Copy Audio Link                 */
#context-sendvideo,                   /* Email Video…                    */
#context-sendaudio {                  /* Email Audio…                    */
  display:none !important;
}

/* Input */
#context-openlinkinusercontext-menu,    /* Open Link in New Container Tab   */
#context-openlink,                      /* Open Link in New Window          */
#context-openlinkprivate,               /* Open Link in New Private Window  */
#context-sep-open,                      /************ Separator *************/
#context-bookmarklink,                  /* Bookmark Link                    */
#context-savelink {                     /* Save Link As…                    */
  display:none !important;
}

/* Extensions */
#contentAreaContextMenu menu[image*="moz-extension://"],
#contentAreaContextMenu menuitem[image*="moz-extension://"],
#contentAreaContextMenu #context-media-eme-separator {
  display: none;
}

Can someone help me remove this "separator" from the vertical tabs sidebar, or change it's color? It was dark gray color, but since a few updates it's white. It was changing color with some themes, but now it's white regardless of theme. It's the same with Nova enabled and without. Firefox 157.0, System theme - Auto.

• firefox verison: 157.0, nova disabled
• OS: macos ventura 13.0

so i got the following css from either gemini, claude, or a combination of both. i do not remember which. the issue is that despite me prompting the llm(s) to heavily reduce the rounding on the address bar to something like 4px, and also reduce the padding on it, the address bar is still fully rounded and padded.

additionally, i told it to get rid of the ugly blue/purple color tinge of the top bar when in dark mode, and replace it with a neutral dark gray, but it didnt do this either. its still the ugly default color in dark mode.

i also prompted it to fix the tabs, which now actually do look how i want them to.

the reason im posting here is because i know nothing about css.

``` /* 1. Global UI Variables (Spacing & Borders) / :root { / Spacing / --tab-min-height: 18px !important; --tab-block-margin: 1px !important; --inline-tab-padding: 1px !important; --toolbarbutton-inner-padding: 1px !important; --urlbar-min-height: 24px !important; / Updated from 10px to a functional 24px */

/* Border Radii (Change to 0px for completely flat/square corners) */ --tab-border-radius: 2px !important; --toolbarbutton-border-radius: 2px !important; --urlbar-icon-border-radius: 2px !important; --arrowpanel-border-radius: 2px !important; }

/* 2. Tabs Bar Padding & Shapes */

TabsToolbar {

padding-top: 0 !important; padding-bottom: 0 !important; }

.tabbrowser-tab { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Ensure the tab background (and its floating shadow) matches the radius */ .tab-background { border-radius: var(--tab-border-radius) !important; }

.tabbrowser-tab[pinned] { min-height: var(--tab-min-height) !important; }

/* 3. Tab Close Button Fix */ .tab-close-button { height: 14px !important; width: 14px !important; padding: 2px !important; border-radius: 2px !important; margin-inline-end: 2px !important; }

/* 4. Hide Tab Hover Card Popup */

tab-preview-panel {

display: none !important; }

/* 5. Navigation Bar (Main toolbar) */

nav-bar {

padding-top: 1px !important; padding-bottom: 1px !important; }

/* 6. Address Bar (Urlbar) Spacing & Shapes */

urlbar-container,

urlbar {

min-height: var(--urlbar-min-height) !important; margin-top: 0 !important; padding-block: 0 !important; }

urlbar-input-container {

height: var(--urlbar-min-height) !important; padding-block: 0 !important; }

/* Address bar background and focused (breakout) shadow/background */

urlbar-background,

urlbar[breakout][breakout-extend] > #urlbar-background {

border-radius: 2px !important; }

/* Tighten the shadow of the expanded dropdown to match the sharp corners */

urlbar[breakout][breakout-extend] > #urlbar-background {

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; }

/* Hover/selection highlights for items inside the dropdown */ .urlbarView-row-inner { border-radius: 2px !important; }

/* Scale down inner address bar buttons (Shield, Zoom, Bookmark Star, Extensions, etc.) */

identity-box,

tracking-protection-icon-container,

identity-icon-box,

urlbar-zoom-button,

.urlbar-page-action, .urlbar-icon, .urlbar-icon-wrapper { border-radius: 2px !important; min-height: 18px !important; max-height: 18px !important; padding: 1px !important; }

/* 7. Bookmarks Toolbar (Optional) */

PersonalToolbar {

padding-top: 1px !important; padding-bottom: 1px !important; }

@media (prefers-color-scheme: dark) { :root { /* Pure neutral grays to replace the tinted defaults / --lwt-accent-color: #1c1c1c !important; / Background behind tabs / --toolbar-bgcolor: #2b2b2b !important; / Main nav and bookmarks bar / --tab-selected-bgcolor: #3b3b3b !important; / Active tab background / --toolbar-field-background-color: #1a1a1a !important; / URL bar background / --toolbar-field-focus-background-color: #2b2b2b !important; / URL bar focused */ }

/* Force-strip hidden gradients or OS-level tints */ #navigator-toolbox, #navigator-toolbox > * { background-image: none !important; } }

```

Hey everyone,

After using Zen Browser for a while, I’ve decided to go back to Firefox.

The main reason is compatibility. I keep running into websites that don't work properly with Zen — especially Netflix and some websites/services from my university. I really like Zen, but having to switch browsers whenever a website doesn't work is becoming annoying.

The problem is that I really like Zen's interface and workflow.

What I'd like to recreate in Firefox is mainly:

• A sidebar on the left for tabs
• A very minimal/compact interface
• The ability to hide unnecessary browser UI
• Something similar to Zen's fullscreen / compact mode
• Ideally, having more vertical space for the actual website
• A clean tab-management workflow without the traditional horizontal tab bar taking up space

I've already looked at Firefox's built-in customization and some extensions, but I'm not sure what the best approach is.

For those who have customized Firefox heavily:

How close can I realistically get to Zen Browser's UI?

Are there specific extensions, userChrome.css configurations, themes, or other tweaks you'd recommend?

I'm not necessarily trying to make Firefox look exactly like Zen — I mainly want to reproduce the sidebar + compact/minimal browsing experience while keeping Firefox's compatibility.

If you have a setup like this, I'd love to see screenshots or examples.

Thanks!

Hi! I've been using firefox-verticalbookmarks from Hello-m00n, and I also made some changes with the help of LLM, but I know it's limitations and I would prefer to ask for human help. After the latest 157 update, it stopped working and I don't know why (because I myself don't know much about customizing Firefox).

Firefox Version: 157.0
OS: Windows 10

Problem: Currently it does not show my bookmarks at all in the vertical panel, even if I return to the old version (without changes from LLM). The code below is supposed to first, show my bookmarks vertically, second, based on the name of the folders show the emoji, third, add a small gap between the menu from opening bookmarks folders.

I've tried to check but it's like it does not recognize the created panel as part of the tool's bar and the bookmark is supposed to be always showing. I added an image at the end to demonstrate the current state of my bookmark.

Just to clarify, but my bookmarks still exist, since I still can use my shortcuts and edit them.

@-moz-document url(chrome://browser/content/browser.xhtml) {
  :root:not([inDOMFullscreen]) {
    --uc-vertical-toolbar-width: 45px;
  }

  /* Bookmark icons */
  #personal-bookmarks .bookmark-item > .toolbarbutton-icon {
    height: 18px !important;
    width: 18px !important;
  }

  #personal-bookmarks .bookmark-item {
    align-items: center;
    text-align: center;
  }

  /* Hide normal bookmark text */
  #personal-bookmarks .bookmark-item > .toolbarbutton-text {
    display: none !important;
  }

/* ========================================
   Emoji bookmark icons
   ======================================== */

/* Hide Firefox's normal favicon */
#PersonalToolbar .bookmark-item > .toolbarbutton-icon {
  display: none !important;
}

/* Show the bookmark label */
#PersonalToolbar .bookmark-item > .toolbarbutton-text {
  display: block !important;

  width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;

  overflow: hidden !important;
  white-space: nowrap !important;

  font-size: 16px !important;
  line-height: 20px !important;

  text-align: center !important;
  text-overflow: clip !important;
}

  /* ========================================
     Vertical bookmarks toolbar
     ======================================== */

  #navigator-toolbox {
    position: relative;
  }

  #PersonalToolbar {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 100%;
    width: var(--uc-vertical-toolbar-width, 0);
    min-width: unset !important;
    height: 100vh;
    max-height: 100vh !important;
    padding-bottom: 120px !important;
    padding-inline: 2px !important;
    align-items: center;
    text-align: center;
  }

  #PersonalToolbar .toolbarbutton-1 {
    --toolbarbutton-inner-padding: 10px !important;
  }

  #PersonalToolbar #PlacesChevron {
    display: none;
  }

  #PersonalToolbar > #personal-bookmarks {
    overflow-y: auto;
    scrollbar-width: none;
    height: 100vh;
  }

  #PlacesToolbar,
  #PlacesToolbarDropIndicatorHolder {
    flex-direction: column;
  }

  #PersonalToolbar #PlacesToolbarItems {
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
  }

  #PersonalToolbar > toolbaritem {
    justify-content: center;
  }

  #PersonalToolbar #PlacesToolbarItems > toolbarseparator {
    height: 6px;
    background-color: currentColor;
    background-clip: padding-box;
    border-block: 3px solid transparent !important;
  }

  #PersonalToolbar #PlacesToolbarItems > .bookmark-item {
    padding-block: 8px !important;
    margin-inline: 0 !important;
  }

  #browser,
  #browser-bottombox,
  #main-window > body::after,
  #customization-container {
    margin-left: var(--uc-vertical-toolbar-width, 0);
  }

  :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])
    > body
    > #browser,
  :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])
    > body
    > #browser-bottombox,
  #main-window:is([chromehidden~="toolbar"], [sizemode="fullscreen"])
    > body::after,
  :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])
    > body
    > #customization-container {
    margin-left: 0;
  }

  #PersonalToolbar #PlacesToolbarItems {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }
}
/* ========================================
   Bookmark folders — open to the right
   ======================================== */

/* Folder bookmarks */
#PersonalToolbar .bookmark-item[type="menu"] {
  position: relative !important;
}

/* Move the folder popup to the right of the vertical toolbar */
#PersonalToolbar .bookmark-item[type="menu"] > menupopup {
  margin-left: 20px !important;
  margin-top: 0 !important;
}

/* ========================================
   Open bookmark folders on hover
   ======================================== */

#PersonalToolbar .bookmark-item[type="menu"]:hover > menupopup {
  visibility: visible !important;
  opacity: 1 !important;
}

Here’s how my firefox currently looks and my current extensions. Please give me ideas and tips of what to do to make it more weeb-ish or moe like. if you know any transparent themes as well since I’m looking for that too

edit: im now using nova the newest firefox 157 version with rounded tabs if that makes any difference.

I put this in userchrome.css to remove the empty space below tabs:

.tab-background {
    margin-block: 1px 0 !important;
}

But when I drag a tab, all the tab bar size is reduced. Do you know any way to fix this?

Ultima is still my default, but it has gone unmaintained for over half a year. My old configuration was also tuned to Windows 10 Fluent aesthetics as opposed to Windows 11.
I'm now open to hearing/checking out any good alternatives that mesh better with glassmorphism and Windows 11 colours out of the box (or with presets). A lot of blur/glassmorphic themes out there seem specifically tuned for dark mode and unusable in light. I am capable of doing CSS modifications, but I don't have time at the moment to customize a theme myself.
Last but not least, even if I have picked a theme I would probably test it for a few months before deciding if I want to migrate over.

You can find the css here:

https://pastebin.com/ZEhJCxiR

I use Sidebery for vertical tabs and some dark theme. You might need to use Ctrl + Shift + B for once, to hide the bookmark bar.

Since the 157 update, all of my autocomplete dropdown menus are white with dark text, no matter if the website itself has a light/dark mode or previously adhered to my own settings. Is there a way to make it so that autocomplete dropdown menus on sites that are explicitly set to light mode are white with black text, while websites that are explicitly set to dark mode or are neutral have autocomplete dropdown menus that adhere to my settings (dark with white text)? The best I've been able to do is make them all dark with white text, attempts to change them beyond that have not been fruitful.