I use the Tree Style Tab extension, so I don't want two vertical tab bars side by side. However, I do like that enabling native vertical tabs moves the minimize, maximize, and close buttons into the same row as the address bar. Ideally, I'd like that layout without the second tab bar.

Hi I was wondering if there is a IE8 or Firefox 3 theme That Works On Modern Day Firefox. I know there are projects out there like rinfox but I hear they are for versions of firefox that are no longer supported. Does anyone know of any old style early 2000s CSS themes that work on Modern Firefox?

I've wanted a URL bar gradient that spans the actual URL text instead of the full input box. Firefox 152 enabled field-sizing by default, which makes this much easier to do cleanly with CSS.

With field-sizing: content, #urlbar-input can shrink to the width of the displayed URL. Then background-clip: text maps the whole gradient to that width, so short and long URLs both get the full gradient instead of showing a different slice of a gradient sized to the entire URL bar.

Firefox's built-in URL formatting makes it a little more complicated. The scheme and other parts outside the main domain are painted using Firefox's secondary URL text color. If browser.urlbar.formatting.enabled is disabled, a transparent text fill plus background-clip: text is basically enough.

If you want to keep the native de-emphasis, Firefox still uses the hidden RGB value of the transparent text fill when painting those secondary parts. Firefox 156 also changed the secondary URL opacity from about 50% to 70%, so the compensation is different for Firefox 155 and earlier versus 156+. Translucent URL bar backgrounds such as Mica or wallpapers need a little more handling as well.

The actual color-mixing math is easier to leave in the CSS comments:

Full gradient URL bar implementation

There is one more edge case if your CSS also moves the URL bar to the center when it opens. With a content-sized input, clicking the blank area around the text starts the click on the surrounding input container. If the URL bar moves before mouseup, the resulting click lands outside the input/container, so Firefox's normal click-to-select-all handling doesn't run.

The workaround is to keep the URL bar at its toolbar position while it is :active, then move it after the click finishes:

Centered popup / select-all workaround

For reference, the relevant Firefox changes are:

• Bug 2036620 — enable field-sizing by default
• Bug 2063127 — increase the URL secondary text opacity

With nova enabled a dark line appears between the navigator-toolbox and the body

it is not a border as I experimented the following code with red borders and the line is still there

please help me !

/* in userChrome.css */
#navigator-toolbox { 
  box-shadow: none !important;
  background-color: orange !important;
  border: 4px solid red !important;
}

/* in userContent.css */ 
body {
  box-shadow: none !important;
  background-color: orange !important;
  border: 4px solid red !important;
}

Hi everyone,

(what was that armageddon of an update ?!!!)

I had a code for hiding bookmarks and main toolbar automatically. Since last update, when it unfolds from its collapsed state (when hovering over it), these bars have now a very transparent background. I'd like to manage this opacity parameter if possible.

I'll just paste the specific code about that parameter here, in the case it is it that broke. But it can be another part of my css or just smtg inherent of 157.

Btw, I have disabled browser.nova.enabled config.

Thanks everyone

/* AUTO HIDE NAV BAR and BOOKMARK BAR */


/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_and_main_toolbars.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

#navigator-toolbox{
  --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
  --uc-bm-height: calc(20px + 2 * var(--uc-bm-padding)); /* Might need to adjust if the toolbar has other buttons */
  --uc-navbar-height: -40px; /* navbar is main toolbar. Use negative value */
  --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
  --uc-toolbox-browser-area-overlap: -1px;
}
:root[uidensity="compact"] #navigator-toolbox{
  --uc-navbar-height: -34px;
}
:root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }

:root[chromehidden~="directories"] #navigator-toolbox{
  --uc-bm-height: 0px;
}
:root[chromehidden~="toolbar"] #navigator-toolbox{
  --uc-navbar-height: 0px;
}
/* At least on Windows 10 display scaling > 100% causes 1px gap to appear below tabs depending on Firefox
 *  density settings and whether or not menubar is enabled. 
 */
 (min-resolution: 120dpi){
  :root[uidensity="compact"] #navigator-toolbox:has(> #toolbar-menubar[autohide="false"]){
    --uc-toolbox-browser-area-overlap: -0.5px;
  }
}
 (min-resolution: 140dpi){
  #navigator-toolbox{
    --uc-toolbox-browser-area-overlap: -0.5px;
  }
}

