migueravila/simplefox

🦊 A Userstyle theme for Firefox minimalist and Keyboard centered.

👇 Index

• 👇 Index
• 💫 Features
• ⚙️ Installation
• 🚀 Usage
• 🎨 Customization
  • 💛 Colors
  • 🚧 URL Bar
  • 🔧 Recommended settings
  • 🍱 Startpage
  • ⛲ One line version: Cascade
• ⚠️ Notes

💫 Features

• Supports Firefox Proton UI
• As simple as you want: All code is commented!
• Variables for custom colors: Customization
• Keyboard Centered Design! Here you can read about the shortcuts: Usage

⚙️ Installation

1. In the searchbar type about:config. A dialog will be shown to you. Press the I accept the risk button.
2. Search for toolkit.legacyUserProfileCustomizations.stylesheets, layers.acceleration.force-enabled, gfx.webrender.all, and svg.context-properties.content.enabled. Change them to True
3. Go to your Firefox profile:
   • If you're on Linux: $HOME/.mozilla/firefox/XXXXXXX.default-release/
   • If you're on Windows: C:\Users\<USERNAME>\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX
   • If you're on MacOS: Users/<USERNAME>/Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX
4. Move the chrome folder into the directory.
5. Make all the customizations you want here.
6. Enjoy!

🚀 Usage

This userstyle was made for a keyboard centered usage, like Tilling Window Manager users or just cool people that loves them! Use the following for a better experience:

• Alt You can access to the global menu for an extended options you need
• Alt + Left Arrow You can go Back
• Alt + Right Arrow You can go Forward
• Ctrl + L focuses the Navbar
• Ctrl + B shows you the Bookmarks
• Ctrl + H shows you the History Bar
• Ctrl + T Opens a new Tab
• Ctrl + W Closes a Tab
• Ctrl + Shift + T Re-opens a tab that you just closed
• Ctrl + R Refresh the page you're on
• Ctrl + Shift + A Quick open for Add-Ons

🎨 Customization

All the configuration will be managed in the userChrome.css file. And also all the code is commented so you can easily change values and colors as you like.

💛 Colors

In this section of the code you can change the colors, there's a window color and a tabs / urlbar color.

:root {
  --sfwindow: #19171a;
  --sfsecondary: #201e21;
}

🚧 URL Bar

You can show and hide the URL Bar (See the difference above) by commenting / uncomment the following section of code:

/*─────────────────────────────*/
/* Comment this section if you */
/* want to show the URL Bar    */
/*─────────────────────────────*/

.urlbarView {
  display: none !important;
}

/*─────────────────────────────*/

🔧 Recommended settings

• Right click on toolbar -> Customize.
  • Remove (as you want) all the removable elements including extensions, drag space and buttons.
• Install the SimpleFox add on theme.

🍱 Startpage

If anyone has the doubt, in almost all of the screenshots you can see a Startpage made for it. It's called Bento 🍱 and It's another project I made. It fits with the Firefox theme because It's done with the same principles: Minimalist, Simple and Elegant.

⛲ One line version: Cascade

Andreas Grafen has made an awesome work making a One Line theme inspired by SimpleFox. As it's work is awesome and allows you customization I can totally recomend it. Here you can find his repo: Link

⚠️ Notes

• As Firefox changed at version 88 introducing the Proton UI, all the old files and configurations moved to oldFirefox branch.
• Windows and MacOS are currently tested but may not be in the future.
• Some custom themes (And GTK themes in Linux) may break context menus.

simplefox's Issues

how can i change the color of the tab bar background to match the window controls?

how can i change the color of the tab bar background to match the window controls?

Hiding of #PanelUI-button breaks "new addon installed" popup dialog

As SimpleFox comes out-of-the-box it hides #PanelUI-button which completely breaks the "new addon installed" popup dialog similar to this one:

It will keep appearing and disappearing constantly very rapidly and follows you to any other Firefox window you may move your focus to until you restart Firefox entirely.

I'm seeing this on Nightly 104.0a1 (2022-07-14) but believe I already saw this on current stable version before as well.

