github Firnschnee/FoxOne 3.6.5

3 hours ago

The final boss. The settings page.

This one has been sitting in the queue for a while. Time for some story time.

about:preferences has been running on FoxOne's colours since 3.4, but only the colours: every shape was still Nova's. Rounded cards, pill-shaped buttons, a pill for the search field, 24px corners on everything, a grey hover block under anything you looked at, and so much more.
Next to a browser chrome that is square from the tabs down to the context menu, the settings looked like a page from a different theme that happened to share a palette.

The obvious fix, one border-radius: 0 at the root, does nothing. The page is built from web components (moz-card, moz-box-item, moz-page-nav, moz-select, moz-message-bar) that re-declare their radius and hover tokens on the component host inside the shadow DOM, so a root override never arrives. The tokens have to be set on the host elements themselves, one family at a time. Which is what 3.6.5 does.

Added

  • --uc-rounded in userContent.css. Same switch as in userChrome.css, same default (0, square), same --uc-border-radius (8px). userContent cannot read userChrome's variables, so the line has to be set in both files. At 1 every surface on the about: pages takes one radius: cards, rows, buttons, fields, dropdowns, message bars and the category nav.

Changed

  • about:preferences and the rest of the about: family are flat now. Cards, message bars and info boxes sit on the base tone with a thin surface-coloured border instead of a raised panel. Search and text fields are base in every state, the accent border carries the focus.
  • Hover follows the hamburger-menu rule on all about: pages: no background block, accent-coloured text. Secondary buttons, card rows and the category nav all mark the same way. The selected category is accent text on nothing, not a filled pill.
  • Corners are square by default on cards, rows, buttons, toolbar buttons, text and search fields, dropdowns, message bars and the nav.

Notes

I really thought this would be the final boss. Turns out it was mostly reading Mozilla's CSS for endless hours and then setting six variables. Oh well....

PS
If anyone stumbles upon these changes and needs help with their own theme, open an issue. No need for any lost soul to endure that stuff again.

Don't miss a new FoxOne release

NewReleases is sending notifications on new releases.