diff --git a/README.md b/README.md index ae70320..670a75f 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,11 @@

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 +The original [blurredfox](https://github.com/manilarome/blurredfox) is developed +and maintained by [Gerome Matilla](https://github.com/manilarome/). 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. @@ -24,9 +23,10 @@ at the original project. + 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) + The [solid color scheme](https://github.com/phundrak/blurredfox-nord/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 @@ -40,15 +40,14 @@ at the original project. 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 ++ 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 ++ 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. -+ 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, +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. @@ -63,11 +62,11 @@ at the original project. # Examples: # Stable build's profile - $ curl -fsSL https://raw.githubusercontent.com/phundrak/blurredfox/script/install.sh | + $ curl -fsSL https://raw.githubusercontent.com/phundrak/blurredfox-nord/script/install.sh | bash -s -- stable # Nightly build's profile - $ curl -fsSL https://raw.githubusercontent.com/phundrak/blurredfox/script/install.sh | + $ curl -fsSL https://raw.githubusercontent.com/phundrak/blurredfox-nord/script/install.sh | bash -s -- nightly ``` @@ -89,7 +88,7 @@ at the original project. + **`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` + 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. @@ -101,7 +100,8 @@ at the original project. 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. +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. @@ -112,15 +112,12 @@ at the original project. ### 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 - old version of Firefox. +2. It's broken because you're using Windows 10 and macOS or you're using an ancient 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/phundrak/blurredfox/blob/master/colors/solid.css). +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/phundrak/blurredfox-nord/blob/master/colors/solid.css). Edit the `userChrome.css` to switch. ### Liar! The theme's name is `blurredfox`, ***where is the blur***?! @@ -142,9 +139,9 @@ at the original project. ### 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 > 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 @@ -152,10 +149,12 @@ at the original project. 3. Go to `System Settings > KWin Scripts > Enable Force Blur`. 4. Change its settings. If there's no settings/settings icon, Logout. Re-login. -### Where is the scrollbar? +### 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. You can adjust the value of `scrollbar-width` in `userContent.css`. -2. Restart Firefox. ### How can I set or change the colors for the Default color mode? @@ -166,8 +165,7 @@ at the original project. ### I hate the colors! Why is everything transparent?! -1. Use the [solid color - scheme](https://github.com/phundrak/blurredfox/blob/master/colors/solid.css) +1. Use the [solid color scheme](https://github.com/phundrak/blurredfox-nord/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 @@ -178,19 +176,19 @@ at the original project. 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, +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/phundrak/blurredfox/issues)! But you’ll probably have +If you have already read the README, free to open an issue +[here](https://github.com/phundrak/blurredfox-nord/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 +You're absolutely welcome to submit a pull request [here](https://github.com/phundrak/phundrak/pulls)! ## TODO diff --git a/colors/blurred.css b/colors/blurred.css index 50cb2fc..79b0516 100644 --- a/colors/blurred.css +++ b/colors/blurred.css @@ -1,80 +1,84 @@ :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-mac-vibrancy-dark !important; + /* 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: #5E81ACCC; + --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: #88C0D0; - --bf-urlbar-bookmark-color: #A3BE8CW; + --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: #2E3440; - --bf-navbar-padding: 6px; + --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; + --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; + --toolbar-bgcolor: transparent !important; + --urlbar-separator-color: transparent !important; } /* Light Mode */ :root:-moz-lwtheme-darktext { - --bf-bg: #ECEFF466; - --bf-color: #3B4252; + --bf-main-window: transparent; + --bf-bg: #ECEFF466; + --bf-color: #3B4252; - --bf-hover-bg: #434C5E33; - --bf-active-bg: #434C5E66; + --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-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-sidebar-bg: var(--bf-bg); + --bf-sidebar-color: var(--bf-color); - --bf-menupopup-bg: #ECEFF4AA; - --bf-menupopup-color: var(--bf-color); + --bf-menupopup-bg: #ECEFF4AA; + --bf-menupopup-color: var(--bf-color); } /* Dark Mode */ :root:-moz-lwtheme-brighttext { - --bf-bg: #2E344066; - --bf-color: #ECEFF4; + --bf-main-window: transparent; + --bf-bg: #2E344066; + --bf-color: #ECEFF4; - --bf-hover-bg: #ECEFF433; - --bf-active-bg: #ECEFF466; + --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-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-sidebar-bg: var(--bf-bg); + --bf-sidebar-color: var(--bf-color); - --bf-menupopup-bg: #2E3440AA; - --bf-menupopup-color: var(--bf-color); + --bf-menupopup-bg: #2E3440AA; + --bf-menupopup-color: var(--bf-color); } diff --git a/install.sh b/install.sh index 8753775..fc3f8db 100755 --- a/install.sh +++ b/install.sh @@ -22,8 +22,23 @@ download_bf() { FF_THEME="/tmp/blurredfox-master/" cp -r "${FF_THEME}"* "${CHROME_DIRECTORY}" + # Backup user.js instead of overwriting it + if [ -e "${CHROME_DIRECTORY}/../user.js" ] + then + message "[>>] Existing user.js detected! Creating backup to user-prefs-backup/..." + user_pref_backup_dir="${CHROME_DIRECTORY}/../user-prefs-backup" + + if [[ ! -d "${user_pref_backup_dir}" ]]; + then + message "[>>] user-prefs-backup/ folder does not exist! Creating..." + mkdir "${user_pref_backup_dir}" + fi + + mv --backup=t "${CHROME_DIRECTORY}/../user.js" "${user_pref_backup_dir}" + fi + # Move user.js to the main profile directory - mv "${CHROME_DIRECTORY}/user.js" "../" + mv "${CHROME_DIRECTORY}/user.js" "${CHROME_DIRECTORY}/../" if [[ $? -eq 0 ]]; then @@ -34,7 +49,7 @@ download_bf() { fi else # Download failed - message " [!!] Problem detected while downloading the theme. Terminating..." + message " [!!] There was a problem while downloading the theme. Terminating..." exit fi echo "░█▀▄░█░░░█░█░█▀▄░█▀▄░█▀▀░█▀▄" @@ -123,23 +138,23 @@ then if [[ -n "$CHROME_DIRECTORY" ]]; then # Check if the chrome folder is not empty - shopt -s nullglob dotglob + shopt -s nullglob dotglob content="${CHROME_DIRECTORY}/" # If there's a current theme, make a backup if [ ${#content[@]} -gt 0 ]; then - message "[>>] Existing chrome folder detected! Creating a backup..." - + message "[>>] Existing chrome folder detected! Creating a backup to chrome-backup/..." backup_dir="${CHROME_DIRECTORY}-backup" # Create backup folder if [[ ! -d "${backup_dir}" ]]; then + message "[>>] chrome-backup/ folder does not exist! Creating..." mkdir "${backup_dir}" fi - mv --backup=t "${CHROME_DIRECTORY}" "${CHROME_DIRECTORY}-backup" + mv --backup=t "${CHROME_DIRECTORY}" "${backup_dir}" mkdir "${CHROME_DIRECTORY}" fi # Download theme @@ -152,11 +167,11 @@ then if [[ $? -eq 0 ]]; then CHROME_DIRECTORY="${FF_USER_DIRECTORY}/chrome" - + # Download theme download_bf else - message "[!!] There was a problem creating the directory. Terminating..." + message "[!!] There was a problem while creating the directory. Terminating..." exit 1; fi fi diff --git a/parts/tabbar.css b/parts/tabbar.css index c6cf2b8..1a5a80d 100644 --- a/parts/tabbar.css +++ b/parts/tabbar.css @@ -1,4 +1,4 @@ -/* +/* ░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄ ░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄ ░░▀░░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀ @@ -30,7 +30,7 @@ The tabs container /* Set minimum height for tab bar */ #tabbrowser-tabs { - --tab-min-height: 0; + /* --tab-min-height: 0; */ margin: 6px 5px 6px 5px; } @@ -78,7 +78,7 @@ The tabs container } /* Remove the all the "lines" in tab sides */ -/* +/* .tabbrowser-tab::after, .tabbrowser-tab::before { border-left: none !important; @@ -118,7 +118,7 @@ The tabs container padding: 0 10px !important; } -/* A way to center the label and icon while +/* A way to center the label and icon while the close button is positioned to the far right */ .tab-content::before{ content: ""; @@ -217,7 +217,7 @@ hbox.tab-content[pinned=true] .tab-text { } -.private-browsing-indicator { +.private-browsing-indicator { display: block; background: transparent; } diff --git a/scrots/blurred.png b/scrots/blurred.png deleted file mode 100644 index 0ce07fb..0000000 Binary files a/scrots/blurred.png and /dev/null differ diff --git a/userContent.css b/userContent.css new file mode 100644 index 0000000..97ff294 --- /dev/null +++ b/userContent.css @@ -0,0 +1,23 @@ +@import url('userChrome.css'); + +/* Removes the white loading page */ +/* url(about:newtab), url(about:home) */ +@-moz-document url(about:blank) { + html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay { + background: var(--bf-bg) !important; + } +} + +/* Sets up minimal scrollbar */ +:root { + scrollbar-width: thin !important; + scrollbar-color: rgb(161, 161, 161) transparent !important; +} + +/* Sets up minimal incognito scrollbar */ +@-moz-document url(about:privatebrowsing) { + :root{ + scrollbar-width: thin !important; + scrollbar-color: rgb(161, 161, 161) transparent !important; + } +}