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`,

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.

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 ↩