Skip to content

Instantly share code, notes, and snippets.

@soulhotel
Last active September 12, 2024 21:36
Show Gist options
  • Save soulhotel/efff3fc64f1871515498326b953969d3 to your computer and use it in GitHub Desktop.
Save soulhotel/efff3fc64f1871515498326b953969d3 to your computer and use it in GitHub Desktop.
Firefoxcss, customize right click menu (colorize context menu)
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
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;}
@soulhotel
Copy link
Author

1
2

@Achille-Grs
Copy link

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!!
Στιγμιότυπο οθόνης (13)
Στιγμιότυπο οθόνης (14)

@soulhotel
Copy link
Author

soulhotel commented Feb 23, 2024

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

@Achille-Grs
Copy link

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

@soulhotel
Copy link
Author

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

Screenshot_2

@soulhotel
Copy link
Author

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

urlbar
Screenshot_4

@Achille-Grs
Copy link

Achille-Grs commented Feb 24, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment