githubmirror/pdf.js

web/dialog.css
331 строка9 KB
Ujjwal Sharma
Break messageBar class out
03 дек 2024, 01:01
03 дек 2024, 01:01962eb62
/* Copyright 2022 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.
 */

.dialog {
  --dialog-bg-color: white;
  --dialog-border-color: white;
  --dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
  --text-primary-color: #15141a;
  --text-secondary-color: #5b5b66;
  --hover-filter: brightness(0.9);
  --focus-ring-color: #0060df;
  --focus-ring-outline: 2px solid var(--focus-ring-color);
  --link-fg-color: #0060df;
  --link-hover-fg-color: #0250bb;
  --separator-color: #f0f0f4;

  --textarea-border-color: #8f8f9d;
  --textarea-bg-color: white;
  --textarea-fg-color: var(--text-secondary-color);

  --radio-bg-color: #f0f0f4;
  --radio-checked-bg-color: #fbfbfe;
  --radio-border-color: #8f8f9d;
  --radio-checked-border-color: #0060df;

  --button-secondary-bg-color: #f0f0f4;
  --button-secondary-fg-color: var(--text-primary-color);
  --button-secondary-border-color: var(--button-secondary-bg-color);
  --button-secondary-hover-bg-color: var(--button-secondary-bg-color);
  --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
  --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);

  --button-primary-bg-color: #0060df;
  --button-primary-fg-color: #fbfbfe;
  --button-primary-border-color: var(--button-primary-bg-color);
  --button-primary-hover-bg-color: var(--button-primary-bg-color);
  --button-primary-hover-fg-color: var(--button-primary-fg-color);
  --button-primary-hover-border-color: var(--button-primary-hover-bg-color);

  @media (prefers-color-scheme: dark) {
    --dialog-bg-color: #1c1b22;
    --dialog-border-color: #1c1b22;
    --dialog-shadow: 0 2px 14px 0 #15141a;
    --text-primary-color: #fbfbfe;
    --text-secondary-color: #cfcfd8;
    --focus-ring-color: #0df;
    --hover-filter: brightness(1.4);
    --link-fg-color: #0df;
    --link-hover-fg-color: #80ebff;
    --separator-color: #52525e;

    --textarea-bg-color: #42414d;

    --radio-bg-color: #2b2a33;
    --radio-checked-bg-color: #15141a;
    --radio-checked-border-color: #0df;

    --button-secondary-bg-color: #2b2a33;
    --button-primary-bg-color: #0df;
    --button-primary-fg-color: #15141a;
  }

  @media screen and (forced-colors: active) {
    --dialog-bg-color: Canvas;
    --dialog-border-color: CanvasText;
    --dialog-shadow: none;
    --text-primary-color: CanvasText;
    --text-secondary-color: CanvasText;
    --hover-filter: none;
    --focus-ring-color: ButtonBorder;
    --link-fg-color: LinkText;
    --link-hover-fg-color: LinkText;
    --separator-color: CanvasText;

    --textarea-border-color: ButtonBorder;
    --textarea-bg-color: Field;
    --textarea-fg-color: ButtonText;

    --radio-bg-color: ButtonFace;
    --radio-checked-bg-color: ButtonFace;
    --radio-border-color: ButtonText;
    --radio-checked-border-color: ButtonText;

    --button-secondary-bg-color: ButtonFace;
    --button-secondary-fg-color: ButtonText;
    --button-secondary-border-color: ButtonText;
    --button-secondary-hover-bg-color: AccentColor;
    --button-secondary-hover-fg-color: AccentColorText;

    --button-primary-bg-color: ButtonText;
    --button-primary-fg-color: ButtonFace;
    --button-primary-hover-bg-color: AccentColor;
    --button-primary-hover-fg-color: AccentColorText;
  }

  font: message-box;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
  border-radius: 4px;
  padding: 12px 16px;
  border: 1px solid var(--dialog-border-color);
  background: var(--dialog-bg-color);
  color: var(--text-primary-color);
  box-shadow: var(--dialog-shadow);

  .mainContainer {
    *:focus-visible {
      outline: var(--focus-ring-outline);
      outline-offset: 2px;
    }

    .title {
      display: flex;
      width: auto;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 12px;

      > span {
        font-size: 13px;
        font-style: normal;
        font-weight: 590;
        line-height: 150%; /* 19.5px */
      }
    }

    .dialogSeparator {
      width: 100%;
      height: 0;
      margin-block: 4px;
      border-top: 1px solid var(--separator-color);
      border-bottom: none;
    }

    .dialogButtonsGroup {
      display: flex;
      gap: 12px;
      align-self: flex-end;
    }

    .radio {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;

      > .radioButton {
        display: flex;
        gap: 8px;
        align-self: stretch;
        align-items: center;

        input {
          appearance: none;
          box-sizing: border-box;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: var(--radio-bg-color);
          border: 1px solid var(--radio-border-color);

          &:hover {
            filter: var(--hover-filter);
          }

          &:checked {
            background-color: var(--radio-checked-bg-color);
            border: 4px solid var(--radio-checked-border-color);
          }
        }
      }

      > .radioLabel {
        display: flex;
        padding-inline-start: 24px;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;

        > span {
          flex: 1 0 0;
          font-size: 11px;
          color: var(--text-secondary-color);
        }
      }
    }

    button:not(:is(.toggle-button, .closeButton)) {
      border-radius: 4px;
      border: 1px solid;
      font: menu;
      font-weight: 600;
      padding: 4px 16px;
      width: auto;
      height: 32px;

      &:hover {
        cursor: pointer;
        filter: var(--hover-filter);
      }

      &.secondaryButton {
        color: var(--button-secondary-fg-color);
        background-color: var(--button-secondary-bg-color);
        border-color: var(--button-secondary-border-color);

        &:hover {
          color: var(--button-secondary-hover-fg-color);
          background-color: var(--button-secondary-hover-bg-color);
          border-color: var(--button-secondary-hover-border-color);
        }
      }

      &.primaryButton {
        color: var(--button-primary-fg-color);
        background-color: var(--button-primary-bg-color);
        border-color: var(--button-primary-border-color);
        opacity: 1;

        &:hover {
          color: var(--button-primary-hover-fg-color);
          background-color: var(--button-primary-hover-bg-color);
          border-color: var(--button-primary-hover-border-color);
        }
      }
    }

    a {
      color: var(--link-fg-color);

      &:hover {
        color: var(--link-hover-fg-color);
      }
    }

    textarea {
      font: inherit;
      padding: 8px;
      resize: none;
      margin: 0;
      box-sizing: border-box;
      border-radius: 4px;
      border: 1px solid var(--textarea-border-color);
      background: var(--textarea-bg-color);
      color: var(--textarea-fg-color);

      &:focus {
        outline-offset: 0;
        border-color: transparent;
      }

      &:disabled {
        pointer-events: none;
        opacity: 0.4;
      }
    }

    .messageBar {
      --message-bar-bg-color: #ffebcd;
      --message-bar-fg-color: #15141a;
      --message-bar-border-color: rgb(0 0 0 / 0.08);
      --message-bar-icon: url(images/messageBar_warning.svg);
      --message-bar-icon-color: #cd411e;

      @media (prefers-color-scheme: dark) {
        --message-bar-bg-color: #5a3100;
        --message-bar-fg-color: #fbfbfe;
        --message-bar-border-color: rgb(255 255 255 / 0.08);
        --message-bar-icon-color: #e49c49;
      }

      @media screen and (forced-colors: active) {
        --message-bar-bg-color: HighlightText;
        --message-bar-fg-color: CanvasText;
        --message-bar-border-color: CanvasText;
        --message-bar-icon-color: CanvasText;
      }

      align-self: stretch;

      > div {
        &::before,
        > div {
          margin-block: 4px;
        }

        > div {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
          flex: 1 0 0;

          .title {
            font-size: 13px;
            font-weight: 590;
          }

          .description {
            font-size: 13px;
          }
        }
      }
    }

    .toggler {
      display: flex;
      align-items: center;
      gap: 8px;
      align-self: stretch;

      > .togglerLabel {
        user-select: none;
      }
    }
  }
}