Refined Find bar for Firefox

userChrome.css¹ styles that refine the Firefox find bar by repositioning it, adjusting spacing, re-styling internal elements.

Features

Variable	Description
$feature-floating	If false, positions the find bar towards the top right-hand corner of the browser window, docked to the toolbar. If true, detaches the find bar from the toolbar, and positions it floating above the contents of web page.
$feature-floating-alignment	Vertically positions the floating find bar. Either top or bottom.
$feature-floating-distance	Specifies the distance between the floating find bar and the respective window corner.
$feature-buttons	If false, leaves the find bar options as checkboxes. If true, styles the find bar options to resemble buttons.
$feature-buttons-grouped	If true, groups find bar buttons together.

Usage

This style is written in SCSS and therefore must be transpiled to CSS before being added to userChrome.css. There are several ways to go about this,

• To use an online tool like SassMeister, copy the contents of refined-findbar.scss to its SCSS pane on the left-hand side, and override variables as necessary. The CSS transpilation will appear on the right-hand side; paste it in your userChrome.css file.

  

• To transpile locally, @use or @import the refined-findbar.scss file after overriding its variables as necessary.

  // userChrome.scss
  
  // Override variables here, e.g.,
  // $feature-floating: true;
  
  // Include refined find bar.
  @import url('./path/to/refined-findbar.scss');

  Then use a Sass transpiler to get its CSS output,

  $ sass userChrome.scss userChrome.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 ↩