Merge branch 'master' of github.com:manilarome/blurredfox into master

This commit is contained in:
Lucien Cartier-Tilet 2020-09-12 11:28:13 +02:00
commit c907f26786
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
6 changed files with 143 additions and 103 deletions

View File

@ -5,12 +5,11 @@
<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/blurred.png"/><br/><i>Firefox with blurredfox CSS theme</i></p>
## What changes compared to the original project? ## What changes compared to the original project?
The original [blurredfox](https://github.com/manilarome/blurredfox/pulls) is The original [blurredfox](https://github.com/manilarome/blurredfox) is developed
developed and maintained by [Gerome and maintained by [Gerome Matilla](https://github.com/manilarome/). The reason
Matilla](https://github.com/manilarome/blurredfox/pulls). The reason for the for the existence of this fork is for me to have basically the same thing, but
existence of this fork is for me to have basically the same thing, but with a with a customized color scheme. Turns out I am currently way too much into Nord,
customized color scheme. Turns out I am currently way too much into Nord, and I and I changed the default colors to Nord-friendly colors. I will try to stay
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 up-to-date from time to time, but if you want something reliable, go take a look
at the original project. at the original project.
@ -24,9 +23,10 @@ at the original project.
+ 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). + Transparency is broken on Windows 10 (has graphical glitches like flickering).
The [solid color The [solid color scheme](https://github.com/phundrak/blurredfox-nord/blob/master/colors/solid.css)
scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css)
*may* work. *may* work.
+ No, the vertical titlebar is not included. Switch to Linux, then use AwesomeWM
to achieve this gloriousness.
## How to ## How to
@ -40,15 +40,14 @@ at the original project.
an error! Make sure you only have one! 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 + If you have an existing chrome folder, the script will make a backup of it in
your profile directory. 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. 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. etc., make sure to replace the 'stable' with the Firefox Build you are using.
If leave empty, it will default to stable. If leave empty, it will default to stable.
@ -63,11 +62,11 @@ at the original project.
# Examples: # Examples:
# Stable build's profile # 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 bash -s -- stable
# Nightly build's profile # 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 bash -s -- nightly
``` ```
@ -89,7 +88,7 @@ at the original project.
+ **`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` Then make sure to **enable them all!**. Or you can just copy the `user.js`
file to your profile. file to your profile.
4. Go to your Firefox 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 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. 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.
+ Default - Uses system colors, but uses the theme's layout. + Default - Uses system colors, but uses the theme's layout.
+ Dark - Dark colorscheme. Good for the night. + Dark - Dark colorscheme. Good for the night.
@ -112,15 +112,12 @@ at the original project.
### 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 2. It's broken because you're using Windows 10 and macOS or you're using an ancient version of Firefox.
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 1. I only have Archlinux, macOS' untested while the theme is broken on Windows 10.
10. 2. If the transparency is broken, use the [solid color scheme](https://github.com/phundrak/blurredfox-nord/blob/master/colors/solid.css).
2. If the transparency is broken, use the [solid color
scheme](https://github.com/phundrak/blurredfox/blob/master/colors/solid.css).
Edit the `userChrome.css` to switch. 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***?!
@ -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? ### 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 1. Enable the blur in your compositor. Go to
> Enable Blur`. Note that this will not enable the blur effect on all `System Settings > Desktop Effects > Enable Blur`.
applications. 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 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. [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 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`. 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.
### 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? ### 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?! ### I hate the colors! Why is everything transparent?!
1. Use the [solid color 1. Use the [solid color scheme](https://github.com/phundrak/blurredfox-nord/blob/master/colors/solid.css)
scheme](https://github.com/phundrak/blurredfox/blob/master/colors/solid.css)
by editing the `userChrome.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 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. 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, 3. If you used the installation script or copied the `user.js` to your profile,
delete it. delete it.
4. Sayonara. 4. Sayonara.
## Got a problem? ## Got a problem?
If you have already read the README, free to open an issue If you have already read the README, free to open an issue
[here](https://github.com/phundrak/blurredfox/issues)! But youll probably have [here](https://github.com/phundrak/blurredfox-nord/issues)! But youll probably have
more luck with the original project, link at the top of this README. 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 You're absolutely welcome to submit a pull request
[here](https://github.com/phundrak/phundrak/pulls)! [here](https://github.com/phundrak/phundrak/pulls)!
## TODO ## TODO

View File

@ -1,80 +1,84 @@
: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-mac-vibrancy-dark !important; --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-hightlight-bg: var(--bf-accent-bg);
--bf-urlbar-radius: 9px; --bf-urlbar-radius: 9px;
--bf-urlbar-results-font-size: 12pt; --bf-urlbar-results-font-size: 12pt;
--bf-urlbar-results-font-weight: 550; --bf-urlbar-results-font-weight: 550;
--bf-urlbar-font-size: 12pt; --bf-urlbar-font-size: 12pt;
--bf-urlbar-font-weight: 500; --bf-urlbar-font-weight: 500;
--bf-urlbar-switch-tab-color: #88C0D0; --bf-urlbar-switch-tab-color: #88C0D0;
--bf-urlbar-bookmark-color: #A3BE8CW; --bf-urlbar-bookmark-color: #2E3440;
--bf-navbar-padding: 6px; --bf-navbar-padding: 6px;
--bf-tab-selected-bg: #81A1C188; --bf-tab-selected-bg: #81A1C188;
--bf-tab-font-size: 11pt; --bf-tab-font-size: 11pt;
--bf-tab-font-weight: 400; --bf-tab-font-weight: 400;
--bf-tab-height: 36px; --bf-tab-height: 36px;
--bf-tab-border-radius: 6px; --bf-tab-border-radius: 6px;
--bf-tab-soundplaying-bg: #B48EADCC; --bf-tab-soundplaying-bg: #B48EADCC;
--toolbar-bgcolor: transparent !important; --toolbar-bgcolor: transparent !important;
--urlbar-separator-color: transparent !important; --urlbar-separator-color: transparent !important;
} }
/* Light Mode */ /* Light Mode */
:root:-moz-lwtheme-darktext { :root:-moz-lwtheme-darktext {
--bf-bg: #ECEFF466; --bf-main-window: transparent;
--bf-color: #3B4252; --bf-bg: #ECEFF466;
--bf-color: #3B4252;
--bf-hover-bg: #434C5E33; --bf-hover-bg: #434C5E33;
--bf-active-bg: #434C5E66; --bf-active-bg: #434C5E66;
--bf-icon-color: #3B4252; --bf-icon-color: #3B4252;
--bf-tab-toolbar-bg: #ECEFF4AA; --bf-tab-toolbar-bg: #ECEFF4AA;
--bf-tab-selected-bg: #2E344022; --bf-tab-selected-bg: #2E344022;
--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: #ECEFF4AA;
--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-bg: #2E344066; --bf-main-window: transparent;
--bf-color: #ECEFF4; --bf-bg: #2E344066;
--bf-color: #ECEFF4;
--bf-hover-bg: #ECEFF433; --bf-hover-bg: #ECEFF433;
--bf-active-bg: #ECEFF466; --bf-active-bg: #ECEFF466;
--bf-icon-color: #ECEFF4; --bf-icon-color: #ECEFF4;
--bf-tab-toolbar-bg: #2E3440AA; --bf-tab-toolbar-bg: #2E3440AA;
--bf-tab-selected-bg: #ECEFF410; --bf-tab-selected-bg: #ECEFF410;
--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: #2E3440AA;
--bf-menupopup-color: var(--bf-color); --bf-menupopup-color: var(--bf-color);
} }

View File

@ -22,8 +22,23 @@ download_bf() {
FF_THEME="/tmp/blurredfox-master/" FF_THEME="/tmp/blurredfox-master/"
cp -r "${FF_THEME}"* "${CHROME_DIRECTORY}" 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 # Move user.js to the main profile directory
mv "${CHROME_DIRECTORY}/user.js" "../" mv "${CHROME_DIRECTORY}/user.js" "${CHROME_DIRECTORY}/../"
if [[ $? -eq 0 ]]; if [[ $? -eq 0 ]];
then then
@ -34,7 +49,7 @@ download_bf() {
fi fi
else else
# Download failed # Download failed
message " [!!] Problem detected while downloading the theme. Terminating..." message " [!!] There was a problem while downloading the theme. Terminating..."
exit exit
fi fi
echo "░█▀▄░█░░░█░█░█▀▄░█▀▄░█▀▀░█▀▄" echo "░█▀▄░█░░░█░█░█▀▄░█▀▄░█▀▀░█▀▄"
@ -123,23 +138,23 @@ then
if [[ -n "$CHROME_DIRECTORY" ]]; if [[ -n "$CHROME_DIRECTORY" ]];
then then
# Check if the chrome folder is not empty # Check if the chrome folder is not empty
shopt -s nullglob dotglob shopt -s nullglob dotglob
content="${CHROME_DIRECTORY}/" content="${CHROME_DIRECTORY}/"
# If there's a current theme, make a backup # If there's a current theme, make a backup
if [ ${#content[@]} -gt 0 ]; if [ ${#content[@]} -gt 0 ];
then 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" backup_dir="${CHROME_DIRECTORY}-backup"
# Create backup folder # Create backup folder
if [[ ! -d "${backup_dir}" ]]; if [[ ! -d "${backup_dir}" ]];
then then
message "[>>] chrome-backup/ folder does not exist! Creating..."
mkdir "${backup_dir}" mkdir "${backup_dir}"
fi fi
mv --backup=t "${CHROME_DIRECTORY}" "${CHROME_DIRECTORY}-backup" mv --backup=t "${CHROME_DIRECTORY}" "${backup_dir}"
mkdir "${CHROME_DIRECTORY}" mkdir "${CHROME_DIRECTORY}"
fi fi
# Download theme # Download theme
@ -152,11 +167,11 @@ then
if [[ $? -eq 0 ]]; if [[ $? -eq 0 ]];
then then
CHROME_DIRECTORY="${FF_USER_DIRECTORY}/chrome" CHROME_DIRECTORY="${FF_USER_DIRECTORY}/chrome"
# Download theme # Download theme
download_bf download_bf
else else
message "[!!] There was a problem creating the directory. Terminating..." message "[!!] There was a problem while creating the directory. Terminating..."
exit 1; exit 1;
fi fi
fi fi

View File

@ -1,4 +1,4 @@
/* /*
@ -30,7 +30,7 @@ The tabs container
/* Set minimum height for tab bar */ /* Set minimum height for tab bar */
#tabbrowser-tabs { #tabbrowser-tabs {
--tab-min-height: 0; /* --tab-min-height: 0; */
margin: 6px 5px 6px 5px; margin: 6px 5px 6px 5px;
} }
@ -78,7 +78,7 @@ The tabs container
} }
/* Remove the all the "lines" in tab sides */ /* Remove the all the "lines" in tab sides */
/* /*
.tabbrowser-tab::after, .tabbrowser-tab::after,
.tabbrowser-tab::before { .tabbrowser-tab::before {
border-left: none !important; border-left: none !important;
@ -118,7 +118,7 @@ The tabs container
padding: 0 10px !important; 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 */ the close button is positioned to the far right */
.tab-content::before{ .tab-content::before{
content: ""; content: "";
@ -217,7 +217,7 @@ hbox.tab-content[pinned=true] .tab-text {
} }
.private-browsing-indicator { .private-browsing-indicator {
display: block; display: block;
background: transparent; background: transparent;
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 322 KiB

23
userContent.css Normal file
View File

@ -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;
}
}