diff --git a/README.md b/README.md
index acc6955..8d18bf1 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,18 @@
-## blurredfox
+## Blurredfox Nord
### A modern Firefox CSS Theme
-
![Firefox with blurredfox](scrots/blurred.webp)
Firefox with blurredfox CSS theme
-![Firefox with blurredfox](scrots/solid.webp)
blurredfox's layout with solid colors
+![Firefox with blurredfox](scrots/blurred.png)
Firefox with blurredfox CSS theme
+
+## What changes compared to the original project?
+The original [blurredfox](https://github.com/manilarome/blurredfox/pulls) is
+developed and maintained by [Gerome
+Matilla](https://github.com/manilarome/blurredfox/pulls). The reason for the
+existence of this fork is for me to have basically the same thing, but with a
+customized color scheme. Turns out I am currently way too much into Nord, and I
+changed the default colors to Nord-friendly colors. I will try to stay
+up-to-date from time to time, but if you want something reliable, go take a look
+at the original project.
## Requirements
@@ -14,7 +23,10 @@
+ 100% working on linux.
+ Untested on macOS.
-+ Transparency is broken on Windows 10 (has graphical glitches like flickering). The [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css) *may* work.
++ Transparency is broken on Windows 10 (has graphical glitches like flickering).
+ The [solid color
+ scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css)
+ *may* work.
## How to
@@ -22,15 +34,23 @@
#### Notes before running the script:
-+ If you have a multiple firefox builds, the script will still run without a problem. Just make sure to pass your target firefox build.
-+ If you or your firefox build have a multiple profile, the script will return an error! Make sure you only have one!
++ If you have a multiple firefox builds, the script will still run without a
+ problem. Just make sure to pass your target firefox build.
++ If you or your firefox build have a multiple profile, the script will return
+ an error! Make sure you only have one!
+ It is advisible to check the script first before running it.
+ You need `bash` to run it.
-+ If you have an existing chrome folder, the script will make a backup of it in your profile directory.
-+ If the installation script is not working, feel free to submit an issue or a pull request.
-+ The script will move a file named `user.js` that contains all the preferences needed for blurredfox to work. If you have a current one, make sure to create a backup.
++ If you have an existing chrome folder, the script will make a backup of it in
+ your profile directory.
++ If the installation script is not working, feel free to submit an issue or a
+ pull request.
++ The script will move a file named `user.js` that contains all the preferences
+ needed for blurredfox to work. If you have a current one, make sure to create
+ a backup.
-1. Run the script below. If you are using a different build like nightly, beta, etc., make sure to replace the 'stable' with the Firefox Build you are using. If leave empty, it will default to stable.
+1. Run the script below. If you are using a different build like nightly, beta,
+ etc., make sure to replace the 'stable' with the Firefox Build you are using.
+ If leave empty, it will default to stable.
```
# Available parameters:
@@ -51,12 +71,15 @@
bash -s -- nightly
```
-2. After the confirmation message that the theme is successfully installed, open firefox. Change the colorscheme by **`Open Menu > Customize > Change colorscheme`**.
+2. After the confirmation message that the theme is successfully installed, open
+ firefox. Change the colorscheme by **`Open Menu > Customize > Change
+ colorscheme`**.
### Manual Installation
1. Open `about:config` page.
-2. A dialog will warn you, but ignore it, ~~just do it~~ press the `I accept the risk!` button.
+2. A dialog will warn you, but ignore it, ~~just do it~~ press the `I accept the
+ risk!` button.
3. Search for these:
+ **`toolkit.legacyUserProfileCustomizations.stylesheets`**
@@ -66,7 +89,8 @@
+ **`layout.css.backdrop-filter.enabled`**
+ **`svg.context-properties.content.enabled`**
- Then make sure to **enable them all!**. Or you can just copy the `user.js` file to your profile.
+ Then make sure to **enable them all!**. Or you can just copy the `user.js`
+ file to your profile.
4. Go to your Firefox profile.
@@ -74,7 +98,8 @@
+ Windows 10 - `C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX`.
+ macOS - `Users//Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX`.
-5. Create a folder and name it **`chrome`**, then assuming that you already have cloned this repo, just copy the theme to `chrome` folder.
+5. Create a folder and name it **`chrome`**, then assuming that you already have
+ cloned this repo, just copy its content to the `chrome` folder.
6. Restart Firefox.
7. Finally, you can now change whatever color mode you want in the Cusomization Window.
@@ -87,26 +112,43 @@
### Some UIs are broken!
1. Check if you're using the latest version of Firefox.
-2. It's broken because you're using Windows 10 and macOS or you're using an ancient version of Firefox.
+2. It's broken because you're using Windows 10 and macOS or you're using an
+ old version of Firefox.
### If you're using Windows or macOS and something's wrong
-1. I only have Archlinux, macOS' untested while the theme is broken on Windows 10.
-2. If the transparency is broken, use the [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css). Edit the `userChrome.css` to switch.
+1. I only have Archlinux, macOS' untested while the theme is broken on Windows
+ 10.
+2. If the transparency is broken, use the [solid color
+ scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css).
+ Edit the `userChrome.css` to switch.
### Liar! The theme's name is `blurredfox`, ***where is the blur***?!
-1. Yeah, the name `blurredfox` is a lie, just like the cake. I named it blurredfox because it's designed to look gorgeous with a blur effect. You can, however, have the blur effect by:
+1. Yeah, the name `blurredfox` is a lie, just like the cake. I named it
+ blurredfox because it's designed to look gorgeous with a blur effect. You
+ can, however, have the blur effect by:
+ Making sure you have a compositor and it supports blur.
- + If you're not using GNOME or KDE Plasma that has its own compositors, use tryone144's [feature/dual_kawase](https://github.com/tryone144/picom/tree/feature/dual_kawase) branch of picom. It includes the dual kawase shader.
- + GNOME's compositor, mutter, doesn't support blur. Hey, GNOME devs, it's already 2020. Just kidding!
+ + If you're not using GNOME or KDE Plasma that has its own compositors, use
+ tryone144's
+ [feature/dual_kawase](https://github.com/tryone144/picom/tree/feature/dual_kawase)
+ branch of picom, or ibaghwan’s [next](https://github.com/ibhagwan/picom)
+ branch. They both include the dual kawase shader, and the latter adds
+ rounded corners to windows.
+ + GNOME's compositor, mutter, doesn't support blur. Hey, GNOME devs, it's
+ already 2020. Just kidding!
+ If you're using KDE Plasma, read the next note below.
### I'm using KDE Plasma, but there's no blur! How many other lies have I been told by the council?
-1. Enable the blur in your compositor. Go to `System Settings > Desktop Effects > Enable Blur`. Note that this will not enable the blur effect on all applications.
-2. Enable the blur effect on all applications by installing a KWin script called [Force Blur](https://store.kde.org/p/1294604/). Make sure to read its manual. Don't you ever dare to create an issue about Force Blur! Just kidding! But yeah, I'm serious.
+1. Enable the blur in your compositor. Go to `System Settings > Desktop Effects
+ > Enable Blur`. Note that this will not enable the blur effect on all
+ applications.
+2. Enable the blur effect on all applications by installing a KWin script called
+ [Force Blur](https://store.kde.org/p/1294604/). Make sure to read its manual.
+ Don't you ever dare to create an issue about Force Blur! Just kidding! But
+ yeah, I'm serious.
3. Go to `System Settings > KWin Scripts > Enable Force Blur`.
4. Change its settings. If there's no settings/settings icon, Logout. Re-login.
@@ -117,34 +159,43 @@
### How can I set or change the colors for the Default color mode?
-1. The default mode are from Firefox and it uses the system colors. Although I only tried and tested it with `GTK3`, it should work with any platforms or environment as long as Firefox can detect your system colors.
+1. The default mode are from Firefox and it uses the system colors. Although I
+ only tried and tested it with `GTK3`, it should work with any platforms or
+ environment as long as Firefox can detect your system colors.
### I hate the colors! Why is everything transparent?!
-1. Use the [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css) by editing the `userChrome.css`.
+1. Use the [solid color
+ scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css)
+ by editing the `userChrome.css`.
2. You can change the colors yourself.
-3. The transparency is only applied to `Dark` and `Light` mode under the blurred color scheme. `No transparency == No blur`.
+3. The transparency is only applied to `Dark` and `Light` mode under the blurred
+ color scheme. `No transparency == No blur`.
4. You can read the next point.
### Uninstall this now!
1. Go to your profile directory.
2. Delete the `chrome` folder.
-3. If you used the installation script or copied the `user.js` to your profile, delete it.
+3. If you used the installation script or copied the `user.js` to your profile,
+ delete it.
4. Sayonara.
## Got a problem?
-If you have already read the README, free to open an issue [here](https://github.com/manilarome/blurredfox/issues)!
+If you have already read the README, free to open an issue
+[here](https://github.com/phundrak/blurredfox/issues)! But you’ll probably have
+more luck with the original project, link at the top of this README.
## Got a patch?
-You're absolutely welcome to submit a pull request [here](https://github.com/manilarome/blurredfox/pulls)!
+You're absolutely welcome to submit a pull request
+[here](https://github.com/manilarome/phundrak/pulls)!
## TODO
-PR's are welcome!
+PR's are welcome! (Although I’ll let it mostly up to the original author)
- [ ] Render site content under the navbar like macOS
- [ ] Fix UI inconsistencies
diff --git a/colors/blurred.css b/colors/blurred.css
index 6c62743..50cb2fc 100644
--- a/colors/blurred.css
+++ b/colors/blurred.css
@@ -1,83 +1,80 @@
:root {
- /* All the CSS variables here are global */
- /* These applies to all colorschemes */
+ /* All the CSS variables here are global */
+ /* These applies to all colorschemes */
- /* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */
- --bf-moz-appearance: -moz-win-glass !important;
+ /* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */
+ --bf-moz-appearance: -moz-mac-vibrancy-dark !important;
- --bf-backdrop-blur: 6px;
+ --bf-backdrop-blur: 6px;
- --bf-sidebar-searchbar-radius: 6px;
+ --bf-sidebar-searchbar-radius: 6px;
- --bf-accent-bg: #4C5FF9CC;
- --bf-blank-page-bg: #252525;
-
- --bf-urlbar-hightlight-bg: var(--bf-accent-bg);
- --bf-urlbar-radius: 9px;
- --bf-urlbar-results-font-size: 12pt;
- --bf-urlbar-results-font-weight: 550;
- --bf-urlbar-font-size: 12pt;
- --bf-urlbar-font-weight: 500;
- --bf-urlbar-switch-tab-color: #6498EF;
- --bf-urlbar-bookmark-color: #53E2AE;
-
- --bf-navbar-padding: 6px;
-
- --bf-tab-selected-bg: #77777788;
- --bf-tab-font-size: 11pt;
- --bf-tab-font-weight: 400;
- --bf-tab-height: 36px;
- --bf-tab-border-radius: 6px;
- --bf-tab-soundplaying-bg: #985EFFCC;
+ --bf-accent-bg: #5E81ACCC;
- --toolbar-bgcolor: transparent !important;
- --urlbar-separator-color: transparent !important;
+ --bf-urlbar-hightlight-bg: var(--bf-accent-bg);
+ --bf-urlbar-radius: 9px;
+ --bf-urlbar-results-font-size: 12pt;
+ --bf-urlbar-results-font-weight: 550;
+ --bf-urlbar-font-size: 12pt;
+ --bf-urlbar-font-weight: 500;
+ --bf-urlbar-switch-tab-color: #88C0D0;
+ --bf-urlbar-bookmark-color: #A3BE8CW;
+
+ --bf-navbar-padding: 6px;
+
+ --bf-tab-selected-bg: #81A1C188;
+ --bf-tab-font-size: 11pt;
+ --bf-tab-font-weight: 400;
+ --bf-tab-height: 36px;
+ --bf-tab-border-radius: 6px;
+ --bf-tab-soundplaying-bg: #B48EADCC;
+
+ --toolbar-bgcolor: transparent !important;
+ --urlbar-separator-color: transparent !important;
}
/* Light Mode */
:root:-moz-lwtheme-darktext {
- --bf-main-window: transparent;
- --bf-bg: #F2F2F266;
- --bf-color: #0A0A0A;
-
- --bf-hover-bg: #1A1A1A33;
- --bf-active-bg: #1A1A1A66;
-
- --bf-icon-color: #0A0A0A;
- --bf-tab-toolbar-bg: #F2F2F2AA;
- --bf-tab-selected-bg: #00000022;
- --bf-navbar-bg: var(--bf-bg);
- --bf-urlbar-bg: var(--bf-bg);
- --bf-urlbar-active-bg: var(--bf-bg);
- --bf-urlbar-focused-color: var(--bf-color);
-
- --bf-sidebar-bg: var(--bf-bg);
- --bf-sidebar-color: var(--bf-color);
-
- --bf-menupopup-bg: #F2F2F2AA;
- --bf-menupopup-color: var(--bf-color);
+ --bf-bg: #ECEFF466;
+ --bf-color: #3B4252;
+
+ --bf-hover-bg: #434C5E33;
+ --bf-active-bg: #434C5E66;
+
+ --bf-icon-color: #3B4252;
+ --bf-tab-toolbar-bg: #ECEFF4AA;
+ --bf-tab-selected-bg: #2E344022;
+ --bf-navbar-bg: var(--bf-bg);
+ --bf-urlbar-bg: var(--bf-bg);
+ --bf-urlbar-active-bg: var(--bf-bg);
+ --bf-urlbar-focused-color: var(--bf-color);
+
+ --bf-sidebar-bg: var(--bf-bg);
+ --bf-sidebar-color: var(--bf-color);
+
+ --bf-menupopup-bg: #ECEFF4AA;
+ --bf-menupopup-color: var(--bf-color);
}
/* Dark Mode */
:root:-moz-lwtheme-brighttext {
- --bf-main-window: transparent;
- --bf-bg: #00000066;
- --bf-color: #F2F2F2;
-
- --bf-hover-bg: #F2F2F233;
- --bf-active-bg: #F2F2F266;
-
- --bf-icon-color: #F2F2F2;
- --bf-tab-toolbar-bg: #000000AA;
- --bf-tab-selected-bg: #F2F2F210;
- --bf-navbar-bg: var(--bf-bg);
- --bf-urlbar-bg: var(--bf-bg);
- --bf-urlbar-active-bg: var(--bf-bg);
- --bf-urlbar-focused-color: var(--bf-color);
-
- --bf-sidebar-bg: var(--bf-bg);
- --bf-sidebar-color: var(--bf-color);
-
- --bf-menupopup-bg: #000000AA;
- --bf-menupopup-color: var(--bf-color);
+ --bf-bg: #2E344066;
+ --bf-color: #ECEFF4;
+
+ --bf-hover-bg: #ECEFF433;
+ --bf-active-bg: #ECEFF466;
+
+ --bf-icon-color: #ECEFF4;
+ --bf-tab-toolbar-bg: #2E3440AA;
+ --bf-tab-selected-bg: #ECEFF410;
+ --bf-navbar-bg: var(--bf-bg);
+ --bf-urlbar-bg: var(--bf-bg);
+ --bf-urlbar-active-bg: var(--bf-bg);
+ --bf-urlbar-focused-color: var(--bf-color);
+
+ --bf-sidebar-bg: var(--bf-bg);
+ --bf-sidebar-color: var(--bf-color);
+
+ --bf-menupopup-bg: #2E3440AA;
+ --bf-menupopup-color: var(--bf-color);
}
diff --git a/scrots/blurred.png b/scrots/blurred.png
new file mode 100644
index 0000000..b966337
Binary files /dev/null and b/scrots/blurred.png differ
diff --git a/scrots/blurred.webp b/scrots/blurred.webp
deleted file mode 100644
index 7d02658..0000000
Binary files a/scrots/blurred.webp and /dev/null differ
diff --git a/scrots/solid.webp b/scrots/solid.webp
deleted file mode 100644
index d604369..0000000
Binary files a/scrots/solid.webp and /dev/null differ