Quelle  menu.css   Sprache: unbekannt

/* 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/. */

@import url("chrome://global/content/elements/moz-badge.tokens.css");

menupopup,
panel {
  --menu-arrow-opacity: 1;
  --menu-arrow-size: 1em;
  --menuitem-border-radius: var(--border-radius-xsmall);
  --menuitem-margin: 0;
  --menuitem-padding: 0.5em 1em;
  --menuitem-max-width: 42em;

  @media (-moz-platform: linux) {
    --menuitem-padding: 0.25em 0.5em;
  }
  @media (-moz-platform: macos) {
    /* Space tokens don't match native macOS dimensions. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    --menuitem-padding: 3px 9px;

    @media (-moz-mac-tahoe-theme) {
      /* Space tokens don't match native macOS dimensions. */
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      --menuitem-padding: 4px 11px;
      --menuitem-border-radius: var(--border-radius-medium);
    }
  }

  @media (-moz-platform: windows) {
    --menu-arrow-size: max(1em, var(--size-item-small));

    @media (prefers-color-scheme: light) {
      --menu-arrow-opacity: var(--opacity-deemphasized);
    }
  }
}

menupopup {
  font: menu;

  --menuitem-icon-fill: currentColor;
  /* Also apply the padding in the inline axis for menus */
  --panel-padding: var(--panel-padding-block);

  @media (-moz-windows-mica-popups) {
    appearance: auto;
    -moz-default-appearance: menupopup;
    /* The mica backdrop takes care of our shadow, border, and border-radius */
    --panel-border-color: transparent;
    --panel-box-shadow-margin: 0px;
    --panel-border-radius: 0px;
  }

  @media (-moz-platform: macos) {
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font: -moz-pull-down-menu;

    /* On macOS, native menu icons should always be black by default so that
       they are considered template images. Template images should be used
       whenever possible so that the OS can manage the icon color, as the OS
       theme may differ from our theme. */
    menubar[native] &,
    &:not([nonnative]) {
      --menuitem-icon-fill: black;
    }
  }

  > menu > menupopup {
    /* Vertically align nested menupopups: the shadow plus the top padding plus top border */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-top: calc(-1 * (var(--panel-box-shadow-margin) + var(--panel-padding-block) + 1px));
  }
}

/* Rules for popups associated with menulists */
menulist > menupopup {
  min-width: 0;
  font: inherit;

  @media (-moz-platform: macos) {
    color: FieldText;

    &:not([position]) {
      margin-inline-start: calc(-1 * var(--space-medium));
      margin-top: -1px;
    }
  }

  > menuitem,
  > menucaption,
  > menu {
    max-width: none;

    @media (-moz-platform: windows) {
      > label {
        padding-block: 0;
      }
    }
  }

  @media (-moz-platform: windows) {
    > menuitem[_moz-menuactive][disabled] {
      color: var(--text-color-disabled);
    }
  }
}

/* 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: var(--space-xsmall);

  @media (-moz-platform: macos) {
    padding-block: var(--space-xsmall);
    margin-inline: var(--space-small);
  }

  @media (-moz-platform: windows) {
    /* The side padding should align with the start of the menu item text. */
    padding-inline: 1em;
  }

  &::before {
    /* Color of border-top derived from currentColor */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    border-top: 1px solid var(--panel-separator-color);
    content: "";
    display: block;
    flex: 1;
  }
}

/* Scroll buttons */

/* Hide arrow buttons when there's nothing to scroll in that direction */
.menupopup-arrowscrollbox[scrolledtostart]::part(scrollbutton-up),
.menupopup-arrowscrollbox[scrolledtoend]::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 {
  /* Scrollbutton height derived from toolbarbutton list-style-image SVG width
   * of 12px and padding-block of 2px as defined in arrowscrollbox.css.
   */
  --scrollbutton-height: calc(12px + 2px + 2px);
}

