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