r/FirefoxCSS

I have previously used some code in my userChrome.css file (found on the internet back in the mists of time) which meant that I could change the colour of (1) the currently Active tab and (2) the Tab currently being Hovered Over.

For example, I might have 10 tabs showing, of which 1 (Orange) would be the Active one, and another 1 (Purple) would be the one I am currently Hovering over. The other 8 are my normal (Blue) colour. The Active tab colour would remain Orange when I moved away from that Tab.

However, since updating to 154.0, the Active tab changes back to my normal (Blue) colour as soon as I have moved away from it. So in the example above, I have 9 Blue tabs and 1 Purple tab. I can only determine which is the Active tab by hovering over it, at which point it changes to Orange.

Are any of the kind CSS experts on here able to suggest a solution? My CSS knowledge is minimal, I'm afraid.

https://preview.redd.it/7k3zzwgxx5kh1.png?width=1472&format=png&auto=webp&s=9b678d682f05d700c9d147aa815f785cc0bc13b6

-Combines the nav bar and tabs bar into one bar at the top of the window.

-Removes the colourful tab border and tab bar background.

-Makes the newly added compact mode way smaller.

-Works with light and dark theme.

Known Issue: If you resize the window too small, the tabs bar goes behind the nav bar. No idea how to fix this.

Note: This needs Nova theme enabled (about:config > search "nova" > set "browser.nova.enabled" to "true")

/* ==========================================================
   Combine Nav Bar and Tabs Bar
   ========================================================== */
#navigator-toolbox {
  display: grid !important;
  grid-template-columns: 35vw 1fr !important;
}

#nav-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: none !important;
  padding-block: 0 !important;
    :root[uidensity="compact"] & {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  }
}

#TabsToolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding-block: 0 !important;
  align-items: center !important;
    :root[uidensity="compact"] & {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  }
}

/* ==========================================================
   Move Menu Button To The Left
   ========================================================== */
#PanelUI-button {
  order: -999 !important;
  margin-inline-start: 0 !important;
}

#nav-bar-customization-target {
  & > :is(toolbarbutton, toolbaritem):first-child,
  & > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
    padding-inline-start: 0px !important;
  }
}

/* ==========================================================
   Compact Bar Height
   ========================================================== */
:root {
  --toolbarbutton-padding-inner-compact: 4px !important;
  --toolbarbutton-padding-inner-narrow: 4px !important;
}

toolbarbutton {
:root[uidensity="compact"] & {
  padding-block: 0 !important;
  max-height: 40px !important;
}
}

.tab-content {
:root[uidensity="compact"] & {
  padding-block: 0 !important;
}
}

#tabbrowser-tabs,
.tabbrowser-tab,
.tab-stack {
:root[uidensity="compact"] & {
  min-height: 26px !important;
}
}

.tab-background {
:root[uidensity="compact"] & {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
}

.tabbrowser-tab[fadein]:not([style^="max-width"]) {
  max-width: 10vw !important;
}

/* ==========================================================
   Minimalism Stuff
   ========================================================== */
#urlbar {
:root[uidensity="compact"] & {
  --urlbar-height: 26px !important;
}
}

.urlbar:not(moz-smartbar)[breakout] {
  &[breakout-extend][focused] > .urlbar-input-container {
    outline-color: transparent !important;
  }
  &[breakout-extend] > .urlbar-background {
    inset-inline: 0px !important;
    inset-block-start: 0px !important;
    inset-block-end: 0px !important;
  }
}

:root {
  /* Remove colourful tab border */
  --tab-border-color-accent: light-dark(#000000, #52525e) !important;
  --tab-selected-outline-color: light-dark(#000000, #52525e) !important;
  
  /* Shrink URL breakout border */
  --border-radius-xxlarge: 16px !important;
}

/* Remove Search Switcher */
.searchmode-switcher {
  visibility: collapse !important;
}

/* Hide Extension Name in the identity area unless hovered for half a second (updated for Fx80) */
#identity-box.extensionPage #identity-icon-labels,
#identity-box.extensionPage #identity-icon-label {
  visibility: collapse !important;
  transition: visibility 250ms ease-in-out;
}
#identity-box.extensionPage:hover #identity-icon-labels,
#identity-box.extensionPage:hover #identity-icon-label {
  visibility: visible !important;
  transition: visibility 250ms ease-in-out 500ms;
}

/* Hide Back and Forward buttons when disabled */
#back-button[disabled="true"],
#forward-button[disabled="true"] {
    display: none !important;
}

/* ==========================================================
   Some Fancy Tab Stuff
   ========================================================== */
.tabbrowser-tab:not([selected]) .tab-icon-image,
.tabbrowser-tab:not([selected]) .tab-text,
.tabbrowser-tab:not([selected]) .tab-throbber[busy] {
  opacity: 0.5 !important;
}

.tabbrowser-tab:hover .tab-icon-image,
.tabbrowser-tab:hover .tab-text {
  opacity: 1.0 !important;
}

.tabbrowser-tab .tab-close-button {
  visibility: hidden !important;
}

.tabbrowser-tab:hover .tab-close-button {
  visibility: visible !important;
}

/* ==========================================================
   System Buttons Tweaks
   ========================================================== */
