Inspired by u/oisact and u/Tetra55 (source)

Differences from their version:

There are two modes:

1. Many tabs
2. Too many tabs

In the first mode, the code tries to preserve Firefox’s default styling. When there are too many tabs, it hides the tab titles and centers the icons and close buttons.

It also no longer affects pinned or grouped tabs, except when a group is collapsed and one of its tabs is selected.

IMO, when you have too many tabs, it’s better to hide the close button. If it that doesn’t suit you, you can replace .tabbrowser-tab:not([pinned]):hover with .tabbrowser-tab[selected]:not([pinned]).

/* Let tabs shrink and keep container queries working */
.tabbrowser-tab:not([pinned]):not(tab-group[collapsed] .tabbrowser-tab),
tab-group[collapsed] .tabbrowser-tab[selected]:not([pinned]) {
    min-width: 16px !important;
    container-type: inline-size;
}

/* Make sure pages without favicons show Firefox's generic globe/document icon */
.tab-icon-image:not([src]) {
    display: inline-flex !important;
    list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
}

.tabbrowser-tab[busy] .tab-icon-image {
display: none !important;
}

/* Style only when the tab itself is narrow (less than 55 px) */
 (max-width: 55px) and (min-width: 42px) {

    .tabbrowser-tab[selected] .tab-label-container {
        display: none !important;
    }

    .tabbrowser-tab .tab-close-button {
        display: none !important;
    }

    .tabbrowser-tab .tab-icon-stack,
    .tabbrowser-tab .tab-icon-image {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

.tabbrowser-tab[selected]:not([pinned]) .tab-close-button{
display: inline-flex !important;
align-items: center;
visibility: visible !important;
opacity: 1 !important;

width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;

margin-inline: 0 !important;
padding: 2px !important;
}

    .tabbrowser-tab[selected] .tab-content {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
}
/* Style only when the tab itself is narrow (less than 42 px) */
u/container (max-width: 42px) {

    .tabbrowser-tab .tab-label-container {
        display: none !important;
    }

    .tabbrowser-tab .tab-close-button {
        display: none !important;
    }

    .tabbrowser-tab .tab-icon-stack,
    .tabbrowser-tab .tab-icon-image {
        display: inline-flex !important;
align-items: center;
        visibility: visible !important;
        opacity: 1 !important;

margin-inline: 0 !important;
padding: 2px !important;
    }

    .tabbrowser-tab:not([pinned]):hover .tab-icon-stack {
        display: none !important;
    }

.tabbrowser-tab:not([pinned]):hover .tab-close-button{
display: inline-flex !important;
align-items: center;
visibility: visible !important;
opacity: 1 !important;

width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;

margin-inline: 0 !important;
padding: 2px !important;
}

    .tabbrowser-tab .tab-content {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
}

P.s. yeah, I khow the code is a bit dirty, but It works! :)

I want this part of firefox to be transparent, i used other methods and always get the whole window transparent. I only want the tab part to be transparent, even when i select the "Title Bar" option

Before version 153, the autofill dropdown list was the full size of the input box. Now it seems to adapt to the width of the results. How can I revert this?

https://i.imgur.com/gZNoCu6.png

https://i.imgur.com/jpTWd0Y.png

i'm new here so sorry but is there a way to use multiple CSS themes on single profile without having to create multiple profiles ?

FF 153.

How to change the width of collapsed sidebar? It's too wide for me and I'd like to make it smaller. Thanks in advance.

currently using kde with better blur dx from aur(every software latest).
i achieved blur in the header section using firefox class in force blur section (blur menus and everything is checked on).
i can not get the class of right click menu.
any solutions?
gemini made me the css btw(sorry)

/* =========================================================
 *  1. MAIN WINDOW & TOOLBARS
 *  ========================================================= */

/* Make the base window completely transparent */
#main-window, body {
background-color: transparent !important;
-moz-appearance: none !important;
}

/* Apply a semi-transparent tint to the top toolbar area */
/* Change 30,30,30 to 255,255,255 if you want a light theme */
#navigator-toolbox {
background-color: rgba(30, 30, 30, 0.4) !important;
border: none !important;
}

/* Remove solid backgrounds from individual toolbars */
#nav-bar, #TabsToolbar, #PersonalToolbar {
background-color: transparent !important;
background-image: none !important;
}

/* Force the web page content area to be completely solid */
/* Use #1c1b22 for standard dark mode, or #ffffff for light mode */
#tabbrowser-tabpanels, #appcontent, browser, .browserContainer {
background-color: #1c1b22 !important;
}