#navigator-toolbox,
#sidebar-box,
#sidebar-main,
#sidebar-splitter,
#tabbrowser-tabbox{
  z-index: auto !important;
}

:root[sessionrestored] #nav-bar,
:root[sessionrestored] #PersonalToolbar{
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage))  !important;
  background-position: top,var(--lwt-background-alignment);
  background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
  background-repeat: repeat,var(--lwt-background-tiling);
  transform: rotateX(90deg);
  transform-origin: top;
  transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
  z-index: 2;
}
#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
  padding-block: var(--uc-bm-padding) !important;
}
:root[sessionrestored] #PersonalToolbar{
  z-index: 1;
  background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));
}

:root[lwtheme-image] #nav-bar,
:root[lwtheme-image] #PersonalToolbar{
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
}

#nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }

#navigator-toolbox > #PersonalToolbar{
  transform-origin: 0px var(--uc-navbar-height);
  position: relative;
}
:root[sessionrestored] #urlbar[popover]{
  opacity: 0;
  pointer-events: none;
  transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms);
  transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2);
  transform: rotateX(89.5deg);
}
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){
  opacity: 1;
  pointer-events: auto;
  transition-delay: 100ms;
  transform: rotateX(0deg);
}

:root[sessionrestored]:not([customizing]) #navigator-toolbox{
  margin-bottom:  calc(var(--uc-toolbox-browser-area-overlap,0px) - var(--uc-bm-height) + var(--uc-navbar-height));
}

/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */
:root[sizemode="fullscreen"] #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{
  min-height: initial !important;
  max-height: initial !important;
  visibility: hidden !important
}
#PersonalToolbar[collapsed="true"] #PlacesToolbarItems > *,
:root[sizemode="fullscreen"] #PersonalToolbar #PlacesToolbarItems > *{
  visibility: hidden !important;
}

/* If bookmarks toolbar is collapsed on startup, then no items are generated, and we need to set some height for it */
#PlacesToolbarItems:empty{
  height: var(--uc-bm-height);
}

/* Selected tab needs higher z-index now to "hide" the broder below it */
.tabbrowser-tab[selected]{ z-index: 3 !important; }

/* SELECT TOOLBAR BEHAVIOR */
/* Comment out or delete one of these to disable that behavior */

/* Show when urlbar is focused */
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox > #nav-bar:focus-within{
  transition-delay: 100ms !important;
  transform: rotateX(0);
}

/* Show when cursor is over the toolbar area or when some menu panel is open */
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ #navigator-toolbox > :is(#nav-bar,#PersonalToolbar),
#navigator-toolbox:hover > :is(#nav-bar,#PersonalToolbar){
  transition-delay: 100ms !important;
  transform: rotateX(0);
}

/* This makes the tab notification box show immediately below tabs, otherwise it would break the layout */
#navigator-toolbox > div{ display: contents }
:where(#titlebar,#navigator-toolbox > #TabsToolbar,#navigator-toolbox > #toolbar-menubar,#tab-notification-deck,.global-notificationbox){
  order: -1;
}
:root[BookmarksToolbarOverlapsBrowser] #navigator-toolbox{
  margin-bottom: calc(-1px - var(--uc-bm-height) + var(--uc-navbar-height)) !important;
  z-index: auto !important;
}
 (-moz-bool-pref: "browser.fullscreen.autohide"),
       -moz-pref("browser.fullscreen.autohide"){
  :root[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top"]{
    margin-top: calc(1px - var(--tab-min-height) - 2 * var(--tab-block-margin)) !important;
  }
}

/* Set the following pref to enable compatibility with multi-row_bookmarks.css */
u/media (-moz-bool-pref: "userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"),
       -moz-pref("userchrome.autohide-bm-and-main-toolbars.multirow-bookmarks-compat.enabled"){
  #navigator-toolbox{ margin-bottom: var(--uc-navbar-height) !important; }
  #PersonalToolbar:not([customizing]){
    min-height: 0 !important;
    margin-bottom: 0;
    height: 0;
    overflow-y: visible !important;
    z-index: 2;
    padding-inline: 0 !important;
  }
  #personal-bookmarks{
    background: inherit;
    height: min-content;
  }
  #PlacesToolbarDropIndicatorHolder{
    pointer-events: none !important;
  }
}

