signature_manager.css

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

:root {
  --clear-signature-button-icon: url(images/editor-toolbar-delete.svg);
  --signature-bg: #f9f9fb;
  --signature-hover-bg: #f0f0f4;
  --button-signature-bg: transparent;
  --button-signature-color: var(--main-color);
  --button-signature-active-bg: #cfcfd8;
  --button-signature-active-border: none;
  --button-signature-active-color: var(--button-signature-color);
  --button-signature-border: none;
  --button-signature-hover-bg: #e0e0e6;
  --button-signature-hover-color: var(--button-signature-color);

  @media (prefers-color-scheme: dark) {
    --signature-bg: #2b2a33;
    --signature-hover-bg: var(--signature-bg);
    --button-signature-active-bg: #5b5b66;
    --button-signature-hover-bg: #52525e;
  }

  @media screen and (forced-colors: active) {
    --signature-bg: HighlightText;
    --signature-hover-bg: var(--signature-bg);
    --button-signature-bg: HighlightText;
    --button-signature-color: ButtonText;
    --button-signature-active-bg: ButtonText;
    --button-signature-active-color: HighlightText;
    --button-signature-border: 1px solid ButtonText;
    --button-signature-hover-bg: Highlight;
    --button-signature-hover-color: HighlightText;
  }
}

.signatureDialog {
  --primary-color: var(--text-primary-color);
  --description-input-color: var(--primary-color);
  --border-color: #8f8f9d;

  @media screen and (forced-colors: active) {
    --primary-color: ButtonText;
    --border-color: ButtonText;
  }

  width: 570px;
  max-width: 100%;
  min-width: 300px;
  padding: 16px 0;

  .mainContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    span:not([role="sectionhead"]) {
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }

    .title {
      margin-inline-start: 16px;
    }
  }

  .inputWithClearButton {
    --button-dimension: 24px;

    --closing-button-icon: url(images/messageBar_closingButton.svg);
    --closing-button-color: var(--primary-color);

    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    > input {
      width: 100%;
      height: 32px;
      padding-inline: 8px calc(4px + var(--button-dimension));
      box-sizing: border-box;
      background-color: transparent;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      color: var(--description-input-color);
    }

    .clearInputButton {
      position: absolute;
      inset-block-start: 4px;
      inset-inline-end: 4px;
      display: inline-block;
      width: var(--button-dimension);
      height: var(--button-dimension);
      background-color: var(--closing-button-color);
      mask-size: cover;
      mask-image: var(--closing-button-icon);
      padding: 0;
      border: 0;
    }
  }
}

