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 .resizers {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.annotationEditorLayer .resizers.hidden {
  display: none;
}

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

.annotationEditorLayer .resizer.topLeft {
  cursor: nwse-resize;
  top: var(--resizer-shift);
  left: var(--resizer-shift);
}

.annotationEditorLayer .resizer.topMiddle {
  cursor: ns-resize;
  top: var(--resizer-shift);
  left: calc(50% + var(--resizer-shift));
}

.annotationEditorLayer .resizer.topRight {
  cursor: nesw-resize;
  top: var(--resizer-shift);
  right: var(--resizer-shift);
}

.annotationEditorLayer .resizer.middleRight {
  cursor: ew-resize;
  top: calc(50% + var(--resizer-shift));
  right: var(--resizer-shift);
}

.annotationEditorLayer .resizer.bottomRight {
  cursor: nwse-resize;
  bottom: var(--resizer-shift);
  right: var(--resizer-shift);
}

.annotationEditorLayer .resizer.bottomMiddle {
  cursor: ns-resize;
  bottom: var(--resizer-shift);
  left: calc(50% + var(--resizer-shift));
}

.annotationEditorLayer .resizer.bottomLeft {
  cursor: nesw-resize;
  bottom: var(--resizer-shift);
  left: var(--resizer-shift);
}

.annotationEditorLayer .resizer.middleLeft {
  cursor: ew-resize;
  top: calc(50% + var(--resizer-shift));
  left: var(--resizer-shift);
}

.annotationEditorLayer:is(.resizingTopLeft, .resizingBottomRight) {
  cursor: nwse-resize;
}

.annotationEditorLayer:is(.resizingTopMiddle, .resizingBottomMiddle) {
  cursor: ns-resize;
}

.annotationEditorLayer:is(.resizingTopRight, .resizingBottomLeft) {
  cursor: nesw-resize;
}

.annotationEditorLayer:is(.resizingMiddleRight, .resizingMiddleLeft) {
  cursor: ew-resize;
}