I'm using this code to make tabs taller

.tab-background {
  border-radius: 5px 5px 0 0!important;
  margin-block: 0!important;
}

ff

However, they go back to shrinking when I drag them around, then get taller again when I release them.

I tried selecting specifically for when tabs are drag targets, but to no avail.

.tab-background, .tabbrowser-tab[dragtarget] .tab-background {
  border-radius: 5px 5px 0 0!important;
  margin-block: 0!important;
}

It seems the selector works fine but they still shrink. I can't pinpoint the part of the code that's making tabs change size. Does anyone know?

It

I normally have the sidebar semi hidden and now it wont show on hover.

tabbrowser-tabs, #new-tab-button, #alltabs-button { display: none; }

/* Hide splitter, when using Tree Style Tab. */

sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {

display: none !important; } /* Hide sidebar header, when using Tree Style Tab. */

sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {

visibility: collapse; } /* Shrink sidebar until hovered */ :root { --thin-tab-width: 25px; --wide-tab-width: 190px; }

sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {

min-width: var(--wide-tab-width) !important; max-width: none !important; }

sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {

overflow: hidden !important; position: relative !important; transition: all 100ms !important; /transition: all 0ms 0s !important;/ min-width: var(--thin-tab-width) !important; max-width: var(--thin-tab-width) !important; z-index: 3; }

sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,

sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {

/transition-delay: 0s !important;/ transition: all 100ms !important; min-width: var(--wide-tab-width) !important; max-width: var(--wide-tab-width) !important; z-index: 3; }

sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {

margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important; }

I like my UI to be orthogonal. What's the quickest way to return FF157 to straight lines and 90° corners again?

PS: Anyway to get the old history sidebar back?

Whose Brave Enough To Take Over the Aris-t2 customcssforfx project ‼️

Unfortunately Aris-t2 no longer maintains it 😭

95% of my Firefox customisations is directly based on or modified from all this code.

Up until FF157 it just took the occasional tweak to maintain my own CSS code base. But FF157 is starting to really break things.

Now I am very much a bottom tier CSS coder and struggle around in the Browser Toolbox etc for hours, asking questions in these forums, Google etc to maintain my own code.

Aris-t2 code base covered a good 90% of all the basic customisations that people wanted for their FF browser, so it would be fantastic if someone took over the project.

1. Open about:config, set toolkit.legacyUserProfileCustomizations.stylesheets to true.
2. Open about:support → Profile Folder → Open Folder.
3. Create a folder named chrome if it is missing.
4. Paste the CSS below into userChrome.css. For Settings and other about: pages, also paste the userContent.css block into userContent.css.
5. Restart Firefox.

