diff --git a/scss/abstracts/_svgicon.scss b/scss/abstracts/_svgicon.scss index 288da5fe50..e582be0ab9 100644 --- a/scss/abstracts/_svgicon.scss +++ b/scss/abstracts/_svgicon.scss @@ -24,7 +24,9 @@ @mixin svgicon-menu($icon, $color, $size: "16", $prefix: false, $has2x: false, $light-dark: false) { // Disable 2x because list-style-image doesn't support image-set + // list-style-image is used by native macOS menus, --menuitem-icon by in-content menus list-style-image: -make-icon-background($icon, $color, $size, $prefix, false); + --menuitem-icon: #{-make-icon-background($icon, $color, $size, $prefix, false)}; @if ($color == 'universal') { @if ($light-dark) { @include light-dark(fill, nth($light-dark, 1), nth($light-dark, 2)); diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss index 1174afa48d..6173a0d834 100644 --- a/scss/components/_menu.scss +++ b/scss/components/_menu.scss @@ -89,7 +89,7 @@ $menu-icons: ( @include macOS-hide-menu-icons; } -menupopup image { +menupopup :is(image, .menu-icon) { -moz-context-properties: fill, fill-opacity; fill: var(--fill-secondary); @@ -103,9 +103,11 @@ menu { &.zotero-custom-menu-item { @media (prefers-color-scheme: light) { list-style-image: var(--custom-menu-icon-light, none); + --menuitem-icon: var(--custom-menu-icon-light, none); } @media (prefers-color-scheme: dark) { list-style-image: var(--custom-menu-icon-dark, none); + --menuitem-icon: var(--custom-menu-icon-dark, none); } } } diff --git a/scss/linux/_menu.scss b/scss/linux/_menu.scss index 5e1e521f94..fe6d8abc9c 100644 --- a/scss/linux/_menu.scss +++ b/scss/linux/_menu.scss @@ -1,6 +1,6 @@ menu, menuitem { - .menu-icon[src] { + .menu-icon[srcset] { -moz-default-appearance: none; } } diff --git a/scss/win/components/_menupopup.scss b/scss/win/components/_menupopup.scss index 54fdca9580..e797528f4e 100644 --- a/scss/win/components/_menupopup.scss +++ b/scss/win/components/_menupopup.scss @@ -26,7 +26,7 @@ menupopup { } menuitem:is([checked]):is([type="radio"]) > .menu-icon { - list-style-image: url("chrome://zotero/skin/win/menu-radio.svg"); + content: url("chrome://zotero/skin/win/menu-radio.svg"); } menulist { @@ -45,10 +45,11 @@ menulist { & > .menu-icon { display: revert; + visibility: inherit; -moz-context-properties: fill, fill-opacity; fill: currentColor; - fill-opacity: var(--menu-icon-opacity); - list-style-image: url("chrome://zotero/skin/win/menu-radio.svg"); + fill-opacity: var(--menu-arrow-opacity); + content: url("chrome://zotero/skin/win/menu-radio.svg"); width: 16px; margin-inline-end: 8px; }