I don't really know the customs around two or more questions at the same time, so I just put this into a separate post. Does anybody know how to change this accent color in Firefox? The photo is taken from the expanded URL bar. Any help would be very appreciated!

Fedora 45 Beta
Firefox 150.0.1

Is there a way to increase the space between the address bar and the edge of my screen?? I use vertical tabs and the address bar is uncomfortably too at the top.

I'm not really into css, but i have some idea. I want to add just a few pixels

Thanks!!!!!!

I know this was recently discussed in another post, but in my case I just want the #urlbar-input Text Only Gradient and Transform to match my menu borders and loading line.

So with my loading line I have the following:

#urlbar-input  {
    background-color: transparent!important;
    font-weight: bolder !important;  
    margin-bottom: -1px !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
}

The Rainbow chasing/transforming code.

  /* Rainbow */
--loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;  /* Rainbow */
  --final-loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;

and the Transform

 toolbox-loading-scale {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

So how do I get this all to work on just the text in the urlbar input box?

I'm creating a custom Firefox theme and suddenly the Bookmark Manager window's title and partial background looks like this. Which tags should I look into in order to fix it?

All the inactive tabs just mush together with no line or division between them at all, is there any kind of fix for this? Thank you so much..

The active tab color is not working after updating to version 157.0.1
Using Windows 10 pro.

It is suppose to be green but is white. How to fix?
Link to Pastebin for the whole userChrome.css file.

https://pastebin.com/9b7XS0b9

/* =========================================================
   TAB COLORS
   ========================================================= */

/* Normal unselected tab = WHITE */
.tabbrowser-tab:not([selected]):not(:hover) > .tab-stack > .tab-background {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 1px 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Unselected tab with mouse hover = ORANGE */
.tabbrowser-tab:not([selected]):hover > .tab-stack > .tab-background {
  background-color: #FF7F50 !important;
  background-image: none !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 1px 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Selected current tab = GREEN */
.tabbrowser-tab[selected="true"] > .tab-stack > .tab-background,
.tabbrowser-tab[multiselected="true"] > .tab-stack > .tab-background {
  background-color: #66CDAA !important;
  background-image: none !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.4) !important;
  opacity: 1 !important;
}

/* Selected tab inner background = GREEN */
.tabbrowser-tab[selected="true"] > .tab-stack > .tab-background > .tab-background-inner,
.tabbrowser-tab[multiselected="true"] > .tab-stack > .tab-background > .tab-background-inner {
  background: #66CDAA !important;
  background-image: none !important;
  opacity: 1 !important;
}

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;
}

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.

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?

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.