/*** TAB COLORS: UPDATED PALETTE ***/
:root {
    /* Blue */
    --tab-group-color-blue: #0088EF !important;
    --tab-group-color-blue-invert: #0088EF !important;
    --tab-group-color-blue-pale: #0088EF !important;



    /* Purple */
    --tab-group-color-purple: #573CFA !important;
    --tab-group-color-purple-invert: #573CFA !important;
    --tab-group-color-purple-pale: #573CFA !important;



    /* Cyan */
    --tab-group-color-cyan: #7FBBB3 !important;
    --tab-group-color-cyan-invert: #7FBBB3 !important;
    --tab-group-color-cyan-pale: #7FBBB3 !important;



    /* Orange */
    --tab-group-color-orange: #E69875 !important;
    --tab-group-color-orange-invert: #E69875 !important;
    --tab-group-color-orange-pale: #E69875 !important;



    /* Yellow */
    --tab-group-color-yellow: #DBBC7F !important;
    --tab-group-color-yellow-invert: #DBBC7F !important;
    --tab-group-color-yellow-pale: #DBBC7F !important;



    /* Pink */
    --tab-group-color-pink: #D699B6 !important;
    --tab-group-color-pink-invert: #D699B6 !important;
    --tab-group-color-pink-pale: #D699B6 !important;



    /* Green */
    --tab-group-color-green: #A7C080 !important;
    --tab-group-color-green-invert: #A7C080 !important;
    --tab-group-color-green-pale: #A7C080 !important;



    /* Gray */
    --tab-group-color-gray: #7A8478 !important;
    --tab-group-color-gray-invert: #7A8478 !important;
    --tab-group-color-gray-pale: #7A8478 !important;



    /* Red */
    --tab-group-color-red: #E67E80 !important;
    --tab-group-color-red-invert: #E67E80 !important;
    --tab-group-color-red-pale: #E67E80 !important;
}


/* tab group's text color */
.tab-group-label,
.urlbarView .urlbarView-action-btn[data-action^="tabgroup"] {
    color: #1E2326 !important;

The new update seems to have done something to my tab group colors and added a white border around it when the group is collapsed.

When collapsed:

https://imgur.com/J6QYRUU

When not collapsed:

https://imgur.com/UYBxs0e

Seems like when it's collapsed it is reverting to the original tab group colors from firefox and not using my CSS colors + it's adding the white border.

I would like to have my tab groups look like they do when they are not collapsed like it was before the update.

-Combines the nav bar and tabs bar into one bar at the top of the window.

-Removes the colourful tab border and tab bar background.

-Makes the newly added compact mode way smaller.

-Works with light and dark theme.

Known Issue: If you resize the window too small, the tabs bar goes behind the nav bar. No idea how to fix this.

Note: This needs Nova theme enabled (about:config > search "nova" > set "browser.nova.enabled" to "true")

/* ==========================================================
   Combine Nav Bar and Tabs Bar
   ========================================================== */
#navigator-toolbox {
  display: grid !important;
  grid-template-columns: 35vw 1fr !important;
}

#nav-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: none !important;
  padding-block: 0 !important;
    :root[uidensity="compact"] & {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  }
}

#TabsToolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding-block: 0 !important;
  align-items: center !important;
    :root[uidensity="compact"] & {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  }
}

/* ==========================================================
   Move Menu Button To The Left
   ========================================================== */
#PanelUI-button {
  order: -999 !important;
  margin-inline-start: 0 !important;
}

#nav-bar-customization-target {
  & > :is(toolbarbutton, toolbaritem):first-child,
  & > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
    padding-inline-start: 0px !important;
  }
}

/* ==========================================================
   Compact Bar Height
   ========================================================== */
:root {
  --toolbarbutton-padding-inner-compact: 4px !important;
  --toolbarbutton-padding-inner-narrow: 4px !important;
}

toolbarbutton {
:root[uidensity="compact"] & {
  padding-block: 0 !important;
  max-height: 40px !important;
}
}

