Skip to content

QNetITQ/WaveFox

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2,315 Commits
chrome
chrome
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

WaveFox

WaveFox_Preview

Installation

Download Firefox / Download WaveFox / WaveFox Nightly

WaveFox v1.7.133
  • Minimum Requirements
    • Firefox 133
    • Windows / MacOS / Linux

  • Download the chrome folder and put it in your user profile folder

  • Go to about:config and activate the key toolkit.legacyUserProfileCustomizations.stylesheets

  • Specify the desired shape of the tabs

    Tabs (Option 1)

    1

    • userChrome.Tabs.Option1.Enabled
    Tabs (Option 2)

    2

    • userChrome.Tabs.Option2.Enabled
    Tabs (Option 3)

    3

    • userChrome.Tabs.Option3.Enabled
    Tabs (Option 4)

    4

    • userChrome.Tabs.Option4.Enabled
    Tabs (Option 5)

    5

    • userChrome.Tabs.Option5.Enabled
    Tabs (Option 6)

    9

    • userChrome.Tabs.Option6.Enabled
    Tabs (Option 7)

    10

    • userChrome.Tabs.Option7.Enabled
    Tabs (Option 8)

    11

    • userChrome.Tabs.Option8.Enabled
    Tabs (Option 9)

    12

    • userChrome.Tabs.Option9.Enabled
    Tabs (Option 10)

    14

    • userChrome.Tabs.Option10.Enabled
    Tabs (Option 11)

    15

    • userChrome.Tabs.Option11.Enabled
    Tabs (Option 12)

    16

    • userChrome.Tabs.Option12.Enabled
    Tabs (Option 13)

    изображение

    • userChrome.Tabs.Option13.Enabled

Optional

Windows 11/10 Custom Transparency

Install DWMBlurGlass. Configure to your liking and activate the keys below. Works only with the system theme. If you just want to enable MicaAlt on Windows 11, see the FAQ. изображение

  • browser.theme.windows.accent-color-in-tabs.enabled
  • userChrome.Windows.Transparency.Enabled

Linux Transparency

Requires Linux with transparency support. Works only with the system theme.

Снимок5

  • userChrome.Linux.Transparency.Low.Enabled
  • userChrome.Linux.Transparency.Medium.Enabled
  • userChrome.Linux.Transparency.High.Enabled
  • userChrome.Linux.Transparency.VeryHigh.Enabled
  • browser.tabs.inTitlebar > 1 (Required key)

Toolbar Transparency

Works only with the system theme. изображение

  • userChrome.Toolbar.Transparency.Low.Enabled
  • userChrome.Toolbar.Transparency.Medium.Enabled
  • userChrome.Toolbar.Transparency.High.Enabled
  • userChrome.Toolbar.Transparency.VeryHigh.Enabled

Tab Bar Shadows

изображение

Shadows (Light Theme)
  • userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled
    • userChrome.LightTheme.Tabs.Borders.Enabled (Shadow like border)
Shadows (Dark Theme)
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled
    • userChrome.DarkTheme.Tabs.Borders.Enabled (Shadow like border)

Tab Separators

изображение

  • userChrome.TabSeparators.Saturation.Low.Enabled
  • userChrome.TabSeparators.Saturation.Medium.Enabled

Menu Density

By default context menus follow the selected interface density, but it is possible to set a fixed size.

Compact Normal Touch
изображение изображение изображение
  • userChrome.Menu.Size.Compact.Enabled
  • userChrome.Menu.Size.Normal.Enabled
  • userChrome.Menu.Size.Touch.Enabled

Lepton Icons (Menu icons)

This is third-party code. I will update this code according to the original source. Unlike other options, these keys can be enabled in any order, or all together.

изображение

  • svg.context-properties.content.enabled (Required key)
  • userChrome.Menu.Icons.LeptonIcons.Enabled (Required key)
    • userChrome.icon.panel_full or userChrome.icon.panel_photon
    • userChrome.icon.library
    • userChrome.icon.panel
    • userChrome.icon.menu
    • userChrome.icon.context_menu
    • userChrome.icon.global_menu
    • userChrome.icon.global_menubar
    • userChrome.icon.1-25px_stroke
    • userChrome.icon.account_image_to_right
    • userChrome.icon.account_label_to_right
    • userChrome.icon.menu.full
    • userChrome.icon.global_menu.mac

Drag Space

изображение

  • userChrome.DragSpace.Left.Disabled
  • userChrome.DragSpace.Right.Disabled
  • userChrome.DragSpace.Top.Windowed.Enabled
  • userChrome.DragSpace.Top.Maximized.Enabled
  • userChrome.DragSpace.Top.Fullscreen.Enabled

