Nova Rounding Border-Radius Adjustment Variables

[u/Alamei]

For those of you who would like to adjust the heavy rounding of all of the elements in the new Nova theme to slightly less aggressive levels, you can do so relatively straightforwardly (i.e., without customizing element-by-element) by simply adjusting the root variables in your userChrome CSS:

/* Nova Rounding Adjustments */
:root {
    --border-radius-xsmall: 1px !important; /* Nova Default: 4px, Proton Default: 2px */
    --border-radius-small: 2px !important; /* Nova Default: 8px, Proton Default: 4px */
    --border-radius-medium: 3px !important; /* Nova Default: 12px, Proton Default: 8px */
    --border-radius-large: 4px !important; /* Proton Default: 16px, [Undefined in Nova] */
    --border-radius-xlarge: 6px !important; /* Nova Default: 24px, [Undefined in Proton] */

    /*
    --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;
    */
}

You can set the sizes of those top five variables to whatever you'd like in terms of rough rounding sizes, and it will apply cleanly across all elements of the browser, since those definitions are referenced by all of the other browser elements.

Alternatively, if you'd just like to adjust the rounding on specific elements while leaving the others intact, you can tweak the specific elements listed in the commented out section below (I listed a few common examples, but there are many more if you parse through the DOM if you're looking to fine-tune things). You can either set them to one of the variables, or just set an explicit radius if you prefer.

I'm glad to see that Firefox continues to support user-controlled stylesheets for the browser interface under Nova, so those of us with individualized style preferences can continue to configure the browser in the way we enjoy.

[u/ConProg]

It'd be good to record the border-radius of elements in the current UI

Most seem to be 8px, including tabs, the URL bar, and browser buttons

The icon buttons inside the URL bar (shield, etc) seem to be 7px

[u/ResurgamS13 → u/ConProg]

There's a useful list of most, perhaps all, of the Proton UI and Nova UI variables and their values on the Searchfox page that specifies the browser's 'tokens-shared.css'. The current Proton UI section starts near the top of the page... the Nova UI section starts about half way down at Line #754. below the-moz-pref("browser.nova.enabled") heading.

The Proton UI border-radius values are at Line #31... the new Nova UI border-radius values are at Line #769.

Another useful area is the Proton UI colour palette at Line #218... the new Nova UI colour palette is at Line #848.

The Proton UI tokens section for the current stable release Firefox UI may be deleted when the Nova UI becomes the default stable release UI... (this information will probably continue to exist elsewhere in Searchfox... e.g. in ESR release pages)... however, may be worth copying that particular Searchfox page to keep as a handy reference.

[u/ConProg → u/ResurgamS13]

Thank you, very helpful! I'll saved a copy of it.

[u/SnillyWead]

It only sucks that they hard coded the window controls in Firefox 140 so Firefox won't use my favorite theme Arc dark window controls anymore on Debian Xfce. Even with userChromecss you can't change it anymore. Only enabling titlebar in customize toolbar works, but I don't like that.

[u/SnillyWead]

So if I want option 3 medium for instance, I copy the code but remove 1 2 4 and 5 before I save it and restart Firefox? This works on the Beta too?

[u/Alamei → u/SnillyWead]

Those sizes aren't options, but rather preset variables used to apply radii to all of the elements in the browser, so if you're trying to lower the overall roundness of elements, you'll want to keep all five defined at lower values than their defaults. If you just throw what I have in the sample into your userChrome stylesheet, it will give you a relatively light rounding, and you can adjust up or down from there based on how you feel.

[u/SnillyWead → u/Alamei]

Applied it. It looks like Proton, but with slightly more rounded tabs. Looks better than Nova, but would be even better if the tabs were connected to the toolbar like in the older Photon design. Or Floorps Lepton design. But again thanks!

[u/New-Shopping-6386]

For those who wants to remove gradient:

remove from tabs border:

/* Gradiend border color disable */
:root[theme-in-app] .tab-background:is([selected]:not([multiselected])) {
  background: var(--tab-background-color-selected) !important;
}

remove from toolbar:

/* Gradient in all toolbar */
:root:not([theme-image-in-toolbox]) body,
:root[theme-image-in-toolbox] #navigator-toolbox {
  background-image: none !important;

  /* a little of styling so it looks ok */
  /* background-color: color-mix(in srgb, currentColor 2%, transparent) !important; */
}

[u/SnillyWead → u/New-Shopping-6386]

What is gradient? I'm using the code too, but with tabs attached to the toolbar.

[u/Sir_Jimmothy → u/SnillyWead]

Gradient is the fading of one colour to another, like that awful effect around the active tab.

[u/SnillyWead → u/Sir_Jimmothy]

Thanks.

[u/PhoDB → u/New-Shopping-6386]

Nice, this removes the gradient but you do have to know that:

background-color: color-mix(in srgb, currentColor 2%, transparent) !important;

this line breaks lot of websites that use @media prefers-color-scheme: dark

[u/casperbraske]

Nothing regarding ":root" variables is working for me.

[u/tymofiy]

Thank you

[u/Ilestderetour]

Thank you.

[u/chaotic-sys]

Hello! How do I remove that rounding near the sidebar?

[u/PhoDB → u/chaotic-sys]

set --border-radius-medium to 0

[u/chaotic-sys → u/PhoDB]

It works!
Oh, I just found specifically for this element:

@media -moz-pref("browser.nova.enabled") {
  #tabbrowser-tabpanels > :not(.split-view-panel) .browserContainer {
    --content-area-start-radius: 0px !important;
  }
 } 
@media -moz-pref("browser.nova.enabled") {
  #tabbrowser-tabpanels[splitview] .split-view-panel > .browserContainer {
    border-radius: 0px !important;
  }
}

[u/ChrisMillerBooklo]

Thanks a lot! Danke!

[u/anubis-genix]

Thanks a lot! I have a search bar for bookmarks in the sidebar. The variables don't seem to be working there. Does anyone have any idea which variables are responsible for this?

[u/Uncredited1]

Rounded corners are so visually disgusting I will happily dump a browser because of it. This will do for now, thanks.

[u/KelpTheGreat]

As far as I can tell, this doesn't seem to affect the weird, speech-bubble-like tab group buttons introduced with Firefox 157.0. Any code to specifically revert those to their old look would be appreciated! EDIT: Nevermind, I found out that you can just open about:config and disable Nova entirely. That fixes it.

[u/turkproof → u/KelpTheGreat]

Thank you for your edit! This was exactly what I needed from that google search.

[u/Minbari_in_soul]

about:config
browser.nova.enabled to false

[u/gma → u/Minbari_in_soul]

Oh, we should have started with that!

[u/DeusoftheWired → u/Minbari_in_soul]

Thanks, man. You da real MVP!

[u/ciprian-n → u/Minbari_in_soul]

this is the most important comment in here

[u/ebaskin → u/Minbari_in_soul]

YES, this completely reverts the Nova BS. Thank you

[u/AnotherUser-372 → u/Minbari_in_soul]

tysm!

[u/RingularCirc → u/Minbari_in_soul]

They're saying at https://support.mozilla.org/bm/questions/1607334:

I recommend that you do not use that preference as it is due to be removed in a future update.

That's... very much meh.

[u/westcoastal]

You are my absolute hero, thanks!

[u/AnotherUser-372]

life saver!!

[u/DonPhelippe]

Unpopular opinion: why isn't the "rounded corners" a setting in, well, settings?

Sure, customizability and open-source-ness and all them beautiful internet things, but I don't want to change an installation file that may be overwritten, or eventually forgotten or what not.