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
Firefox with blurredfox CSS theme

-

Firefox with blurredfox
blurredfox's layout with solid colors

+

Firefox with blurredfox
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