Cascade for Argon - experimental

A minimalistic and keyboard centered userChrome

Cascade aims to remove a lot of the subjective clutter default Firefox comes with. The theme is also highly inspired by the stylistic choices of SimpleFox 🦊 by Miguel Ávila.

Installation • Customisation • Integrations • Keyboard Shortcuts

If you like the original dev's work, you can buy them a coffee to fuel further development.

---

Table of Contents

• Installation
• Customisation
  • Colours
  • Mouse Support
  • Reorder the UI
  • URL Bar Customisation
  • Custom Breakpoint
• Integrations
  • Catppuccin
  • Vertical Tabs
  • Side View
• Keyboard Shortcuts

How to install Cascade

1. Install the base theme: https://addons.mozilla.org/en-US/firefox/addon/argon-experimental/
2. Type about:config into your URL bar. Click on the I accept the risk button if you're shown a warning.
3. Seach for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.
4. Go to your profile folder:

• Linux: $HOME/.mozilla/firefox/######.default-release/
• MacOS: Users/[USERNAME]/Library/Application Support/Firefox/Profiles/######.default-release
• Windows: C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\######.default-release

5. Copy the chrome folder into your profile and restart¹⁾ Firefox.
6. Customise everything to your liking. (optional)

^{1) If you're running into trouble with a restart seemingly not working you can navigate to about:profiles and click the »Restart Normally«-Button.}

Note ⚠️ Attention Windows users.
It seems like flexbox (within the Firefox UI) is inheritly broken on Windows. In order to fix the One-Line layout on windows please substitute the responsive include with the version for windows. This will ensure that the layout doesn't break but since it can't use flexbox the UI reordering does not work.

Customise Cascade to your liking

Note If you're using Cascade I highly recommend to remove all clutter from the Navigation Bar area. To do so rightclick your bar and go into the customisation settings. You can move all the icons freely which allows you to place your Addons within the Personal Toolbar for example.

Colours

By default Cascade loads it's own colours which can be customised to fit your desired by simply changing the colours include. If you want to use Cascade with the Browsers default colours, or custom Firefox Themes like Firefox Color or even Addons like Adaptive Tab Bar Color simply remove the colours include from the userChrome.css file.

Note Are you having issues with the colours not applying?
A workaround fix for this issue is to remove the colour include from the main file and use Firefox Color to apply this custom theme to apply Cascades default colours.

Mouse Support

(I've already enabled it)

Sort the UI like you want it

In the Cascade config you can set different ways of how the UI elements are layed out. The URL Bar, Tab Bar and Personal Toolbar can be arranged in different stacks; do you want the Toolbar to be on top or the URL and Tab Bar? Tabs on the left with the URL Bar to the right? No problem!

/*  Position of the Personal Toolbar
 *  possible values:
 *  0 – toolbar on top
 *  4 – toolbar on bottom
 */ --uc-toolbar-position: 0;

/*  Position of the URL Bar
 *  possible values:
 *  1 – tabs on the right
 *  3 – tabs on the left
 */ --uc-urlbar-position: 1;

Previews

URL Bar Customisation

You can freely set your desired URL Bar width from within the config where the min-width setting is the default URL Bar width and max-width is the width of the focused URL Bar. Those can be different in order to make more room for the URL Bar when you actually want to use it.

/*  Width of the URL Bar for the Oneline layout
 *  If enabled the max-width is applied on focus
 *  otherwise the URL Bar will always be it's min-width
 */ --uc-urlbar-min-width: 30vw;
    --uc-urlbar-max-width: 45vw;

If you set the min-width to 0vw and the max-width to 100vw you can also completely hide the URL Bar as long as it's not focused.

Oneline Breakpoint

If you'd like to have Cascade transition into it's Oneline layout on either smaller or larger sizes you can simply do so by changing the breakpoint value in the responsive include file. If you don't want Cascade to break to the Oneline layout at all remove it from the userChrome.css file

@media (min-width: 1000px) {

  […]

}

Integrations

Catppuccin

This simply offers premade colour configs for Catppuccin. There are variants for each dark mode flavour — Mocha, Macchiato and Frappé — all of them come with Latte as their light mode.

Individual Previews

How to set it up

1. Copy your desired flavour config from integrations/catppuccin into the includes folder
2. Replace the colour include in the userChrome.css with your desired flavour file

Alternatively you can also just copy the contents of your desired flavour config into the colour config file.

Tab Center Reborn — Vertical Tabs

How to set it up

1. Download the Tab Center Reborn Addon
2. Copy the contents of integrations/tabcenter-reborn/tabcenter-reborn.css into the Addons settings
3. Import the integrations/tabcenter-reborn/cascade-tcr.css into the userChrome.css

Side View

Mozilla's Side View is an Addon that allows you to open a second Website within the Sidebar of your Browser. Cascades integration gets rid of the header, moves the »Close«-Button to the bottom, and allows the sidebar to be up to 50% of your browsers width.

How to set it up

1. Download the Side View Addon
2. Import the integrations/side-view/cascade-sideview.css into the userChrome.css

Keyboard Shortcuts

This userstyle was made for a keyboard centered usage, like Tilling Window Manager users or just cool people that loves them! These are some of the shortcuts that are available:

Windows / Linux	MacOS	Description
Ctrl + L	Command + L	focuses the URL bar
Ctrl + B	Command + B	toggles the bookmark sidebar
Ctrl + Shift + B	Command + Shift + B	toggles the personal toolbar
Alt + Left Arrow	Command + Left Arrow	navigates backwards in your history
Alt + Right Arrow	Command + Right Arrow	navigates forwards in your history
Ctrl + T	Command + T	opens a new tab
Ctrl + Shift + T	Command + Shift + T	reopens the last closed tab
Ctrl + W	Command + W	closes the current tab
Ctrl + Page Up or Ctrl + Shift + Tab	Command + Option + Left Arrow	navigates to the previous tab
Ctrl + Page Down or Ctrl + Tab	Command + Option + Right Arrow	navigates to the next tab

For the full list of shortcuts visit the official Firefox website.