Giter VIP home page Giter VIP logo

blurredfox's Introduction

blurredfox

A modern Firefox CSS Theme

Firefox with blurredfox
Firefox with blurredfox CSS theme

Firefox with blurredfox
blurredfox's layout with solid colors

Requirements

  • 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 may work.
  • No, the vertical titlebar is not included. Switch to Linux, then use AwesomeWM to achieve this gloriousness.

How to

Quick install for the linux lads

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.
  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
    
    # Examples:
    
    # 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
    
  2. After the confirmation message that the theme is successfully installed, open firefox. Change the colorscheme by Open Menu > Customize > Change colorscheme.

Manual Installation

  1. Open about:config page.

  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

    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\<USERNAME>\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX.
    • macOS - Users/<USERNAME>/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.

User Support

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 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. Edit the userChrome.css to switch.

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. 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?

  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. Make sure to read its manual. Don't you ever dare to create an issue about Force Blur! Just kidding! But yeah, I'm serious.
  3. Go to System Settings > KWin Scripts > Enable Force Blur.
  4. Change its settings. If there's no settings/settings icon, Logout. Re-login.

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.

I hate the colors! Why is everything transparent?!

  1. Use the solid color scheme 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 color scheme. No transparency == No blur.
  4. You can read the next point.

Uninstall this now!

  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, delete it.
  4. Sayonara.

Got a problem?

If you have already read the README, free to open an issue here!

Got a patch?

You're absolutely welcome to submit a pull request here!

TODO

PR's are welcome!

  • Render site content under the navbar like macOS
  • Fix UI inconsistencies
  • Better CSS

blurredfox's People

Contributors

brod8362 avatar eromatiya avatar ocramoi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blurredfox's Issues

Switch tab bar w/ main bar - Safari style

Hello,

Firstly thank you for this awesome theme! My question is, can I switch the tab bar with the main bar?

Screenshot from 2021-01-11 15-34-58

In this theme it is solved, but your graphics is much more beautiful.

Screenshot from 2021-01-11 15-40-20

I tried to find this option in the documentation and in both code but sadly I was not successful.

Once installed manually it doesn't respond to any interaction.

I am unable to maximize or drag the window or click into the page or even type. It doesn't respond to anything. It does appear correctly and Firefox is indeed running and is not frozen, it's just whenever I try to do anything it just doesn't respond.

Close tabs

How am I supposed to close tabs and how to open a new tab if only one is open?

Transparency not working in firefox 88.0 linux

Distro: Manjaro latest
DE: KDE
Version: Firefox stable 88.0

user.js is present, theme chosen is blurred in userChrome.css, installed through script, nothing changed. Still the window looks like this
image

As you can see, it has no transparency. I have force blur running and blur enabled. I have also tried reinstalling firefox but didn't change a thing.

URL is blurred after clicking off

After clicking on the URL bar on the top of the page, it is blurred, kinda looks like a mix of the highlighted and unhighlighted versions mixed together. It fixes itself once I interact with the computer in any way

I installed by running curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/script/install.sh | bash -s -- stable

My system is Manjaro Linux with Gnome, running version 83.0 of Firefox stable

Display only the domain name instead of the URL [Feature request]

Is it possible to display only the domain name in the address bar and the full URL being displayed only on click as the address bar being placed in the center limits the space for the URL to be displayed?

Something similar to safari, it would look much more cleaner 😃

Scroll bar missing

After I installed BlurredFox Theme i didn't see the scrollbar on websites, it's weirddd
image
image
image
image

Round edge tabs


Screenshot_20201006_112734

Just installed the theme and for some reason my tabs are not rounded as I saw in the preview screenshot!

Does it work for Firefox Developer?

I am trying to install for Firefox Developer, but when I run

 bash -c "$(curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/master/install.sh)"

It's returning

[!!] No firefox user profile directory found. Make sure to run firefox atleast once! Terminating...