As I personally prefer having access to the button anyway I ended up just applying the following:

--- a/chrome/userChrome.css
+++ b/chrome/userChrome.css
@@ -165,7 +167,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
 #pageActionSeparator,
 #tabs-newtab-button,
 #back-button,
-#PanelUI-button,
+/*#PanelUI-button,*/
 #forward-button,
 .tab-secondary-label {
   display: none !important;

P.S. Please add a trailing new-line to userChrome.css, thanks :)

--- a/chrome/userChrome.css
+++ b/chrome/userChrome.css
@@ -202,4 +206,4 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
 #context_selectAllTabs,
 #context_closeTabOptions {
   display: none !important;
-}
\ No newline at end of file
+}

userChrome__WithURLBar.comp.css not having a URL bar

The compressed version of the userChrome with a url bar actually does not have a url bar, the uncompressed version does have one.

I only tested this for the Linux version.

Colors broken

All my tabs have colors working fine, except for the tab I am currently on, which has the default colors. How do I change this? Thanks.

Little issue with round corner (Ubuntu/Gnome)

Hi, I love the theme (i use bento too !) so thanks.

I just figure out something a little annoying using the theme on ubuntu/gnome. There is a pointy corner showing (with a color problem too) as we can normally see here

The first windows is with SimplerentFox and the second one is default. I cannot figure out how to fix this by my own, how do you thinks is it easy to fix ?

Changing text/fontcolors of active tab.

Hi !

I'm using your CSS for Firefox on Linux, and I'm loving it, great job !
I'm new to CSS, so I have just played around and trying stuff, the way you have made it makes it easy for a newbie, thnx for that ! 👍

I have one question thou, I would like the text/font of the focused tab to be another color than the rest and I can't figure it out. I have manged to get the whole active/focused tab to change color.
But I just want the text to change.

Is that doable, and if so, I would appreciate ideas and pointers ?

Default GTK color, I want to use the system default color on tabs. (ZorinOS / Linux)

It looks like that, I want it to be the same as the menu on the top, like the rest of the system.

Transparent URL bar

This may be a really stupid question but my URL bar is transparent. How do I make it opaque?

Firefox background is not transparent.

Here's the issue I have encountered.

firefox --version      
Mozilla Firefox 77.0.1

Turned off all settings on Firefox home content.

Placed all files on chrome directory inside the $HOME/.mozilla/firefox/XXXXXX/.default-release/

pwd                                
/home/[redacted]/.mozilla/firefox/bovgo6mh.default-release/chrome 

ls 
userChrome.css  userChrome__withoutURLBar.css  userContent.css

Followed all instructions on about:config of firefox

How to increase bar width in the OneLine version?

Title.

On librewolf, using containers, the titlebar need to be extended. I've looked into the userChrome.css, it's not intuitive for me.

Any help would be much appreciated.

Top transparency

Hi,

I'm using your theme and I'm not getting the top bar transparency

This is what I have on userChrome.css under root

:root {
    --srf-color-primary: rgba(17, 17, 17, 0.6);
    --srf-color-selection: #66a6d9;
}

I'm not able to get any transparency no matter which userChrome.css I used :(

add-ons not work properly

show the scrollbar only in private mode?

i noticed the scrollbar is hidden, and normally that's fine, but there are certain times i need the scrollbar when in private mode. is there a way to edit the CSS to hide it in normal browsing, but show it in private mode?

webpage icons to show on tabs

Hey,
is it somehow possible to have the icons show on the tabs? Otherwise its kinda useless to have tabs anyway if you only have text imo.

userContent.css missing in linux folder

The README inside linux folder mentions on step 6:

6. Then paste the userChrome.css and the userContent.css files into the folder

But there is no userContent.css inside the folder. Is the file missing or is the README wrong?

Can you share your homepage?

Can you share your homepage? thankshttps://raw.githubusercontent.com/migueravila/SimpleFox/master/assets/urlbar.png

I want to remove urlbar and move "more tools" menu to end of the line, how can i do that?

