1 files changed, 168 insertions, 0 deletions
diff --git a/toolkit/themes/shared/menu-shared.css b/toolkit/themes/shared/menu-shared.css
new file mode 100644
index 0000000000..40b4fdd66c
--- /dev/null
+++ b/toolkit/themes/shared/menu-shared.css
@@ -0,0 +1,168 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+*|*:root {
+  --menu-icon-opacity: 1;
+  --menu-arrow-width: 1em;
+
+  @media (-moz-platform: windows) {
+    --menu-arrow-width: max(1em, 16px);
+
+    @media (prefers-color-scheme: light) {
+      --menu-icon-opacity: 0.7;
+    }
+  }
+}
+
+/* Menu separator */
+
+menuseparator {
+  /* Using padding instead of margin to increase the hit area, as some
+     separators (e.g. in bookmarks menus) can be dragged or have a context
+     menu. */
+  padding-block: 4px;
+
+  @media (-moz-platform: macos) {
+    padding-block: 5px;
+    margin-inline: 9px;
+  }
+}
+
+menuseparator::before {
+  border-top: 1px solid var(--panel-separator-color);
+  content: "";
+  display: block;
+  flex: 1;
+}
+
+/* Accel text */
+
+@media not (prefers-contrast) {
+  menuitem:not([disabled]) > .menu-accel-container > :is(.menu-accel, .menu-iconic-accel) {
+    color: var(--panel-disabled-color);
+  }
+}
+
+/* Scroll buttons */
+
+/* Hide arrow buttons when there's nothing to scroll in that direction */
+.menupopup-arrowscrollbox[scrolledtostart="true"]::part(scrollbutton-up),
+.menupopup-arrowscrollbox[scrolledtoend="true"]::part(scrollbutton-down) {
+  display: none;
+}
+
+/* Prevent the scrolled contents of the menupopup from jumping vertically when
+ * the arrow buttons appear / disappear, by positioning ::part(scrollbox) in
+ * such a way that its edges are at the same position as the edges of
+ * arrowscrollbox regardless of scroll button visibility.
+ */
+.menupopup-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbox) {
+  /* scrollbutton-up is visible; shift our top edge up by its height. */
+  margin-top: -16px;
+}
+
+.menupopup-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbox) {
+  /* scrollbutton-down is visible; shift our bottom edge down by its height. */
+  margin-bottom: -16px;
+}
+
+.menupopup-arrowscrollbox::part(scrollbox-clip) {
+  /* In the space where the arrow buttons overlap the scrollbox, clip away the
+   * scrollbox so that nothing is shown behind the arrow button even if the
+   * button is transparent.
+   */
+  overflow: clip;
+}
+
+@media (-moz-platform: windows) or (-moz-platform: linux) {
+  menupopup,
+  menubar {
+    font: menu;
+  }
+}
+
+@media (-moz-platform: macos) {
+  menupopup {
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font: -moz-pull-down-menu;
+  }
+}
+
+menu,
+menuitem,
+menucaption {
+  border-radius: calc(var(--panel-border-radius) / 2);
+  align-items: center;
+  flex-shrink: 0;
+  list-style-image: none;
+  max-width: 42em;
+
+  @media (-moz-platform: linux) {
+    padding: 4px 6px;
+  }
+
+  @media (-moz-platform: macos) {
+    padding: 3px 9px;
+  }
+}
+
+menu,
+menuitem {
+  &:where([disabled="true"]) {
+    color: var(--panel-disabled-color);
+    text-shadow: none;
+  }
+
+  &:where([_moz-menuactive]:not([disabled="true"])) {
+    color: -moz-menuhovertext;
+    background-color: -moz-menuhover;
+  }
+
+  &:where([_moz-menuactive="true"][disabled="true"]) {
+    background-color: -moz-menuhoverdisabled;
+  }
+}
+
+menuitem:is([default="true"], .spell-suggestion),
+menucaption {
+  font-weight: bold;
+}
+
+/* ..... menu arrow box ..... */
+
+.menu-right {
+  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: var(--menu-icon-opacity);
+
+  &:-moz-locale-dir(rtl) {
+    list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+  }
+
+  > image {
+    width: var(--menu-arrow-width);
+  }
+
+  @media (-moz-platform: linux) {
+    margin-block: 0;
+    margin-inline: 6px 0;
+  }
+
+  @media (-moz-platform: macos) {
+    margin-inline: 22px -3px;
+  }
+
+  @media (-moz-platform: windows) {
+    margin-inline-end: 1em;
+  }
+}
+
+@media (-moz-platform: macos) {
+  :is(.menu-accel, .menu-iconic-accel)[value] {
+    margin-inline-start: 25px;
+  }
+}