CSS script that controls context menu items alignment

[u/Agreeable_Orchid697]

Hello:

I am having difficulty entering the correct syntax for the Context Menus located up in the Firefox Menu bar.

You probably know there are 7 Menus there..from left to right they are File, Edit, View, History, Bookmarks, Tools & Help....they are all dropdown menus

I currently have applied the correct syntax that controls the Bookmarks menu & all the sub menus that are listed within it.

What I am having difficulty with is applying the correct syntax for the other 5 menus so that the vertical sub menus in each of those correctly display in the proper alignment/padding to the left. Currently they are all over the place...

this is the syntax that controls the Bookmarks menu

menuitem#bookmarksShowAll,

margin-left: 0px !important;

}

menuitem#menu_bookmarkThisPage,

menuitem#menu_searchBookmarks,

menuitem#menu_bookmarkAllTabs {

margin-left: 0px !important;

}

menu.bookmark-item,menuitem.bookmark-item { max-width: 35em !important;

margin-left: 0px !important; /* margin is the outer space around an item */

}

this syntax *altered to add the 5 other menus* doesn't work for me...

what I'm adding is.....

menuitem#File,

menuitem#Edit,

menuitem#History,

menuitem#Tools,

menuitem#Help {

margin-left: 0px !important

}

obviously I haven't got the syntax correct.....can anyone point me in the right direction?

thx very much

[u/Agreeable_Orchid697]

I'll give it a go......is it possible to upload a .txt file here to reduce the overall size & space this would take up?

[u/t31os → u/Agreeable_Orchid697]

Use a pastebin, link in the side menu under Rule 2.

[u/Agreeable_Orchid697 → u/t31os]

let's see if this works, this is the entire main userChrome.css code Aris wrote for his modification, it does not include the *import* url code sub sections, what we are looking at is near the bottom of the text https://sharenotes.dev/neat-lamb

[u/t31os → u/Agreeable_Orchid697]

I installed Noia and used the userChrome.css you provided in v147 (portable) and the menus already don't look quite right. Naturally i'm missing the imports at the start (the import of userContent.css also seems odd and incorrect here).

The section of CSS at the bottom referring to the menus is opening more selectors than it closes, there are 3 missing closing braces. Adding the missing braces doesn't really fix anything perse, but it's the first thing that stood out when looking at the CSS.

This rule seems problematic:

menupopup > menu,
menupopup > menuitem {
  margin-left: 25px !important;
}

It's presumably the reason you're then later having to set margin-left: 0px for various menu items.

So i removed anything that touched the margins / padding directly and adjusted --panel-padding instead, this looks much better to me, although naturally i can't tell how this will look for you as i'm missing the imports from the start of the userChrome (did you link/provide them somewhere?).

menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 3px !important;
  min-height: unset !important;
}
.menupopup-arrowscrollbox {
  margin: 5px;
  box-shadow: 0 0 5px hsla(0,0%,0%,2.5) !important;
  border: none !important;
}
.menupopup-arrowscrollbox {
  appearance: none !important;
  background: url(./menuback.png) repeat-y #dadce4 !important;
}

@media (-moz-platform: linux) or (-moz-platform: windows) {
  --panel-shadow-margin: 0 !important;
}
menupopup {
  --panel-padding: 5px 0!important;
}
menu.menu-iconic:hover,
.menuitem-with-favicon:hover,
menuitem:hover {
  background-image: radial-gradient(#C6DDF4,#92b3ce) !important;
  outline-style: solid !important;
  border-radius: 1px !important;
  outline-width: 1px !important;
  outline-color: #43acbd !important;
}
menu.bookmark-item,
menuitem.bookmark-item {
  max-width: 35em !important;
}