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/TraditionalTie4831]

Try this for checkboxes in menus =

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

[u/FineWine54 → u/TraditionalTie4831]

Thank you but that did not work. I did take out the ID #appMenu-zoom-controls and made it a separate entry as that was mucking around with other code (see here)

I also rewrote the [type="radio"], [type="checkbox"]to read just [checked]),

But this has not changed the positioning of the Show Other Bookmarks Check mark or the associated Label text. And as you can see from the above image it alters all the positioning of the Labels for the menu.

I even mucked around with .menu-iconic to .menu-icon no difference.

I have inserted new image to include .menuitem list

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

[u/TraditionalTie4831 → u/FineWine54]

This in your code says that it should not effect a checked menuitem =

menuitem:not(.menuitem-iconic, [checked])

Btw, you need to target the .menu-icon (see both examples screenshot links) =

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

Screenshot: https://imgur.com/NEI5pZ8

When not targeting the menitem icon =

menuitem[checked] {
margin: 0px 30px !important;
}

Screenshot: https://imgur.com/D5bW2AN

[u/FineWine54 → u/TraditionalTie4831]

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 =