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

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

firefox userchrome

Last synced: 11 days ago
JSON representation

Refine the Firefox (100–128) 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 (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-21T04:52:32.000Z (4 months ago)
• Last Synced: 2024-08-01T16:55:39.812Z (3 months ago)
• Topics: firefox, userchrome
• Language: SCSS
• Homepage: https://old.reddit.com/r/FirefoxCSS/comments/7fxtdm
• Size: 235 KB
• Stars: 18
• Watchers: 2
• Forks: 1
• Open Issues: 0
• 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 refine the Firefox find bar by repositioning it, adjusting

spacing, styling internal 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)

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