githubmirror/pdf.js

web/menu.css
216 строк6 KB
Calixte Denizet
Make sure the menuitems are readable when hovering them (bug 2023138)
20 мар 2026, 12:01
20 мар 2026, 12:011db3774
/* Copyright 2025 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

button.hasPopupMenu {
  &[aria-expanded="true"] + menu {
    visibility: visible;
  }

  &[aria-expanded="false"] + menu {
    visibility: hidden;
  }
}

.popupMenu {
  --menuitem-checkmark-icon: url(images/checkmark.svg);
  --menu-mark-icon-size: 0;
  --menu-icon-size: 16px;
  --menuitem-gap: 5px;
  --menuitem-border-color: transparent;
  --menuitem-active-bg: color-mix(
    in srgb,
    var(--menu-text-color),
    transparent 79%
  );
  --menuitem-text-active-fg: var(--menu-text-color);
  --menuitem-active-border-color: var(--menuitem-border-color);
  --menuitem-focus-bg: color-mix(
    in srgb,
    var(--menu-text-color),
    transparent 93%
  );
  --menuitem-focus-outline-color: light-dark(#0062fa, #00cadb);
  --menuitem-focus-border-color: light-dark(white, black);

  --menu-bg: light-dark(white, #23222b);
  --menu-background-blend-mode: normal;
  --menu-box-shadow:
    0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
    0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
  --menu-border-color: light-dark(rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1));
  --menuitem-border-radius: 8px;
  --menu-backdrop-filter: none;
  --menu-text-color: light-dark(#15141a, #fbfbfe);
  --menu-text-disabled-color: var(--menu-text-color);
  --menuitem-text-hover-fg: var(--menu-text-color);
  --menuitem-hover-bg: color-mix(
    in srgb,
    var(--menu-text-color),
    transparent 86%
  );
  --menuitem-hover-background-blend-mode: normal;
  --disabled-opacity: 0.62;

  @media screen and (forced-colors: active) {
    --menu-bg: Canvas;
    --menu-background-blend-mode: normal;
    --menu-box-shadow: none;
    --menu-backdrop-filter: none;
    --menu-text-color: ButtonText;
    --menu-text-disabled-color: GrayText;
    --menu-border-color: CanvasText;
    --menuitem-border-color: none;
    --menuitem-hover-bg: SelectedItemText;
    --menuitem-text-hover-fg: SelectedItem;
    --menuitem-active-bg: SelectedItemText;
    --menuitem-active-border-color: ButtonText;
    --menuitem-text-active-fg: SelectedItem;
    --menuitem-focus-bg: ButtonFace;
    --menuitem-focus-outline-color: CanvasText;
    --menuitem-focus-border-color: none;
    --disabled-opacity: 1;
  }

  display: flex;
  flex-direction: column;
  width: max-content;
  height: auto;
  position: relative;
  left: 0;
  top: 1px;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;

  background: var(--menu-bg);
  background-blend-mode: var(--menu-background-blend-mode);
  box-shadow: var(--menu-box-shadow);
  border-radius: 6px;
  border: 1px solid var(--menu-border-color);
  backdrop-filter: var(--menu-backdrop-filter);

  &.withMark {
    --menu-mark-icon-size: 16px;
  }

  > button {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 26px;
    padding-inline: calc(var(--menu-mark-icon-size) + var(--menuitem-gap))
      var(--menuitem-gap);
    gap: var(--menuitem-gap);
    box-sizing: border-box;
    border-radius: var(--menuitem-border-radius);
    border: 1px solid var(--menuitem-border-color);
    background: transparent;

    &.selected::after {
      content: "";
      display: inline-block;
      width: 11px;
      height: 11px;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-image: var(--menuitem-checkmark-icon);
      background-color: var(--menu-text-color);
      position: absolute;
      inset-inline-start: var(--menuitem-gap);
      top: 50%;
      transform: translateY(-50%);
    }

    &:disabled {
      opacity: var(--disabled-opacity);

      &.selected::after {
        background-color: var(--menu-text-disabled-color);
      }

      &:not(.noIcon)::before {
        background-color: var(--menu-text-disabled-color);
      }

      > span {
        color: var(--menu-text-disabled-color);
      }
    }

    &:not(:disabled) {
      &:hover {
        background: var(--menuitem-hover-bg);
        background-blend-mode: var(--menuitem-hover-background-blend-mode);

        &:not(.noIcon)::before {
          background-color: var(--menuitem-text-hover-fg);
        }

        > span {
          color: var(--menuitem-text-hover-fg);
        }

        &.selected::after {
          background-color: var(--menuitem-text-hover-fg);
        }
      }

      &:active {
        background-color: var(--menuitem-active-bg);
        border-color: var(--menuitem-active-border-color);

        > span {
          color: var(--menuitem-text-active-fg);
        }
      }

      &:focus-visible {
        border-color: var(--menuitem-focus-border-color);
        background-color: var(--menuitem-focus-bg);
        outline: 2px solid var(--menuitem-focus-outline-color);
        outline-offset: 2px;
      }
    }

    &:not(.noIcon)::before {
      display: inline-block;
      width: var(--menu-icon-size);
      height: var(--menu-icon-size);
      content: "";
      mask-size: cover;
      mask-position: center;
      background-color: var(--menu-text-color);
    }

    > span {
      display: flex;
      align-items: center;
      align-self: stretch;
      width: 100%;
      min-width: max-content;
      text-align: start;
      color: var(--menu-text-color);
      user-select: none;
      padding-inline-start: 6px;

      font: menu;
      font-size: 13px;
      font-style: normal;
      font-weight: 510;
      line-height: normal;
    }
  }
}