/vagari.firefox

🦊 custom firefox css using vagari design framework

Primary LanguageCSSGNU General Public License v3.0GPL-3.0

☄️ vagari.firefox 🦊

     


  → a port of the vagari color scheme / design framework for firefox custom css.

Video showcase

with commentary:

13.29.15.04-12.2363x1501-fullaudio.mp4

no audio:

output.webm


🧭 Design Direction

At this time, the goal is to create a sleek keyboard-centric interface. Many clickable elements are purposely removed in order force adoption of keyboard shortcuts, rather than relying on the mouse.

Anything not culled is mostly just basic themeing... colors, transitions, sizing, and such.

Eventually, a GTK port of vagari will be made, which will prompt a refactor in order priortize GTK settings, only falling backt to legacy toolkit when necessary. For that reason, much of the css is hardcoded, obtuse, and probably could be done in a much better way.

Frankly put, I have little need for most of the UI elements I just want it to match my theme for the time being.

Additionally, long ago I copied the work from this Moonlight userChrome theme.

Definitely check it out, as it might be easier to modify than mine, as I haved disable/hidden many elements. I don't think it's been maintained though, so keep that in mind.

Also, check out /r/FirefoxCSS for more guideance/ideas!

Note: updates often break stylesheets. Stay vigilant!


🧰 Installation

  1. Find Profile Directory ↓
    • In the URL bar type: about:profiles
    • Under Default Proile, locate Root Directory
    • Click Open Directory
    • E.g., on linux, ~/.mozilla/firefox/{some unique identifier here}.default

  2. Clone repository into the Chrome directory
    3. # in the directory mentioed above
mkdir chrome && cd chrome
dir=$(pwd)

# clone repo in your preferred locatation
git clone https://github.com/nosvagor/vagari.firefox.git
ln -sfn path/to/vagari.firefox/css/* $dir

    One could simply extract contents from repo into said chrome directory under firefox profile, but linking the files symbolically allows one to easily track updates.


  3. Make sure legacy toolkit is enabled
    • In the URL bar type: about:config
    • toolkit.legacyUserProfileCustomizations.stylesheets = true
    • Restart the browser

  4. (Optional) Enable live debug
    • Open developer window (F12)
    • Go to Settings (F1)
    • Under Advance settings:
      • Enable browser chrome and add-on debugging toolboxes
      • Enable remote debugging
    • Restart the browser
    • Adjust style on the fly using Ctrl + Alt + Shift + I
    • Custom settings can be edited and in these two files under the style editor tab:
      • userChrome.css
      • userContent.css
    • Additional custom files are denoted with a preceding udnerscore (e.g., _tab-bar.css). This is for organizational reasons; they are simply imported into userChrome.css. Feel free to edit, create, ignore, or reorganize these to your liking. Pull requests are welcome.

bonus preview (whole desktop) ⚠ loud ⚠️:

13.44.03.04-12.fullscreen-fullaudio.mp4