I wrote everything in the title actually, that's what I want to do. Can you help me? I am using the oneline version by the way.

Buttons

I really love this theme but i also want to have the default buttons instead of using the keyboard.
Is there a way i can do this?

Like adding the back and forward button whre the refresh button is, add a new page button.

Collapsible vertical tab bar

SimplerentFox looks really great, I'll give it a try soon! However, for personal convenience, I would prefer a collapsible vertical tab bar, as it allows having more tabs visible without truncating them too much, plus it gains some vertical space.

There's an example on this video I put up lately to better illustrate what I have in mind (even though it's on a phone here, I use the same Firefox CSS on desktop, just don't have a video for it yet). Moving the tab bar to the side also frees some space vertically, and I also hid the address bar and title bar so that the content uses all available screen estate without going fullscreen.

This is based on the Tree Style Tabs addon, and I use the (messy with probably a few conflicts) CSS code at the bottom of this post, that is now partly broken after a recent Firefox update.

Do you think I could use use the same side bar feature and hide address and title bars using this approach in SimplerentFox, or do you foresee many conflicts?

In Tree Style Tabs options:

/* Desaturate favicons in inactive tab */
.tab:not(.active) .favicon {
  filter: grayscale(1) brightness(0.7) contrast(1) invert(1);
}

/* Hide background of inactive tabs when tab bar is collapsed */
.tab:not(.active) {
  border-left: 25px solid;
  border-color: var(--theme-colors-frame);
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
tab-item .label {
    margin-left: 15px;
    font-size: 95%
}

/* Move favicons to the left */
.tab .favicon {
  margin-left: -10px;
}

.tab.active .favicon {
  margin-left: -7px !important;
}

/* Move .twisty to the right of favicons and adjust margins to reduce space on the left. */
tab-item .twisty {
    margin-left: -4px;
    margin-right: 0px;
    left: 22px;
}

/* Background color of the empty tab bar */
:root,
#background {
  background: var(--theme-colors-frame);
}

/* Show title of unread tabs with red and italic font */
.tab.unread .label {
  color: #5294E2 !important;
  font-style: italic !important;
}

/* Add private browsing indicator per tab */
.tab.private-browsing .label:before {
  content: "🕶";
}

/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */ 
#tabbar {
  border: 0; overflow-y: scroll !important; margin-left: -14px !important; scrollbar-width: auto;
}

/* Hide close buttons on tabs. */
tab-item .closebox {
  visibility: collapse;
}

/* Hide sound playing/muted button. */
.sound-button::before {
  display: none !important;
}

/* Hide new tab button and eliminate dead space on bottom */
.newtab-button-box {
  display: none;
}
#tabbar {
  bottom: 0 !important;
}

In userChrome.css:

 /* FIX CONTEXT MENU DISAPPEARING IMMEDIATELY */
#contentAreaContextMenu {
  margin: 5px 0 0 5px
}

/* HIDE TITLE BAR */
#titlebar {
  visibility: collapse;
}

/* HIDE NATIVE TABS */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

/* AUTO-HIDE URL-BAR AND SHOW ON HOVER (SWIPE FROM OUTSIDE TOP OF THE WINDOW) OR FOCUS WITH CTRL+L */
#nav-bar:not([customizing="true"]):not([inFullscreen]) {
	min-height: 35px !important;
	max-height: 102px !important;
	margin-top: 2px !important;
	margin-left: 28px !important;
 	margin-right: 12px !important;
	margin-bottom: -85px !important;
  border-top: 0px !important;
	border-bottom: 50px solid transparent !important; /* This expands the hover area when the bar is visible */
	background-clip: content-box; /* This together with border-bottom expands the hover area when the bar is visible */
    /* Chose one of either options below
    Option 2: not recommended because it makes the whole
    invisible bar (+ its invisible border) hoverable, which may
    prevent clicking on website buttons located on top
    Option 1: does not cause this issue, but requires accurate hovering on the top
    border of the Firefox window, or swiping from outside the window to expand the bar
    /* Option 1 */
       z-index: -5 !important;
    /* Option 2 */
       /* 
       opacity: 0;
       z-index: 5 !important;
       */
}

#navigator-toolbox:hover:not([inFullscreen]) :-moz-any(#nav-bar),
#navigator-toolbox:focus-within :-moz-any(#nav-bar) {
  margin-top: -17px !important;
  border-top: 20px solid var(--toolbar-bgcolor) !important;
  box-sizing: border-box !important;
  z-index: 5 !important;
	opacity: 1;
}

#urlbar {
	border: 0 !important;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 1px 1px 1px 1px !important;
	background-color: #0000002d !important;
	box-shadow: none !important;
	text-align: center !important;
}

#navigator-toolbox {
	--toolbar-bgcolor: rgba(0,0,0,.8);
	--urlbar-separator-color: transparent;
	--lwt-toolbarbutton-icon-fill: var(--theme-colors-icons);
	--lwt-toolbar-field-background-color: transparent !important;
	--lwt-toolbar-field-border-color:  transparent !important;
	--lwt-toolbar-field-focus: transparent !important;
	--toolbar-field-focus-border-color: #77777773 !important;
}

/* Hide toolbar in fullscreen mode */
/*
#nav-bar[inFullscreen="true"] {
  visibility: collapse;
}
*/

/* AUTOHIDE BOOKMARK BAR */
#PersonalToolbar {
  --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
}

:root[uidensity="compact"] #PersonalToolbar {
  --uc-bm-padding: 1px
}
:root[uidensity="touch"] #PersonalToolbar {
  --uc-bm-padding: 6px
}

#PersonalToolbar:not([customizing="true"]):not([inFullscreen]) {
  margin-bottom: calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
  margin-left: 28px !important;
  margin-right: 12px !important;
  padding-top: 10px;
  width: calc(100% - 40px);
  top: 35px; /* Must be the same as the min-height of the URL/navbar */
  display: block;
  z-index: 5 !important;
  opacity: 1;
}
  
#PlacesToolbarItems > .bookmark-item {
	padding-block: var(--uc-bm-padding) !important;
  color: var(--theme-colors-icons);
  font-size: 80%;
  font-family: monospace;
}

/* Select bookmark bar behavior */
/* Comment out either one of these to disable that behavior */
  /* Show when urlbar is focused */
  #nav-bar:focus-within + #PersonalToolbar {
    position: absolute !important;
  }
  /* Show when cursor is over the toolbar area */
  #navigator-toolbox:hover > #PersonalToolbar{
    position: absolute !important;
  }

/* REMOVE FAVICONS FROM BOOKMARK BAR */
.bookmark-item > .toolbarbutton-icon {
    display: none !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]: {
    margin-inline-end: 0px !important;
}


/* AUTOHIDE VERTICAL TAB BAR USING TREE STYLE TABS EXTENSION */
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}

/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 28px;
}

:root {
    --wide-tab-width: 260px;
}

#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    overflow: hidden !important;
    position: relative !important;
    transition: all 200ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    z-index: 1;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
    transition: all 200ms !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    z-index: 1;
}

/* SHOW TAB FAVICONS IN GRAYSCALE EXCEPT FOR ACTIVE TAB */
#tab > .tab-icon, .tab-icon-image {
  filter: grayscale(1) brightness(0.5) contrast(1) invert(1) !important; /* Remove invert(1) to make it dark */
}

/* ############################################################# */
/* CSS FOR TREE STYLE TABS TO PASTE IN THE EXTENSION PREFERENCES */
/* ############################################################# */

/* Desaturate favicons in inactive tab */
/*
.tab:not(.active) .favicon {
  filter: grayscale(1) brightness(0.7) contrast(1) invert(1);
}
*/


/* Hide background of inactive tabs when tab bar is collapsed */
/*
.tab:not(.active) {
  border-left: 25px solid;
  border-color: var(--theme-colors-frame);
}
*/

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
/*
tab-item .label {
    margin-left: 15px;
    font-size: 95%
}
*/