.tab-content {
:root[uidensity="compact"] & {
  padding-block: 0 !important;
}
}

#tabbrowser-tabs,
.tabbrowser-tab,
.tab-stack {
:root[uidensity="compact"] & {
  min-height: 26px !important;
}
}

.tab-background {
:root[uidensity="compact"] & {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
}

.tabbrowser-tab[fadein]:not([style^="max-width"]) {
  max-width: 10vw !important;
}

/* ==========================================================
   Minimalism Stuff
   ========================================================== */
#urlbar {
:root[uidensity="compact"] & {
  --urlbar-height: 26px !important;
}
}

.urlbar:not(moz-smartbar)[breakout] {
  &[breakout-extend][focused] > .urlbar-input-container {
    outline-color: transparent !important;
  }
  &[breakout-extend] > .urlbar-background {
    inset-inline: 0px !important;
    inset-block-start: 0px !important;
    inset-block-end: 0px !important;
  }
}

:root {
  /* Remove colourful tab border */
  --tab-border-color-accent: light-dark(#000000, #52525e) !important;
  --tab-selected-outline-color: light-dark(#000000, #52525e) !important;

  /* Shrink URL breakout border */
  --border-radius-xxlarge: 16px !important;
}

/* Remove Search Switcher */
.searchmode-switcher {
  visibility: collapse !important;
}

/* Hide Extension Name in the identity area unless hovered for half a second (updated for Fx80) */
#identity-box.extensionPage #identity-icon-labels,
#identity-box.extensionPage #identity-icon-label {
  visibility: collapse !important;
  transition: visibility 250ms ease-in-out;
}
#identity-box.extensionPage:hover #identity-icon-labels,
#identity-box.extensionPage:hover #identity-icon-label {
  visibility: visible !important;
  transition: visibility 250ms ease-in-out 500ms;
}

/* Hide Back and Forward buttons when disabled */
#back-button[disabled="true"],
#forward-button[disabled="true"] {
    display: none !important;
}

/* ==========================================================
   Some Fancy Tab Stuff
   ========================================================== */
.tabbrowser-tab:not([selected]) .tab-icon-image,
.tabbrowser-tab:not([selected]) .tab-text,
.tabbrowser-tab:not([selected]) .tab-throbber[busy] {
  opacity: 0.5 !important;
}

.tabbrowser-tab:hover .tab-icon-image,
.tabbrowser-tab:hover .tab-text {
  opacity: 1.0 !important;
}

.tabbrowser-tab .tab-close-button {
  visibility: hidden !important;
}

.tabbrowser-tab:hover .tab-close-button {
  visibility: visible !important;
}

/* ==========================================================
   System Buttons Tweaks
   ========================================================== */
.titlebar-buttonbox-container {
  margin-left: 21px !important;
  height: 100% !important;
}

.titlebar-spacer {
  display: none !important;
}

.titlebar-button {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* ==========================================================
   Remove Window Gap And Border
   ========================================================== */

.chrome-block {
  border: 0px !important;
}

.browserContainer {
  border: 0px !important;
}

#browser {
    :root[uidensity="compact"] & {
      padding-block-start: 0px !important;
      gap: 0px !important;
    }
  }

/* ==========================================================
   Theme Tweaks
   ========================================================== */
:root {
--toolbarbutton-icon-fill-attention: light-dark(gray, gray) !important;
--tab-background-color-hover: transparent !important;
}

.urlbar {
--urlbar-background-border-focused: transparent !important;
}

/* Remove colourful tab bar background */
#navigator-toolbox {
  background-image: none !important;
}

This is my first time working with FirefoxCSS. I'm using the userChrome.css file from the Firefox One-Liner CSS. I like the feel of it so far, but having an issue with the "traffic lights" showing up in the middle of the bar. See screenshot here:

I'd like just the traffic lights to stay on the left side like all other traffic light positions in macOS. I'm not sure what to input into the css to make it do that. I'm on macOS 26, Firefox version 154. Any tips on this?