Selected Tab Indicator

изображение

  • userChrome.Tabs.SelectedTabIndicator.Enabled

Tabs On Bottom

Снимок

  • userChrome.Tabs.TabsOnBottom.Enabled
  • browser.tabs.inTitlebar (Optional key. Set the value to 0)

One Line

Снимок

  • userChrome.OneLine.TabBarFirst.Enabled
  • userChrome.OneLine.NavBarFirst.Enabled

Rounded Web Page

Works only with system, light and dark themes. изображение

  • userChrome.WebPage.Rounding.Enabled
WaveFox v1.6.128 ESR
  • Minimum Requirements
    • Firefox 128 ESR
    • Windows / MacOS / Linux

  • Download the chrome folder and put it in your user profile folder

  • Go to about:config and activate the key toolkit.legacyUserProfileCustomizations.stylesheets

  • Specify the desired shape of the tabs

    Tabs (Option 1)

    1

    • userChrome.Tabs.Option1.Enabled
    Tabs (Option 2)

    2

    • userChrome.Tabs.Option2.Enabled
    Tabs (Option 3)

    3

    • userChrome.Tabs.Option3.Enabled
    Tabs (Option 4)

    4

    • userChrome.Tabs.Option4.Enabled
    Tabs (Option 5)

    5

    • userChrome.Tabs.Option5.Enabled
    Tabs (Option 6)

    9

    • userChrome.Tabs.Option6.Enabled
    Tabs (Option 7)

    10

    • userChrome.Tabs.Option7.Enabled
    Tabs (Option 8)

    11

    • userChrome.Tabs.Option8.Enabled
    Tabs (Option 9)

    12

    • userChrome.Tabs.Option9.Enabled
    Tabs (Option 10)

    14

    • userChrome.Tabs.Option10.Enabled
    Tabs (Option 11)

    15

    • userChrome.Tabs.Option11.Enabled
    Tabs (Option 12)

    16

    • userChrome.Tabs.Option12.Enabled
    Tabs (Option 13)

    изображение

    • userChrome.Tabs.Option13.Enabled

Optional

Adding third-party styles

Go to the chrome folder and paste the desired styles inside the third_party_custom_styles.css file. Please note that this file has maximum execution priority. It will overwrite all styles, regardless of selector specificity. I make no guarantees of compatibility and will not resolve any style conflicts you may encounter.

  • userChrome.Style.ThirdParty.Enabled

Functionality that will not be part of the style will be published in the discussions section as requests from users.

Linux Transparency

Requires Linux with transparency support. Works only with the system theme.

Снимок5

  • userChrome.Linux.Transparency.Low.Enabled
  • userChrome.Linux.Transparency.Medium.Enabled
  • userChrome.Linux.Transparency.High.Enabled
  • userChrome.Linux.Transparency.VeryHigh.Enabled
  • browser.tabs.inTitlebar > 1 (Required key)

Toolbar Transparency

Works only with the system theme. изображение

  • userChrome.Toolbar.Transparency.Low.Enabled
  • userChrome.Toolbar.Transparency.Medium.Enabled
  • userChrome.Toolbar.Transparency.High.Enabled
  • userChrome.Toolbar.Transparency.VeryHigh.Enabled

Tab Bar Borders and Shadows

Incompatible with AMO themes. изображение

Borders (Light Theme)
  • userChrome.LightTheme.Tabs.Borders.Saturation.Low.Enabled
  • userChrome.LightTheme.Tabs.Borders.Saturation.Medium.Enabled
  • userChrome.LightTheme.Tabs.Borders.Saturation.High.Enabled
  • userChrome.LightTheme.Tabs.Borders.Saturation.VeryHigh.Enabled
Borders (Dark Theme)
  • userChrome.DarkTheme.Tabs.Borders.Saturation.Low.Enabled
  • userChrome.DarkTheme.Tabs.Borders.Saturation.Medium.Enabled
  • userChrome.DarkTheme.Tabs.Borders.Saturation.High.Enabled
  • userChrome.DarkTheme.Tabs.Borders.Saturation.VeryHigh.Enabled
Shadows (Light Theme)
  • userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled
  • userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled
Shadows (Dark Theme)
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled
  • userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled

Tab Separators

изображение

  • userChrome.TabSeparators.Saturation.Low.Enabled
  • userChrome.TabSeparators.Saturation.Medium.Enabled

Menu Density

By default context menus follow the selected interface density, but it is possible to set a fixed size.

Compact Normal Touch
изображение изображение изображение
  • userChrome.Menu.Size.Compact.Enabled
  • userChrome.Menu.Size.Normal.Enabled
  • userChrome.Menu.Size.Touch.Enabled