Does blurredfox support FireFox Developer edition?

What is the task switcher applet you use?

I just saw the screenshot in redesign branch, and I am really interested in that tab-like task switcher. Can you tell me how to set up it? And maybe if you can, can you tell me how do you move the window's title bar to the left?

Blur overflow

I'm getting extra blur on right and bottom edges when I disable Title bar. My guess is it has something to do with window borders. I'm using KDE. Is there any way to fix it? Thanks in advance!

Screenshot_20201006_001831

Option for older style (i.e. not expecting vertical title bar)

Love the theme, thanks! I was hoping an option can be made (via install script, different css files to use, commented in one css, ...) to have the older style of this theme, with blurred transparency from the content area through to the top. In other words, without the sort of striping now that looks great for having the vertical bar on the side, but doesn't quite match without it. In my case, I don't have window borders or decorations.

Gap on tab bar

On top right corner, below the hamburger menu, there's a gap

image

New store for FirefoxCSS themes

Hi, I don't know how to contact you so I'm using this.

We are creating a website where to collect firefox themes. we have included yours by linking to this github.

I invite you to add/change/remove any information we have added to our website. I hope you like the initiative and that in the future you will send us more themes.

here are the links:
web: https://firefoxcss-store.github.io/
repo: https://github.com/FirefoxCSS-Store/FirefoxCSS-Store.github.io

Regards :)

Transparency non-existant now in Firefox 85

I can't really include any photos (i don't really have a screenshot manager), however, the background is no longer transparent. The search sugestions menu somehow is, however the background, tabs and the likes of it no longer are after updating firefox. Is there any fix?

No scrollbar

I don't know if this is a bug or a feature, but I use scrollbars to get an idea of how much I've read and how much is still left

Background blur not showing with picom and blurred styles

I recently installed this onto Firefox Developer Edition, and my background is not showing through the window. All other blurs seem to work fine, but the main window will not be transparent. I have picom and blur enabled, and I have changed all the required settings in about:config. In addition, I even tried going into the remote debugger, and using:

* {
  background-color: transparent !important;
}

the main window remains solid.

What appears to be happening is that a gray-blue background is being shown, even with everything else transparent. This is visible behind the navbar and in the margins around #browser if I increase them.

The html:body element is visibly changed when I set the background to red or something similar, but even when that is set to transparent, the html#main-window element behind it is not shown (if it has a color of red, the color remains gray-blue).

blurredfox-issue

Thanks for the help!

macOS Compatibility ( Experience / FYI )

Sadly, on macOS the transparency and blur do not work in most places, the layout does work. I believe some of this could work with -moz-appearance: -moz-mac-vibrancy-dark. Regardless thank you for the clearly laid out themes.

Edit:

#main-window {
	-moz-appearance: -moz-mac-vibrancy-dark !important;
	border: none !important;
}

Resolves the URL Bar, Tab Bar, Sidebar.

No background color other than tab bar when in CSD mode and default theme

When the titlebar is hidden, under the default (GTK) theme, everything else has no recolor from the standard, which is completely transparent. I like my GTK title bar, and use CSD when I can. This makes it quite difficult to do. Could you make the background assume GTK colors when in CSD mode?

Does bluerredfox support FireFox Developer Edition?

I am trying to install for Firefox Developer, but when I run

 bash -c "$(curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/master/install.sh)"

It's returning

[!!] No firefox user profile directory found. Make sure to run firefox atleast once! Terminating...

Does blurredfox support FireFox Developer edition?

Support for Color coding of container tabs

This theme looks super cool on my KDE. But I cannot see the color coding support for Container tabs. Can you please add it?

This is how it looks right now (blurredfox theme):
new

This is how tabs are color coded when in container (Default Firefox theme):
old

There's another theme that I've been using which color codes containers by dots (Sweet Theme):
new1

[Question] Transparent about:newtab