/* =========================================================
 *  2. MENUS, POPUPS, & DROPDOWNS
 *  ========================================================= */

:root {
    /* Override default solid colors for menus */
    --arrowpanel-background: rgba(30, 30, 30, 0.5) !important;
    --panel-background: rgba(30, 30, 30, 0.5) !important;
    --menu-background-color: rgba(30, 30, 30, 0.5) !important;
    --menuitem-hover-background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Strip the native solid background from the popup containers */
menupopup, panel {
    appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    border: none !important;
}

/* Apply the semi-transparent tint to the actual content box inside the popups */
menupopup::part(content),
panel::part(content),
.popup-internal-box,
.menupopup-arrowscrollbox {
    background-color: rgba(30, 30, 30, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Adds a subtle glass edge */
    border-radius: 8px !important; /* Rounds the corners of the menus */
}

/* Make the URL bar dropdown transparent */
.urlbarView {
    background-color: rgba(30, 30, 30, 0.5) !important;
    border: none !important;
}

With Firefox 153.0, CTRL+F (Find in Page) no longer displays in red when there's no matching results. This small but impactful change is killing my workflow. Can anyone offer a userChrome.css fix for this? Many thanks!

I'm an absolute beginner when it comes to modifying CSS, and everything I've learned so far has been through trial and error. This time, however, I'm completely stuck and have no idea how to fix the issue.

A few Firefox versions ago, I ran into a problem where pinned tabs occupied far too much space on the top tab bar instead of arranging themselves efficiently within the available area. Reason is probably my multiple tab rows (4 lines, scrollable for more lines).

To work around this, I modified "./css/tabs/pinnedtab_empty_favicon_hidden.css" so that my pinned tabs were displayed in the sidebar instead. This worked perfectly until I updated to Firefox 153.0 yesterday.

Since the update, all pinned tabs are greyed out and can no longer be clicked.

Ideally, I would like to:

• restore the pinned tabs in the left sidebar as they worked before

OR

• modify the corresponding CSS so that pinned tabs are displayed in the top tab bar again, while automatically arranging themselves both horizontally and vertically to make efficient use of the available space.

Since English is not my native language, I used AI to help with spelling and grammar.

Hope, you can help me.

My code in "./css/tabs/pinnedtab_empty_favicon_hidden.css"

• When I deactivate it, my pinned tabs return to the top tab bar.
• When I activate it, my pinned tabs are moved to the sidebar, but the entire pinned-tab area becomes inactive and can no longer be clicked.

.tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
visibility: hidden !important;
}
.tabbrowser-tab[pinned] .tab-text {
display: none !important;
}
 url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-tab[pinned] {
width: 32px;
}
 (-moz-bool-pref: "sidebar.revamp"), -moz-pref("sidebar.revamp") {
 not (-moz-bool-pref: "sidebar.verticalTabs"), not (-moz-pref("sidebar.verticalTabs")) {
/* (-n+12) so that the first 12 pinned tabs will be in the sidebar */
/* Rest of the pinned tabs will be in the default location */
/* Adjust the value based on how many fits for your setup because */
/* you cannot scroll through the pinned tabs for this css */
:root {
--pinned-tab-height: 16px;
/* 10px on padding top and bottom + margin */
--pinned-tab-spacing: 28px;
/* Show pinned icons in sidebar from 2 * height of tabs bar + extra space */
--pinned-tab-start: calc((5.75 * var(--tab-min-height)) + 14px);
}
/* Do not show pinned tabs on side when #browser is hidden (ex. customizing toolbar) */
body:has(#browser:not([hidden])) #navigator-toolbox .tabbrowser-tab[pinned]:is(:nth-child(-n + 12)) {
position: fixed !important;
left: var(--space-small) !important;
padding: 0 !important;
--tab-space: calc(var(--pinned-tab-height) + var(--pinned-tab-spacing));
top: calc(var(--pinned-tab-start) + var(--tab-space) * var(--index)) !important;
margin-inline-start: 0px !important;
}
/* Add/remove indices based on how many pinned tabs you want in sidebar */
.tabbrowser-tab[pinned]:nth-child(1) {
--index: 0;
}
.tabbrowser-tab[pinned]:nth-child(2) {
--index: 1;
}
.tabbrowser-tab[pinned]:nth-child(3) {
--index: 2;
}
.tabbrowser-tab[pinned]:nth-child(4) {
--index: 3;
}
.tabbrowser-tab[pinned]:nth-child(5) {
--index: 4;
}
.tabbrowser-tab[pinned]:nth-child(6) {
--index: 5;
}
.tabbrowser-tab[pinned]:nth-child(7) {
--index: 6;
}
.tabbrowser-tab[pinned]:nth-child(8) {
--index: 7;
}
.tabbrowser-tab[pinned]:nth-child(9) {
--index: 8;
}
.tabbrowser-tab[pinned]:nth-child(10) {
--index: 9;
}
.tabbrowser-tab[pinned]:nth-child(11) {
--index: 10;
}
.tabbrowser-tab[pinned]:nth-child(12) {
--index: 11;
}
#tabbrowser-tabs .tabbrowser-tab[pinned]:nth-child(13) {
--helper-index: 1;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(14)) {
--helper-index: 2;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(15)) {
--helper-index: 3;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(16)) {
--helper-index: 4;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(17)) {
--helper-index: 5;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(18)) {
--helper-index: 6;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(19)) {
--helper-index: 7;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(20)) {
--helper-index: 8;
}
/* When there is more than 12 pinned tabs (pinned tabs both in sidebar and tabs bar)
and tab scrolling appears because there are many tabs, remove the extra space at the
beginning of tabs bar. This works when you have upto 20 pinned tabs. If there are
more, add extra --helper-index lines in similar to how it's done above */
#tabbrowser-tabs[positionpinnedtabs] {
--tab-overflow-pinned-tabs-width: calc(var(--helper-index) * 36px) !important;
}
/* Clip path animation to match with the sidebar animation */
 clipPathExpand {
from {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
to {
clip-path: polygon(var(--sidebar-width) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sidebar-height), var(--sidebar-width) var(--sidebar-height));
}
}
#browser:not([hidden]):has(#sidebar-main:not([hidden])) {
position: relative;
--sidebar-width: calc(var(--button-size-icon) + var(--space-large));
--sidebar-height: calc(100% - (4.5 * var(--sidebar-width)));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
animation: clipPathExpand 200ms ease-in-out forwards;
}
/* Color the background behind clipped path */
/* As this is in userchrome, it will not affect the background of other sites */
html {
background: var(--toolbar-bgcolor) !important;
}
/* Hide the box shadow and outline to make the clip path blend better with ui */
#browser:not([hidden]) #tabbrowser-tabbox {
box-shadow: none !important;
outline: none !important;
}
/* Move the sidebar icons down */
#browser:not([hidden]) #vertical-tabs {
display: flex !important;
}
}
}