Icons

Regular Filled
изображение изображение
  • userChrome.Menu.Icons.Regular.Enabled
  • userChrome.Menu.Icons.Filled.Enabled

Lepton Icons

Icons from Lepton.css are now available. Please note that this is third-party code. I am not its author and do not support it. I will not solve any problems associated with these icons. They were added at the request of some users and work "As is". I will update this code according to the original source.

  • svg.context-properties.content.enabled
  • userChrome.Menu.Icons.LeptonIcons.Enabled
    • userChrome.icon.panel_full or userChrome.icon.panel_photon
    • userChrome.icon.library
    • userChrome.icon.panel
    • userChrome.icon.menu
    • userChrome.icon.context_menu
    • userChrome.icon.global_menu
    • userChrome.icon.global_menubar
    • userChrome.icon.1-25px_stroke
    • userChrome.icon.account_image_to_right
    • userChrome.icon.account_label_to_right
    • userChrome.icon.menu.full
    • userChrome.icon.global_menu.mac

Drag Space

изображение

  • userChrome.DragSpace.Left.Disabled
  • userChrome.DragSpace.Right.Disabled
  • userChrome.DragSpace.Top.Windowed.Enabled
  • userChrome.DragSpace.Top.Maximized.Enabled
  • userChrome.DragSpace.Top.Fullscreen.Enabled

Pinned Tabs Width

Снимок

  • userChrome.Tabs.Pinned.Width.LowOffset.Enabled
  • userChrome.Tabs.Pinned.Width.HighOffset.Enabled

Selected Tab Indicator

изображение

  • userChrome.Tabs.SelectedTabIndicator.Enabled

Tabs On Bottom

Снимок

  • userChrome.Tabs.TabsOnBottom.Enabled
  • browser.tabs.inTitlebar (Required key. Set the value to 0)

One Line

Снимок

  • userChrome.OneLine.TabBarFirst.Enabled
  • userChrome.OneLine.NavBarFirst.Enabled
WaveFox v1.6.115.0.3 ESR
  • Minimum Requirements
    • Firefox 115 ESR
    • Windows / MacOS / Linux

  • Download the chrome folder and put it in your user profile folder

  • Go to about:config and activate the keys below

    • toolkit.legacyUserProfileCustomizations.stylesheets
    • layout.css.has-selector.enabled
    • svg.context-properties.content.enabled

  • Specify the desired shape of the tabs

    Tabs (Option 1)

    1

    • userChrome.Tabs.Option1.Enabled
    Tabs (Option 2)

    2

    • userChrome.Tabs.Option2.Enabled
    Tabs (Option 3)

    3

    • userChrome.Tabs.Option3.Enabled
    Tabs (Option 4)

    4

    • userChrome.Tabs.Option4.Enabled
    Tabs (Option 5)

    5

    • userChrome.Tabs.Option5.Enabled
    Tabs (Option 6)

    9

    • userChrome.Tabs.Option6.Enabled
    Tabs (Option 7)

    10

    • userChrome.Tabs.Option7.Enabled
    Tabs (Option 8)

    11

    • userChrome.Tabs.Option8.Enabled
    Tabs (Option 9)

    12

    • userChrome.Tabs.Option9.Enabled
    Tabs (Option 10)

    14

    • userChrome.Tabs.Option10.Enabled
    Tabs (Option 11)

    15

    • userChrome.Tabs.Option11.Enabled
    Tabs (Option 12)

    16

    • userChrome.Tabs.Option12.Enabled

Optional

Windows System Effects

Works with modern versions of Windows 11 / Windows 10. System effects must be supported on the operating system side. Otherwise, you need third-party software, such as Mica For Everyone. You also need to disable the accent color in the operating system settings, if it was enabled. Works only with the system theme. изображение

Download and install Mica For Everyone from here.

  • userChrome.Windows.SystemEffects.Enabled

Toolbar Transparency

Works only with the system theme. изображение

  • userChrome.Toolbar.Transparency.Low.Enabled
  • userChrome.Toolbar.Transparency.Medium.Enabled
  • userChrome.Toolbar.Transparency.High.Enabled
  • userChrome.Toolbar.Transparency.VeryHigh.Enabled

Linux Transparency

Requires Linux with transparency support. Works only with the system theme.

изображение

  • userChrome.Linux.Transparency.Enabled
  • gfx.webrender.all (Required key)

Tab Frame

The tab frame consists of type, color and saturation. Not compatible with themes that use a translucent toolbar. изображение

Light Theme
Type
  • userChrome.LightTheme.TabFrameType.Border.Enabled
  • userChrome.LightTheme.TabFrameType.Shadow.Enabled
