pdf.js/web/annotation_editor_layer_builder.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 {
  --outline-width: 2px;
  --outline-color: blue;
  --focus-outline: solid var(--outline-width) var(--outline-color);
  --hover-outline: dashed var(--outline-width) var(--outline-color);
  --freetext-line-height: 1.35;
  --freetext-padding: 2px;
  --resizer-size: 8px;
  --resizer-shift: calc(
    0px - var(--outline-width) - var(--resizer-size) / 2 - var(--outline-width) /
      2
  );
  --resizer-color: white;
  --editorFreeText-editing-cursor: text;
  /*#if COMPONENTS*/
  --editorInk-editing-cursor: pointer;
  /*#else*/
  --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
  /*#endif*/
}

@media (min-resolution: 1.1dppx) {
  :root {
    /*#if !COMPONENTS*/
    --editorFreeText-editing-cursor: url(images/cursor-editorFreeText.svg) 0 16,
      text;
    /*#endif*/
  }
}

@media screen and (forced-colors: active) {
  :root {
    --outline-width: 3px;
    --outline-color: ButtonText;
    --resizer-size: 12px;
    --resizer-color: ButtonFace;
  }
}

[data-editor-rotation="90"] {
  transform: rotate(90deg);
}
[data-editor-rotation="180"] {
  transform: rotate(180deg);
}
[data-editor-rotation="270"] {
  transform: rotate(270deg);
}

.annotationEditorLayer {
  background: transparent;
  position: absolute;
  inset: 0;
  font-size: calc(100px * var(--scale-factor));
  transform-origin: 0 0;
  cursor: auto;
  z-index: 4;
}

.annotationEditorLayer.freeTextEditing {
  cursor: var(--editorFreeText-editing-cursor);
}

.annotationEditorLayer.inkEditing {
  cursor: var(--editorInk-editing-cursor);
}

.annotationEditorLayer
  :is(.freeTextEditor, .inkEditor, .stampEditor).draggable {
  cursor: move;
}

.annotationEditorLayer .selectedEditor {
  outline: var(--focus-outline);
}

.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) {
  position: absolute;
  background: transparent;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 0 0;
  cursor: auto;
  max-width: 100%;
  max-height: 100%;
}

.annotationEditorLayer .freeTextEditor {
  padding: calc(var(--freetext-padding) * var(--scale-factor));
  width: auto;
  height: auto;
  touch-action: none;
}

.annotationEditorLayer .freeTextEditor .internal {
  background: transparent;
  border: none;
  inset: 0;
  overflow: visible;
  white-space: nowrap;
  font: 10px sans-serif;
  line-height: var(--freetext-line-height);
  user-select: none;
}

.annotationEditorLayer .freeTextEditor .overlay {
  position: absolute;
  display: none;
  background: transparent;
  inset: 0;
  width: 100%;
  height: 100%;
}

.annotationEditorLayer .freeTextEditor .overlay.enabled {
  display: block;
}

.annotationEditorLayer .freeTextEditor .internal:empty::before {
  content: attr(default-content);
  color: gray;
}

.annotationEditorLayer .freeTextEditor .internal:focus {
  outline: none;
  user-select: auto;
}

.annotationEditorLayer
  :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor) {
  outline: var(--hover-outline);
}

.annotationEditorLayer .inkEditor {
  width: 100%;
  height: 100%;
}

.annotationEditorLayer .inkEditor.editing {
  cursor: inherit;
}

.annotationEditorLayer .inkEditor .inkEditorCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.annotationEditorLayer .stampEditor {
  width: auto;
  height: auto;
}

.annotationEditorLayer .stampEditor.loading {
  aspect-ratio: 1;
  width: 10%;
  height: auto;
  background-color: rgba(128, 128, 128, 0.5);
  background-image: var(--loading-icon);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 16px 16px;
  transition-property: background-size;
  transition-delay: var(--loading-icon-delay);
}

.annotationEditorLayer .stampEditor canvas {
  width: 100%;
  height: 100%;
}

.annotationEditorLayer {
  :is(.freeTextEditor, .inkEditor, .stampEditor) {
    & > .resizers {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;

      &.hidden {
        display: none;
      }

      & > .resizer {
        width: var(--resizer-size);
        height: var(--resizer-size);
        border-radius: 50%;
        background: var(--resizer-color);
        border: var(--focus-outline);
        position: absolute;

        &.topLeft {
          top: var(--resizer-shift);
          left: var(--resizer-shift);
        }

        &.topMiddle {
          top: var(--resizer-shift);
          left: calc(50% + var(--resizer-shift));
        }

        &.topRight {
          top: var(--resizer-shift);
          right: var(--resizer-shift);
        }

        &.middleRight {
          top: calc(50% + var(--resizer-shift));
          right: var(--resizer-shift);
        }

        &.bottomRight {
          bottom: var(--resizer-shift);
          right: var(--resizer-shift);
        }

        &.bottomMiddle {
          bottom: var(--resizer-shift);
          left: calc(50% + var(--resizer-shift));
        }

        &.bottomLeft {
          bottom: var(--resizer-shift);
          left: var(--resizer-shift);
        }

        &.middleLeft {
          top: calc(50% + var(--resizer-shift));
          left: var(--resizer-shift);
        }
      }
    }
  }

  &[data-main-rotation="0"]
    :is([data-editor-rotation="0"], [data-editor-rotation="180"]),
  &[data-main-rotation="90"]
    :is([data-editor-rotation="270"], [data-editor-rotation="90"]),
  &[data-main-rotation="180"]
    :is([data-editor-rotation="180"], [data-editor-rotation="0"]),
  &[data-main-rotation="270"]
    :is([data-editor-rotation="90"], [data-editor-rotation="270"]) {
    & > .resizers > .resizer {
      &.topLeft,
      &.bottomRight {
        cursor: nwse-resize;
      }

      &.topMiddle,
      &.bottomMiddle {
        cursor: ns-resize;
      }

      &.topRight,
      &.bottomLeft {
        cursor: nesw-resize;
      }

      &.middleRight,
      &.middleLeft {
        cursor: ew-resize;
      }
    }
  }

  &[data-main-rotation="0"]
    :is([data-editor-rotation="90"], [data-editor-rotation="270"]),
  &[data-main-rotation="90"]
    :is([data-editor-rotation="0"], [data-editor-rotation="180"]),
  &[data-main-rotation="180"]
    :is([data-editor-rotation="270"], [data-editor-rotation="90"]),
  &[data-main-rotation="270"]
    :is([data-editor-rotation="180"], [data-editor-rotation="0"]) {
    & > .resizers > .resizer {
      &.topLeft,
      &.bottomRight {
        cursor: nesw-resize;
      }

      &.topMiddle,
      &.bottomMiddle {
        cursor: ew-resize;
      }

      &.topRight,
      &.bottomLeft {
        cursor: nwse-resize;
      }

      &.middleRight,
      &.middleLeft {
        cursor: ns-resize;
      }
    }
  }
}