https://github.com/deciare/firefox-css

Customisations to Firefox via userChrome.css
https://github.com/deciare/firefox-css

Last synced: about 2 months ago
JSON representation

Customisations to Firefox via userChrome.css

• Host: GitHub
• URL: https://github.com/deciare/firefox-css
• Owner: deciare
• License: mpl-2.0
• Created: 2023-12-17T04:11:27.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-07T10:02:27.000Z (7 months ago)
• Last Synced: 2024-04-28T03:25:39.624Z (5 months ago)
• Language: CSS
• Size: 1.1 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Deciare's Firefox CSS hacks

A collection customisations to Firefox and Sidebery implemented via userChrome.css and [Sidebery](https://addons.mozilla.org/en-US/firefox/addon/sidebery/)'s built-in Style Editor.

# Setting up userChrome.css

Refer to https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/ for a guide on how to set up **userChrome.css** with live debugging.

# Modules

This repository is set up as a collection of modules that can be independently enabled by importing them into **userChrome.css**. For example, the following lines in **userChrome.css** will enable the toolbar vibrancy effect on macOS and move tab close buttons to the left:

```css

@import url(firefox/macVibrantToolbars.css);

@import url(firefox/tabCloseButtonOnLeft.css);

```

## hideTabBar.css

![Screenshot of hidden tab bar](assets/images/hideTabBar.png)

Hides the tab bar. Best used with a vertical tabs extension such as [Sidebery](https://addons.mozilla.org/en-US/firefox/addon/sidebery/) or [Tree Style Tab](https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/).

Working as of Firefox 126.

## macVibrantToolbars.css

![Screenshot of vibrant toolbars](assets/images/macVibrantToolbars.png)

On macOS, enables a vibrancy effect on the tab toolbar, navigation bar, and bookmarks toolbar.

You must also enable the following preferences in [about:config](about:config):

- browser.theme.macos.native-theme

- widget.macos.titlebar-blend-mode.behind-window

Working as of Firefox 126.

## tabCloseButtonOnLeft.css

![Screenshot of tab close button on left](assets/images/tabCloseButtonOnLeft.png)

Moves the tab close buttons to the left side of each tab. When the pointer hovers over a tab, the tab's favicon is replaced with a close button.

Working as of Firefox 120.

## sideberyMods.css

![Animation for Sidebery auto-hide on left](assets/images/sideberyMods.gif)

Causes the Sidebery sidebar to auto-hide on the left edge of the browser window.

For this module to work well, see also **sidebery/sidebar.css**.

Based on [Redundakitties/colorful-minimalist](https://github.com/Redundakitties/colorful-minimalist/).

Working as of Firefox 120 and Sidebery 5.

## sideberyModsOnRight.css

![Animation for Sidebery auto-hide on right](assets/images/sideberyModsOnRight.gif)

Requires **sideberyMods.css** to also be enabled. Causes the Sidebery sidebar to auto-hide on the right edge of the browser window instead of the left.

Working as of Firefox 120 and Sidebery 5.

## sidebery/sidebar.css

Adjusts styling in Sidebery to work better with **sideberyMods.css**, and adds some optional behaviours.

To apply this stylesheet, copy and paste it into Sidebery's built-in styles editor. To access the style editor, open **Sideberry Settings** -> **Styles editor**.

Comment or uncomment sections within the styles editor to disable or enable optional behaviours.

- Spaces elements further apart when **Appearance -> Density** is set to "relaxed", to accommodate a collapsed width of up to 42px.

- Move tab close buttons to the left when close buttons are set to show "on mouse hover".

- Move tab container indicators to the left, so that they are visible when auto-hiding on the right.