https://github.com/natoboram/firefox-tab-rope

Transforms Firefox' tab rope into a proper tab bar.
https://github.com/natoboram/firefox-tab-rope

firefox firefox-css firefox-proton firefox-tweaks

Last synced: 14 days ago
JSON representation

Transforms Firefox' tab rope into a proper tab bar.

• Host: GitHub
• URL: https://github.com/natoboram/firefox-tab-rope
• Owner: NatoBoram
• License: gpl-3.0
• Created: 2021-06-04T15:22:48.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-27T20:52:28.000Z (over 1 year ago)
• Last Synced: 2024-11-29T01:43:54.185Z (2 months ago)
• Topics: firefox, firefox-css, firefox-proton, firefox-tweaks
• Language: CSS
• Homepage: https://redd.it/ns5hyk
• Size: 133 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Firefox Tab Rope

Transforms Firefox' tab rope into a proper tab bar.

![Alpenglow](screenshots/Alpenglow.png)

![Dark](screenshots/Dark.png)

![Firefox B](screenshots/Firefox%20B.png)

![Light](screenshots/Light.png)

## Changes

I upgraded the hover highlight effect from `11%` to `12%` and applied to it the non-hover version but at `4%`.

Darker than `4%`, you don't really see it and it can be a bit hard on the eyes. But at `4%`, the `11%` from the hover is a bit too close, so I bumped it.

While it's specifically made in dark mode and optimized for my own use case, *it works with all themes*. You'll probably want to bump that `4%` to `5%` if you have a busy theme. Edit the two percentages to fit your taste.

## Installation

1. In `about:config`, enable `toolkit.legacyUserProfileCustomizations.stylesheets`

2. `about:support` / *Profile Directory* / **Open Directory**

3. Create folder `chrome` containing the file `userChrome.css`

4. Paste the code below in `userChrome.css`

5. In `about:restartrequired`, click on **Restart Firefox**

```css

.tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected=true], [multiselected]) {

	background-color: color-mix(in srgb, currentColor 12%, transparent);

}

.tabbrowser-tab>.tab-stack>.tab-background:not([selected=true], [multiselected]) {

	background-color: color-mix(in srgb, currentColor 4%, transparent);

}

```