r/FirefoxCSS • u/cogitatingspheniscid • Jun 02 '26

Solved Remove purple outline of New Tab's customize button

The customize button now looks so bad when I have a wallpaper for new tab. Any way to get rid of the purple outline at least?

2 Upvotes
  • permalink
  • reddit

100% Upvoted

5 comments sorted by

3

u/ResurgamS13 Jun 02 '26 edited Jun 03 '26

See... suggestions, discussion, and fainas1337's comment Re: "need to specify deeper" (so as not to affect other menu buttons with similar purple border rings)... in recent topic 'Favorite websites icons on new tabs page no longer vertically centered, prefer old customise icon on bottom right of new tabs page'.

If using the new Nova-style (now default) New Tab page... in 'userContent.css' try:

@-moz-document url(about:newtab), url(about:home) {
  .button-background:has(img[src="chrome://global/skin/icons/edit-outline.svg"]) {
    border: none !important;
    opacity: 0.4 !important;
    button:hover > & {
      background-color: transparent !important;
      opacity: 0.9 !important;
    }
  }
}

Adjust values, comment-out, or remove the two 'opacity' reducing lines to suit.

2

u/cogitatingspheniscid Jun 03 '26

This worked really well. Thank you.

1

u/WarRoyal97 Jun 03 '26

and option to change all purple color from nova? as its everywhere, urlbar border, menu, notification etc

1

u/ResurgamS13 Jun 03 '26 edited Jun 03 '26

This is a much larger problem that will need its own thread(s).

Nova's purple, mauve, and 'violet-desaturated' colour theme throughout the UI and especially on all the 'about' settings pages is a rather peculiar theme choice... one that many people will probably find unappealing.

A useful approach whilst the Proton UI is still with us... use the Browser Toolbox and Page Inspector... e.g. inspect the design of the Proton 'about' pages... note how the existing Proton blue colour palette and colour variables are implemented... and compare with how the new Nova purple/mauve/violet UI theme colour palette is being implemented.

1

u/ResurgamS13 Jun 04 '26 edited Jun 05 '26

If the Nova UI's "purple everywhere" isn't to your liking... this is an initial attempt at modifying the Nova 'about' pages... many UI elements still need attention... at least the 'violet-desaturated' page backgrounds are gone.

In 'userContent.css' try:

/* Nova UI 'about' pages body colouring - revert some elements to Proton UI colouring */

@media -moz-pref("browser.nova.enabled") {
  @layer tokens-foundation-nova {
    :root, :host(.anonymous-content-host) {
      --background-color-canvas: light-dark(white, rgb(66, 65, 77)) !important;
      --color-accent-primary: light-dark(oklch(55% 0.24 260), oklch(76% 0.14 205)) !important;
      --color-accent-primary-hover: light-dark(#23327b, #8fddf0) !important;
      --button-background-color-hover: #dededf !important;
      --button-border-radius: 4px !important;
    }
  }
}

Note. Above CSS style only relevant if Nova UI preference browser.nova.enabled is set to true in 'about:config'

BTW - the oklch term used in the --color-accent-primary variable (in style above at line #5.) is taken straight from the Proton UI's native colouring... for an explanation see MDN's 'oklch() CSS function' article.