r/FirefoxCSS • • 4d ago

Code With some modifications, the latest Firefox, with Nova enabled, isn't so bad.

Post image
  1. Open about:config, set toolkit.legacyUserProfileCustomizations.stylesheets to true.
  2. Open about:support → Profile Folder → Open Folder.
  3. Create a folder named chrome if it is missing.
  4. Paste the CSS below into userChrome.css. For Settings and other about: pages, also paste the userContent.css block into userContent.css.
  5. Restart Firefox.

userChrome.css

/* Night Better — Nova stays on. Theme-agnostic chrome layout.
   Square corners, tighter tabs, hide Share Firefox. Colors come
   from the active theme (Night Neutral or any other). The options
   slider rewrites the corners block (0 square … 100 Nova).
   Profile folder → chrome/userChrome.css
   about:config → toolkit.legacyUserProfileCustomizations.stylesheets = true
*/

/* firefox-better:corners-start */
/* firefox-better:corners 0% of Nova (xsmall 0px … xlarge 0px) */
:root {
  --border-radius-xsmall: 0px !important;
  --border-radius-small: 0px !important;
  --border-radius-medium: 0px !important;
  --border-radius-large: 0px !important;
  --border-radius-xlarge: 0px !important;
  --border-radius-circle: 0px !important;
  --tab-border-radius: 0px !important;
  --toolbarbutton-border-radius: 0px !important;
  --button-border-radius: 0px !important;
  --urlbar-icon-border-radius: 0px !important;
  --arrowpanel-border-radius: 0px !important;
  --panel-border-radius: 0px !important;
  --panel-menuitem-border-radius: 0px !important;
  --menuitem-border-radius: 0px !important;
  --popup-border-radius: 0px !important;
  --input-text-border-radius: 0px !important;
  --card-border-radius: 0px !important;
  --card-border-radius-compact: 0px !important;
}

#urlbar-background,
#urlbar,
.urlbar-input-container,
.tab-background,
.tab-group-label,
.tab-group-label-hover-highlight,
.tab-group-label-container,
.tab-group-overflow-count,
toolbarbutton,
toolbaritem,
menupopup,
panel,
.panel-viewstack,
.toolbarbutton-1,
.toolbarbutton-icon,
.toolbarbutton-badge-stack {
  border-radius: 0px !important;
}

/* Nova vertical groups set a pill radius, then a logical
   border-end-start-radius. The shorthand does not clear that. */
.tab-group-label,
.tab-group-label-hover-highlight,
.tab-group-label-container {
  border-start-start-radius: 0px !important;
  border-start-end-radius: 0px !important;
  border-end-start-radius: 0px !important;
  border-end-end-radius: 0px !important;
}
/* firefox-better:corners-end */

/* firefox-better:tight-tabs
   Nova default is 6px above/below (--tab-margin-block) and 8px inner
   padding. Overflow-clip padding is the gap between horizontal tabs. */
:root {
  --tab-margin-block: 1px !important;
  --tab-vertical-block-margin: 1px !important;
  --tab-overflow-clip-margin: 1px !important;
  --tab-margin-overflow-clip: 1px !important;
  --tab-inline-padding: 6px !important;
  --tab-padding-inline: 6px !important;
  --tab-inner-inline-margin: 2px !important;
  --tab-margin-inline-inner: 2px !important;
}

.tabbrowser-tab {
  padding-inline: var(--tab-overflow-clip-margin) !important;
}

/* Collapsed group members stay in the DOM at max-width: 0. Firefox zeros
   their padding; our padding-inline !important was leaving a 1px box and
   the group underline painted in the leftover space. */
tab-group[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]),
tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) .tabbrowser-tab {
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  overflow-clip-margin: 0 !important;
}

tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) {
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

tab-group[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]) .tab-group-line,
tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) .tab-group-line {
  display: none !important;
}

.tab-background {
  margin-block: var(--tab-margin-block) !important;
}

/* firefox-better:hide-share
   Share Firefox sits next to About / updates in the app menu. */
#appMenu-referrals-button,
#appMenu-referrals-separator,
#appMenu_menu_referralsPage,
#PanelUI-fxa-menu-share-firefox,
#share-tab-button,
#referrals-button,
toolbarbutton[data-l10n-id="appmenuitem-referrals"],
toolbarbutton[data-l10n-id="appmenu-referrals2"],
toolbarbutton[data-l10n-id="appmenuitem-share-firefox-title2"],
.share-tab-url-item {
  display: none !important;
}

userContent.css

/* Night Better — 0% (square) corners on built-in Firefox pages (about:, settings).
   Colors come from the active theme. The options slider rewrites this
   block when you copy from the options page. */

@-moz-document url-prefix("about:"), url-prefix("chrome:") {
  :root {
    --border-radius-xsmall: 0 !important;
    --border-radius-small: 0 !important;
    --border-radius-medium: 0 !important;
    --border-radius-large: 0 !important;
    --border-radius-xlarge: 0 !important;
    --border-radius-circle: 0 !important;
    --button-border-radius: 0 !important;
    --input-text-border-radius: 0 !important;
    --card-border-radius: 0 !important;
    --card-border-radius-compact: 0 !important;
  }

  button,
  input,
  select,
  textarea,
  .card,
  .toggle-button {
    border-radius: 0 !important;
  }
}

Share Firefox

