Firefox-Mod-Blur

Firefox Mod Blur - Modular

🔹 macOS style buttons

🔹 Light and Dark theme support

🔹 Updated context menu design

🔹 Clean compact search with hidden buttons

🔹 More compact and responsive homepage

Select and add extra styles and functions

Min-max-close buttons style ⚙️

Select one min-max-close_buttons.css

Left side MacOS style

Right side MacOS style

Right side OS

Left side OS

Theme default

Bookmarks bar modifications ⚙️

popout_bookmarks_bar_on_hover.css

remove_folder_icons_from_bookmarks.css

bookmarks_bar_same_color_as_toolbar.css

Transparent Bookmarks bar. Enable mod.transparent.bookmarks-bar or mod.transparent.bookmarks-bar.centered in about:config

Privacy mods ⚙️

privacy_blur_email_in_main_menu.css

privacy_blur_email_in_sync_menu.css

privacy_blur_tabs_content.css

privacy_change_email_text.css

Extension menu changes ⚙️

Style 1 - cleaner_extensions_menu.css

Style 2 - cleaner_extensions_menu.css

How to enable/disable extra functionality

In search bar type -> about:config

If it's configured using numbers select number else select boolean and press add -> +

To reset default values delete the added preference or set it to false (for boolean).

To find all added preferences search "mod."

Copy and Enable preferred modifications:

Preference name	Value	Notes	Preview
mod.number.of.extensions.in.a.row	1 to 10	Change number of extensions in one row. Default [4]
mod.extensions.menu.extention-icon.size	12 to 30	Change extensions icons size. Default [22]
mod.hide.manage-extensions.button	true	Hide the button that opens all extensions manager inside settings.
mod.disable.extensions-menu.separator	true	Hide sepatator between active and inactive/faded extensions. Only visible when there is at least one faded extension.
mod.hide.faded-extensions.inside.extensions-menu	true	Hide all faded/inactive non interactable extensions from extension menu. Not necessary if they aren't visible by default.

Icon changes ⚙️

firefox_view_icon_change.css

white_github_icon_in_bookmarks.css

ublock-icon-change.css

More compact Vertical Tabs ⚙️

Enable mod.compact.vertical.tabs in about:config

Centered Tabs ⚙️

Enable mod.centered.tabs in about:config

Hide Tab preview panel ⚙️

Enable firefoxcss.disable.tab.preview.panel.fully in about:config

Hide scrollbar when Vertical tabs overflow ⚙️

Enable mod.disable.scrollbar.in.vertical.tabs in about:config

Enable Search Box focus outline ⚙️

Enable mod.searchBox.focus.outline.enable in about:config

Tabs on top ⚙️

Enable firefoxcss.tabs.on.top.enable in about:config. Doesn't work with custom window control buttons for now (linux should work)

Window Frame border mods ⚙️

- Fully padded Window border: Enable mod.main.window.frame.style-1 or mod.main.window.frame.style-2 in about:config

- Default Window border and shadow: Disable mod.disable.browser.border-and-shadow in about:config

Always show Search Bar buttons ⚙️

Enable mod.search.info.buttons.show.always in about:config

Active tab has static width ⚙️

selected_tabs_static_width.css

Colored sound playing tab ⚙️

colored_soundplaying_tab.css

Hide List all tabs button ⚙️

hide_list-all-tabs_button.css [Shows when tabs overflow]

Restore icons in main menu ⚙️

icons_in_main_menu.css (source)

Remove title text from homepage shortcuts ⚙️

remove_homepage_shortcut_title_text.css

Center Widgets in New Tab ⚙️

Enable mod.center.widgets or mod.center.widgets.keep.title-text in about:config

mod.center.widgets

mod.center.widgets.keep.title-text

Experimental: Popout Searchbar with Blur ⚙️

Enable mod.popout.searchbar or mod.popout.searchbar.no-animation in about:config

Experimental: Extra Blur mods (HDR not working with this enabled for now!) ⚙️

- Combined extra Blur mod.combined.extra.blur, combines: "mod.panel-menu.blur", "mod.searchbar.blur" and "mod.vertical-tabs.expand.blur". Enable in about:config

- Searchbar Blur: Enable mod.searchbar.blur in about:config

- Panel menu Blur: Enable mod.panel-menu.blur in about:config

- Vertical Tabs expand Blur: Enable mod.vertical-tabs.expand.blur in about:config

Circular homepage shortcuts ⚙️

circular_homepage_shortcuts.css

Wallpaper Blur in New tab page 🔨

Enable mod.new-tab.background.blur using Number field in about:config
Type intensity number [1 to 10] - Default [4] is used when selecting Boolean field instead of Number

Spill style theme 🔨

Enable mod.spill-theme in about:config

Card Style theme 🔨

Enable mod.card-theme.style.1 or mod.card-theme.style.2 in about:config

On Pause - Acrylic MicaForEveryone 🔨

Will be updated when Firefox fully releases blur

🔧 Installation

Important

1. In about:config set toolkit.legacyUserProfileCustomizations.stylesheets to "True" for your custom themes to work.

2. Download latest or your preferred firefox version .zip file.

3. You can find your profile folder by writing about:support in URL bar and using Open folder in Profile folder section.

4. Put userChrome.css, userContent.css, ASSETS in chrome folder (create chrome folder inside your main profile folder if it doesnt exist).

5. Put any selected extra .css modification files (not folders) from EXTRA MODS to inside of your chrome folder.

6. File Structure (required files/folders marked with *):

📂 ... / your profile / chrome / userChrome.css *

📂 ... / your profile / chrome / userContent.css *

📂 ... / your profile / chrome / ASSETS * /

📂 ... / your profile / chrome / [extra modification file].css

Tip

How to Toggle between Light and Dark theme:

There are two settings to change in firefox (pictures below).

• Setting both to auto makes it adapt to your operating system theme.
• Setting Theme(2) to Light or Dark will force it no matter of Operating System colors.
• Best to leave Website Appearance(1) settings set to auto and just Change to preferred Theme(2).
  

1. Website appearance (changes new tab and websites colors)
2. Theme (changes toolbar and browser text colors, also sets text colors to new tab page).

I use firefox integrated Flexible space for spacing:

🔧 Easy Installation Script by Alan-Kuan

Download https://github.com/Alan-Kuan/Firefox-Mod-Blur

Installation Instructions https://github.com/Alan-Kuan/Firefox-Mod-Blur#page_with_curl-installer-script

🔧 MicaForEveryone Installation

Warning

Will be updated when firefox fully enables blur. No need to external programs.

1. Download the portable or installation file from github.com/MicaForEveryone.
2. Install the extra files it asks you to install. And run the program.
3. At the bottom left corner press Add Rule -> Add Process Rule, type firefox -> add.
4. On the left panel select and open firefox section. Change Mica to Acrylic for better blur effect.
5. Dont forget to download my css file acrylic_micaforeveryone.css from EXTRA THEMES and put it inside Chrome folder (and base files from Installation guide above).
6. Remove and dont use any other min-max-close window button files.
7. Expermental:warning: In MicaForEveryone settings firefox section enable Blur Behind so when the window is not active it will still be blurred.

📄 Other

Old version files backup: https://github.com/datguypiko/Firefox-old-files-backup

📄 Sources

Source for Backdrop filter: https://www.reddit.com/r/FirefoxCSS/comments/ddi4dc/testing_the_backdropfilter_in_the_url_dropdown/

icons_in_main_menu.css (source)