explaingit

black7375/firefox-ui-fix

★ 5,807SCSSAudience · generalComplexity · 2/5Setup · moderate

TLDR

Lepton is a collection of CSS tweaks for Firefox that tighten the UI, improve tab highlighting, and offer alternative layouts like tabs on the bottom or a vertical sidebar.

Mindmap

mindmap
  root((firefox-ui-fix))
    What it does
      Refines Firefox UI look
      Compact tab and menu spacing
      Alternative tab layouts
    Tech Stack
      CSS and SCSS
      Firefox userChrome
      user.js config file
    Use Cases
      Compact UI density
      Vertical tab sidebar
      Dark mode improvements
    Audience
      Power users
      Firefox customizers
      Designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Tighten Firefox's tab bar and menus to show more content on screen with less wasted space.

USE CASE 2

Switch to a vertical tab sidebar or move tabs to the bottom of the browser window.

USE CASE 3

Improve contrast and icon appearance in Firefox's light and dark modes via custom CSS.

Tech stack

CSSSCSS

Getting it running

Difficulty · moderate Time to first run · 30min

Requires enabling toolkit.legacyUserProfileCustomizations.stylesheets in Firefox's about:config before the CSS takes effect.

In plain English

Firefox UI Fix, also called Lepton, is a collection of CSS style adjustments for the Firefox web browser. CSS is the language that controls how things look on screen, and Firefox allows advanced users to apply custom CSS to its own interface, including the tab bar, menus, and panels. This project takes that feature and uses it to refine the look of Firefox's Proton design, which Mozilla introduced in Firefox 89. The changes cover a range of visual details: tighter padding in tabs and menus to make more content visible on screen, improvements to how the selected tab is highlighted, adjustments to icon appearances in the context menu and sidebar panels, better contrast in light and dark modes, and alternative tab bar layouts such as tabs on the bottom or a vertical tab strip along the side. Each feature is optional and controlled through a user.js settings file that you copy into your Firefox profile folder. Installation involves placing two files into the right directory inside your Firefox profile: a userChrome.css file that imports the styles, and a user.js file that sets the configuration options. The README notes that some settings can conflict with each other and that changes require a browser restart because Firefox does not apply CSS changes in real time. The project requires Firefox 89 or later and is written in SCSS, which is a style language that compiles down to plain CSS. The source is on GitHub and includes a wiki with installation guides, screenshots, and a tips section.

Copy-paste prompts

Prompt 1
How do I install the Lepton firefox-ui-fix userChrome.css into my Firefox profile on macOS or Linux?
Prompt 2
Which user.js settings do I need to enable vertical tabs in the Lepton Firefox UI Fix project?
Prompt 3
What firefox-ui-fix options can I combine to get a compact, dark-mode Firefox UI with a vertical tab strip?
Prompt 4
Show me how to enable Firefox's userChrome.css support so that Lepton's styles actually apply after browser restart.
Open on GitHub → Explain another repo

← black7375 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.