Firefox Stylesheet To Add Brave-Like Elements

  • By Bred
  • Last update: Dec 28, 2022
  • Comments: 3

Brave-Fox Banner

Brave-Fox

Brave-Fox is a Firefox Theme that brings Brave's design elements into Firefox.

Versions

There are two versions to Brave-Fox: Overflow & Non-Overflow.

Overflow vs Non-Overflow

Chromium-based browsers do this thing where with every new tab, each other tab gets smaller and smaller, till you open enough tabs that newer ones stop displaying after a certain number of tabs. Firefox said "nah", and just decided to add a scroll wheel onto the tab bar.

Adding the Remove Overflow.css file to the Brave-Fox folder will disable Firefox's tab scrolling and enable chromium-like tab behaviour.

Explanation

I highly recommend you read the documentation I spent hours on as it explains every line of code in each file, some also have before and after pictures to show off differences.

Installation

  1. Install the pack you'd like to use, (including the Non-Overflow version if you'd like) (other than ReadMe.md).
  2. Move all files to Chrome Folder
  3. Add the following code to your userChrome.css & userContent.css files:
/*--------------------------------------------- Brave Fox --------------------------------------------*/
@import url("Brave-Fox/Import.css");
/*----------------------------------------------------------------------------------------------------*/
  1. Save & restart Firefox.

Extras

Fluent Reveal Tabs

This adds Chromium's "flashlight" hover effect on tabs, just like Brave & Chrome have. Be warned tho, this is a JS script and needs a script manager

Github

https://github.com/Soft-Bred/Brave-Fox

Comments(3)

  • 1

    Some things I noticed + possible suggestions.

    First of all, thanks for making this good looking theme!

    After installing I noticed 2 things, first of which is that the new tab button isn't properly aligned in the middle. See the screenshot.

    You can also see in the screenshot, that below the tabs, we have a 1xp dark line. Would it be possible to have that dark line continue following the curves of the tab?

    Right now it feel weird so see that black line, then nothing on the tab itself, and then after it continues.

    I think it might look better of that black lines follows the tab's design.

    image

  • 2

    Issue with tabs/menu when using theme

    First, very nice theme, so far its the only one I've enjoyed using enough to stick with.

    My problem with it is that for reasons I can't seem to recreate, everything above the bookmark bar will stop being interactable. I also have no idea what fixes it. When it happens I can't move tabs, or if I can they'll snap back where they were originally. I also can't interact with the menu for FF, any addon icons, etc. I can't even close the browser window with the X button when it happens.

    I can try to get a gif or something of it if needed.

  • 3

    Can't click buttons and url bar after a few hours

    I have the same issue as in #2, After a while i can't click the url bar, extensions and tabs, This forces me to restart the browser and is very annoying, Im using arch linux on firefox stable

Popular Tag

Related