MrOtherGuy

I mean, if that works for you the go for it, but that isn't quite the same thing. For you normal buttons in the toolbar, the hover background-color is not on the <toolbarbutton> itself, but on the icon inside the button. The area of the icon is smaller than the button, so what happens is that you will be shown both colors which should be pretty visible especially if the theme you have uses some drastically different color. In addition, that will also apply to buttons inside panel menus, which may or may not be what you wanted.

You could do this:

toolbar .toolbarbutton-1:not([disabled]):hover > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
  background-color: #6495ed !important;
}

But if you want to just change the background-color of all the elements where that same color gets used (so buttons, bookmark-items, tabs scrollbuttons, sidebar switcher button etc.) then it would be much easier to redefine the value for the variable they all use:

:root{
  --toolbarbutton-hover-background: #6495ed !important;
}

In that case the code you posted should work, provided that you fix the hover syntax:

toolbarbutton.bookmark-item:hover { background-color: #6495ed !important; }

Using the current version of ‘autohide_sidebar.css’ the open sidebar now overlays and obscures part of the page Content window.

This has always been the intended behavior of that style. If you experienced something else previously then either you weren't using that style, you had some modification to it, or it didn't work correctly for some unknown reason.

But if you do want that kind of behavior then you can get it with something like this:

#sidebar-box{
  --uc-sidebar-width: 40px;
  --uc-sidebar-hover-width: 200px;
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-sidebar-delay: 600ms;
  --uc-autohide-transition-type: linear;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay);
}
#sidebar-box:hover{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms;
}

You probably can't do anything about this with css, this is essentially bug 1818517 - although I find it kinda interesting if it "was fixed" for a short while.

I think you should take a screenshot that shows the thing you are trying to change background color of, because currently I have no idea what it might be.

Unless I'm missing something, that looks pretty much as it should be. What's wrong with it?

What window you want to affect? It sounds it must be something other than items in bookmarks toolbar since you mention browser toolbox not showing it. Regardless, you can change the document that the toolbox should target using the "select iframe" button.

Also, the code you posted wouldn't work anyway for hovering because it is missing a colon for :hover pseudo-class.

Depends on how hacky you want to get. Backdrop-filter won't work across contexts (chrome-context vs. website context) but you can sidestep that easily by adding the blurring effect in userContent directly to the page. The obvious issue with that kind of effect in general is that you cannot then interact, or even really ever see the top part of the web page, because it's always covered by browser chrome - that would be the case even if the blurring effect could be done across contexts. You can maybe work around that a little bit by adding a top padding to web page body like in the example below, but that is totally not guaranteed to work for all sites because sites can style themselves however they please.

super-fast and hacky userchrome:

#navigator-toolbox{
  background: rgba(0,0,0,0.3) !important; 
  margin-bottom: -86px;
  z-index: 5 !important;
}
.browser-toolbar{
  background: transparent !important;
}
#sidebar-main,
#sidebar-box,
#sidebar-splitter{
  padding-top: 86px;
}

userContent.css:

@-moz-document url-prefix("http"){
  :root::before{
    content: "";
    top: 0;
    position: fixed;
    z-index: 10000;
    width: 100vw;
    height: 86px;
    backdrop-filter: blur(28px);
  }
@-moz-document url-prefix("http"){
  :root::before{
    content: "";
    top: 0;
    position: fixed;
    z-index: 10000;
    width: 100vw;
    height: 86px;
    backdrop-filter: blur(28px);
  }
  body{
    padding-top: 86px;
  }
}
}

Result:

Sure, it's possible. But never really an intended feature of hide tabs toolbar, it was just necessary to do it because of how the old style worked. But if you want to have menubar work like that then I think you can use overlay_menubar.css with the v2 hide tabs toolbar.

I'm not going to update that style combo anymore as Firefox 133 makes us able to do this in a much better way. You'll just need hide_tabs_toolbar_v2.css - no support style required or anything. The old style simply stays as is for ESR 128 users.

You can hide them with userContent.css - most of the devtools window stuff is styled via userContent.css not userChrome.css.

But there's a catch.

Browser toolbox is essentially a separate instance of Firefox, running in separate profile so your "normal" user css files don't apply to it. Thus, you need to first enable the toolbox profile to load it's own user css files and create them just like you do normally (toggle toolkit.legacyUserProfileCustomizations.stylesheets, create files in chrome/ folder etc.). The toolbox profile is stored inside the regular profile - in a directory chrome_debugger_profile.

To get to about:config of the toolbox profile you need to first open a new main-window for it - one way that works is to click the meatball menu at the top-right of the toolbox window, and select "Documentation..." - that will launch a new window using using the toolbox profile and then you can just open about:config and proceed as usual. Or you can just modify prefs.js of the toolbox profile directly while the toolbox is not running.

Anyway, after you have set up the toolbox window to load user css files, then just slap this to its userContent.css and restart the toolbox:

header.chrome-debug-toolbar{
  display: none !important;
}