diff --git a/chrome/custom_menupopup_check_icons.css b/chrome/custom_menupopup_check_icons.css index 3a77d16..0f1f688 100644 --- a/chrome/custom_menupopup_check_icons.css +++ b/chrome/custom_menupopup_check_icons.css @@ -1,19 +1,35 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/custom_menupopup_check_icons.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ - menuitem:is([type="checkbox"],[type="radio"]) .menu-iconic-left{ - -moz-appearance: none !important; - height: 14px; - margin-block: 4px; - margin-inline: 3px 8px !important; - background-repeat: no-repeat; - background-size: contain; - background-position: center; - -moz-context-properties: fill; - fill: currentColor; - } +/* Modifies appearance of menupopup check icons to more clearly show if the item is a radio or checkbox item */ - menuitem[checked] .menu-iconic-left{ - background-image: url("chrome://global/skin/icons/check.svg"); - background-color: transparent - } \ No newline at end of file +menuitem:is([type="checkbox"],[type="radio"]){ + padding-inline-start: 12px !important; +} +menuitem:is([type="checkbox"],[type="radio"]) > .menu-iconic-left > .menu-iconic-icon{ + display: none !important; +} +menuitem:is([type="checkbox"],[type="radio"]) > .menu-iconic-left{ + -moz-appearance: none !important; + outline: 1px solid color-mix(in srgb,currentColor 20%, transparent); + border-radius: 3px; + width: 14px !important; + height: 14px; + margin-inline: 0px 8px !important; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + -moz-context-properties: fill; + fill: currentColor; + background-color: transparent; +} +menuitem[type="radio"] > .menu-iconic-left{ + border-radius: 100%; +} +menuitem[type="radio"][checked] > .menu-iconic-left{ + background-image: radial-gradient( AccentColor 40%, transparent 50%); + list-style-image: none !important; +} +menuitem[type="checkbox"][checked] > .menu-iconic-left{ + background-image: url("chrome://global/skin/icons/check.svg"); +}