I know that this is only for firefox's UI elements, but I was wondering if there was a way to chane the dark background of about:newtab to transparent? I'm assuming it's possible since the window is transparent when loading a website

Too small URL bar

Thank you for the quick fixes of the previous issues that I opened. I ran into another problem and would like to report it.
When the window covers half of my desktop screen (which is pretty common), URL bar becomes too small to show the URL of a website. I can barely click to enter a new URL or bookmark a site.

Screenshot_20200817_112652

Perhaps when the window size is small, making use of the blank space present before and after of the URL bar may help.

Also check the firefox-trunk folder for Firefox nightly.

Quick explanation as I also found this pretty stupid.

On Debian based distro, Firefox distribute Firefox-nightly (And nightly builds of thunderbird too) via their own ppa, called firefox-trunk https://launchpad.net/~ubuntu-mozilla-daily/+archive/ubuntu/ppa/+packages

Problem, they seem to also be called firefox-trunk internally, causing it to create their folders as ¨firefox-trunk¨ instead of the firefox-nightly. Obviously, just a little modification into the installation script could resolve that issue, and you can still install it manually of course.

Oh, and Firefox-beta on their Debian repos, replace the default Firefox releases. Don’t ask me why, I would wish to stay on Arch if I could.

No blur in context menu under KDE Plasma with Force Blur Script

Hi,

I'm running Firefox 81.0. All blur effects appear to be working, apart from the context menu.

Screenshot_20200928_155825

As you can see it's quite difficult to read without the blur effect. I'm running KDE Plasma 5.19.5. I've added firefox to Force Blur with no change. I'll note that the context menu blur in the rest of my DE works fine, though I'm unsure if they are related in any way. In the meantime I just commented out the context menu line to get the default context menu appearance.

Any help would be appreciated!

KDE blur does not work

I turned on all the about:config settings, used the dark theme, enabled force blur, enabled blur in desktop effects, and rebooted, copy-pasted the usercontent files and uschrome.css files, but there is still no blur in firefox (same for the thunderbird theme). It is just transparent.

Firefox user directory fix suggestion

diff --git a/install.sh b/install.sh
index 8130ab1..85f2a2a 100755
--- a/install.sh
+++ b/install.sh
@@ -45,7 +45,7 @@ EOF
 }
 
 
-FF_USER_DIRECTORY="$(find "${HOME}/.mozilla/firefox/"  -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.default-release')"
+FF_USER_DIRECTORY="$(find "${HOME}/.mozilla/firefox/"  -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.default-(release|default)')"
 
 if [[ -n $FF_USER_DIRECTORY ]];
 then

I encountered an issue on gentoo linux.

~/.mozilla/firefox $ ls
installs.ini  jt3khmjq.default-default  pk9k6luc.default  profiles.ini
~/.mozilla/firefox $

Right click menu hardly visible

image

Right click is hard to see. (Note: it was hard to take the screenshot as it would fade out so the screenshot isn't completely accurate)

Add option to change the text to white on the context menu?

Setting font-variant-ligatures to none will cause strange text font to be displayed on some websites

This project is great, I really like it. But I encountered a problem.

In some Chinese content website, the text displayed weird:

image

I'm not familiar with CSS, so I ramdomly changed some font setting and I find this: after setting 'font-variant-ligatures : normal', the text display return to normal

image

Code reference

https://github.com/manilarome/blurredfox/blob/6976b5460f47bd28b4dc53bd093012780e6bfed3/parts/main-window.css#L32

Missing microphone, webcam permission and tracker protection icons

I cannot find permission and tracker protection icons in blurredfox theme. So, I'm not able to take back the permission for microphone after giving it for the first time. Also, I'm not able to see the list of trackers deployed on a website. They should look something like this (from default firefox theme):
Screenshot_20200817_112652

New Tab is set to white theme

Screenshot_20200815_170338
The new tab background is white as shown in the picture. The theme is set to dark mode, so I do not know what causes this.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.