From 6c7abad64ec57bb89ca1bada16295bb5dcfb4de4 Mon Sep 17 00:00:00 2001
From: MrOtherGuy <jastekken@outlook.com>
Date: Sun, 7 Aug 2022 16:33:10 +0300
Subject: [PATCH] update custom_menupopup_check_icons.css to work well in
 Firefox 103

This has only been tested on Windows10 with non-native menus.
---
 chrome/custom_menupopup_check_icons.css | 46 +++++++++++++++++--------
 1 file changed, 31 insertions(+), 15 deletions(-)

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");
+}