I'm using 153.5.0 ESR and I changed the border-radius of the URL-Bar to 5px with:

.urlbar-input-container {
  border-radius: 5px !important;
}

and that worked, however the blue glow when the URL-Bar is selected still has the default border radius making it look wrong.

I tried to do this:

.urlbar-input-container[focused] {
  border-radius: 5px !important;
}

but it didn't work. How do you properly target focused state in the Inspector? When I click something in the UI while the inspector is active the code jumps around and I can't seem to properly use the Element Selector Tool on items that have an active or focused state. Is there a trick to that?

Thanks for help in advance!

I've run into another issue with my new ESR version, other than "background" and "border-radius" none of the properties I try to attach to .urlbar-input-container seems to do anything.

.urlbar-input-container {
  border-radius: 5px !important;
  background: RGBA(255,255,255,0.8) !important;
  outline: 10px !important;
  outline-color: black !important;
  outline-width: 10px !important;
  box-shadow: 10px !important;
} 

I know the values are high, I just set them so high so I can immediately see if they have an effect. I also tried .urlbar-container, #urlbar-container and #urlbar-container.urlbar-container as these are designators I found in the Inspector but nothing.

All I'm trying to do is to give the URL Bar a shadow and an outline.

Thanks for help in advance!

Currently on Firefox 158, with no menu bar in use. It's a rather small issue, but I have the sporadic habit to use my mouse/cursor to swiftly click on the furthermost upper left corner of my pinned tab (maximised window) to access that first tab, and there's like a pixel of unclickable space in that corner (not draggable, just actually cannot click that space and nothing happens in attempts to -- it's more like a dead, unusable pixel of emptiness).
I see it's the case for every tab when checking by hovering and moving my cursor across the top of the screen, the upper left corner of each has an empty spot (whereas if hovering the cursor and moving between any two tabs below the very top, there are no empty spaces/breaks).

For additional clarification, this is not about the draggable space that's notably more than a pixel in size to the whole left of the first tab (as I have that disabled so it's not there anymore), but something that every tab seems to have, and I'm wondering if this is a technical bug than anything intentional as it seems odd.

Just curious if there's any known CSS code that can somehow make it a clickable spot or if that's not possible and simply something to have to leave alone (or at least bring up as an issue). Does anyone know about it or potentially have any solutions to?

kinda buggy but it works. suggestions are welcome.

/* Hide bookmark text by default */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-text {
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: max-width 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
/* Show on hover */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]):hover .toolbarbutton-text {
opacity: 1;
max-width: 150px;
}

The previous solution I used for changing the split view active panel border doesn't work after v158.0. Is there an updated fix?

#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      .deck-selected > & {
        outline: 1px solid #54626A !important;
      }
    }
  }
}

halp