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

#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!