https://github.com/ravindUwU/firefox-refined-findbar

Refine the Firefox (130–136) find bar by repositioning it, adjusting spacing & styling internal elements.
https://github.com/ravindUwU/firefox-refined-findbar

firefox userchrome

Last synced: about 1 year ago
JSON representation

Refine the Firefox (130–136) find bar by repositioning it, adjusting spacing & styling internal elements.

• Host: GitHub
• URL: https://github.com/ravindUwU/firefox-refined-findbar
• Owner: ravindUwU
• License: mit
• Created: 2022-12-03T15:32:43.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-27T05:33:21.000Z (over 1 year ago)
• Last Synced: 2025-03-26T20:12:28.056Z (about 1 year ago)
• Topics: firefox, userchrome
• Language: SCSS
• Homepage: https://old.reddit.com/r/FirefoxCSS/comments/7fxtdm
• Size: 256 KB
• Stars: 25
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Refined find bar for Firefox

`userChrome.css`[^userchrome] styles that improve the Firefox find bar by repositioning it,

adjusting spacing and styling its elements.

[^userchrome]:

    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




## Features

	Variable

	Description

$float

If `true`, detaches the find bar from the toolbar, and positions it floating above the contents of

web page,

![](./img/feature-floating-true.png)

If `false`, positions the find bar towards the top right-hand corner of the browser window, docked

to the toolbar,

![](./img/feature-floating-false.png)

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

![](./img/feature-buttons-true.png)

If `false`, leaves them as is,

![](./img/feature-buttons-false.png)

$buttons-grouped

If `true`, groups find bar buttons together,

![](./img/feature-buttons-grouped.png)

$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.

![](./img/feature-hide-close-button-true.png)

$hide-when-unfocused

If `true`, hides the find bar when none of its elements (textbox or buttons) are in focus.

**Important:** with this option enabled, press Ctrl/Cmd+F to reopen the find

bar, if it loses focus (and is therefore, hidden).

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

![](./img/feature-buttons-order.png)




## Usage

This style is authored as an [SCSS mixin][sassMixin] 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][sassPlay].

  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][sassPlay] or

     [SassMeister](https://www.sassmeister.com/)).

  2. Copy the contents of [`refined-findbar.scss`][src] 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.

     ```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`][sassUse] the [`refined-findbar.scss`][src] file,

  [`@include`][sassMixin] the mixin changing any variables as necessary, and use [`sass`][npmSass]

  to transpile to CSS.




[src]: ./src/refined-findbar.scss

[sassUse]: https://sass-lang.com/documentation/at-rules/use/

[sassMixin]: https://sass-lang.com/documentation/at-rules/mixin/

[sassPlay]: https://sass-lang.com/playground/

[npmSass]: https://www.npmjs.com/package/sass