pdf.js.mirror/test/annotation_layer_builder_overrides.css
Calixte Denizet 069b757998 Use the checkboxes and radio button appearances as defined in the pdf to render them in the annotation layer (bug 1802506)
The idea is to generate two operator lists for the Yes/Off states and render them on a separate canvas.
These canvases are then attached the annotation and we modify their display depending on the input state.

It fixes #18021.
2026-06-12 20:10:56 +02:00

94 lines
2.1 KiB
CSS

/* 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;
}
}
}
}