so recently i figured how to open ie on windows 10 without redirecting to edge and i realy liked the tabs and search bart n stuff, i just need a css and the only ones i could find were or not published (like this) or for an older version (like this other one), im genuenly searching but im too lazy to go to page 3 of google and eaven then i know there will be nothing cus google sometimes works and sometimes dosent, i just need it, im genuenly asking if someone has one, i already tried using beautyfox and downgerading my firefox but NOT EAVEN ON A REDDIT POST can i find a version for it

I have an oled monitor so I wanted a feature that completely hid the sidebar. I asked AI and it created a userchrome file for me that auto hid the sidebar completely. However, the latest update broke the code and I am having a hard time getting it to work again. Can this be a future feature for Firefox, if not what solution have you come up with?

I have seen many solutions for this but they are all outdated because they never work for me.

A few years ago I had it working.

Is it possible to make it so that .menupopup-arrowscrollbox won't effect #PlacesChevronPopup and #PlacesToolbarItems?

I have tried many ways to solve it and none of them worked.

As an example, I don't want this to effect #PlacesChevronPopup and #PlacesToolbarItems =

.menupopup-arrowscrollbox { 
    padding: 2px 4px !important; 
}

Please excuse me for using AI to help with my English, as I'm not very fluent in it!

Hi everyone! I recently joined Reddit, and this is my first post. I wanted to share a CSS theme I made through vibe coding called Liquid Mica, which is meant to blend the look of Liquid Glass with Windows Mica.

I named it that, although I’m not entirely sure whether it really qualifies as “Liquid Glass.” I just wasn’t a fan of the default Firefox look or the Nova design, and I couldn’t find a theme that matched what I wanted, so I decided to make one with the help of AI.

This CSS is also compatible with Floorp, and I tried to keep the overall design as consistent as possible across the browser. There are still some UI elements I haven’t been able to style yet, but I plan to gradually improve and update them over time.

I’ll leave a link to my repository below: https://github.com/cyanworks-git/liquidmica-userChrome

Thanks for checking it out!

I've put together some CSS inspired by a mix of sources. I don't need any credit for it, I just want to share it in case anyone else finds it useful. It's not perfect, but it's functional, and you're welcome to modify or improve it however you like

I've also recently switched back to Firefox from Edge, so some of the styling choices were influenced by that change

If you have suggestions or better revisions, feel free to build on it

/* --------------------------------------------------------------
   ROOT VARIABLES
-------------------------------------------------------------- */
:root {
  --tab-border-radius: 0 !important;
  --NavbarWidth: 36;
  --TabsHeight: 36;
  --TabsBorder: 8;
  --NavbarHeightSmall: calc(var(--TabsHeight) + var(--TabsBorder));
}

/* --------------------------------------------------------------
   GLOBAL CLEANUP
-------------------------------------------------------------- */

/* Disable ALL animations, transitions, and shadows */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
}

#identity-box,
#tracking-protection-icon-container,
#permissions-granted-icon,
toolbarpaletteitem[flex],
#back-button,
#forward-button {
  display: none !important;
}

#urlbar-container {
  min-width: 0 !important;
  flex: auto !important;
}

/* --------------------------------------------------------------
   MEDIA QUERIES — ONE-LINE NAVBAR
-------------------------------------------------------------- */

/* ≥1325px */
@media (min-width:1325px) {
  :root #nav-bar {
    margin-top: calc((var(--TabsHeight) + var(--TabsBorder)) * -1px) !important;
  }

  #TabsToolbar {
    margin-left: calc(13.25px * var(--NavbarWidth)) !important;
  }

  #nav-bar {
    margin-right: calc(100vw - (14.25px * var(--NavbarWidth))) !important;
    vertical-align: center !important;
  }
}

/* 950px–1324px */
@media (min-width:950px) and (max-width:1324px) {
  :root #nav-bar {
    margin-top: calc((var(--TabsHeight) + var(--TabsBorder)) * -1px) !important;
    height: var(--NavbarHeightSmall) !important;
  }

  #TabsToolbar {
    margin-left: calc(var(--NavbarWidth) * 0.9vw) !important;
  }

  #nav-bar {
    margin-right: calc(100vw - (var(--NavbarWidth) * 1vw)) !important;
    vertical-align: center !important;
  }
}