/* Move favicons to the left */
/*
.tab .favicon {
  margin-left: -10px;
}

.tab.active .favicon {
  margin-left: -7px !important;
}
*/

/* Move .twisty to the right of favicons and adjust margins to reduce space on the left. */
/*
tab-item .twisty {
    margin-left: -4px;
    margin-right: 0px;
    left: 22px;
}
*/

/* Background color of the empty tab bar */
/*
:root,
#background {
  background: var(--theme-colors-frame);
}
*/

/* Show title of unread tabs with blue and italic font */
/*
.tab.unread .label {
  color: #5294E2 !important;
  font-style: italic !important;
}
*/

/* Add private browsing indicator per tab */
/*
.tab.private-browsing .label:before {
  content: "🕶";
}
*/

/* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */
/*
#tabbar {
  border: 0; overflow-y: scroll !important; margin-left: -14px !important; scrollbar-width: auto;
}
*/

/* Hide close buttons on tabs. */
/*
tab-item .closebox {
  visibility: collapse;
}
*/

/* Hide sound playing/muted button. */
/*
.sound-button::before {
  display: none !important;
}
*/

/* Hide new tab button and eliminate dead space on bottom */
/*
.newtab-button-box {
  display: none;
}
#tabbar {
  bottom: 0 !important;
}
*/

Firefox 89 UI tab overflow

Just updated to firefox 89, noticed that currently selected tabs now spill onto page content.

New Firefox Proton UI messes with the add-on right click bar

My firefox dev edition has recently been updated to the newest version in which they have introduced the proton UI, However the Almost McManjaro add-on seems to have some issues with the right click bar:

No Url Bar and With url bar are swicheitched in the readme.

No Url Bar and With url bar are swicheitched in the readme.

Possible css improvments [FF80] [Linux]

For example .tabbrowser-tabs doesn't seem to exist (if it ever existed) in FF80 so it can be probably removed.

And this:

.tabbrowser-tab::before {
    opacity: 0 !important;
    border-left: none !important;
}

.tabbrowser-tab::after {
    opacity: 0 !important;
    border-left: none !important;
}

Can be simplified to this:

.tabbrowser-tab::before,
.tabbrowser-tab::after {
    display: none !important;
}

There are few more potential improvements that I spotted but I don't have time to list them all.

Show favicon

Hey! Thank you for sharing your awesome work! How can I get favicons back with userChrome_OneLine?

Support for macOS

Hi, could you create a version for macOS? I've tried using the linux version, but it doesn't look how it should look - There's no transparency
Thanks

Please make one line version ASAP

please make it asap....

How do I enable scrollbar?

Composting in dropdown menu.

The contents of the dropdown menu are somewhat unreadable.
I have blur windows enabled through picom but it does not seems to take an effect in here.
Is there a way to let your compositor handle the firefox composting?
If not then is it possible to modify the source to configure opacity and color of the drop down in address bar?

Tab shadow and highlighting from Firefox Proton

Firefox proton causes tab highlighting when you hover over tabs as well as a shadow on the tab that is active.
Could you make these the same color as the set primary color because it ruins the look right now.

Proton became default on nightly a day or two ago and I can still disable it but itll become a problem when firefox fully moves to proton and the option to disable it gets removed.

HideURL userchrome doesn't appear to work on FF88

As the title says, the userChrome for hiding the URL bar doesn't work. It's still visible beneath the tab bar. Using the oneliner userChrome for now which works great

Border on tabs

There seems to be a 1px border on the tabs, my firefox version is Mozilla Firefox 113.0 - Arch Linux, see here the screenshot of it: https://imgur.com/a/eaMHic0

Context Menus and Right Click Menus

Colors in them are kinda wack, I'm going try to hotfix some of MaterialFox's code in.

URL bar not hiding.

I followed all the instructions as given and did not modify any code. Still the URL bar is not hiding.

Inconsistent naming of userChrome_NoURLBar.comp.css

All userChrome files have a double _ in their names, expect the NoURLBar.comp version. It would be neat to rename these to have a double _

Firefox Dev!!

how can I use this theme on Firefox Developer Edition ???