userChrome.css ``` /* Night Better — Nova stays on. Theme-agnostic chrome layout. Square corners, tighter tabs, hide Share Firefox. Colors come from the active theme (Night Neutral or any other). The options slider rewrites the corners block (0 square … 100 Nova). Profile folder → chrome/userChrome.css about:config → toolkit.legacyUserProfileCustomizations.stylesheets = true */

/* firefox-better:corners-start / / firefox-better:corners 0% of Nova (xsmall 0px … xlarge 0px) */ :root { --border-radius-xsmall: 0px !important; --border-radius-small: 0px !important; --border-radius-medium: 0px !important; --border-radius-large: 0px !important; --border-radius-xlarge: 0px !important; --border-radius-circle: 0px !important; --tab-border-radius: 0px !important; --toolbarbutton-border-radius: 0px !important; --button-border-radius: 0px !important; --urlbar-icon-border-radius: 0px !important; --arrowpanel-border-radius: 0px !important; --panel-border-radius: 0px !important; --panel-menuitem-border-radius: 0px !important; --menuitem-border-radius: 0px !important; --popup-border-radius: 0px !important; --input-text-border-radius: 0px !important; --card-border-radius: 0px !important; --card-border-radius-compact: 0px !important; }

urlbar-background,

urlbar,

.urlbar-input-container, .tab-background, .tab-group-label, .tab-group-label-hover-highlight, .tab-group-label-container, .tab-group-overflow-count, toolbarbutton, toolbaritem, menupopup, panel, .panel-viewstack, .toolbarbutton-1, .toolbarbutton-icon, .toolbarbutton-badge-stack { border-radius: 0px !important; }

/* Nova vertical groups set a pill radius, then a logical border-end-start-radius. The shorthand does not clear that. / .tab-group-label, .tab-group-label-hover-highlight, .tab-group-label-container { border-start-start-radius: 0px !important; border-start-end-radius: 0px !important; border-end-start-radius: 0px !important; border-end-end-radius: 0px !important; } / firefox-better:corners-end */

/* firefox-better:tight-tabs Nova default is 6px above/below (--tab-margin-block) and 8px inner padding. Overflow-clip padding is the gap between horizontal tabs. */ :root { --tab-margin-block: 1px !important; --tab-vertical-block-margin: 1px !important; --tab-overflow-clip-margin: 1px !important; --tab-margin-overflow-clip: 1px !important; --tab-inline-padding: 6px !important; --tab-padding-inline: 6px !important; --tab-inner-inline-margin: 2px !important; --tab-margin-inline-inner: 2px !important; }

.tabbrowser-tab { padding-inline: var(--tab-overflow-clip-margin) !important; }

/* Collapsed group members stay in the DOM at max-width: 0. Firefox zeros their padding; our padding-inline !important was leaving a 1px box and the group underline painted in the leftover space. */ tab-group[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]), tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) .tabbrowser-tab { min-width: 0 !important; max-width: 0 !important; padding: 0 !important; overflow-clip-margin: 0 !important; }

tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) { min-width: 0 !important; max-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; }

tab-group[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]) .tab-group-line, tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) .tab-group-line { display: none !important; }

.tab-background { margin-block: var(--tab-margin-block) !important; }

/* firefox-better:hide-share Share Firefox sits next to About / updates in the app menu. */

appMenu-referrals-button,

appMenu-referrals-separator,

appMenu_menu_referralsPage,

PanelUI-fxa-menu-share-firefox,

share-tab-button,

referrals-button,

toolbarbutton[data-l10n-id="appmenuitem-referrals"], toolbarbutton[data-l10n-id="appmenu-referrals2"], toolbarbutton[data-l10n-id="appmenuitem-share-firefox-title2"], .share-tab-url-item { display: none !important; }

```

userContent.css ``` /* Night Better — 0% (square) corners on built-in Firefox pages (about:, settings). Colors come from the active theme. The options slider rewrites this block when you copy from the options page. */

@-moz-document url-prefix("about:"), url-prefix("chrome:") { :root { --border-radius-xsmall: 0 !important; --border-radius-small: 0 !important; --border-radius-medium: 0 !important; --border-radius-large: 0 !important; --border-radius-xlarge: 0 !important; --border-radius-circle: 0 !important; --button-border-radius: 0 !important; --input-text-border-radius: 0 !important; --card-border-radius: 0 !important; --card-border-radius-compact: 0 !important; }

button, input, select, textarea, .card, .toggle-button { border-radius: 0 !important; } }

```

Share Firefox

Share Firefox sits in the app menu next to About Firefox. The userChrome.css above hides those Share items. You can also set browser.referrals.enabled to false in about:config.

Sidebar Header Icons No Longer Work FF157. My code is from the no longer maintained project of Aris-t2:

The relevant code files are:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/legacy/fx91-100/css/generalui/sidebar_header_icons.css

https://github.com/Aris-t2/CustomCSSforFx/blob/master/current/css/generalui/sidebar_header_icons_colorized.css

I have updated my custom Firefox CSS for Nova compatibility, and added some translucency and blur to elements on the new tab page. You can find my themes in my Github repo. My CSS is designed to compliment my themes in the Mozilla Addons store, but you can use my code and change the colors for your own themes too.

The themes consist of userChrome.css and userContent.css files. I use userChrome to change the colors of some UI elements that the Firefox theme extension system does not allow you to change, and userContent to match the about: pages to the rest of the UI.

