Refined find bar for Firefox

userChrome.css¹ styles that refine the Firefox find bar by repositioning it, adjusting spacing, styling internal 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 before use. An online Sass transpiler can be used for this purpose.

The quickest way to get started is to,
1. Visit https://ravindUwU.github.io/firefox-refined-findbar, which automatically generates a link to the Sass Playground.
2. Visit the link, modify the SCSS as necessary (specifically, the @include refined-findbar(...) statement), and copy the CSS output into your userChrome.css file.
If that didn't work,
1. Open an online transpiler (e.g., the Sass Playground or SassMeister).
2. Copy the contents of refined-findbar.scss to 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 copied contents.
```
// <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.
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 ↩