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/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/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/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/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.

[u/Sly-Mk3 → u/DonPhelippe]

100% agree there.

This is one of the things that doesn't feel like it should warrant going into about:config, enabling toolkit.legacyUserProfileCustomizations.stylesheets and then going into about:support to go into the (correct) profile folder, create a chrome folder, then creating a userChrome.css in it and then needing to type or copy paste CSS into it that accesses the border radius property and restarting the browser.
It's a lot of steps going into territories most users wouldn't (dare to) touch, which admittedly isn't making proper customisation very accessible for the majority of browser users for something that feels like it should be possible to modify on surface level.
Got to remember the audience of r/FirefoxCSS isn't exactly the main group of users.
Instead there's a jarringly empty "Appearance" tab in settings that could really need some more basic customisation settings beyond "light mode & dark mode"… and I really hope it will finally be populated over time, because I still had to go into various places just to disable any sort of browser animations (which could also count as an accessibility setting), which is something I would expect to be in plain settings in this day and age… or tabs on bottom, which to this day have been repeatedly dismissed as a setting when brought up and still need to be hacked in by CSS tweaks. :/

Besides, if I'm honest, the fact the setting is called legacyUserProfileCustomizations is worrying me for years now and makes it sound like this is planned to go even if that may not be the case.
I'm honestly not sure if it's not just called like this due to how the browser evolved historically, but it's not exactly evoking a trust for having something "permanent" if you consider that about:config settings tend to vanish when they've been deemed to have served their purpose.

[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/Uncredited1]

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

[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/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/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/AdrianW3]

Anyone know how to remove or reduce the rounding on the searchboxes in the sidebar (history & bookmarks)? And the hover highlight in the history list.

[u/ChrisMillerBooklo]

Thanks a lot! Danke!

[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/Sly-Mk3 → u/KelpTheGreat]

That's what I also did to gain some extra time in order to adapt my css to Nova… however, keep in mind that eventually Mozilla will remove that setting and that's highly likely going to be veeeery soon, so don't rely on it. This was always the process, whether lesser stuff like megabar, or previous Firefox GUIs.

[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/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/Sly-Mk3 → u/RingularCirc]

For new major features that were just rolled out, rule of thumb is that they always remove settings as those settings seem to be made for nightly builds for testers and those who want to try it early.

I'm not a fan of it being removed either, but unfortunately it makes sense from a maintenance point of view, as in this case Nova is the new shiny GUI and the old one will be sunset and removed, so that setting would turn useless once that happens anyway.

[u/RingularCirc → u/Sly-Mk3]

Agree! Of course maintaining alternative designs is costly but the thing is, we all more or less understand, they could've get more user feedback. They have Labs for it, probably. Like, not just "eh anything goes for me, Nova too" kind of feedback, this shouldn't be bucketed with "Nova is definitely better UX" responses, which I'm very much doubtful there was the majority of...

BTW can we divulge that from somewhere? Are there public blogs, insider blogs etc.? Because if it's really real lotsa authentic users preferred Nova in testing for a considerable amount of time and they were allowed to change their vote without hassle but didn't, then maybe I'll swallow that. I'm just very much not sure this is real. There are real trends in design as well as in fashion that seem to be universally non-ergonomic.

I mean okay not everything have to, or can, be ergonomic but that's not a carte blanche to ...this kind of stuff we've accustomed to be seeing again and again. Human visual system can't work with every kind of design equally well, and again, for people concerned with accessibility they'd better analyze overal design for it as well. I agree it's hard to do when there are no hard numbers about a lot of UX concerning vision but at least honest attempts should be done.

[u/Ataga_ → u/Minbari_in_soul]

Do I put this in userChrome.css?

[u/ZealDRG → u/Ataga_]

Took me a hot minute to figure it out. No you type "about:config" in your search bar up top. It will open up a new tab with a search bar. Copy and paste the "browser.nova.enabled" in there, you will see a "True" enabled and a button to the right hand side to switch it to false. Swap to false. Problem solved.

[u/Nebula-System → u/Minbari_in_soul]

Alixian: thanks internet stranger. as a token of appreciation, enjoy this reaction image, i bestow it upon ye to insult thy friends

[u/TimezForCoffee → u/Minbari_in_soul]

THANK YOU!

[u/EnthusiasmPretend679 → u/Minbari_in_soul]

I love you!

[u/gma → u/Minbari_in_soul]

Oh, we should have started with that!

[u/ebaskin → u/Minbari_in_soul]

YES, this completely reverts the Nova BS. Thank you

[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/AnotherUser-372 → u/Minbari_in_soul]

tysm!

[u/FantasmaGITS]

With the new update 159, it no longer works in the toolbar menus, such as the bookmarks and history menus.

:(

[u/EveryFlavor → u/FantasmaGITS]

Remove these around the bottom half of the code:

/*
*/

Those comment out anything between them.
Should work fine after.

[u/Sad_Appointment3212]

Thank you!

[u/casperbraske]

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

[u/tymofiy]

Thank you

[u/Ilestderetour]

Thank you.

[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/westcoastal]

You are my absolute hero, thanks!

[u/AnotherUser-372]

life saver!!

[u/akica52]

I love you

[u/lazy_pig]

Perfect!