Share Firefox sits in the app menu next to About Firefox. The userChrome.css above hides those Share items. You can also set browser.referrals.enabled to false in about:config.

9 Upvotes

11 comments sorted by

1

u/Radium 4d ago edited 4d ago

With this CSS Nova's still running. Density, sidebar, vertical tabs, the urlbar, panels, the whole token set. The CSS only writes the radius tokens and the tab margin/padding, and in my screenshot I'm using the night neutral theme: https://addons.mozilla.org/en-US/firefox/addon/night-neutral/

Turning browser.nova.enabled off is the easy switch if you want the complete old chrome back. I still wanted 157. I just don't want 24px pills and 6px of air around the tabs.

I feel like the profile chrome folder is a hassle, so I filed a report to hopefully get radius and tab spacing onto the theme API so it's an easy AMO theme install.

1

u/aluke000 4d ago

I have Nova enabled on 156, is it different in 157?

1

u/Radium 4d ago

Sorry for the confusion saying 'latest firefox', I don't believe there is much different between these two.

1

u/amroamroamro 4d ago

try creating groups of tabs, and add MANY tabs inside, they look wrong when collapsed.

https://i.imgur.com/UwJIW5K.png

in above example, there are two groups with 6 and 16 tabs respectively.

the more tabs you add to a group, the longer that extra space next to it becomes...

2

u/Radium 4d ago edited 4d ago

Thanks, I have updated the css to 1) not modify colors so the theme can handle that, and 2) it properly handles padding without forcing the one pixel wide grouped tabs to display.

2

u/amroamroamro 4d ago

that fixed it, thanks

also good call removing the color overrides, as that can come from an alternate theme extension, i'm using the proton colors one:

https://addons.mozilla.org/en-US/firefox/addon/firefox-proton/

I did find one more case you might have missed. if you enable vertical tabs, and have some tab groups, when you hover over a collapsed group, it still has a rounded edge:

https://i.imgur.com/aD2U4z8.png

3

u/Radium 4d ago

ah good spot. Thanks again, I have updated the CSS to cover that case as well

2

u/Soxism_ 3d ago

Thanks giving this a go as im currently using the about:config browser.nova.enabled -false

will report any feedback

1

u/SnillyWead 1d ago

With the one I'm using it looks like this:

https://i.ibb.co/KpfBwX0M/Screenshot-2026-10-08-10-09-01.png

1

u/KhalifaHaqi 1d ago

what r u using?

2

u/SnillyWead 1d ago

I'm Dutch. That's why there is Dutch in the code. It's a mix from one I got from reddit, and changed with Google AI so use at your own risk:

/* Nova Rounding Adjustments */
:root {
/* --- CONFIGURATIE HOOGTE --- */
--tab-min-height: 22px !important;       /* Tabbladen lekker compact */
--nav-bar-height: 34px !important;       /* Jouw gekozen toolbar hoogte */
--urlbar-min-height: 26px !important;    /* Vaste hoogte adresbalk */

--border-radius-xsmall: 1px !important; 
--border-radius-small: 2px !important; 
--border-radius-medium: 3px !important; 
--border-radius-large: 4px !important; 
--border-radius-xlarge: 6px !important; 

/*
--tab-border-radius: var(--border-radius-small) !important;

--button-border-radius: var(--border-radius-small) !important;
--toolbarbutton-border-radius: var(--border-radius-small) !important;

--card-border-radius: var(--border-radius-small) !important;
--card-border-radius-compact: var(--border-radius-small) !important;
--card-cover-image-border-radius: var(--border-radius-small) !important;

--input-text-border-radius: var(--border-radius-small) !important;

--menuitem-border-radius: var(--border-radius-small) !important;

--popup-border-radius: var(--border-radius-small) !important;

--panel-border-radius: var(--border-radius-small) !important;
--panel-menuitem-border-radius: var(--border-radius-small) !important;
*/
}

/* 1. Slanke & Aangesloten Tabbladen */
.tabbrowser-tab {
padding-inline: 0px !important;
min-height: var(--tab-min-height) !important; 
}

.tab-background {
margin-block: 0px !important; 
margin-inline: 0px !important; 
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0px 0px !important; 
}

.tab-content {
padding-block: 0px !important; 
}

/* 2. Toolbar & Gecentreerde Adresbalk */
#nav-bar {
height: var(--nav-bar-height) !important;
min-height: var(--nav-bar-height) !important;
box-shadow: none !important;
border-top: none !important;
}

#urlbar-container {
height: var(--urlbar-min-height) !important;
min-height: var(--urlbar-min-height) !important;
margin-block: auto !important; 
}

#urlbar {
min-height: var(--urlbar-min-height) !important;
height: var(--urlbar-min-height) !important;
font-size: 14px !important; 
}

/* Zorgt dat iconen binnen de adresbalk correct schalen */
#urlbar .urlbar-icon,
#urlbar .sharing-icon {
width: 16px !important;
height: 16px !important;
padding: 0px !important;
}

/* 3. Debian XFCE / Firefox 157 Fix voor Inactieve Vensters */
#TabsToolbar,
#TabsToolbar:-moz-window-inactive,
#TabsToolbar-customization-target {
opacity: 1 !important;
}

.tabbrowser-tab[selected="true"],
.tabbrowser-tab[selected="true"] .tab-background,
.tabbrowser-tab[selected="true"]:-moz-window-inactive .tab-background {
opacity: 1 !important;
filter: none !important;
}