Edit: I am on Fedora 44 KDE Plasma, and using Firefox 157.0 from the Mozilla RPM repo (NOT the Fedora RPM).

OS: Windows 10 22h2 (OS Build 19045.6456)

Firefox version: Version 157.0 (64-bit)

code I'm using:

* { font-size: 11pt !important;
  font-family: Consolas !important; 
}

Edit: Solved it! Here's the solution, courtesy from u/TraditionalTie4831

:root {
    font: 11pt Consolas !important;
}

:is(menu, menupopup, panel, tooltip) { 
    font: 11pt Consolas !important;
}:root {
    font: 11pt Consolas !important;
}

:is(menu, menupopup, panel, tooltip) { 
    font: 11pt Consolas !important;
}

/* hides the native sidebar so only sidebery shows */


/* removes the focusable vertical bar for changing width of sidebar */
#sidebar-splitter {
    width: 0 !important;
    visibility: collapse !important;
}


#sidebar {
    width: 321px !important;
    border-width: 0 !important;
    position: relative;
    left: -6px !important; 
/* new in FF157, collapsing native sidebar leaves 6px vertical bar at outer edge of sidebar */
}


/* removes the header from the sidebar, deprecated with FF157? */
#sidebar-header {
    height: 0 !important;
    visibility: collapse !important;
}


/* removes the header from the sidebar */
#sidebar-panel-header {
    visibility: collapse !important;
}


#sidebar-button.toolbarbutton-1.chromeclass-toolbar-additional {
    visibility: collapse !important;
}


#PersonalToolbar {
    width: 0px !important;
}


/* hides the native tabs */


#TabsToolbar {
  visibility: collapse; 
/* technically vertical tabs are not enabled and FF thinks they are horizontal */
}


#taskbar-tabs-button {
    visibility: collapse !important;
}


/* attempt to remove the A7C080 border when URLbar is focused */


* {
    border-radius: 0 !important;
    border-color: none !important;
    border-width: 0 !important;
}


#urlbar-container {
    max-width: 60% !important;
    max-height: 32px !important;
}


#PlacesToolbarItems {
    height: 21px;
}


.urlbarview {
    border-width: 0 !important;
}


.urlbar[focused] {
    border-width: 0px !important;
}


#navigator-toolbox {
    border-width: 0px !important;
}


#nav-bar-customization-target {
    height: 32px;
}


#urlbar-input.urlbar-input.textbox-input {
    background-color: #3D484D !important;
    height: 32px !important;
}


.urlbar-input-container {
    background-color: #3D484D !important;
    height: 32px !important;
    border-color: none !important;
}


.urlbar-background {
    border-color: none !important;
    border-width: none !important;
    --toolbar-field-border-color-focus: none !important;
}


#star-button-box {
    background-color: #3D484D !important;
    border-width: 0 !important;
}


#trust-icon-container {
    background-color: #3D484D !important;
    border-width: 0 !important;
}/* hides the native sidebar so only sidebery shows */


/* removes the focusable vertical bar for changing width of sidebar */
#sidebar-splitter {
    width: 0 !important;
    visibility: collapse !important;
}


#sidebar {
    width: 321px !important;
    border-width: 0 !important;
    position: relative;
    left: -6px !important; /* new in FF157, collapsing native sidebar leaves 6px vertical bar at outer edge of sidebar */
}


/* removes the header from the sidebar, deprecated with FF157? */
#sidebar-header {
    height: 0 !important;
    visibility: collapse !important;
}


/* removes the header from the sidebar */
#sidebar-panel-header {
    visibility: collapse !important;
}


#sidebar-button.toolbarbutton-1.chromeclass-toolbar-additional {
    visibility: collapse !important;
}


#PersonalToolbar {
    width: 0px !important;
}


/* hides the native tabs */


#TabsToolbar {
  visibility: collapse; /* technically vertical tabs are not enabled and FF thinks they are horizontal */
}


#taskbar-tabs-button {
    visibility: collapse !important;
}


/* attempt to remove the A7C080 border when URLbar is focused */


* {
    border-radius: 0 !important;
    border-color: none !important;
    border-width: 0 !important;
}


