Refined find bar for Firefox

userChrome.css¹ styles that improve the Firefox find bar by repositioning it, adjusting spacing and styling its elements.

Features

Variable	Description
$float	If true, detaches the find bar from the toolbar, and positions it floating above the contents of web page, If false, positions the find bar towards the top right-hand corner of the browser window, docked to the toolbar,
$float-alignment	Vertically positions the floating find bar. Either top or bottom.
$float-distance	Distance between the floating find bar and the respective window corner.
$buttons	If true, styles the find bar checkboxes to resemble buttons, If false, leaves them as is,
$buttons-grouped	If true, groups find bar buttons together,
$order	Reorders elements of the find bar. This is a list that contains all of the following values (listed in the default order), in any order: TEXT_BOX, CHECKBOX_HIGHLIGHT_ALL, CHECKBOX_MATCH_CASE, CHECKBOX_MATCH_DIACRITICS, CHECKBOX_WHOLE_WORDS, LABELS, DESCRIPTION. e.g., If the order is specified as DESCRIPTION, LABELS, TEXT_BOX, CHECKBOX_HIGHLIGHT_ALL, CHECKBOX_MATCH_CASE, CHECKBOX_WHOLE_WORDS, CHECKBOX_MATCH_DIACRITICS,

Usage

This style is authored as an SCSS mixin and must be transpiled to CSS first.

• The quickest way to get started is to,

  1. Visit https://ravindUwU.github.io/firefox-refined-findbar, which will automatically generate a link to the Sass Playground.

  2. Visit the generated link, modify the SCSS as necessary (specifically, the highlighted @include statement).

  3. Copy the CSS output into your userChrome.css file and restart Firefox.

  If that didn't work,

  1. Open an online transpiler (e.g., Sass Playground or SassMeister).

  2. Copy the contents of refined-findbar.scss into the SCSS pane.

  3. Add the line @include refined-findbar() after the copied contents, and override variables as necessary. The default values can be found in the @mixin refined-findbar declaration near the top of the contents copied in step 2.

     // <contents of refined-findbar.scss>
     
     // prettier-ignore
     @include refined-findbar(
         $float: true,
         $float-alignment: top,
         // etc..
     );

  4. Copy the CSS output into your userChrome.css file and restart Firefox.

• To transpile locally, @use the refined-findbar.scss file, @include the mixin changing any variables as necessary, and use sass to transpile to CSS.

Footnotes

1. Learn more about userChrome.css at: https://kb.mozillazine.org/UserChrome.css, https://old.reddit.com/r/firefox/wiki/userchrome, https://old.reddit.com/r/FirefoxCSS/wiki/index/tutorials ↩