Color
  • userChrome.LightTheme.TabFrameColor.Auto.Enabled
  • userChrome.LightTheme.TabFrameColor.White.Enabled
  • userChrome.LightTheme.TabFrameColor.Black.Enabled
Saturation
  • userChrome.LightTheme.TabFrameSaturation.Low.Enabled
  • userChrome.LightTheme.TabFrameSaturation.Medium.Enabled
  • userChrome.LightTheme.TabFrameSaturation.High.Enabled
  • userChrome.LightTheme.TabFrameSaturation.VeryHigh.Enabled
Dark Theme
Type
  • userChrome.DarkTheme.TabFrameType.Border.Enabled
  • userChrome.DarkTheme.TabFrameType.Shadow.Enabled
Color
  • userChrome.DarkTheme.TabFrameColor.Auto.Enabled
  • userChrome.DarkTheme.TabFrameColor.White.Enabled
  • userChrome.DarkTheme.TabFrameColor.Black.Enabled
Saturation
  • userChrome.DarkTheme.TabFrameSaturation.Low.Enabled
  • userChrome.DarkTheme.TabFrameSaturation.Medium.Enabled
  • userChrome.DarkTheme.TabFrameSaturation.High.Enabled
  • userChrome.DarkTheme.TabFrameSaturation.VeryHigh.Enabled

Tab Separators

изображение

  • userChrome.TabSeparatorsLowSaturation-Enabled
  • userChrome.TabSeparatorsMediumSaturation-Enabled

Menu Density

By default context menus follow the selected interface density, but it is possible to set a fixed size.

Compact Normal Touch
изображение изображение изображение
  • userChrome.CompactContextMenu-Enabled
  • userChrome.NormalContextMenu-Enabled
  • userChrome.TouchContextMenu-Enabled

Icons

Regular Filled
изображение изображение
  • userChrome.RegularMenuIcons-Enabled
  • userChrome.FilledMenuIcons-Enabled

Drag Space

изображение

  • userChrome.DragSpace.Left.Disabled
  • userChrome.DragSpace.Right.Disabled
  • userChrome.DragSpace.Top.Windowed.Enabled
  • userChrome.DragSpace.Top.Maximized.Enabled
  • userChrome.DragSpace.Top.Fullscreen.Enabled

Pinned Tabs Width

Снимок

  • userChrome.PinnedTabsWidthLowIncrease-Enabled
  • userChrome.PinnedTabsWidthHighIncrease-Enabled

Selected Tab Indicator

изображение

  • userChrome.Tabs.SelectedTabIndicator.Enabled

One Line

Снимок

  • userChrome.OneLine.TabBarFirst.Enabled
  • userChrome.OneLine.NavBarFirst.Enabled
  • browser.tabs.inTitlebar (Enable this key if there are problems with window control buttons. Set the value to 0)

Low values are more suitable for high resolution monitors.

  • userChrome.OneLine.NavBarWidth.Low.Enabled
  • userChrome.OneLine.NavBarWidth.Medium.Enabled
  • userChrome.OneLine.NavBarWidth.High.Enabled

Tabs On Bottom

изображение

  • userChrome.TabsOnBottom-Enabled
  • browser.tabs.inTitlebar (Required key. Set the value to 0)

FAQ

How to find/open user profile folder?

Profile

How to create custom keys?

Keys

How to enable blur on Linux?
How to add third-party styles to WaveFox v1.x.130+?

Open userChrome.css and paste your code under the appropriate comment. Your code has the highest priority by default.

If you do not find the desired key, then your browser version does not support it.
How to enable Accent Color on Windows 11 / Windows 10?
  • browser.theme.windows.accent-color-in-tabs.enabled
How to enable Mica on Windows 11?
  • widget.windows.mica
How to enable Tinting / Vibrancy on MacOS?
  • browser.theme.macos.native-theme or browser.theme.native-theme
  • widget.macos.titlebar-blend-mode.behind-window
  • widget.macos.sidebar-blend-mode.behind-window
Have a question not related to this project? These resources will help you

About

Firefox CSS Theme/Style for manual customization

Topics

css firefox firefox-tweaks firefox-customization firefox-theme firefox-esr userchromecss userchrome css-theme firefox-css firefox-userchrome css-style firefox-style firefox-linux firefox-windows firefox-mac firefox-userchromecss firefox-userchrome-style firefox-userchromecss-style

Resources

Readme

License

MIT license
Activity

Stars

1.1k stars

Watchers

12 watching

Forks

48 forks
Report repository

Releases 4

Firefox 133 / WaveFox v1.7.133 Latest
Nov 14, 2024
+ 3 releases

Contributors 5

Languages