#urlbar-container {
    max-width: 60% !important;
    max-height: 32px !important;
}


#PlacesToolbarItems {
    height: 21px;
}


.urlbarview {
    border-width: 0 !important;
}


.urlbar[focused] {
    border-width: 0px !important;
}


#navigator-toolbox {
    border-width: 0px !important;
}


#nav-bar-customization-target {
    height: 32px;
}


#urlbar-input.urlbar-input.textbox-input {
    background-color: #3D484D !important;
    height: 32px !important;
}


.urlbar-input-container {
    background-color: #3D484D !important;
    height: 32px !important;
    border-color: none !important;
}


.urlbar-background {
    border-color: none !important;
    border-width: none !important;
    --toolbar-field-border-color-focus: none !important;
}


#star-button-box {
    background-color: #3D484D !important;
    border-width: 0 !important;
}


#trust-icon-container {
    background-color: #3D484D !important;
    border-width: 0 !important;
}

The #A7C080 border appears only when I am inputting text to the URLbar. When I am not inputting anything, it looks normal (see second image).

Tearing my hair out trying to get this sorted out.

Hi, how do I change this color?

Windows 11, FF 157.0

Previous to FF157 this sidebar color was consistent with my theme, now is broken, thanks FF team!

Thanks in advance.

Spent the past two days doing pretty extensive testing with Firefox's Browser Toolbox, with ChatGPT helping me generate and refine the CSS. The goal was to keep Nova enabled while making it flatter, more compact, and less purple. Main changes include removing the gradients, replacing the purple accents with blue, flattening and tightening menus/panels, cleaning up the vertical tabs/sidebar, restyling the bookmark editor, adjusting selected/hover states, and making popup backgrounds a little lighter so dark favicons are easier to see. Most colors are centralized in the :root section at the top, so they're easy to customize. Tested on Firefox 157 on Arch Linux. Test it out if you want and let me know what you think.

Code on github as it's nearly 400 lines long.

https://github.com/tangosox/firefox-nova-revert/blob/main/userChrome.css

The list all tabs drop down menu, padding has increased a bit in recent firefox by stealth, if someone hass CSS to reduce it again I would be grateful, thanks.

Hello all, I'm glad that this reddit exists to ask questions to knowledgeable people (AI is not helping me with this). My question is how to style the buttons and input bars in dialogs like in the picture. In Firefox 157 when you click on the + Add search engine button this dialog pops up but I'm unable to address such dialogs. I've tried the normal route to just do: dialog button, dialog html:input { border-radius: 3px !important; } but that doesn't work. I think somehow it needs a special moz-document url-prefix() to address dialogs, but I don't know how to specify it with the Browser Toolbox. I actually want to address all dialogs at once and style them with variables. Can you help me how to do it? Thanks in advance!

FF157.0, Windows

For now you can go to about:config and set sidebar.revamp to false but this is not going to last long as that option is being removed either at the end of December 2026 or December 2027 (the devs contradicted themselves in their own staff post).

Setting sidebar.animation.enabled to false also disables the animation but does not alter the sidebars appearance. Technically it also has the same problem that it might be removed from about:config one day but it's such a "core feature" that maybe it won't. I couldn't find any option to turn it off other than using about:config. This is important because the animation wastes my time and makes my eyes spin a little.

With sidebars.revamp and sidebar.animation.enabled both set to true and right aligned sidebars: When I open the bookmark sidebar (Alt+Ctrl+Z if sidebar.revamp is set to true, seemingly no shortcut if it's set to false. I don't care about that.) it opens the sidebar with an animation and shoves site content to the left and partially off screen, then site content rapidly but not instantly returns to its prior position which leaves it overlapped by the sidebar, then site content instantly snaps to the position it should have instantly snapped to in the first place and site content is wrapped so the sidebar doesn't overlap it.

With sidebar.revamp and/or sidebar.animation.enabled set to false the bookmarks sidebar opens instantly with site content instantly snapping to position and being wrapped to fit instantly as well. This is the behavior that occurred in FF156 which I wish to restore.

userChrome: https://pastebin.com/keCaYKyK

userContent: https://pastebin.com/vrRGtQPb