Giter Club home page Giter Club logo

cascade's Introduction



Cascade

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.

This theme was known previously as »ag.proton« — but let's be honest: That sounds hella boring. What you get is a really simple adaptive layout that works well with the new Proton UI. On larger window resolutions Cascade will have a oneline layout which displays the URL bar and tab list next to each other. Smaller resultions will stack both UI elements on top of each other for better readability.

InstallationCustomisationKeyboard Shortcuts


Stargazers Issues Discord



Preview Image showing both the one-line style and the style for smaller screensizes.

If you're looking for a mouse-friendly clone please check out Waterfall by Clément!
A big »Thank you« to Nick, Abdallah, Benyamin and Wael for all the great suggestions and improvements!

--

If you really like my work you can buy me a coffee to fuel further development.
While appreciated it's ofc by no means necessary. ♡

Buy me a Coffee <3



How to use a userChrome.css theme

  1. Type about:config into your URL bar. Click on the I accept the risk button if you're shown a warning.
  2. Seach for toolkit.legacyUserProfileCustomizations.stylesheets, layers.acceleration.force-enabled, gfx.webrender.all and svg.context-properties.content.enabled and set them to true.
  3. 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
  4. If it doesn't exist already create a folder called chrome.
  5. Copy your desired userChrome.css into that folder.
  6. optional Customise everything to your liking.



Customise Cascade to your liking

Breakpoint

Edit the min-width value to change the breakpoint size on which Cascade will switch to the oneline layout.

@media (min-width: 1000px) {
    
    [...]
    
}

Colours

You can use your own colours for Cascade. To do so just edit the following block on top of the config section. By default it will use a dark theme but colour suggestions for light theme users are given as well. Please also change Firefox' theme in your settings to make sure you get the best compatibility.

If you're using a custom colour scheme (e.g. Firefox Color) you can comment out the entire colour-definitions block to use the default colours provided by the Theme Addon.



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 shows you the bookmark sidebar
Ctrl + Shift + B Command + Shift + B shows you the bookmark 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.‎



cascade's People

Contributors

unseen-ninja avatar heiwiper avatar apprehensions avatar benyaminl avatar

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.