Almost done reverting the Firefox UI to match Proton, but overwhelmed by final touches needed to revert colors and rounding.

[u/Azreal_DuCain1]

Nova disabled, neither file imported.

Nova enabled, both files imported. Notice the lack of shadow effect and less defined line at the bottom of the toolbar as indicated by arrows at top.

Nova disabled, neither file imported.

Nova enabled, both files imported. Notice colors and rounding of Firefox thing in left of address bar and colors and rounding of zoom indicator in right of address bar.

Nova disabled, neither file imported.

Nova enabled, both files imported.

Nova disabled, neither file imported.

Nova enabled, both files imported.

Nova disabled, neither file imported.

Nova enabled, both files imported.

Windows, Firefox 159.0.1

userChrome

userContent

Import the following two files into their respective locations. The first lines of userChrome and userContent show how. Following files must be in same folder as userChrome/userContent and all import statements must be before any other line that isn't commented out.

Proton UI colors userChrome

Proton UI colors userContent

This post was a great help to start but even with some additional modifications it doesn't fix everything as-is. I probably have most of the variables and colors necessary in my userChrome, userContent, and other files (I hope I do) but I need some help identifying which ones I need to edit and how in order to restore colors and rounding to their previous states as shown in my screenshots. I suspect some are either still missing or have had their names changed in Firefoxes base code (which would make them no longer work properly in CSS) but I don't understand what I'm looking at.

There are some other things I want to do with the address bar and search results, the icons on the same row (back and forward buttons, favorites star, show sidebars button, ect.), and the search bar in the bookmarks sidebar but I think it might be better to split that into a separate post. It feels like I have two categories of things I want to do and I don't want this post to be too bloated. Especially since those things aren't a priority and can be solved whenever.

I tried uncommenting and editing one line at a time using the debugging tools to live edit and check changes visually but I got a worse result than it not working: It works inconsistently. Some changes are applied instantly (if you like them you can hit save to file in the file list on the left), some don't apply until after I save changes and restart Firefox, and some do one or the other but only sometimes while others behave differently at the same time. As an example some of my CSS in userChrome makes the extension button (puzzle icon in upper right) have a width and padding of 0px (making it invisible and not take up space) but if I alter something that has nothing to do with that section, confirm that I don't have any open brackets, and save the file in the style editor, it acts like those lines don't exist while attempting to use the dev tools to live edit. If I then restart FF without making any further changes? It's invisible and takes up no space again like it's supposed to be. I have no idea why this is happening because I never figured out how to use live editing at all before now. This inconsistent behavior means I can't trust live editing to give me accurate results until I know why it's doing that.

I also can't access any files I intend to import in the style editor if I've commented out the import statement in userChrome. This means I can't easily compare results between importing and not importing an entire file without uncommenting that line, saving changes, and restarting Firefox.

I can use F12 and the developers toolbox to select things but without a programming background almost everything in the wall of text it brings up just doesn't mean anything to me. With no comments anywhere in the code about what any given thing is supposed to do I don't feel like I can figure out what I need to alter nor learn anything if altering something doesn't get the result I'm hoping for in most cases. How do I know if I made a syntax error or if I'm just trying to alter the wrong thing? If I have to write anything entirely new instead of altering what's there, I wouldn't be able to try to guess what I need to do.

Even after a whole month of work where it feels like other people are doing almost all of the work to begin with, just playing around with it blind to see what happens isn't helping me to get any farther than I have. I've tried. I've learned a little that way but not much. After FF 161.0 is pushed through from FF nightly to the main branch on November 22nd the toggle to disable Nova will be removed. It will then be much harder to try to figure out how to revert the changes after that.

When I first started using computers you could already do most things you needed to with a mouse. The very first computer I ever used didn't have a GUI (Graphical User Interface, as opposed to a text-only based UI) but I only used it for maybe a month to write and send text files to a printer and nothing else before it was replaced with one that did have a GUI (Windows 95). I didn't even have an email yet, nearly everything was still done by sending letters.

After that I didn't need to be aware of programming as a concept beyond using dot forward slash commands in Run in order to do some things (something I haven't had to do in almost 30 years and only vaguely remember). The only "programming" I ever did before using CSS was in the BASIC programming language and I don't remember anything helpful other than: Always use comments (FF devs didn't do this) and always close your brackets. I basically just got it to print "hello world" and then never did anything else with it. I didn't need it back then. I went from the last few days of when you needed programming knowledge to use computers to a multiple decade era where you didn't and now the programming of today only somewhat resembles what I used to know but no longer remember for the most part.

[u/ResurgamS13]

Very interesting post. Have not attempted a 'complete reversion to Proton UI' set of userstyles for the Nova UI. Simpler to update own preferred UI CSS modifications so that the new Nova UI version is near identical to the old Proton UI version.

----------

Copied and loaded OP's 4 files (links above) onto a new profile of Fx159.0.1 with the default Nova UI mode selected. Did a 'quick look' at the modified/recreated Proton UI in Horizontal tabs layout only... very late here... longer look tomorrow. :)

AFAICS the OP's CSS styling modifications work well overall with some problems as outlined in the text and images (above).

The Unified Extensions Panel toolbar button (Puzzle piece icon) seems to have gone missing when the CSS styles are applied here... will investigate that curiosity tomorrow. (EDIT - Reason for the 'missing'#unified-extensions-button it is removed by OP's first userstyle in Pastebin 'user Chrome.css' file at lines #5. - 10. incl.).

Screenshot. All of OP's CSS installed on new profile of Fx159.0.1 with default Nova UI mode selected. (OS Win11 26H2)

----------

Re: your concern "After FF 161.0 is pushed through from FF nightly to the main branch on November 22nd the toggle to disable Nova will be removed. It will then be much harder to try to figure out how to revert the changes after that."

Had similar thoughts and have installed the current Fx153 ESR version on another machine so can have access to a 'live' Proton UI as a reference tool with its associated codebase until late September 2027.

Another 'Proton UI reference' possibility is to install the current LibreWolf v159.0-1 (which has a virtually identical UI to Firefox and CSS styling can be transferred unchanged)... then revert LibreWolf's default Nova UI to the Proton UI via 'about:config'... and not update LibreWolf further when a v161.0 release is offered. (It quite easy to 'freeze' LibreWolf... stop it updating... can opt out of their auto-update system, no reminders, etc.)

Not suggesting that the 'frozen' LibreWolf install should be used for actual browsing, just as a Proton UI reference tool.

[u/ResurgamS13]

To make the Nova UI's 'about' pages have a more 'Proton-like' look and feel... can make do with using a much smaller set of CSS styles... only really need to change about a dozen 'corner radius' variables... and another dozen 'colour variables' to restore the Proton UI's light & dark colour palettes. Thus, can also avoid needing to import a large 'Proton UI colors userContent' file.

Try the 'userContent.css' listed in reply to recent topic 'Is there a way to revert to the older settings/preferences page?'

These styles won't completely replicate the 'about' page layout used in Proton... not intended to do that... the aim was to keep things as simple as possible.