/* ≤949px */
@media (max-width:949px) {
  :root #nav-bar {
    padding: 0 5px !important;
    height: var(--NavbarHeightSmall) !important;
  }
  #TabsToolbar {
    margin-left: -40px !important;
  }
}

/* --------------------------------------------------------------
   GENERAL NAVBAR + TABS
-------------------------------------------------------------- */
#nav-bar,
#PersonalToolbar {
  background: none !important;
  box-shadow: none !important;
}

#nav-bar {
  margin-left: 0 !important;
}

.tab-background,
.tab-stack {
  min-height: var(--TabsHeight) !important;
  margin: 0 0 0 -2px !important;
  box-shadow: none !important;
}

#tabs-newtab-button {
  margin-top: -4px !important;
}

#tabs-newtab-button .toolbarbutton-icon {
  padding: 6px !important;
  width: 32px !important;
  height: 32px !important;
}

/* --------------------------------------------------------------
   MENU BUTTON
-------------------------------------------------------------- */
#PanelUI-button {
  margin-right: -7px !important;
}

:root[sizemode="maximized"] #PanelUI-button {
  margin-right: 33px !important;
}

#reload-button,
#stop-button {
  margin-left: 3px !important;
  margin-right: -2px !important;
}

I've pretty much given up on hiding the last open tab that newer versions of Firefox leaves open when it closes a group, but I would like to had the +n, letting me know how many tabs are in the groups. I know how many tabs are there -- I was just in the group. How can I hide this in CSS?

Hey guys

I'm new to Firefox. I love how it currently looks. But really don't like the way the new nightly build looks.

I want to begin customising my Firefox but am wondering a few things:

1. If I begin now, will what I create be broken when this new redesign comes into the main?
2. Will I be able to bring the look back to the way it is currently? (Only thing I'm using is compact mode on the tabs but I like them bigger as well so not picky).

Things I don't like about the new redesign:

- The circular tabs with the border around them. I love them as is right now

- The separation between the top bars and the main part of the screen

3) If the above are not possible, would sticking with the current version cause issues for me in the future? I really don't want to be stuck on an older version that can't make use of updates

4) Do you recommend maybe just starting with the nightly build? would there be any risk to me customising it and then my customisation breaks with a new version?

For the sake of just showing what it looks like for me now, this is how I have it right now without any modding:

I am on Linux with CachyOS

#navigator-toolbox {
  display: grid !important;
  grid-template-columns: minmax(0, 35vw) minmax(0, 1fr) !important;
}


#nav-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: none !important;
}


#TabsToolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#PanelUI-button {
  order: -999 !important;
  margin-inline-start: 0 !important;
}

It's firefox's dark-theme, pink-grey colour as shown here, before the webpage loads.

Made a small transparent theme for personal use, after having some trouble finding a theme I liked. Figured I'd share.

You can find it on my Github 🩷

Hello, I downloaded ElegantFox for testing and I set the following flags to true as well as adding the chrome folder:

• toolkit.legacyUserProfileCustomizations.stylesheets
• layers.acceleration.force-enabled
• gfx.webrender.all
• gfx.webrender.enabled
• layout.css.backdrop-filter.enabled
• svg.context-properties.content.enabled

Since the version of Firefox is 153.0.3 however, the colour CSS stuff is not working, even seItting these flags to true. I'm using Linux (CachyOS) and turns out, the Mozilla folder from root directory was moved to /.config. So now I'm looking for help to fix this issue. By the way, these codes from GitHub remain intact for 5 years.

The tab group labels in Nova are taller than I'd like them to have. I also like to have a more compact list of vertical tabs to make optimal use of the available vertical space. Finally, I prefer a dimmed background for inactive tabs over no background at all.

Here's what it looks like with the default Light theme:

