← Back to context

Comment by n4bz0r

11 days ago

The UI was tidy and nearly perfect, now it's all over the place: weird paddings, different border radiuses even within a single element, clashing background colors, and boy, do I love rainbow gradients everywhere.

Update: for those unhappy with the changes, you can roll them back for now:

  about:config -> browser.nova.enabled -> false

23 comments

n4bz0r

Reply
satya71  11 days ago

Thanks for the config. To their credit the UI change is instant. I double clicked a few times to find out why the old UI looks better.

The old UI has less visual noise (at least dark mode on Windows). The new theme has random highlights and high-contrast lines everywhere that draw attention to the browser UI. I want the browser to fade into the background not stand out.

  • cletusw  7 days ago

    You can remove the brightly colored (at least in dark mode) lines above every tab in your userChrome.css with:

    ``` .tab-context-line { display: none; } ```

romanovcode  11 days ago

I cannot find a setting to disable the gradient. It's very annoying indeed.

  • supermatou  11 days ago

    Here you go: add this to your userChrome.css file.

    /disable gradient

    / 1. Remove the toolbar/tab bar gradient completely /

    :root:not([theme-image-in-toolbox]) body,

    :root[theme-image-in-toolbox] #navigator-toolbox {

        background-image: none !important;

    }

    / 2. Strip Nova purple accent color/focus outlines from the URL & search bar */

    :root {

        --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;

    }

    .urlbar-input-container, #searchbar {

        --toolbar-field-border-color-focus: var(--toolbar-field-border-color) !important;

    box-shadow: none !important;

}

    • supermatou  11 days ago

      Bonus:

      /* Hide Kit mascot illustrations from menus, dialogs, and in-app alerts */

      .mascot-icon,

      .panel-header-mascot,

      [mascot="kit"],

      .onboarding-mascot-container {

          display: none !important;

}

  • n4bz0r  11 days ago

    The gradient is part of the theme. Updated the post with how to roll back the UI changes for now. After rolling back, select an old theme.

  • lopan  9 days ago

    A bit late to the party, but this is how I turned off the gradient...

    If your menu bar is hidden: Hamburger icon in top right hand corner > Original profile (or whatever profile is listed there) > Edit this profile > Choose a theme other than System.

    If using the menu bar: Profiles > Manager Profiles > Click the pencil icon on Original profile > Choose a theme other than System.

akrakesh  11 days ago

And, adding this to userChrome.css removes all rounded corners

    :root {
     --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;
    }

fender256  9 days ago

OMG, thank you so much, I was getting super irritated by the new design which I didn't ask for.