.menupopup-arrowscrollbox:not([scrolledtostart])::part(scrollbox) {
  /* scrollbutton-up is visible; shift our top edge up by its height. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  margin-top: calc(-1 * var(--scrollbutton-height));
  border-top: var(--scrollbutton-height) solid transparent;
}

.menupopup-arrowscrollbox:not([scrolledtoend])::part(scrollbox) {
  /* scrollbutton-down is visible; shift our bottom edge down by its height. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  margin-bottom: calc(-1 * var(--scrollbutton-height));
  border-bottom: var(--scrollbutton-height) solid transparent;
}

menubar {
  font: menu;
}

menubar > menu {
  @media (-moz-platform: linux) {
    color: inherit;
    background-color: transparent;
    border-radius: 0;
    padding: 0.25em 0.5em;
    padding-bottom: 1px;
    border-bottom: 3px solid transparent;

    &[open] {
      border-bottom-color: AccentColor;
    }
  }

  @media (-moz-platform: macos) {
    padding-block: var(--space-xxsmall);
    padding-inline: var(--space-small) var(--space-xsmall);
    margin: 1px 0;
  }

  @media (-moz-platform: windows) {
    padding: 1px var(--space-small) var(--space-xxsmall);

    &:-moz-window-inactive {
      color: var(--text-color-deemphasized);
    }

    &:not([disabled]) {
      color: inherit;
    }
    &[_moz-menuactive]:not([disabled]) {
      color: -moz-menubarhovertext;

      *|*:root[lwtheme] & {
        /* FIXME: This feels out of place, maybe we can just use the lwtheme
         * rules everywhere? */
        background-color: SelectedItem;
        color: SelectedItemText;
        text-shadow: none;
      }
    }
  }

  > .menu-text {
    margin: 0;
  }
}

menu,
menuitem,
menucaption {
  border-radius: var(--menuitem-border-radius);
  /* --menuitem-padding uses px values on macOS to match native menus. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  padding: var(--menuitem-padding);
  margin: var(--menuitem-margin);
  align-items: center;
  flex-shrink: 0;
  list-style-image: none;
  max-width: var(--menuitem-max-width);
  /* Prevents the icon from being inherited to submenus. */
  --menuitem-icon: normal;
}

menu,
menuitem {
  -moz-context-properties: fill;
  fill: var(--menuitem-icon-fill);

  &:where([disabled]) {
    color: var(--text-color-disabled);
    text-shadow: none;
  }

  &:where([_moz-menuactive]:not([disabled])) {
    color: -moz-menuhovertext;
    background-color: -moz-menuhover;
  }

  &:where([_moz-menuactive][disabled]) {
    background-color: -moz-menuhoverdisabled;
  }
}

menuitem:is([default="true"], .spell-suggestion),
menucaption {
  font-weight: var(--font-weight-bold);
}

.menu-icon,
.menu-text,
.menu-highlightable-text,
.menu-accel {
  pointer-events: none;
}

/* ..... menu arrow box ..... */

menupopup > menu::after {
  content: "";
  display: block;
  width: var(--menu-arrow-size);
  height: var(--menu-arrow-size);
  background-image: url("chrome://global/skin/icons/arrow-right.svg");
  background-size: var(--menu-arrow-size);

  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--menu-arrow-opacity);

  margin-inline: 1em 0;
  @media (-moz-platform: linux) {
    margin-inline: 0.5em 0;
  }
  @media (-moz-platform: macos) {
    margin-inline: var(--space-xlarge) calc(-1 * var(--space-xxsmall));
  }
}

menupopup > menu:-moz-locale-dir(rtl)::after {
  background-image: url("chrome://global/skin/icons/arrow-left.svg");
}

.menu-text,
.menu-accel {
  margin: 0;
  @media (-moz-platform: windows) {
    padding: 1px 0;
  }
  @media (-moz-platform: linux) {
    /* --space-xxsmall (0.125rem) only equals 2px at a 16px root font, causing
     * rounding differences in layout at other font sizes.
     */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-inline: 0 2px;
  }
}

