test/annotation_layer_builder_overrides.css - master - githubmirror/pdf.js

test/annotation_layer_builder_overrides.css

93 строки2 KB

Calixte Denizet

Use the checkboxes and radio button appearances as defined in the pdf to render them in the annotation layer (bug 1802506)

12 июн 2026, 21:10

12 июн 2026, 21:10069b757

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

/* Overrides to make the annotation layer visible for reference testing. */

.annotationLayer {
  position: absolute;

  .wasCanvas {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
    -webkit-appearance: none;
  }

  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a,
  .popupTriggerArea::after,
  .fileAttachmentAnnotation:not(.hasFillAlpha) .popupTriggerArea {
    opacity: 0.2;
    background: rgb(255 255 0);
    box-shadow: 0 2px 10px rgb(255 255 0);
  }
  .fileAttachmentAnnotation.hasFillAlpha {
    outline: 2px solid yellow;
  }

  .hasClipPath::after {
    box-shadow: none;
  }

  .linkAnnotation.hasBorder {
    background-color: rgb(255 255 0 / 0.2);
  }

  .popupTriggerArea::after {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
  }

  .popup :is(h1, p) {
    margin: 0;
    padding: 0;
  }

  .annotationTextContent {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-color: transparent;
    color: red;
    font-size: 10px;
  }

  .buttonWidgetAnnotation:is(.checkBox, .radioButton) {
    img[data-canvas-name="checked"] {
      &:has(~ input:checked) {
        display: block;
      }

      &:has(~ input:not(:checked)) {
        display: none;
      }
    }

    img[data-canvas-name="unchecked"] {
      &:has(~ input:checked) {
        display: none;
      }

      &:has(~ input:not(:checked)) {
        display: block;
      }
    }
  }
}