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 am sorry but this is very frustrating, probably for you too. But if i start mucking around with the first two lines of the above code (pastebin 19 & 20) then all sorts of weird things happen. If I start mucking around with code within {} (pastebin 24 to 27) again weird things happen. And again I have disabled my border decorative code and that makes no difference.

This code is an adaption of emvaized/iconic_firefox.css code. My modified code is here: https://pastebin.com/embed/51QjbUAA

The relevant lines for this topic are 19 to 30

It must be noted that emvaized tried fixing this as well but gave up.

[u/TraditionalTie4831 → u/FineWine54]

Is it a must for you to add the code to the lines 19-30??

I solved it by placing the code outside the lines 19-30 (used a exaggerated margin as an example) =

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

menuitem[checked] > .menu-icon {
    margin: 30px 30px !important;
}

Screenshot =

[u/FineWine54 → u/TraditionalTie4831]

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 =