/* Accel text */

.menu-accel {
  margin-inline: 0.74em 0.35em;
  @media (-moz-platform: macos) {
    /* margin-inline mimics natively-rendered menus */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-inline: 25px 0;
  }
  @media (-moz-platform: linux) {
    /* Matches the margin-inline-end on iconic-left */
    margin-inline: var(--space-small) 0;
  }

  @media not (prefers-contrast) {
    menuitem:not([disabled]) > & {
      color: var(--text-color-disabled);
    }
  }

  :is(menu, menuitem):not([acceltext]) > & {
    display: none;
  }
}

menuitem:not([highlightable]) > .menu-highlightable-text,
menuitem[highlightable] > .menu-text {
  display: none;
}

.menu-highlightable-text,
.menu-text {
  flex: 1;
}

.menu-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  box-sizing: border-box;

  /* Empty icons shouldn't take up any space */
  display: none;
  /* This avoids showing the broken image border for non-iconic items when
   * adding a gutter */
  visibility: hidden;

  @media (-moz-platform: linux) {
    /* Matches inline menuitem padding */
    margin-inline-end: 0.5em;
  }
  @media (-moz-platform: windows) {
    margin-top: var(--space-xxsmall);
    margin-inline-end: var(--space-small);
  }
  @media (-moz-platform: macos) {
    margin-block: calc(-1 * var(--space-xxsmall));
    margin-inline-end: var(--space-small);
  }

  menuitem:where(.menuitem-iconic, [image]) > &,
  menu:where(.menu-iconic) > & {
    &:where(:not([srcset])) {
      content: var(--menuitem-icon);
    }
    display: revert;
    visibility: inherit;
  }
}

/* checkbox / radio rendering */

/* On linux, we use regular checkboxes and radio buttons */
@media (-moz-platform: linux) {
  menuitem:is([type="checkbox"], [checked]) > .menu-icon {
    visibility: inherit;
    appearance: auto;
    -moz-default-appearance: checkbox;
  }

  menuitem[type="radio"] > .menu-icon {
    visibility: inherit;
    appearance: auto;
    -moz-default-appearance: radio;
  }
}

/* On windows we use a checkmark */
@media (-moz-platform: windows) {
  /* We need to do something to override the default style for selected
     checkboxes and radio buttons because the native drawing we use on other
     Windows versions looks pretty bad with the Win10 styles, so for now we'll
     insert a generic checkmark icon for both types. */
  menuitem[checked] > .menu-icon {
    visibility: inherit;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
    fill-opacity: var(--menu-arrow-opacity);
    content: url("chrome://global/skin/icons/menu-check.svg");
  }
}

menupopup[needsgutter] {
  @media (-moz-platform: linux) or (-moz-platform: windows) {
    > :is(menu, menuitem) > .menu-icon {
      display: revert;
    }
  }

  @media (-moz-platform: macos) {
    /* although only menuitems may be checked, apply this to
       menus and menucaptions as well to maintain alignment */
    > menu,
    > menuitem,
    > menucaption {
      padding-inline-start: 0;

      &::before {
        content: "\2713"; /* a checkmark */
        display: inline-block;
        vertical-align: middle;
        line-height: 0;
        visibility: hidden;
        padding-inline: var(--space-xsmall);
        font-weight: var(--font-weight-bold);
      }
    }

    > menuitem:is([checked], [selected])::before {
      visibility: inherit;
    }
  }
}

menuitem[badge]::after {
  border-radius: var(--border-radius-small);
  border: 1px solid var(--badge-border-color);
  color: var(--badge-text-color);
  background-color: var(--badge-background-color);
  content: attr(badge);
  margin-inline-start: var(--space-small);
  padding: var(--space-xxsmall) var(--space-small);
}

menuitem.badge-new::after {
  border-color: var(--badge-border-color-filled);
  color: var(--badge-text-color-filled);
  background-color: var(--badge-background-color-filled);
}