firefox-minimal-compact-css

My personal Firefox theme.

Used theme: Dark Matched

Features

• Compact, rounded UI with more Icons
• Shows amount of tabs on the Sidebery icon
• Doesn't show tabs when there is only one tab
• Use Sidebery Icon or set a hotkey via addon settings for Open/Close sidebar panel to switch between horizontal and vertical tabs
• Menu highlights matching to my KDE Plasma theme
• Bouncing indicator line while page is loading
• Move menu icon to the left
• Resizable Sidebar with minimal splitter that only shows on hover
• Use SF Pro Display font if installed

Installation

1. Open Firefox and go to about:config

2. Set toolkit.legacyUserProfileCustomizations.stylesheets to true

3. Set browser.compactmode.show to true

4. Install Sidebery

5. If you have used Sidebery before, you should use the minimal config otherwise use the full config

   Minimal Config

   • In Sidebery settings, enable Add preface to the browser window's title if Sidebery sidebar is active
   • Set the preface value to the invisible character between these markers: ​
   • In the Styles editor, paste the contents of sidebery.css

   Full Config

   • In Sidebery settings, click on Help
   • Select Import addon data
   • Import the file sidebery-data.json

6. Go to about:support and click on Open Directory under Profile Directory

7. Clone the repository in this folder by opening a terminal and running git clone --recursive https://github.com/D3SOX/firefox-minimal-compact-css.git chrome

8. Restart Firefox

9. Open the menu then click on More tools -> Customize toolbar.... On the bottom left set the Density to Compact

10. Then depending on your preference put in the following items in the top bar
    (Links are addons, you have to install and pin them first, the theme replaces the icons of these addons)

    • Close Tab Button
    • Sidebery
    • Simple New Tab Button
    • Back, Forward, Reload
    • Reload Skip Cache Button
    • Downloads (right click and uncheck Hide Button When Empty if you want that)
    • URL Bar, Addon-specific Icons, Extensions icon

11. Enjoy!

Optional: Smooth Scrolling

I also like to configure smooth scrolling similar to Zen. To do that, go to about:config and set

• general.smoothScroll.msdPhysics.continousMotionMaxDeltaMS to 12
• general.smoothScroll.msdPhysics.enabled to true
• general.smoothScroll.msdPhysics.motionBeginSpringConstant to 600
• general.smoothScroll.msdPhysics.regularSpringConstant to 650
• general.smoothScroll.msdPhysics.slowdownMinDeltaMS to 25
• general.smoothScroll.msdPhysics.slowdownSpringConstant to 250

Credits

• Partially based on ArcWTF
• Uses CSS from firefox-csshacks and CustomCSSForFx