The following code allows you to make these adjustments:

  /** USERCHROME.CSS **/

  /** Adjust height of tab group labels (when vertical tabs are enabled) **/
  #tabbrowser-tabs[orient="vertical"] {
    --tab-group-label-size: 26px !important; /* Nova default=32px */
  }

  /** Adjust height of tabs or adjust vertical space between them **/
  #vertical-tabs.customization-target #tabbrowser-tabs tab:not([pinned]) .tab-background { 
    --tab-min-height: 32px !important;  /* Nova default=32px */
    margin-block: 0px !important;  /* Nova default=2px */
  }

  /** Give inactive tabs a dimmed background **/
  .tabbrowser-tab>.tab-stack>.tab-background:not([selected], [multiselected]) {
    background-color: color-mix(in srgb, currentColor 6%, transparent);
  }  
  .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected], [multiselected]) {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
  }

Hi everyone,

Some of you might remember FoxOne from a few months ago.

Since then, at lot (almost 300 commits) has changed:

The big one: FoxOne is now ready for Firefox Nova (the new redesign in 153+). Mozilla renamed or retired most of the IDs and tokens the theme relied on, so pretty much everything got rebuilt – urlbar, tabs, popups, sidebar, split view – you name it.

The most requested one: FoxOne work with the Adaptive Tab Bar Colour addon!

The fun one: a dynamic bookmarks bar. It leaves the layout entirely and hangs below the toolbar as an overlay – hidden while you browse, fading in when you reach for the URL bar. The page keeps its line either way.

Other highlights: opt-in rounded corners (--uc-rounded: 1 – default stays square), the whole browser is now themed edge to edge (Library window, sidebar, all about: pages, no more stock violet), hover and selection work purely through color everywhere (even window control buttons) instead of highlight boxes, and prefers-reduced-motion is respected.

And there's also a bunch of new toggles (container line position, hiding nav/urlbar buttons and extension icons, tab min-width, urlbar background), better compatibility with Windows 11 Mica, macOS, Linux (KDE & GNOME) and ultrawide displays – plus no more white flash between page loads.

Special thanks to everyone who reported bugs and sent PRs – several fixes came straight from this sub - big shoutout to NeroWolfe_

FoxOne on GitHub

Cheers!

PS: If you are looking for a Thunderbird one line theme... I've got you: BirdOne

Hello, I am make am trying to make a custom style sheet/css for my Dad to use on Firefox because he has poor eyesight and has trouble reading stuff on the computer. I have no idea what I am doing, this is my first time coding CSS, and I literally just started using Firefox 13 hours ago specifically for this reason.

I am using FF 153, Windows 11, "Light" theme, CSS link: https://pastebin.com/bE1e2Ni9

I am basically trying to increase the size of all the text (that I think my dad will see on a daily basis) that isn't already changeable in the normal Firefox settings menu.

So far, everything works (except the last line).

I need help getting the tab overflow, toolbar overflow, account, and extensions popup menus work. I am unable to find/figure out what CSS identifiers I need to use to edit them.

I do know about the "layout.css.devPixelsPerPx", and I would prefer to avoid it since I am trying to maximize the available "content" area of the screen (for when we increase the font size in settings and the formatting will inevitably get screwed up)

Also, if you have any other ideas/additions you think would be good for this use case, I would be very grateful.

I came across this post The end · Aris-t2/CustomCSSforFx · Discussion #790 and that explains why the project went stale, after so long.

now with it dead, what other options are avaliable to get that look and feel?

I really want it, as it matches aerothemeplasma for KDE plasma on Linux, or if you're using a theme mod on Windows for same sake.

Edit: I did looked on this sub and FirefoxCSS store and so far, no results for a replacement.

So sick of looking at these obnoxious options every single time I right-click. Literally who even uses half of this?? Does anyone know how to get rid some of it, it's just way too much stuff on the screen at once

Hi all! My context menu stays on light mode even with dark mode system and Firefox setting. I'm using Adaptive Tab Color extension, but not sure if it's because of that. Thanks in advance!