.titlebar-buttonbox-container {
  margin-left: 21px !important;
  height: 100% !important;
}

.titlebar-spacer {
  display: none !important;
}

.titlebar-button {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* ==========================================================
   Remove Window Gap And Border
   ========================================================== */

.chrome-block {
  border: 0px !important;
}

.browserContainer {
  border: 0px !important;
}

#browser {
    :root[uidensity="compact"] & {
      padding-block-start: 0px !important;
      gap: 0px !important;
    }
  }

/* ==========================================================
   Theme Tweaks
   ========================================================== */
:root {
--toolbarbutton-icon-fill-attention: light-dark(gray, gray) !important;
--tab-background-color-hover: transparent !important;
}

.urlbar {
--urlbar-background-border-focused: transparent !important;
}

/* Remove colourful tab bar background */
#navigator-toolbox {
  background-image: none !important;
}

This is my first time working with FirefoxCSS. I'm using the userChrome.css file from the Firefox One-Liner CSS. I like the feel of it so far, but having an issue with the "traffic lights" showing up in the middle of the bar. See screenshot here:

https://preview.redd.it/g0emdv6rl5kh1.png?width=3024&format=png&auto=webp&s=64f9a53ec2e1b5b167986ff74ed7a0db79385b7f

I'd like just the traffic lights to stay on the left side like all other traffic light positions in macOS. I'm not sure what to input into the css to make it do that. I'm on macOS 26, Firefox version 154. Any tips on this?

I have an oled monitor so I wanted a feature that completely hid the sidebar. I asked AI and it created a userchrome file for me that auto hid the sidebar completely. However, the latest update broke the code and I am having a hard time getting it to work again. Can this be a future feature for Firefox, if not what solution have you come up with?

Hi, I've been having trouble playing video on most sites, including YouTube, Reddit and Instagram - yet, strangely, not when I'm streaming, like on BBC iPlayer. While my internet connection is decent, YT goes as far down as to 360p to keep the choppiness away.

I've tried changing settings in about:config, and toggled hardware acceleration on and off; it gets even worse when it's off. Turning off extensions like uBlock Origin and Control Panel for YouTube also didn't help.

Any ideas? I'm on the latest Nightly PC build, but the problem's been occurring in earlier versions as well.

Is it possible to make it so that .menupopup-arrowscrollbox won't effect #PlacesChevronPopup and #PlacesToolbarItems?

I have tried many ways to solve it and none of them worked.

As an example, I don't want this to effect #PlacesChevronPopup and #PlacesToolbarItems =

.menupopup-arrowscrollbox { 
    padding: 2px 4px !important; 
}

I have seen many solutions for this but they are all outdated because they never work for me.

A few years ago I had it working.

https://preview.redd.it/4tv9cmogkwih1.png?width=911&format=png&auto=webp&s=92f1f9bc97c796a6e0d90e968cf4946fed2fb1aa

#navigator-toolbox {
  display: grid !important;
  grid-template-columns: minmax(0, 35vw) minmax(0, 1fr) !important;
}


#nav-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: none !important;
}


#TabsToolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#PanelUI-button {
  order: -999 !important;
  margin-inline-start: 0 !important;
}

Hey guys

I'm new to Firefox. I love how it currently looks. But really don't like the way the new nightly build looks.

I want to begin customising my Firefox but am wondering a few things:

1. If I begin now, will what I create be broken when this new redesign comes into the main?
2. Will I be able to bring the look back to the way it is currently? (Only thing I'm using is compact mode on the tabs but I like them bigger as well so not picky).

Things I don't like about the new redesign:

- The circular tabs with the border around them. I love them as is right now

- The separation between the top bars and the main part of the screen

3. If the above are not possible, would sticking with the current version cause issues for me in the future? I really don't want to be stuck on an older version that can't make use of updates

4. Do you recommend maybe just starting with the nightly build? would there be any risk to me customising it and then my customisation breaks with a new version?

For the sake of just showing what it looks like for me now, this is how I have it right now without any modding:

https://preview.redd.it/vvc61508eyih1.png?width=1920&format=png&auto=webp&s=0ce1a3eeab4eee5727eb9d2c797a7e9efab14381

I am on Linux with CachyOS

Hello, I am make am trying to make a custom style sheet/css for my Dad to use on Firefox because he has poor eyesight and has trouble reading stuff on the computer. I have no idea what I am doing, this is my first time coding CSS, and I literally just started using Firefox 13 hours ago specifically for this reason.

I am using FF 153, Windows 11, "Light" theme, CSS link: https://pastebin.com/bE1e2Ni9

I am basically trying to increase the size of all the text (that I think my dad will see on a daily basis) that isn't already changeable in the normal Firefox settings menu.

So far, everything works (except the last line).

I need help getting the tab overflow, toolbar overflow, account, and extensions popup menus work. I am unable to find/figure out what CSS identifiers I need to use to edit them.

I do know about the "layout.css.devPixelsPerPx", and I would prefer to avoid it since I am trying to maximize the available "content" area of the screen (for when we increase the font size in settings and the formatting will inevitably get screwed up)

Also, if you have any other ideas/additions you think would be good for this use case, I would be very grateful.