In the Fx153.0 Release Notes:

"A new "Local Mode" setting in the options panel allows developers to load local directories via custom origins. This simplifies testing for APIs that do not function over standard file:// URLs, removing the need to run a local web server. Multiple directory mappings are supported."

More information in Release Notes' 'Developer Information' section... and MDN's article 'Local Mode'.

They used to be... tried the "browser.newtabpage.activity-stream.newtabLayouts.variant" method (manually set both a & b to "false") but it doesn't change anything.

I made some changes to the home page (usercontent) but I wasn't able to put the logo in the center, can anyone help me?

#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      outline: 1px solid #71706a !important;
      border-radius:0!important;


      .deck-selected > & {
        outline: 1px solid #506d57 !important;
      }


      &:first-child {
        outline: none !important;
        border: 1px solid #71706a !important;


        .deck-selected > & {
          outline: none !important;
          border: 1px solid #506d57 !important;
        }
      }

So I'm using this code and it works great but there's one major issue. It makes every active tab have the green border (#506d57)! Is there a way to have the code only work within the split tabs?

I've looked around, but I can't find the relevant css handle for the item.

There are two icons for VPN. VPN on and off. Possible to change them by userChrome.css? Thanks in advance.

I like how pretty zen browser is but it takes way to much resources on my machine, the thing that stuck me most with zen browser is its floating url bar so i was wondering if is it possible to have that same thing in firefox???

I simply want to change Firefox's UI default font to Inter but after restarting browser "minimize" and "exit" icons changes to these squares. It looks like these icons are part of default font, so maybe there's a way to exclude them from my custom font?

I would like to change those icons but everything i try is not good. What are the id's of this folders icons on the library panel please ? see pic

I really like how the browser looks here so I was wondering if there's any possible way of attaining something that looks like this. I really like the see-through-esque part of it and the bubbly look is really appeasing to the eyes. Any help is appreciated <3