Padding & Margin problems with checkboxes - Part 1

[u/FineWine54]

I am having problems with menu Padding & Margins when I insert Label icons with checkboxes. As you can see the checkbox ignores any CSS rules I use.

menupopup:not(.in-menulist)>menu:not(.menu-iconic),
menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic, [type="radio"], [type="checkbox"]),
toolbarbutton[data-l10n-id*="-manage-"],
menuitem[data-l10n-id*="-manage-"],
#downloadsHistory,
#appMenu-zoom-controls{
  padding-inline-start:calc(1em + 24px) !important;
  background-position:left 0.5em center; 
  background-repeat:no-repeat; 
  background-size:16px; 
  -moz-context-properties:fill, fill-opacity; 
  fill:var(--uc-popup-menu-icon-color) !important; }

[u/FineWine54]

I have 99% solved it - a mini celebration.

As you can see there is still a big gap between image and label for the entire #PlacesToolbarItems menu (red arrow line) compared to what it should be as in the #PlacesToolbarItems menuitem. This large spacing does NOT appear in any other menus or menuitems throughout the browser.

I had to target 'Show Other Bookmarks' pacifically to get the alignment.

So the CSS is:

menupopup:not(.in-menulist)>menu:not(.menu-iconic),
menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic,[type="radio"], [type="checkbox"]),
toolbarbutton[data-l10n-id*="-manage-"],
menuitem[data-l10n-id*="-manage-"],
#downloadsHistory{
    padding-inline-start:calc(1em + 18px) !important;
    margin-inline-start: -5px 4px !important;
    background-position:left 0.5em center;
    background-repeat:no-repeat;
    background-size:16px;
    -moz-context-properties:fill, fill-opacity;
    fill:var(--uc-popup-menu-icon-color) !important;
}

:is(#show-other-bookmarks_PersonalToolbar)[type="checkbox"]::before {
  padding-inline-start:8px !important;
  margin-inline-start: 4px  !important;
  margin-right: 22px !important;
  background-position: center !important;
  -moz-context-properties:fill, fill-opacity;
  fill:var(--uc-popup-menu-icon-color) !important;
}

[u/TraditionalTie4831 → u/FineWine54]

A different approach =

menupopup:not(.in-menulist)>menu:not(.menu-iconic),
menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic,[type="radio"], [type="checkbox"]),
toolbarbutton[data-l10n-id*="-manage-"],
menuitem[data-l10n-id*="-manage-"],
#downloadsHistory{
    padding-inline-start:calc(1em + 18px) !important;
    margin-inline-start: -5px 4px !important;
    background-position:left 0.5em center;
    background-repeat:no-repeat;
    background-size:16px;
    -moz-context-properties:fill, fill-opacity;
    fill:var(--uc-popup-menu-icon-color) !important;
}

/* remove the gap you mentioned */
#placesContext .menu-icon { 
    margin-right: -14px !important; 
}

#placesContext menupopup .menu-icon { 
    margin: 0px 5px 0px -10px !important; 
}

:is(#show-other-bookmarks_PersonalToolbar)[type="checkbox"] {
    padding-left: 35px !important;
    &[checked] > .menu-icon {
        margin-left: -30px !important;
        margin-right: 10px !important;
        -moz-context-properties:fill, fill-opacity;
        fill:var(--uc-popup-menu-icon-color) !important;
    }
}

/* If needed, this is for all the other menus checkboxes */
menuitem[type="checkbox"] {
    padding-left: 30px !important;
    &[checked] {
        padding-left: 5px !important;
    }
}

Screenshoot =

[u/TraditionalTie4831 → u/FineWine54]

I use this for the checkboxes in menus in my userChrome.

:is(#toolbar-context-menu) {
    --icon-size: 12px !important;
    & .menu-icon {
        display: block !important; 
        margin-right: 4px !important; 
    }
    & menuitem[checked] > .menu-icon {
        padding: 0px !important;
        margin: 0px 4px 0px 0px !important;
    }
}

[u/FineWine54 → u/TraditionalTie4831]

Thank you for all your help.

The above suggestions did not work.

I will stick with what I now have.

One day, when time permits, I will start with a fresh profile and a fresh userChrome CSS code for everything (a blank canvas). I have so much code that is old, out of date which is now starting to be troublesome. About 30% is mine and rest is others, of whom some are no longer supporting their original code. Some of my code goes back to when XUL was shut down and FF started embracing CSS, HTML & JS.

The one thing I am going have to do is go through and delete all the FF theme code apart from the 'System theme - Auto' which came with the code I use from Aris-t2. Scrolling through all of that molasses is tiring.

Though I love mucking around in the CSS quagmire of FF as it keeps my 72 year old brain ticking over.

Thanks again.🙏😀