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>
## 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 youll probably have
If you have already read the README, free to open an issue
[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.
## 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

View File

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

View File

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

View File

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

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