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,
$hide-close-button	If true, hides the close button. Important With this option enabled, the only way to close the find bar would be to press Esc when its textbox or buttons are focused. To focus the textbox, press the find shortcut Ctrl/Cmd+F.
$hide-when-unfocused	If true, hides the find bar when its elements (textbox or buttons) are not in focus. Important With this option enabled, press Ctrl/Cmd+F to reopen/focus the find bar, if it loses focus (and is therefore, hidden).
$opacity-when-unfocused	Transparency of the find bar when its elements (textbox or buttons) are not in focus. Excepts a number between 0 (fully transparent) and 1 (fully opaque).
$order	Reorders elements of the find bar. This is a list that contains all of the following tokens (listed here 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).

  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 ↩