From 2372b2cd53eaa31206ad14645febabdac57d6ec7 Mon Sep 17 00:00:00 2001 From: Ryan The Ghost <78041469+Ryan-da-ghost@users.noreply.github.com> Date: Sat, 8 May 2021 12:23:07 +0430 Subject: [PATCH 1/4] Update README.md --- README.md | 105 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 58 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index d2536cc..c27ce28 100644 --- a/README.md +++ b/README.md @@ -7,15 +7,15 @@ ## Requirements -+ The latest Firefox -+ Compositor with blur support (optional) +- The latest Firefox +- Compositor with blur support (optional) ## Notes -+ 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. -+ No, the vertical titlebar is not included. Switch to Linux, then use AwesomeWM to achieve this gloriousness. +- 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. +- No, the vertical titlebar is not included. Switch to Linux, then use AwesomeWM to achieve this gloriousness. ## How to @@ -23,34 +23,34 @@ #### 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! -+ 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. -+ The script will move a file named `user.js` that contains all the preferences needed for blurredfox to work. The existing one will be backed up. -+ If the installation script is not working, feel free to submit an issue or a pull request. +- 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. +- The script will move a file named `user.js` that contains all the preferences needed for blurredfox to work. The existing one will be backed up. +- If the installation script is not working, feel free to submit an issue or a pull request. 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: - # stable - Firefox Stable Build - # dev - Firefox Developer Edition - # beta - Firefox Beta - # nightly - Firefox Nightly - # esr - Firefox Extended Support Release + ``` + # Available parameters: + # stable - Firefox Stable Build + # dev - Firefox Developer Edition + # beta - Firefox Beta + # nightly - Firefox Nightly + # esr - Firefox Extended Support Release - # Examples: + # Examples: - # Stable build's profile - $ curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/script/install.sh | - bash -s -- stable + # Stable build's profile + $ curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/script/install.sh | + bash -s -- stable - # Nightly build's profile - $ curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/script/install.sh | - bash -s -- nightly - ``` + # Nightly build's profile + $ curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/script/install.sh | + 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`**. @@ -60,28 +60,28 @@ 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`** - + **`layers.acceleration.force-enabled`** - + **`gfx.webrender.all`** - + **`gfx.webrender.enabled`** - + **`layout.css.backdrop-filter.enabled`** - + **`svg.context-properties.content.enabled`** + - **`toolkit.legacyUserProfileCustomizations.stylesheets`** + - **`layers.acceleration.force-enabled`** + - **`gfx.webrender.all`** + - **`gfx.webrender.enabled`** + - **`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. - + Linux - `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`. - + Windows 10 - `C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX`. - + macOS - `Users//Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX`. + - Linux - `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`. + - 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. 6. Restart Firefox. 7. Finally, you can now change whatever color mode you want in the Cusomization Window. - + Default - Uses system colors, but uses the theme's layout. - + Dark - Dark colorscheme. Good for the night. - + Light - Bright colorscheme. Good for killing the eyes. + - Default - Uses system colors, but uses the theme's layout. + - Dark - Dark colorscheme. Good for the night. + - Light - Bright colorscheme. Good for killing the eyes. ## User Support @@ -95,14 +95,14 @@ 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***?! +### 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: - + 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 [picom](https://github.com/yshui/picom). It includes the dual kawase blur shader. - + 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. + - 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 [picom](https://github.com/yshui/picom). It includes the dual kawase blur shader. + - 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? @@ -115,7 +115,6 @@ 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`. @@ -123,6 +122,18 @@ 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. +### I don't like the caption buttons! + +1. Go to your $FIREFOX_PROFILE/chrome folder. +2. Open the `userChrome.css` file +3. Uncomment `@import url("parts/content-menu.css");` + +#### I like the caption buttons, but don't like the colors! + +1. Go to your $FIREFOX_PROFILE/chrome/parts folder. +2. Open the `content-menu.css` file. +3. Change the colors in the root section. + ### Uninstall this now! 1. Go to your profile directory. From ab37faca0785983e0764553b3dec057f082bba3d Mon Sep 17 00:00:00 2001 From: Ryan The Ghost <78041469+Ryan-da-ghost@users.noreply.github.com> Date: Sat, 8 May 2021 12:23:42 +0430 Subject: [PATCH 2/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c27ce28..f1995a4 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,7 @@ 1. Go to your $FIREFOX_PROFILE/chrome folder. 2. Open the `userChrome.css` file -3. Uncomment `@import url("parts/content-menu.css");` +3. Comment `@import url("parts/content-menu.css");` #### I like the caption buttons, but don't like the colors! From 8fb84e7fdccf2541cd434d3e32cf58ca69dd8fdc Mon Sep 17 00:00:00 2001 From: Ryan The Ghost <78041469+Ryan-da-ghost@users.noreply.github.com> Date: Sat, 8 May 2021 12:24:19 +0430 Subject: [PATCH 3/4] Update userChrome.css --- userChrome.css | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/userChrome.css b/userChrome.css index 999e3d5..38266d1 100644 --- a/userChrome.css +++ b/userChrome.css @@ -7,7 +7,7 @@ Load preferred colorscheme */ /* Blurred Color Scheme */ -@import url('colors/blurred.css'); +@import url("colors/solid.css"); /* Solid Color Scheme */ /* @@ -22,13 +22,14 @@ Load preferred colorscheme Load Customized Firefox's UI Elements */ -@import url('parts/main-window.css'); -@import url('parts/toolbar.css'); -@import url('parts/tabbar.css'); -@import url('parts/urlbar.css'); -@import url('parts/sidebar.css'); -@import url('parts/arrow-panel.css'); -@import url('parts/findbar.css'); -@import url('parts/context-menu.css'); -@import url('parts/customization-window.css'); -@import url('parts/window-controls.css'); +@import url("parts/main-window.css"); +@import url("parts/toolbar.css"); +@import url("parts/tabbar.css"); +@import url("parts/urlbar.css"); +@import url("parts/sidebar.css"); +@import url("parts/arrow-panel.css"); +@import url("parts/findbar.css"); +@import url("parts/content-menu.css"); +@import url("parts/context-menu.css"); +@import url("parts/customization-window.css"); +@import url("parts/window-controls.css"); From 895069a68a962021a79132987a99fe76c0a8c6a0 Mon Sep 17 00:00:00 2001 From: Ryan The Ghost <78041469+Ryan-da-ghost@users.noreply.github.com> Date: Sat, 8 May 2021 12:34:58 +0430 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=94=A5=20A=20sleek=20content=20menu!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Idk how to put that art text thingy sorry :( --- parts/content-menu.css | 55 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 parts/content-menu.css diff --git a/parts/content-menu.css b/parts/content-menu.css new file mode 100644 index 0000000..82d541d --- /dev/null +++ b/parts/content-menu.css @@ -0,0 +1,55 @@ +/* + +█▀▀ █▀█ █▄░█ ▀█▀ █▀▀ █▄░█ ▀█▀   █▀▄▀█ █▀▀ █▄░█ █░█ +█▄▄ █▄█ █░▀█ ░█░ ██▄ █░▀█ ░█░   █░▀░█ ██▄ █░▀█ █▄█ + +The findbar +*/ + +/* Mac color theme */ +:root { + --caption-min-color: rgba(36, 209, 49, 1); + --caption-max-color: rgba(252, 185, 15, 1); + --caption-close-color: rgba(250, 55, 55, 1); +} + +/* Dark color theme +:root { + --caption-min-color: rgba(82, 82, 82); + --caption-max-color: rgba(100, 100, 100); + --caption-close-color: rgba(126, 126, 126); +} +*/ + +.titlebar-buttonbox { + position: relative; +} + +.titlebar-button { + transition: all 0.3s ease !important; + padding: 8px 10px !important; + background: var(--dark-color) !important; +} + +.titlebar-button.titlebar-close { + padding-right: 26px !important; +} + +.titlebar-button > .toolbarbutton-icon { + transition: all 0.3s ease !important; + list-style-image: none; + border-radius: 10px; +} + +.titlebar-button.titlebar-min > .toolbarbutton-icon { + background: var(--caption-min-color) !important; +} + +.titlebar-button.titlebar-max > .toolbarbutton-icon, +.titlebar-button.titlebar-restore > .toolbarbutton-icon { + background: var(--caption-max-color) !important; +} + +.titlebar-button.titlebar-close > .toolbarbutton-icon { + background: var(--caption-close-color) !important; +}