Firefoxcss, customize right click menu (colorize context menu)

gistfile1.txt

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
So you want to colorize your right click menu?

context menu background color
context menu border color (sync border color with background - no ugly border)
text color
hovered item color
last line targets the elements submenus
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

menupopup{
--panel-background: rgba(5, 5, 5, .95) !important;                       
--panel-border-color: rgba(15, 15, 15, 1) !important;                  
--panel-color: white !important;}    
                                                                
menuitem:hover{
background-color: #2A4045 !important;}

menu:where([_moz-menuactive="true"]:not([disabled="true"])), menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) {
background-color: #2A4045 !important;
color: white !important;}

Hi! Any idea for this?
As you can see in the pics, in the first one I use transparent background and backdropfilter blur and works perfect, but only for about:profiles, about:config e.t.c.
In the second pic it seems that for the rest and various pages, the backdropfilter disappears or moved to the background.
The same thing happens to menus too.
Is there a way to fix it with some command-code?
Thank you in advance!!

@Achille-Grs post your changes (code) you made for the URL bar, I have no idea what it could be off just this image

#PopupAutoCompleteRichResult[autocompleteinput="urlbar"], .urlbarView:not(.megabar), #urlbarView-results {
background-color: transparent !important;
border: 1px solid grey !important;
margin-left: 0px !important;
margin-top: 1px !important;
width: 1042px !important;
backdrop-filter: blur(15px);
}

@Achille-Grs Okay WOW, So i played around with that for a long time. Thing is, you just cant use backdrop blur, unless you can make the position: absolute, then, you cant make the position absolute unless you can make the parent's trees variable position: relative.

So something like:

#urlbar:is([open]) > .urlbarView {
position: relative !important;}

#urlbar[open] > .urlbarView > .urlbarView-body-outer {
position: absolute !important;
background-color: rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(15px) !important;}

But when I do this it still breaks the nav bar, closest I got was this 👇 but I cant get the blur either, this is tough.

#urlbar:is([focused="true"], [open]) > #urlbar-background {
background-color: rgba(0, 0, 0, 0.7) !important;}

#urlbarView-body-outer { position: relative !important; width: 540px !important;}
#urlbarView-body-inner {
position: absolute !important;
background: rgba(0,0,0,0.7) !important;
backdrop-filter: blur(15px) !important;}

@Achille-Grs Although there is a way to cheat it, i had to make the blurred image on my own in paint.net, if you find a better blurred image and make it 590x660ish youll be good.

this technically gives me a blurred background on extended url bar:

#urlbar[breakout][breakout-extend][open] {
  background-color: transparent !important;
  background-image: url(chrome/urlbar.png) !important;}

Thank you very very much! You are a kind person and you helped me a lot!