popup/menu styling #22 #28 #35

README.md

@@ -14,7 +14,7 @@ A Firefox userChrome.css theme that aims to recreate the look and feel of the Ch
    3. `layout.css.color-mix.enabled` = `true`
 
    ###### On macOS:
-   ~~1. To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false`~~ **(Not Implemented Yet!)**
+   1. To use the Edge style context menu on macOS then set `widget.macos.native-context-menus` = `false`
 
    ##### Recommended:
    1. `browser.tabs.tabMinWidth` = `66`

chrome/global/popup.css

@@ -1,20 +1,22 @@
 /* EdgeFr-Fox by bmFtZQ - popup.css */
 
 :root {
-  --arrowpanel-border-radius: 4px !important;
+  --arrowpanel-border-radius: 8px !important;
   --panel-subview-body-padding: 4px 0 !important;
-  --arrowpanel-menuitem-border-radius: 0 !important;
+  --arrowpanel-menuitem-border-radius: 4px !important;
-  --arrowpanel-menuitem-margin: 0 !important;
+  --arrowpanel-menuitem-margin: 0 var(--uc-arrowpanel-menuitem-margin-inline) !important;
-  --arrowpanel-menuitem-padding-block: 8px !important;
+  --arrowpanel-menuitem-padding-block: 6px !important;
-  --arrowpanel-menuitem-padding-inline: 14px !important;
+  --arrowpanel-menuitem-padding-inline: 11px !important;
   --uc-arrowpanel-menuicon-margin-inline: 14px;
   --panel-separator-margin-vertical: 4px !important;
   --panel-separator-margin-horizontal: 0 !important;
   --uc-panel-zoom-button-padding: 8px;
-  --uc-panel-zoom-button-inline-padding: 13px;
+  --uc-panel-zoom-button-inline-padding: 9px;
   --uc-autocomplete-panel-menuitem-margin: 4px;
-  --uc-autocomplete-panel-menuicon-padding-inline: 12px;
+  --uc-autocomplete-panel-menuicon-padding-inline: 14px;
   --uc-autocomplete-panel-separator-margin-vertical: 4px;
+  --uc-arrowpanel-menuitem-margin-inline: 4px;
+  --uc-panel-zoom-padding-block: var(--panel-separator-margin-vertical);
 }
 
 /* app menu */
@@ -22,7 +24,8 @@
 .panel-banner-item {
   margin: 0 4px 4px !important;
   padding-inline: 4px 12px !important;
-  border-radius: 2px !important;
+  padding-block: var(--arrowpanel-menuitem-padding-block) !important;
+  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
 }
 
 #appMenu-fxa-label2>vbox>label {
@@ -57,16 +60,24 @@
   border-radius: 99px;
 }
 
-
 /* disable proton account separator */
 #appMenu-fxa-separator {
   border-image: none !important;
 }
 
+#appMenu-fxa-status2:not([fxastatus]) {
+  padding-block: 0 !important;
+}
+
+#appMenu-fxa-status2:not([fxastatus])>#appMenu-fxa-label2 {
+  margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important;
+}
+
 /* zoom controls */
 #appMenu-zoom-controls2 {
   border-top: 1px solid var(--panel-separator-color) !important;
-  padding: 0 0 0 var(--arrowpanel-menuitem-padding-inline) !important;
+  padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline) !important;
+  padding-block: var(--uc-panel-zoom-padding-block) !important;
   margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1) !important;
 }
 
@@ -79,9 +90,19 @@
   padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2) !important;
 }
 
-#appMenu-zoomReduce-button2,
+/* #appMenu-zoomReduce-button2, */
-#appMenu-fullscreen-button2 {
+#appMenu-zoom-controls2>#appMenu-fullscreen-button2 {
-  border-inline-start: 1px solid var(--panel-separator-color) !important;
+  margin-left: calc(var(--panel-separator-margin-vertical) * 2 + 1px) !important;
+}
+
+#appMenu-zoom-controls2>#appMenu-fullscreen-button2::before {
+  content: "";
+  border-inline-start: 1px solid var(--panel-separator-color);
+  display: block;
+  position: relative;
+  height: 32px;
+  margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
+  transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - var(--panel-separator-margin-vertical) - 1px));
 }
 
 #appMenu-zoomReset-button2 {
@@ -89,23 +110,17 @@
   min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
 }
 
-#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
-  background-color: var(--panel-item-hover-bgcolor) !important;
-}
-
-#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
-  background-color: var(--panel-item-active-bgcolor) !important;
-}
-
 #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover),
 #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover),
-#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover) {
+#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover),
+#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
   background-color: var(--panel-item-hover-bgcolor) !important;
 }
 
 #appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active),
 #appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active),
-#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active) {
+#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active),
+#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
   background-color: var(--panel-item-active-bgcolor) !important;
 }
 
@@ -117,6 +132,7 @@
 
 #appMenu-fullscreen-button2>.toolbarbutton-icon {
   background-color: transparent !important;
+  padding: 0 !important;
 }
 
 /* URL bar popup */
@@ -150,9 +166,9 @@
   margin-block-start: 0 !important;
 }
 
-.subviewbutton-back {
+.panel-header>.subviewbutton-back {
   margin: 0 !important;
-  border-radius: 2px !important;
+  padding: var(--arrowpanel-menuitem-padding-block) !important;
 }
 
 .panel-subview-footer-button {
@@ -184,34 +200,27 @@
 
 #downloadsListBox>richlistitem {
   padding-inline-end: 8px !important;
-  border-radius: 0 !important;
+  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
+}
+
+#downloadsListBox,
+.downloadsPanelFooterButton {
+  margin: var(--arrowpanel-menuitem-margin) !important;
 }
 
 #downloadsPanel-blockedSubview,
 #downloadsPanel-mainView {
-  padding: var(--panel-separator-margin-vertical) 0 0 !important;
+  padding: var(--panel-separator-margin-vertical) 0 !important;
 }
 
 #emptyDownloads {
   padding: 1.5em 16px 1.7em !important;
 }
 
-/* context menus */
+.PanelUI-subView .subviewbutton-nav::after,
-@media (-moz-windows-compositor) {
+#PlacesToolbar menu>.menu-right,
-  menupopup {
+.subviewbutton>.menu-right {
-    --panel-color: var(--arrowpanel-color) !important;
+  fill-opacity: 1 !important;
-    --panel-border-radius: 4px !important;
-    --panel-padding: 4px 0px !important;
-    --panel-border-color: var(--arrowpanel-border-color) !important;
-    --panel-background: var(--arrowpanel-background) !important;
-    --nested-margin: -6px !important;
-    --menuitem-hover-background-color: var(--panel-item-hover-bgcolor) !important;
-    --menu-background-color: var(--arrowpanel-background) !important;
-    --menu-color: var(--arrowpanel-color) !important;
-    --menuitem-disabled-hover-background-color: #0000 !important;
-    --menu-disabled-color: var(--panel-disabled-color) !important;
-    --menu-border-color: var(--panel-separator-color) !important;
-  }
 }
 
 /* auto complete popup */
@@ -221,25 +230,279 @@
   box-shadow: 0 0 0 1px inset var(--arrowpanel-border-color) !important;
 }
 
-.autocomplete-richlistitem[originaltype="loginsFooter"] {
+#PopupAutoComplete .autocomplete-richlistitem[originaltype="loginsFooter"] {
   -moz-box-pack: start !important;
   color: inherit !important;
+  border: 0 !important;
   border-color: var(--panel-separator-color) !important;
   background-color: transparent !important;
-  height: 40px !important;
+  height: 28px !important;
-  padding-inline-start: var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
+  min-height: 28px !important;
+  padding-inline-start: var(--arrowpanel-menuitem-padding-inline) !important;
+  position: relative !important;
+  overflow: visible !important;
+  margin-top: calc(var(--panel-separator-margin-vertical) * 2 + 1px) !important;
 }
 
-.autocomplete-richlistitem:hover {
+.autocomplete-richlistitem[originaltype="loginsFooter"]::before {
+  content: "";
+  width: calc(100% + var(--uc-arrowpanel-menuitem-margin-inline) * 2);
+  border-top: 1px solid var(--panel-separator-color);
+  position: absolute;
+  top: calc(var(--panel-separator-margin-vertical) * -1 - 1px);
+  left: calc(var(--uc-arrowpanel-menuitem-margin-inline) * -1);
+}
+
+#PopupAutoComplete .autocomplete-richlistitem:hover {
   background-color: var(--panel-item-hover-bgcolor) !important;
 }
 
-.autocomplete-richlistitem[selected] {
+#PopupAutoComplete .autocomplete-richlistitem[selected] {
   background-color: var(--panel-item-active-bgcolor) !important;
   color: inherit !important;
 }
 
 .ac-site-icon {
   fill: currentColor !important;
-  margin: auto var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
+  margin-block: auto !important;
+  margin-inline: 0 var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
+}
+
+#PopupAutoComplete>richlistbox>richlistitem>.ac-title {
+  margin-inline: calc(16px + var(--uc-autocomplete-panel-menuicon-padding-inline)) !important;
+}
+
+#PlacesToolbar menuitem,
+#PlacesToolbar menu,
+.subview-subheader,
+panelview .toolbarbutton-1,
+.subviewbutton,
+.widget-overflow-list .toolbarbutton-1 {
+  min-height: calc(16px + var(--arrowpanel-menuitem-padding-block) * 2) !important;
+}
+
+/* Context Menu */
+menupopup,
+menupopup menuitem,
+menupopup menu,
+menupopup menuseparator,
+panel {
+  -moz-appearance: none !important;
+}
+
+menupopup,
+panel[type="autocomplete-richlistbox"],
+menulist>menupopup>menucaption {
+  -moz-window-shadow: none !important;
+  background: 0 !important;
+  border: 0 !important;
+  color: var(--arrowpanel-color) !important;
+}
+
+.popup-internal-box,
+panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox,
+.menupopup-arrowscrollbox {
+  background: var(--arrowpanel-background) !important;
+  border: 0 !important;
+}
+
+/* make room for menu shadow */
+menupopup {
+  padding: 8px 16px 26px !important;
+  margin: -12px -16px -22px !important;
+}
+
+/* cut off shadow so it doesn't get in the way of the menubar items */
+menubar menupopup {
+  padding: 1px 10px 26px !important;
+  margin: -1px -10px -22px !important;
+}
+
+.menupopup-arrowscrollbox {
+  box-shadow:
+    0 10px 16px #0003,
+    0 4px 5px #0002,
+    0 2px 4px #0002,
+    0 0 0 1px #0001 !important;
+}
+
+/* no way to get current firefox theme, using prefers-color-scheme instead */
+@media (prefers-color-scheme:dark) {
+  .menupopup-arrowscrollbox {
+    box-shadow:
+      0 10px 18px #0003,
+      0 4px 5px #0003,
+      0 2px 4px #0002,
+      0 0 0 1px #0002 !important;
+  }
+}
+
+.popup-internal-box,
+panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox,
+.menupopup-arrowscrollbox {
+  margin: 0 !important;
+  padding: var(--panel-subview-body-padding) !important;
+  border-radius: var(--arrowpanel-border-radius) !important;
+  color: inherit !important;
+}
+
+menupopup menu[disabled="true"],
+menupopup menuitem[disabled="true"] {
+  color: var(--panel-disabled-color) !important;
+  background: none !important;
+}
+
+menupopup menu:hover:not([disabled=true]),
+menupopup menuitem:hover:not([disabled=true]),
+menupopup menu[_moz-menuactive]:not([disabled=true]),
+menupopup menuitem[_moz-menuactive]:not([disabled=true]) {
+  background-color: var(--panel-item-hover-bgcolor) !important;
+  color: inherit !important;
+}
+
+menupopup menuitem:hover:active:not([disabled=true]),
+menupopup menu:hover:active:not([disabled=true]) {
+  background-color: var(--panel-item-active-bgcolor) !important;
+  color: inherit !important;
+}
+
+menupopup menuseparator {
+  margin: var(--panel-separator-margin-vertical) 0 !important;
+  padding: 0 !important;
+  background: none !important;
+  border-top: 1px solid var(--panel-separator-color) !important;
+}
+
+#PlacesToolbar menupopup[placespopup="true"] menuseparator::before {
+  display: none !important;
+}
+
+menupopup menu,
+menupopup menuitem,
+menupopup menucaption,
+#PopupAutoComplete>richlistbox>richlistitem {
+  padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important;
+  margin: var(--arrowpanel-menuitem-margin) !important;
+  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
+}
+
+:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
+:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current) {
+  padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + var(--uc-arrowpanel-menuicon-margin-inline)) !important;
+}
+
+.menu-iconic-icon {
+  margin-block: 0 !important;
+  margin-inline-end: 0 !important;
+  margin-inline-start: 0 !important;
+}
+
+.subviewbutton>.menu-iconic-text,
+menu>.menu-iconic-text,
+menuitem>.menu-iconic-text,
+.addon-banner-item>.toolbarbutton-text,
+.subviewbutton-iconic>.toolbarbutton-text,
+.subviewbutton[image]>.toolbarbutton-text,
+.subviewbutton[targetURI]>.toolbarbutton-text,
+.subviewbutton.bookmark-item>.toolbarbutton-text,
+.subviewbutton[checked="true"]>.toolbarbutton-text {
+  padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
+}
+
+.menu-text,
+.menu-iconic-text {
+  margin-inline-start: 0 !important;
+  padding-block: 0 !important;
+}
+
+.menu-iconic-left {
+  padding-inline-end: 0 !important;
+}
+
+menuitem:is(.menuitem-iconic:not([data-usercontextid]), [type="checkbox"], [type="radio"], [checked], [selected]) .menu-iconic-icon {
+  -moz-context-properties: fill !important;
+  fill: currentColor !important;
+}
+
+.menu-right,
+.menu-accel-container {
+  appearance: none !important;
+  margin-inline-end: 0 !important;
+  -moz-context-properties: fill;
+  fill: currentColor !important;
+}
+
+menupopup menuitem:is([type="checkbox"], [type="radio"]) .menu-iconic-icon,
+menulist>menupopup>menuitem .menu-iconic-icon,
+menu .menu-right {
+  height: 16px !important;
+  width: 16px !important;
+}
+
+menulist>menupopup>menuitem:is([checked="true"], [selected="true"])::before {
+  display: none !important;
+}
+
+/* workaround for inaccessible shadow-root element
+   moves the shadow-root element underneath, and away from panel edges */
+#PopupAutoComplete {
+  padding-block: 10px !important;
+  padding-inline: 2px !important;
+}
+
+panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox {
+  margin-block: -10px !important;
+  margin-inline: -2px !important;
+}
+
+#PopupAutoComplete>richlistbox>richlistitem>.two-line-wrapper {
+  padding-block: 0 !important;
+  padding-inline-end: calc((var(--uc-autocomplete-panel-menuitem-margin) + var(--arrowpanel-menuitem-padding-inline)) * 2) !important;
+}
+
+menuitem:is([type="checkbox"], [checked="true"], [type="radio"])>.menu-iconic-left>.menu-iconic-icon {
+  display: -moz-box !important;
+}
+
+menuitem[checked="true"]>.menu-iconic-left,
+.menu-iconic>.menu-iconic-left,
+.menuitem-iconic>.menu-iconic-left {
+  margin: 0 !important;
+}
+
+#context-navigation:not([hidden]) {
+  padding: 0 !important;
+  --menuitem-min-width: calc(16px + var(--arrowpanel-menuitem-padding-inline) * 2) !important;
+  min-width: calc(4 * var(--menuitem-min-width));
+}
+
+#context-navigation>.menuitem-iconic>.menu-iconic-left>.menu-iconic-icon {
+  width: 16px !important;
+  height: 16px !important;
+  padding: 0 !important;
+}
+
+#context-navigation {
+  margin-inline: var(--uc-arrowpanel-menuitem-margin-inline) !important;
+}
+
+#context-navigation>.menuitem-iconic {
+  -moz-box-pack: center !important;
+}
+
+#context-navigation>.menuitem-iconic {
+  margin: 0 !important;
+}
+
+#context-navigation>.menuitem-iconic {
+  flex-grow: 1 !important;
+  width: unset !important;
+}
+
+#context-navigation>.menuitem-iconic[_moz-menuactive="true"]>.menu-iconic-left>.menu-iconic-icon {
+  background-color: transparent !important;
+}
+
+#context-bookmarkpage[starred] .menu-iconic-icon {
+  fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
 }

chrome/global/tweaks.css

@@ -84,7 +84,7 @@ browsing indicator) */
   }
 
   /* adjust spacing of area above tabs */
-  @supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+  @media not (-moz-platform: macos) {
     :root[sizemode="maximized"] #titlebar {
       --tab-block-margin: 4px !important;
     }
@@ -183,7 +183,7 @@ browsing indicator) */
     }
 
     /* line up buttons with duplicate icons from -moz-win-glass */
-    :root:is(:not(:-moz-lwtheme),[lwt-default-theme-in-dark-mode="true"]) .titlebar-buttonbox-container {
+    :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-buttonbox-container {
       --uc-titlebar-button-size: 30px;
       --uc-titlebar-size: calc(var(--tab-min-height) + var(--tab-block-margin));
       margin-bottom: calc(var(--uc-titlebar-size) - var(--uc-titlebar-button-size)) !important;

chrome/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path transform="scale(-1 1) translate(-16 0)" d="M5.5 2a.5.5 0 0 0-.354.853L10.313 8l-5.167 5.146a.5.5 0 0 0 .707.71l5.484-5.468a.548.548 0 0 0 0-.777L5.853 2.143A.496.496 0 0 0 5.5 2z"/>
+</svg>

chrome/icons/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M14.5 2a.5.5 0 0 0-.379.174l-9.129 10.57-4.12-4.578a.5.5 0 0 0-.706-.037.5.5 0 0 0-.037.705l4.5 5a.5.5 0 0 0 .75-.008l9.5-11a.5.5 0 0 0-.053-.705A.5.5 0 0 0 14.5 2z"/>
+</svg>

chrome/icons/icons.css

@@ -2,7 +2,8 @@
 
 /* windows 11 style window controls (no known way to detect between windows 10
 and 11 so applied to both) */
-@media (-moz-windows-compositor), (-moz-gtk-csd-available) {
+@media (-moz-windows-compositor),
+(-moz-gtk-csd-available) {
   .titlebar-min {
     list-style-image: url("win11-minimize.svg") !important;
   }
@@ -36,7 +37,7 @@ and 11 so applied to both) */
 }
 
 /* disable context menu icons on macOS */
-@supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+@media not (-moz-platform: macos) {
   #context-back {
     list-style-image: url("back.svg") !important;
   }
@@ -100,9 +101,9 @@ and 11 so applied to both) */
 
 #appMenu-passwords-button,
 #password-notification-icon,
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete>richlistbox>richlistitem[originaltype="generatedPassword"]>.two-line-wrapper>.ac-site-icon,
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete>richlistbox>richlistitem[originaltype="loginWithOrigin"]>.two-line-wrapper>.ac-site-icon,
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
+#PopupAutoComplete>richlistbox>richlistitem[originaltype="login"]>.ac-site-icon {
   list-style-image: url("passwords.svg") !important;
 }
 
@@ -345,6 +346,10 @@ and 11 so applied to both) */
   list-style-image: url("arrow-right.svg") !important;
 }
 
+.panel-header>.subviewbutton-back {
+  list-style-image: url("arrow-left.svg") !important;
+}
+
 #overflowMenu-customize-button,
 #appmenu-moreTools-button {
   list-style-image: url("customize.svg") !important;
@@ -383,7 +388,6 @@ and 11 so applied to both) */
   background: url("settings.svg") !important;
 }
 
-
 .tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"] {
   background: url("extension.svg") !important;
 }
@@ -517,3 +521,45 @@ and 11 so applied to both) */
 #stop-reload-button[animate]>#reload-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image {
   background-image: url("stop-to-reload.svg") !important;
 }
+
+/* Context Menu Icons */
+menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon {
+  list-style-image: url("checkmark.svg") !important;
+}
+
+:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
+:not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current) {
+  background-image: var(--uc-menu-image) !important;
+  background-size: 16px !important;
+  background-position: var(--arrowpanel-menuitem-padding-inline) center !important;
+  background-repeat: no-repeat !important;
+  -moz-context-properties: fill, fill-opacity !important;
+  fill: currentColor !important;
+}
+
+@media (-moz-platform: macos) {
+  #context-back {
+    --uc-menu-image: url("back.svg");
+  }
+
+  #context-forward {
+    --uc-menu-image: url("forward.svg");
+  }
+
+  #context-reload {
+    --uc-menu-image: url("reload.svg");
+  }
+
+  #context-stop {
+    --uc-menu-image: url("close.svg");
+  }
+
+  #context-bookmarkpage {
+    --uc-menu-image: url("bookmark-hollow.svg");
+  }
+
+  #contentAreaContextMenu #context-bookmarkpage[starred] {
+    --uc-menu-image: url("bookmark.svg");
+    fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
+  }
+}

chrome/toolbar/navbar.css

@@ -90,7 +90,7 @@
   .toolbarbutton-1>.toolbarbutton-icon,
   .toolbarbutton-1>.toolbarbutton-text,
   .toolbarbutton-1>.toolbarbutton-badge-stack,
-  .bookmark-item,
+  .bookmark-item:not(menu, menuitem),
   .urlbar-page-action,
   .identity-box-button,
   #tracking-protection-icon-container,
@@ -101,7 +101,7 @@
   .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-icon,
   .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-text,
   .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)>.toolbarbutton-badge-stack,
-  .bookmark-item:not([disabled=true]):is([open],[checked],:hover:active),
+  .bookmark-item:not(menu, menuitem):not([disabled=true]):is([open],[checked],:hover:active),
   .urlbar-page-action:not([disabled=true]):is([open],[checked],:hover:active),
   .identity-box-button:not([disabled=true]):is([open],[checked],:hover:active),
   #tracking-protection-icon-container:not([disabled=true]):is([open],[checked],:hover:active),

chrome/toolbar/tabbar.css

@@ -29,7 +29,7 @@
 }
 
 /* hide space above tabs when maximised for non-macOS versions of Firefox */
-@supports not -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+@media not (-moz-platform: macos) {
   :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]) #titlebar,
   #toolbar-menubar:not([inactive])+#TabsToolbar {
     --tab-block-margin: 0px !important;
@@ -252,7 +252,7 @@ toolbarbutton[part="scrollbutton-down"] {
 }
 
 /* mac titlebar buttons */
-@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+@media (-moz-platform: macos) {
   @media (-moz-mac-big-sur-theme:0) {
     .titlebar-buttonbox {
       margin-inline: 10px !important;
@@ -299,7 +299,6 @@ toolbarbutton[part="scrollbutton-down"] {
   margin-inline-end: 7px !important;
 }
 
-
 .tabbrowser-tab:is([visuallyselected="true"], [multiselected])>.tab-stack>.tab-background {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0px 2px rgba(0, 0, 0, 0.2) !important;
 }

chrome/toolbar/urlbar.css

@@ -125,7 +125,6 @@
   border-radius: calc(var(--toolbarbutton-border-radius) + 2px) !important;
 }
 
-
 /* move tracking protection button */
 #tracking-protection-icon-container,
 #page-action-buttons {