{"id":13479129,"url":"https://github.com/ravindUwU/firefox-refined-findbar","last_synced_at":"2025-03-27T09:30:45.715Z","repository":{"id":144174688,"uuid":"573836112","full_name":"ravindUwU/firefox-refined-findbar","owner":"ravindUwU","description":"Refine the Firefox (130–136) find bar by repositioning it, adjusting spacing \u0026 styling internal elements.","archived":false,"fork":false,"pushed_at":"2025-01-27T05:33:21.000Z","size":262,"stargazers_count":25,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T20:12:28.056Z","etag":null,"topics":["firefox","userchrome"],"latest_commit_sha":null,"homepage":"https://old.reddit.com/r/FirefoxCSS/comments/7fxtdm","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ravindUwU.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-03T15:32:43.000Z","updated_at":"2025-03-09T08:06:20.000Z","dependencies_parsed_at":"2024-10-30T12:44:27.878Z","dependency_job_id":null,"html_url":"https://github.com/ravindUwU/firefox-refined-findbar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ravindUwU%2Ffirefox-refined-findbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ravindUwU%2Ffirefox-refined-findbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ravindUwU%2Ffirefox-refined-findbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ravindUwU%2Ffirefox-refined-findbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ravindUwU","download_url":"https://codeload.github.com/ravindUwU/firefox-refined-findbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245817335,"owners_count":20677269,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firefox","userchrome"],"created_at":"2024-07-31T16:02:10.049Z","updated_at":"2025-03-27T09:30:45.691Z","avatar_url":"https://github.com/ravindUwU.png","language":"SCSS","funding_links":[],"categories":["SCSS"],"sub_categories":[],"readme":"# Refined find bar for Firefox\n\n`userChrome.css`[^userchrome] styles that improve the Firefox find bar by repositioning it,\nadjusting spacing and styling its elements.\n\n[^userchrome]:\n    Learn more about `userChrome.css` at: https://kb.mozillazine.org/UserChrome.css,\n    https://old.reddit.com/r/firefox/wiki/userchrome,\n    https://old.reddit.com/r/FirefoxCSS/wiki/index/tutorials\n\n\u003cbr\u003e\n\n## Features\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\t\u003cth\u003eVariable\u003c/th\u003e\n\t\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\n\u003c!-- --\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\u003ccode\u003e$float\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\nIf `true`, detaches the find bar from the toolbar, and positions it floating above the contents of\nweb page,\n\n![](./img/feature-floating-true.png)\n\nIf `false`, positions the find bar towards the top right-hand corner of the browser window, docked\nto the toolbar,\n\n![](./img/feature-floating-false.png)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- --\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\u003ccode\u003e$float-alignment\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\nVertically positions the floating find bar. Either `top` or `bottom`.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- --\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\u003ccode\u003e$float-distance\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\nDistance between the floating find bar and the respective window corner.\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- --\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\u003ccode\u003e$buttons\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\nIf `true`, styles the find bar checkboxes to resemble buttons,\n\n![](./img/feature-buttons-true.png)\n\nIf `false`, leaves them as is,\n\n![](./img/feature-buttons-false.png)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- --\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\u003ccode\u003e$buttons-grouped\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\nIf `true`, groups find bar buttons together,\n\n![](./img/feature-buttons-grouped.png)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- --\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\u003ccode\u003e$hide-close-button\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\nIf `true`, hides the close button.\n\n**Important:** with this option enabled, the only way to close the find bar would be to press\n\u003ckbd\u003eEsc\u003c/kbd\u003e when its textbox or buttons are focused. To focus the textbox, press the find\nshortcut \u003ckbd\u003eCtrl/Cmd\u003c/kbd\u003e+\u003ckbd\u003eF\u003c/kbd\u003e.\n\n![](./img/feature-hide-close-button-true.png)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- --\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\u003ccode\u003e$hide-when-unfocused\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\nIf `true`, hides the find bar when none of its elements (textbox or buttons) are in focus.\n\n**Important:** with this option enabled, press \u003ckbd\u003eCtrl/Cmd\u003c/kbd\u003e+\u003ckbd\u003eF\u003c/kbd\u003e to reopen the find\nbar, if it loses focus (and is therefore, hidden).\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c!-- --\u003e\n\u003ctr\u003e\n\u003ctd valign=\"top\"\u003e\u003ccode\u003e$order\u003c/code\u003e\u003c/td\u003e\n\u003ctd valign=\"top\"\u003e\n\nReorders elements of the find bar.\n\nThis is a list that contains all of the following values (listed in the default order), in any\norder: `TEXT_BOX`, `CHECKBOX_HIGHLIGHT_ALL`, `CHECKBOX_MATCH_CASE`, `CHECKBOX_MATCH_DIACRITICS`,\n`CHECKBOX_WHOLE_WORDS`, `LABELS`, `DESCRIPTION`.\n\ne.g., If the order is specified as `DESCRIPTION`, `LABELS`, `TEXT_BOX`, `CHECKBOX_HIGHLIGHT_ALL`,\n`CHECKBOX_MATCH_CASE`, `CHECKBOX_WHOLE_WORDS`, `CHECKBOX_MATCH_DIACRITICS`,\n\n![](./img/feature-buttons-order.png)\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n## Usage\n\nThis style is authored as an [SCSS mixin][sassMixin] and must be transpiled to CSS first.\n\n- **The quickest way to get started** is to,\n\n  1. Visit https://ravindUwU.github.io/firefox-refined-findbar, which will automatically generate a\n     link to the [Sass Playground][sassPlay].\n\n  2. Visit the generated link, modify the SCSS as necessary (specifically, the highlighted\n     `@include` statement).\n\n  3. Copy the CSS output into your `userChrome.css` file and restart Firefox.\n\n  \u003cdetails\u003e\n  \u003csummary\u003eIf that didn't work,\u003c/summary\u003e\n\n  1. Open an online transpiler (e.g., [Sass Playground][sassPlay] or\n     [SassMeister](https://www.sassmeister.com/)).\n\n  2. Copy the contents of [`refined-findbar.scss`][src] into the SCSS pane.\n\n  3. Add the line `@include refined-findbar()` after the copied contents, and override variables as\n     necessary. The default values can be found in the `@mixin refined-findbar` declaration near the\n     top of the contents copied in step 2.\n\n     ```scss\n     // \u003ccontents of refined-findbar.scss\u003e\n\n     // prettier-ignore\n     @include refined-findbar(\n         $float: true,\n         $float-alignment: top,\n         // etc..\n     );\n     ```\n\n  4. Copy the CSS output into your `userChrome.css` file and restart Firefox.\n\n  \u003c/details\u003e\n\n- **To transpile locally**, [`@use`][sassUse] the [`refined-findbar.scss`][src] file,\n  [`@include`][sassMixin] the mixin changing any variables as necessary, and use [`sass`][npmSass]\n  to transpile to CSS.\n\n\u003cbr\u003e\n\n[src]: ./src/refined-findbar.scss\n[sassUse]: https://sass-lang.com/documentation/at-rules/use/\n[sassMixin]: https://sass-lang.com/documentation/at-rules/mixin/\n[sassPlay]: https://sass-lang.com/playground/\n[npmSass]: https://www.npmjs.com/package/sass\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FravindUwU%2Ffirefox-refined-findbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FravindUwU%2Ffirefox-refined-findbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FravindUwU%2Ffirefox-refined-findbar/lists"}