#addSignatureDialog {
  --secondary-color: var(--text-secondary-color);
  --bg-hover: #e0e0e6;
  --tab-top-line-active-color: #0060df;
  --tab-top-line-active-hover-color: var(--tab-text-hover-color);
  --tab-top-line-hover-color: #8f8f9d;
  --tab-top-line-inactive-color: #cfcfd8;
  --tab-bottom-line-active-color: var(--tab-top-line-inactive-color);
  --tab-bottom-line-hover-color: var(--tab-top-line-inactive-color);
  --tab-bottom-line-inactive-color: var(--tab-top-line-inactive-color);
  --tab-bg: var(--dialog-bg-color);
  --tab-bg-active-color: var(--tab-bg);
  --tab-bg-active-hover-color: var(--bg-hover);
  --tab-bg-hover: var(--bg-hover);
  --tab-text-color: var(--primary-color);
  --tab-text-active-color: var(--tab-top-line-active-color);
  --tab-text-active-hover-color: var(--tab-text-hover-color);
  --tab-text-hover-color: var(--tab-text-color);
  --signature-placeholder-color: var(--secondary-color);
  --signature-draw-placeholder-color: var(--primary-color);
  --signature-color: var(--primary-color);
  --clear-signature-button-border-width: 0;
  --clear-signature-button-border-style: solid;
  --clear-signature-button-border-color: transparent;
  --clear-signature-button-border-disabled-color: transparent;
  --clear-signature-button-color: var(--primary-color);
  --clear-signature-button-hover-color: var(--clear-signature-button-color);
  --clear-signature-button-active-color: var(--clear-signature-button-color);
  --clear-signature-button-disabled-color: var(--clear-signature-button-color);
  --clear-signature-button-focus-color: var(--clear-signature-button-color);
  --clear-signature-button-bg: var(--dialog-bg-color);
  --clear-signature-button-bg-hover: var(--bg-hover);
  --clear-signature-button-bg-active: #cfcfd8;
  --clear-signature-button-bg-focus: #f0f0f4;
  --clear-signature-button-bg-disabled: color-mix(
    in srgb,
    #f0f0f4,
    transparent 40%
  );
  --save-warning-color: var(--secondary-color);
  --thickness-bg: var(--dialog-bg-color);
  --thickness-label-color: var(--primary-color);
  --thickness-slider-color: var(--primary-color);
  --draw-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;

  @media (prefers-color-scheme: dark) {
    /* TODO: Update the dialog colors for dark mode but in dialog.css */
    --dialog-bg-color: #42414d;
    --bg-hover: #52525e;
    --primary-color: #fbfbfe;
    --secondary-color: #cfcfd8;
    --tab-top-line-active-color: #0df;
    --tab-top-line-inactive-color: #8f8f9d;
    --clear-signature-button-bg-active: #5b5b66;
    --clear-signature-button-bg-focus: #2b2a33;
    --clear-signature-button-bg-disabled: color-mix(
      in srgb,
      #2b2a33,
      transparent 40%
    );
  }

  @media screen and (forced-colors: active) {
    --secondary-color: ButtonText;
    --bg: HighlightText;
    --bg-hover: var(--bg);
    --tab-top-line-active-color: ButtonText;
    --tab-top-line-active-hover-color: HighlightText;
    --tab-top-line-hover-color: SelectedItem;
    --tab-top-line-inactive-color: ButtonText;
    --tab-bottom-line-active-color: var(--tab-top-line-active-color);
    --tab-bottom-line-hover-color: var(--tab-top-line-hover-color);
    --tab-bg: var(--bg);
    --tab-bg-active-color: SelectedItem;
    --tab-bg-active-hover-color: SelectedItem;
    --tab-text-color: ButtonText;
    --tab-text-active-color: HighlightText;
    --tab-text-active-hover-color: HighlightText;
    --tab-text-hover-color: SelectedItem;
    --signature-color: ButtonText;
    --clear-signature-button-border-width: 1px;
    --clear-signature-button-border-style: solid;
    --clear-signature-button-border-color: ButtonText;
    --clear-signature-button-border-disabled-color: GrayText;
    --clear-signature-button-color: ButtonText;
    --clear-signature-button-hover-color: HighlightText;
    --clear-signature-button-active-color: SelectedItem;
    --clear-signature-button-focus-color: CanvasText;
    --clear-signature-button-disabled-color: GrayText;
    --clear-signature-button-bg: var(--bg);
    --clear-signature-button-bg-hover: SelectedItem;
    --clear-signature-button-bg-active: var(--bg);
    --clear-signature-button-bg-focus: var(--bg);
    --clear-signature-button-bg-disabled: var(--bg);
    --thickness-bg: Canvas;
    --thickness-label-color: CanvasText;
    --thickness-slider-color: ButtonText;
  }

  #addSignatureDialogLabel {
    overflow: hidden;
    position: absolute;
    inset: 0;
    width: 0;
    height: 0;
  }

  &.waiting::after {
    content: "";
    cursor: wait;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .mainContainer {
    [role="tablist"] {
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: 0;

      > [role="tab"] {
        flex: 1 0 0;
        align-self: stretch;
        background-color: var(--tab-bg);
        padding-inline: 0;
        cursor: default;

        border-inline: 0;
        border-block-width: 1px;
        border-block-style: solid;
        border-block-start-color: var(--tab-top-line-inactive-color);
        border-block-end-color: var(--tab-bottom-line-inactive-color);
        border-radius: 0;

        font: menu;
        font-size: 13px;
        font-style: normal;
        line-height: normal;
        font-weight: 400;
        color: var(--tab-text-color);

        &:hover {
          border-block-start-width: 2px;
          border-block-start-color: var(--tab-top-line-hover-color);
          border-block-end-color: var(--tab-bottom-line-hover-color);
          background-color: var(--tab-bg-hover);
          color: var(--tab-text-hover-color);
        }

        &:focus-visible {
          outline: 2px solid var(--tab-top-line-active-color);
          outline-offset: -2px;
        }

        &[aria-selected="true"] {
          border-block-start-width: 2px;
          border-block-start-color: var(--tab-top-line-active-color);
          border-block-end-color: var(--tab-bottom-line-active-color);
          background-color: var(--tab-bg-active-color);
          font-weight: 590;
          color: var(--tab-text-active-color);

          &:hover {
            border-block-start-color: var(--tab-top-line-active-hover-color);
            background-color: var(--tab-bg-active-hover-color);
            color: var(--tab-text-active-hover-color);
          }
        }
      }
    }

    #addSignatureActionContainer {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      align-self: stretch;
      gap: 12px;
      padding-inline: 16px;
      box-sizing: border-box;

      > [role="tabpanel"] {
        position: relative;
        width: 100%;
        height: 220px;
        background-color: var(--signature-bg);
        border-radius: 4px;

        > svg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          background-color: transparent;
        }

        &#addSignatureTypeContainer {
          display: none;

          #addSignatureTypeInput {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            padding: 0;
            text-align: center;
            color: var(--signature-color);
            background-color: transparent;

            font-family:
              "Brush script", "Apple Chancery", "Segoe script",
              "Freestyle Script", "Palace Script MT", "Brush Script MT", TK,
              cursive, serif;
            font-size: 44px;
            font-style: italic;
            font-weight: 400;

            &::placeholder {
              color: var(--signature-placeholder-color);
              text-align: center;

              font: menu;
              font-style: normal;
              font-weight: 274;
              font-size: 44px;
              line-height: normal;
            }
          }
        }

        &#addSignatureDrawContainer {
          display: none;

          > span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: grid;
            align-items: center;
            justify-content: center;

            background-color: transparent;
            color: var(--signature-placeholder-color);
            user-select: none;
          }

          > svg {
            stroke: var(--primary-color);
            fill: none;
            stroke-opacity: 1;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 10;

            &:hover {
              cursor: var(--draw-cursor);
            }
          }

          #thickness {
            position: absolute;
            width: 100%;
            inset-block-end: 0;
            display: grid;
            align-items: center;
            justify-content: center;
            pointer-events: none;

            > span {
              color: var(--signature-draw-placeholder-color);
            }

            > div {
              width: auto;
              height: auto;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 8px;
              padding: 6px 8px;
              margin: 0;
              background-color: var(--thickness-bg);
              border-radius: 4px 4px 0 0;
              pointer-events: auto;

              > label {
                color: var(--thickness-label-color);
              }

              > input {
                width: 100px;
                height: 14px;
                background-color: transparent;

                /*#if !MOZCENTRAL*/
                &::-webkit-slider-runnable-track,
                /*#endif*/
                &::-moz-range-track,
                &::-moz-range-progress {
                  background-color: var(--thickness-slider-color);
                }

                /*#if !MOZCENTRAL*/
                &::-webkit-slider-thumb,
                /*#endif*/
                &::-moz-range-thumb {
                  background-color: var(--thickness-bg);
                }

                border-radius: 4.5px;
                border: 0;
                color: var(--signature-color);
              }
            }
          }
        }

        &#addSignatureImageContainer {
          display: none;

          > svg {
            stroke: none;
            stroke-width: 0;
            fill: var(--primary-color);
            fill-opacity: 1;
          }

          #addSignatureImagePlaceholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            a {
              text-decoration: underline;
              cursor: pointer;
            }
          }

          #addSignatureFilePicker {
            visibility: hidden;
            position: relative;
            width: 0;
            height: 0;
          }
        }
      }

      &[data-selected="type"] > #addSignatureTypeContainer,
      &[data-selected="draw"] > #addSignatureDrawContainer,
      &[data-selected="image"] > #addSignatureImageContainer {
        display: block;
      }

      #addSignatureControls {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;

        #horizontalContainer {
          display: flex;
          align-items: flex-end;
          gap: 16px;
          align-self: stretch;

          #addSignatureDescriptionContainer {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            flex: 1 0 0;

            > label {
              width: auto;
            }
          }

          #clearSignatureButton {
            display: flex;
            height: 32px;
            padding: 4px 8px;
            align-items: center;
            background-color: var(--clear-signature-button-bg);
            border-width: var(--clear-signature-button-border-width);
            border-style: var(--clear-signature-button-border-style);
            border-color: var(--clear-signature-button-border-color);
            border-radius: 4px;

            > span {
              display: flex;
              height: 24px;
              align-items: center;
              gap: 4px;
              flex-shrink: 0;

              color: var(--clear-signature-button-color);

              &::after {
                content: "";
                display: inline-block;
                width: 16px;
                height: 16px;
                mask-image: var(--clear-signature-button-icon);
                mask-size: cover;
                background-color: var(--clear-signature-button-color);
                flex-shrink: 0;
              }
            }

            &:hover {
              background-color: var(--clear-signature-button-bg-hover);

              > span {
                color: var(--clear-signature-button-hover-color);
                &::after {
                  background-color: var(--clear-signature-button-hover-color);
                }
              }
            }

            &:active {
              background-color: var(--clear-signature-button-bg-active);

              > span {
                color: var(--clear-signature-button-active-color);
                &::after {
                  background-color: var(--clear-signature-button-active-color);
                }
              }
            }

            &:focus-visible {
              background-color: var(--clear-signature-button-bg-focus);

              > span {
                color: var(--clear-signature-button-focus-color);
                &::after {
                  background-color: var(--clear-signature-button-focus-color);
                }
              }
            }

            &:disabled {
              background-color: var(--clear-signature-button-bg-disabled);
              border-color: var(--clear-signature-button-border-disabled-color);

              > span {
                color: var(--clear-signature-button-disabled-color);
                &::after {
                  background-color: var(
                    --clear-signature-button-disabled-color
                  );
                }
              }
            }
          }
        }

        #addSignatureSaveContainer {
          display: grid;
          grid-template-columns: max-content max-content;
          gap: 4px;
          width: 100%;

          > input {
            margin: 0;
          }

          > label {
            user-select: none;
          }

          &:not(.fullStorage) #addSignatureSaveWarning {
            display: none;
          }

          &.fullStorage #addSignatureSaveWarning {
            display: block;
            opacity: 1;
            color: var(--save-warning-color);
            font-size: 11px;
          }

          &:is([disabled], .fullStorage) {
            pointer-events: none;

            > :not(#addSignatureSaveWarning) {
              opacity: 0.4;
            }
          }
        }
      }
    }
  }
}

