Changed the colors to Nord, made it clear it’s a fork in README

Also updated the screenshot in the Readme
This commit is contained in:
Lucien Cartier-Tilet 2020-08-20 02:44:42 +02:00
parent 492caf6415
commit 236f5b1b9e
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
5 changed files with 145 additions and 97 deletions

109
README.md
View File

@ -1,9 +1,18 @@
## blurredfox ## Blurredfox Nord
### A modern Firefox CSS Theme ### A modern Firefox CSS Theme
<p align="center"><img alt="Firefox with blurredfox" src="scrots/blurred.webp"/><br/><i>Firefox with blurredfox CSS theme</i></p> <p align="center"><img alt="Firefox with blurredfox" src="scrots/blurred.png"/><br/><i>Firefox with blurredfox CSS theme</i></p>
<p align="center"><img alt="Firefox with blurredfox" src="scrots/solid.webp"/><br/><i>blurredfox's layout with solid colors</i></p>
## 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 ## Requirements
@ -14,7 +23,10 @@
+ 100% working on linux. + 100% working on linux.
+ Untested on macOS. + 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 ## How to
@ -22,15 +34,23 @@
#### Notes before running the script: #### 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 have a multiple firefox builds, the script will still run without a
+ If you or your firefox build have a multiple profile, the script will return an error! Make sure you only have one! 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. + It is advisible to check the script first before running it.
+ You need `bash` to run 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 you have an existing chrome folder, the script will make a backup of it in
+ If the installation script is not working, feel free to submit an issue or a pull request. your profile directory.
+ 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 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: # Available parameters:
@ -51,12 +71,15 @@
bash -s -- nightly 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 ### Manual Installation
1. Open `about:config` page. 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: 3. Search for these:
+ **`toolkit.legacyUserProfileCustomizations.stylesheets`** + **`toolkit.legacyUserProfileCustomizations.stylesheets`**
@ -66,7 +89,8 @@
+ **`layout.css.backdrop-filter.enabled`** + **`layout.css.backdrop-filter.enabled`**
+ **`svg.context-properties.content.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. 4. Go to your Firefox profile.
@ -74,7 +98,8 @@
+ Windows 10 - `C:\Users\<USERNAME>\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX`. + Windows 10 - `C:\Users\<USERNAME>\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX`.
+ macOS - `Users/<USERNAME>/Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX`. + macOS - `Users/<USERNAME>/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. 6. Restart Firefox.
7. Finally, you can now change whatever color mode you want in the Cusomization Window. 7. Finally, you can now change whatever color mode you want in the Cusomization Window.
@ -87,26 +112,43 @@
### Some UIs are broken! ### Some UIs are broken!
1. Check if you're using the latest version of Firefox. 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 ### 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. 1. I only have Archlinux, macOS' untested while the theme is broken on Windows
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. 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***?! ### 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. + 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. + If you're not using GNOME or KDE Plasma that has its own compositors, use
+ GNOME's compositor, mutter, doesn't support blur. Hey, GNOME devs, it's already 2020. Just kidding! tryone144's
[feature/dual_kawase](https://github.com/tryone144/picom/tree/feature/dual_kawase)
branch of picom, or ibaghwans [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. + 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? ### 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. 1. Enable the blur in your compositor. Go to `System Settings > Desktop Effects
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. > 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`. 3. Go to `System Settings > KWin Scripts > Enable Force Blur`.
4. Change its settings. If there's no settings/settings icon, Logout. Re-login. 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? ### 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?! ### 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. 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. 4. You can read the next point.
### Uninstall this now! ### Uninstall this now!
1. Go to your profile directory. 1. Go to your profile directory.
2. Delete the `chrome` folder. 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. 4. Sayonara.
## Got a problem? ## 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 youll probably have
more luck with the original project, link at the top of this README.
## Got a patch? ## 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 ## TODO
PR's are welcome! PR's are welcome! (Although Ill let it mostly up to the original author)
- [ ] Render site content under the navbar like macOS - [ ] Render site content under the navbar like macOS
- [ ] Fix UI inconsistencies - [ ] Fix UI inconsistencies

View File

@ -1,83 +1,80 @@
:root { :root {
/* All the CSS variables here are global */ /* All the CSS variables here are global */
/* These applies to all colorschemes */ /* These applies to all colorschemes */
/* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */ /* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */
--bf-moz-appearance: -moz-win-glass !important; --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-accent-bg: #5E81ACCC;
--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;
--toolbar-bgcolor: transparent !important; --bf-urlbar-hightlight-bg: var(--bf-accent-bg);
--urlbar-separator-color: transparent !important; --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 */ /* Light Mode */
:root:-moz-lwtheme-darktext { :root:-moz-lwtheme-darktext {
--bf-main-window: transparent; --bf-bg: #ECEFF466;
--bf-bg: #F2F2F266; --bf-color: #3B4252;
--bf-color: #0A0A0A;
--bf-hover-bg: #434C5E33;
--bf-hover-bg: #1A1A1A33; --bf-active-bg: #434C5E66;
--bf-active-bg: #1A1A1A66;
--bf-icon-color: #3B4252;
--bf-icon-color: #0A0A0A; --bf-tab-toolbar-bg: #ECEFF4AA;
--bf-tab-toolbar-bg: #F2F2F2AA; --bf-tab-selected-bg: #2E344022;
--bf-tab-selected-bg: #00000022; --bf-navbar-bg: var(--bf-bg);
--bf-navbar-bg: var(--bf-bg); --bf-urlbar-bg: var(--bf-bg);
--bf-urlbar-bg: var(--bf-bg); --bf-urlbar-active-bg: var(--bf-bg);
--bf-urlbar-active-bg: var(--bf-bg); --bf-urlbar-focused-color: var(--bf-color);
--bf-urlbar-focused-color: var(--bf-color);
--bf-sidebar-bg: var(--bf-bg);
--bf-sidebar-bg: var(--bf-bg); --bf-sidebar-color: var(--bf-color);
--bf-sidebar-color: var(--bf-color);
--bf-menupopup-bg: #ECEFF4AA;
--bf-menupopup-bg: #F2F2F2AA; --bf-menupopup-color: var(--bf-color);
--bf-menupopup-color: var(--bf-color);
} }
/* Dark Mode */ /* Dark Mode */
:root:-moz-lwtheme-brighttext { :root:-moz-lwtheme-brighttext {
--bf-main-window: transparent; --bf-bg: #2E344066;
--bf-bg: #00000066; --bf-color: #ECEFF4;
--bf-color: #F2F2F2;
--bf-hover-bg: #ECEFF433;
--bf-hover-bg: #F2F2F233; --bf-active-bg: #ECEFF466;
--bf-active-bg: #F2F2F266;
--bf-icon-color: #ECEFF4;
--bf-icon-color: #F2F2F2; --bf-tab-toolbar-bg: #2E3440AA;
--bf-tab-toolbar-bg: #000000AA; --bf-tab-selected-bg: #ECEFF410;
--bf-tab-selected-bg: #F2F2F210; --bf-navbar-bg: var(--bf-bg);
--bf-navbar-bg: var(--bf-bg); --bf-urlbar-bg: var(--bf-bg);
--bf-urlbar-bg: var(--bf-bg); --bf-urlbar-active-bg: var(--bf-bg);
--bf-urlbar-active-bg: var(--bf-bg); --bf-urlbar-focused-color: var(--bf-color);
--bf-urlbar-focused-color: var(--bf-color);
--bf-sidebar-bg: var(--bf-bg);
--bf-sidebar-bg: var(--bf-bg); --bf-sidebar-color: var(--bf-color);
--bf-sidebar-color: var(--bf-color);
--bf-menupopup-bg: #2E3440AA;
--bf-menupopup-bg: #000000AA; --bf-menupopup-color: var(--bf-color);
--bf-menupopup-color: var(--bf-color);
} }

BIN
scrots/blurred.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 140 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 154 KiB