#editSignatureDescriptionDialog {
  .mainContainer {
    padding-inline: 16px;
    box-sizing: border-box;

    .title {
      margin-inline-start: 0;
    }

    #editSignatureDescriptionAndView {
      width: auto;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 12px;
      align-self: stretch;

      #editSignatureDescriptionContainer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        flex: 1 1 auto;
      }

      > svg {
        width: 210px;
        height: 180px;
        padding: 8px;
        background-color: var(--signature-bg);

        > path {
          stroke: var(--button-signature-color);
          stroke-width: 1px;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-miterlimit: 10;
          vector-effect: non-scaling-stroke;
          fill: none;

          &.contours {
            fill: var(--button-signature-color);
            stroke-width: 0.5px;
          }
        }
      }
    }
  }
}

#editorSignatureParamsToolbar {
  padding: 8px;

  #addSignatureDoorHanger {
    gap: 8px;
    padding: 2px;

    .toolbarAddSignatureButtonContainer {
      height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      gap: 8px;

      button {
        border: var(--button-signature-border);
        border-radius: 4px;
        background-color: var(--button-signature-bg);
        color: var(--button-signature-color);

        &:hover {
          background-color: var(--button-signature-hover-bg);
        }

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

          &::before {
            background-color: var(--button-signature-active-color);
          }
        }

        &:focus-visible {
          outline: var(--focus-ring-outline);

          &::before {
            background-color: var(--button-signature-color);
          }
        }
      }

      .deleteButton {
        &::before {
          mask-image: var(--clear-signature-button-icon);
        }
      }

      .toolbarAddSignatureButton {
        width: auto;
        height: 100%;
        min-height: var(--menuitem-height);
        aspect-ratio: unset;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        outline: none;
        border-radius: 4px;
        box-sizing: border-box;
        font: message-box;
        position: relative;
        flex: 1 1 auto;
        padding: 0;
        gap: 8px;
        text-align: start;
        white-space: normal;
        cursor: default;
        overflow: hidden;

        > svg {
          display: inline-block;
          height: 100%;
          aspect-ratio: 1;
          background-color: var(--signature-bg);
          flex: none;
          padding: 4px;
          box-sizing: border-box;
          border: none;
          border-radius: 4px;

          > path {
            stroke: var(--button-signature-color);
            stroke-width: 1px;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 10;
            vector-effect: non-scaling-stroke;
            fill: none;

            &.contours {
              fill: var(--button-signature-color);
              stroke-width: 0.5px;
            }
          }
        }

        &:is(:hover, :active) > svg {
          border-radius: 4px 0 0 4px;
          background-color: var(--signature-hover-bg);
        }

        &:hover {
          > span {
            color: var(--button-signature-hover-color);
          }
        }

        &:active {
          background-color: var(--button-signature-active-bg);
        }

        &:is([disabled="disabled"], [disabled]) {
          opacity: 0.5;
          pointer-events: none;
        }

        > span {
          height: auto;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1 1 auto;
          font: menu;
          font-size: 13px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          overflow: hidden;
        }
      }
    }
  }
}

.editDescription.altText {
  --alt-text-add-image: url(images/editor-toolbar-edit.svg) !important;

  &::before {
    width: 16px !important;
    height: 16px !important;
  }
}