This commit is contained in:
Vanessa
parent
c79e32cc91
commit
c5664b00d6
4 changed files with 514 additions and 415 deletions
|
|
@ -13,324 +13,377 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, .13);'/></svg>");
|
||||
.annotationLayer {
|
||||
--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
|
||||
--input-focus-border-color: Highlight;
|
||||
--input-focus-outline: 1px solid Canvas;
|
||||
--input-unfocused-border-color: transparent;
|
||||
--input-disabled-border-color: transparent;
|
||||
--input-hover-border-color: black;
|
||||
--link-outline: none;
|
||||
}
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
:root {
|
||||
@media screen and (forced-colors: active) {
|
||||
--input-focus-border-color: CanvasText;
|
||||
--input-unfocused-border-color: ActiveText;
|
||||
--input-disabled-border-color: GrayText;
|
||||
--input-hover-border-color: Highlight;
|
||||
--link-outline: 1.5px solid LinkText;
|
||||
|
||||
.textWidgetAnnotation :is(input, textarea):required,
|
||||
.choiceWidgetAnnotation select:required,
|
||||
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
|
||||
outline: 1.5px solid selectedItem;
|
||||
}
|
||||
|
||||
.linkAnnotation {
|
||||
outline: var(--link-outline);
|
||||
|
||||
&:hover {
|
||||
backdrop-filter: var(--hcm-highlight-filter);
|
||||
}
|
||||
|
||||
& > a:hover {
|
||||
opacity: 0 !important;
|
||||
background: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popupAnnotation .popup {
|
||||
outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
|
||||
background-color: ButtonFace !important;
|
||||
color: ButtonText !important;
|
||||
}
|
||||
|
||||
.highlightArea:hover::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: var(--hcm-highlight-filter);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popupAnnotation.focused .popup {
|
||||
outline: calc(3px * var(--scale-factor)) solid Highlight !important;
|
||||
}
|
||||
}
|
||||
|
||||
.annotationLayer .linkAnnotation:hover {
|
||||
backdrop-filter: invert(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.annotationLayer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transform-origin: 0 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.annotationLayer[data-main-rotation="90"] .norotate {
|
||||
transform: rotate(270deg) translateX(-100%);
|
||||
}
|
||||
.annotationLayer[data-main-rotation="180"] .norotate {
|
||||
transform: rotate(180deg) translate(-100%, -100%);
|
||||
}
|
||||
.annotationLayer[data-main-rotation="270"] .norotate {
|
||||
transform: rotate(90deg) translateY(-100%);
|
||||
}
|
||||
&[data-main-rotation="90"] .norotate {
|
||||
transform: rotate(270deg) translateX(-100%);
|
||||
}
|
||||
&[data-main-rotation="180"] .norotate {
|
||||
transform: rotate(180deg) translate(-100%, -100%);
|
||||
}
|
||||
&[data-main-rotation="270"] .norotate {
|
||||
transform: rotate(90deg) translateY(-100%);
|
||||
}
|
||||
|
||||
.annotationLayer canvas {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.disabled {
|
||||
section,
|
||||
.popup {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.annotationLayer section {
|
||||
position: absolute;
|
||||
text-align: initial;
|
||||
pointer-events: auto;
|
||||
box-sizing: border-box;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.annotationContent {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.annotationLayer .linkAnnotation {
|
||||
outline: var(--link-outline);
|
||||
}
|
||||
&.freetext {
|
||||
background: transparent;
|
||||
border: none;
|
||||
inset: 0;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
font: 10px sans-serif;
|
||||
line-height: 1.35;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.annotationLayer .linkAnnotation > a,
|
||||
.annotationLayer .buttonWidgetAnnotation.pushButton > a {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
section {
|
||||
position: absolute;
|
||||
text-align: initial;
|
||||
pointer-events: auto;
|
||||
box-sizing: border-box;
|
||||
transform-origin: 0 0;
|
||||
|
||||
.annotationLayer .linkAnnotation > a:hover,
|
||||
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
|
||||
opacity: .2;
|
||||
background: rgba(255, 255, 0, 1);
|
||||
box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
|
||||
}
|
||||
&:has(div.annotationContent) {
|
||||
canvas.annotationContent {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.annotationLayer .textAnnotation img {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.textLayer.selecting ~ & section {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotationLayer .textWidgetAnnotation input,
|
||||
.annotationLayer .textWidgetAnnotation textarea,
|
||||
.annotationLayer .choiceWidgetAnnotation select,
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input,
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton input {
|
||||
background-color: rgba(0, 54, 255, .13); // NOTE
|
||||
border: 2px solid var(--input-unfocused-border-color);
|
||||
box-sizing: border-box;
|
||||
font: calc(9px * var(--scale-factor)) sans-serif;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
:is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.annotationLayer .textWidgetAnnotation input:required,
|
||||
.annotationLayer .textWidgetAnnotation textarea:required,
|
||||
.annotationLayer .choiceWidgetAnnotation select:required,
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:required,
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton input:required {
|
||||
outline: 1.5px solid red;
|
||||
}
|
||||
:is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
|
||||
> a:hover {
|
||||
opacity: 0.2;
|
||||
background-color: rgb(255 255 0);
|
||||
box-shadow: 0 2px 10px rgb(255 255 0);
|
||||
}
|
||||
|
||||
.annotationLayer .choiceWidgetAnnotation select option {
|
||||
padding: 0;
|
||||
}
|
||||
.linkAnnotation.hasBorder:hover {
|
||||
background-color: rgb(255 255 0 / 0.2);
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton input {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.hasBorder {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.annotationLayer .textWidgetAnnotation textarea {
|
||||
resize: none;
|
||||
}
|
||||
.textAnnotation img {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.annotationLayer .textWidgetAnnotation input[disabled],
|
||||
.annotationLayer .textWidgetAnnotation textarea[disabled],
|
||||
.annotationLayer .choiceWidgetAnnotation select[disabled],
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
|
||||
background: none;
|
||||
border: 2px solid var(--input-disabled-border-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.textWidgetAnnotation :is(input, textarea),
|
||||
.choiceWidgetAnnotation select,
|
||||
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
|
||||
background-color: rgba(0, 54, 255, .13); // NOTE
|
||||
border: 2px solid var(--input-unfocused-border-color);
|
||||
box-sizing: border-box;
|
||||
font: calc(9px * var(--scale-factor)) sans-serif;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.annotationLayer .textWidgetAnnotation input:hover,
|
||||
.annotationLayer .textWidgetAnnotation textarea:hover,
|
||||
.annotationLayer .choiceWidgetAnnotation select:hover,
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
|
||||
border: 2px solid var(--input-hover-border-color);
|
||||
}
|
||||
.annotationLayer .textWidgetAnnotation input:hover,
|
||||
.annotationLayer .textWidgetAnnotation textarea:hover,
|
||||
.annotationLayer .choiceWidgetAnnotation select:hover,
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
|
||||
border-radius: var(--b3-border-radius);
|
||||
}
|
||||
.textWidgetAnnotation :is(input, textarea):required,
|
||||
.choiceWidgetAnnotation select:required,
|
||||
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
|
||||
outline: 1.5px solid red;
|
||||
}
|
||||
|
||||
.annotationLayer .textWidgetAnnotation input:focus,
|
||||
.annotationLayer .textWidgetAnnotation textarea:focus,
|
||||
.annotationLayer .choiceWidgetAnnotation select:focus {
|
||||
background: none;
|
||||
border: 2px solid var(--input-focus-border-color);
|
||||
border-radius: var(--b3-border-radius);
|
||||
outline: var(--input-focus-outline);
|
||||
}
|
||||
.choiceWidgetAnnotation select option {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox :focus,
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.buttonWidgetAnnotation.radioButton input {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
|
||||
border: 2px solid var(--input-focus-border-color);
|
||||
border-radius: var(--b3-border-radius);
|
||||
outline: var(--input-focus-outline);
|
||||
}
|
||||
.textWidgetAnnotation textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
|
||||
border: 2px solid var(--input-focus-border-color);
|
||||
outline: var(--input-focus-outline);
|
||||
}
|
||||
.textWidgetAnnotation :is(input, textarea)[disabled],
|
||||
.choiceWidgetAnnotation select[disabled],
|
||||
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
|
||||
background: none;
|
||||
border: 2px solid var(--input-disabled-border-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
|
||||
background-color: rgba(0, 0, 0, 1); // NOTE
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.textWidgetAnnotation :is(input, textarea):hover,
|
||||
.choiceWidgetAnnotation select:hover,
|
||||
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
|
||||
border: 2px solid var(--input-hover-border-color);
|
||||
}
|
||||
.textWidgetAnnotation :is(input, textarea):hover,
|
||||
.choiceWidgetAnnotation select:hover,
|
||||
.buttonWidgetAnnotation.checkBox input:hover {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
|
||||
height: 80%;
|
||||
left: 45%;
|
||||
width: 1px;
|
||||
}
|
||||
.textWidgetAnnotation :is(input, textarea):focus,
|
||||
.choiceWidgetAnnotation select:focus {
|
||||
background: none;
|
||||
border: 2px solid var(--input-focus-border-color);
|
||||
border-radius: 2px;
|
||||
outline: var(--input-focus-outline);
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.buttonWidgetAnnotation.checkBox :focus {
|
||||
border: 2px solid var(--input-focus-border-color);
|
||||
border-radius: 2px;
|
||||
outline: var(--input-focus-outline);
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
|
||||
border-radius: 50%;
|
||||
height: 50%;
|
||||
left: 30%;
|
||||
top: 20%;
|
||||
width: 50%;
|
||||
}
|
||||
.buttonWidgetAnnotation.radioButton :focus {
|
||||
border: 2px solid var(--input-focus-border-color);
|
||||
outline: var(--input-focus-outline);
|
||||
}
|
||||
|
||||
.annotationLayer .textWidgetAnnotation input.comb {
|
||||
font-family: monospace;
|
||||
padding-left: 2px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.buttonWidgetAnnotation.checkBox input:checked::before,
|
||||
.buttonWidgetAnnotation.checkBox input:checked::after,
|
||||
.buttonWidgetAnnotation.radioButton input:checked::before {
|
||||
background-color: rgba(0, 0, 0, 1); // NOTE
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.annotationLayer .textWidgetAnnotation input.comb:focus {
|
||||
/*
|
||||
* Letter spacing is placed on the right side of each character. Hence, the
|
||||
* letter spacing of the last character may be placed outside the visible
|
||||
* area, causing horizontal scrolling. We avoid this by extending the width
|
||||
* when the element has focus and revert this when it loses focus.
|
||||
*/
|
||||
width: 103%;
|
||||
}
|
||||
.buttonWidgetAnnotation.checkBox input:checked::before,
|
||||
.buttonWidgetAnnotation.checkBox input:checked::after {
|
||||
height: 80%;
|
||||
left: 45%;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.annotationLayer .buttonWidgetAnnotation.checkBox input,
|
||||
.annotationLayer .buttonWidgetAnnotation.radioButton input {
|
||||
appearance: none;
|
||||
}
|
||||
.buttonWidgetAnnotation.checkBox input:checked::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.annotationLayer .popupTriggerArea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.buttonWidgetAnnotation.checkBox input:checked::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
|
||||
position: absolute;
|
||||
}
|
||||
.buttonWidgetAnnotation.radioButton input:checked::before {
|
||||
border-radius: 50%;
|
||||
height: 50%;
|
||||
left: 25%;
|
||||
top: 25%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.annotationLayer .popupWrapper {
|
||||
position: absolute;
|
||||
font-size: calc(9px * var(--scale-factor));
|
||||
width: 100%;
|
||||
min-width: calc(180px * var(--scale-factor));
|
||||
pointer-events: none;
|
||||
}
|
||||
.textWidgetAnnotation input.comb {
|
||||
font-family: monospace;
|
||||
padding-left: 2px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.annotationLayer .popup {
|
||||
position: absolute;
|
||||
max-width: calc(180px * var(--scale-factor));
|
||||
background-color: rgba(255, 255, 153, 1);
|
||||
box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
|
||||
rgba(136, 136, 136, 1);
|
||||
border-radius: calc(2px * var(--scale-factor));
|
||||
padding: calc(6px * var(--scale-factor));
|
||||
margin-left: calc(5px * var(--scale-factor));
|
||||
cursor: pointer;
|
||||
font: message-box;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.textWidgetAnnotation input.comb:focus {
|
||||
/*
|
||||
* Letter spacing is placed on the right side of each character. Hence, the
|
||||
* letter spacing of the last character may be placed outside the visible
|
||||
* area, causing horizontal scrolling. We avoid this by extending the width
|
||||
* when the element has focus and revert this when it loses focus.
|
||||
*/
|
||||
width: 103%;
|
||||
}
|
||||
|
||||
.annotationLayer .popup > * {
|
||||
font-size: calc(9px * var(--scale-factor));
|
||||
}
|
||||
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.annotationLayer .popup h1 {
|
||||
display: inline-block;
|
||||
}
|
||||
.fileAttachmentAnnotation .popupTriggerArea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.annotationLayer .popupDate {
|
||||
display: inline-block;
|
||||
margin-left: calc(5px * var(--scale-factor));
|
||||
}
|
||||
.popupAnnotation {
|
||||
position: absolute;
|
||||
font-size: calc(9px * var(--scale-factor));
|
||||
pointer-events: none;
|
||||
width: max-content;
|
||||
max-width: 45%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.annotationLayer .popupContent {
|
||||
border-top: 1px solid rgba(51, 51, 51, 1);
|
||||
margin-top: calc(2px * var(--scale-factor));
|
||||
padding-top: calc(2px * var(--scale-factor));
|
||||
}
|
||||
.popup {
|
||||
background-color: rgb(255 255 153);
|
||||
box-shadow: 0 calc(2px * var(--scale-factor))
|
||||
calc(5px * var(--scale-factor)) rgb(136 136 136);
|
||||
border-radius: calc(2px * var(--scale-factor));
|
||||
outline: 1.5px solid rgb(255 255 74);
|
||||
padding: calc(6px * var(--scale-factor));
|
||||
cursor: pointer;
|
||||
font: message-box;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.annotationLayer .richText > * {
|
||||
white-space: pre-wrap;
|
||||
font-size: calc(9px * var(--scale-factor));
|
||||
}
|
||||
.popupAnnotation.focused .popup {
|
||||
outline-width: 3px;
|
||||
}
|
||||
|
||||
.annotationLayer .highlightAnnotation,
|
||||
.annotationLayer .underlineAnnotation,
|
||||
.annotationLayer .squigglyAnnotation,
|
||||
.annotationLayer .strikeoutAnnotation,
|
||||
.annotationLayer .freeTextAnnotation,
|
||||
.annotationLayer .lineAnnotation svg line,
|
||||
.annotationLayer .squareAnnotation svg rect,
|
||||
.annotationLayer .circleAnnotation svg ellipse,
|
||||
.annotationLayer .polylineAnnotation svg polyline,
|
||||
.annotationLayer .polygonAnnotation svg polygon,
|
||||
.annotationLayer .caretAnnotation,
|
||||
.annotationLayer .inkAnnotation svg polyline,
|
||||
.annotationLayer .stampAnnotation,
|
||||
.annotationLayer .fileAttachmentAnnotation {
|
||||
cursor: pointer;
|
||||
}
|
||||
.popup * {
|
||||
font-size: calc(9px * var(--scale-factor));
|
||||
}
|
||||
|
||||
.annotationLayer section svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.popup > .header {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.annotationLayer .annotationTextContent {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
color: transparent;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.popup > .header h1 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.annotationLayer .annotationTextContent span {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
.popup > .header .popupDate {
|
||||
display: inline-block;
|
||||
margin-left: calc(5px * var(--scale-factor));
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.popupContent {
|
||||
border-top: 1px solid rgb(51 51 51);
|
||||
margin-top: calc(2px * var(--scale-factor));
|
||||
padding-top: calc(2px * var(--scale-factor));
|
||||
}
|
||||
|
||||
.richText > * {
|
||||
white-space: pre-wrap;
|
||||
font-size: calc(9px * var(--scale-factor));
|
||||
}
|
||||
|
||||
.popupTriggerArea {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
section svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.annotationTextContent {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
color: transparent;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
svg.quadrilateralsContainer {
|
||||
contain: strict;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
:root {
|
||||
--pdfViewer-padding-bottom: 9px;
|
||||
--page-margin: 8px auto -1px;
|
||||
--page-border: none;
|
||||
--page-border: 1px solid CanvasText;
|
||||
--spreadHorizontalWrapped-margin-LR: 3.5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -44,22 +44,66 @@
|
|||
transform: rotate(270deg) translateX(-100%);
|
||||
}
|
||||
|
||||
#hiddenCopyElement,
|
||||
.hiddenCanvasElement {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pdfViewer {
|
||||
/* Define this variable here and not in :root to avoid to reflow all the UI
|
||||
when scaling (see #15929). */
|
||||
--scale-factor: 1;
|
||||
--page-bg-color: unset;
|
||||
|
||||
padding-bottom: var(--pdfViewer-padding-bottom);
|
||||
}
|
||||
|
||||
.pdfViewer .canvasWrapper {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
--hcm-highlight-filter: none;
|
||||
--hcm-highlight-selected-filter: none;
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
--hcm-highlight-filter: invert(100%);
|
||||
}
|
||||
|
||||
&.copyAll {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.canvasWrapper {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
canvas {
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[zooming] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.structTree {
|
||||
contain: strict;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pdfViewer .page {
|
||||
--scale-round-x: 1px;
|
||||
--scale-round-y: 1px;
|
||||
|
||||
direction: ltr;
|
||||
width: 816px;
|
||||
height: 1056px;
|
||||
|
|
@ -68,7 +112,7 @@
|
|||
overflow: visible;
|
||||
border: var(--page-border);
|
||||
background-clip: content-box;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
background-color: var(--page-bg-color, rgb(255 255 255));
|
||||
}
|
||||
|
||||
.pdfViewer .dummyPage {
|
||||
|
|
@ -77,6 +121,10 @@
|
|||
height: var(--viewer-container-height);
|
||||
}
|
||||
|
||||
.pdfViewer.noUserSelect {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*#if GENERIC*/
|
||||
.pdfViewer.removePageBorders .page {
|
||||
margin: 0 auto 10px;
|
||||
|
|
@ -95,8 +143,7 @@
|
|||
}
|
||||
/*#endif*/
|
||||
|
||||
.pdfViewer.scrollHorizontal,
|
||||
.pdfViewer.scrollWrapped,
|
||||
.pdfViewer:is(.scrollHorizontal, .scrollWrapped),
|
||||
.spread {
|
||||
margin-inline: 3.5px;
|
||||
text-align: center;
|
||||
|
|
@ -110,54 +157,29 @@
|
|||
/*#if GENERIC*/
|
||||
.pdfViewer.removePageBorders,
|
||||
/*#endif*/
|
||||
.pdfViewer.scrollHorizontal .spread,
|
||||
.pdfViewer.scrollWrapped .spread {
|
||||
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.spread .page,
|
||||
.spread .dummyPage,
|
||||
.pdfViewer.scrollHorizontal .page,
|
||||
.pdfViewer.scrollWrapped .page,
|
||||
.pdfViewer.scrollHorizontal .spread,
|
||||
.pdfViewer.scrollWrapped .spread {
|
||||
.spread :is(.page, .dummyPage),
|
||||
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.spread .page,
|
||||
.pdfViewer.scrollHorizontal .page,
|
||||
.pdfViewer.scrollWrapped .page {
|
||||
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page {
|
||||
margin-inline: var(--spreadHorizontalWrapped-margin-LR);
|
||||
}
|
||||
|
||||
/*#if GENERIC*/
|
||||
.pdfViewer.removePageBorders .spread .page,
|
||||
.pdfViewer.removePageBorders.scrollHorizontal .page,
|
||||
.pdfViewer.removePageBorders.scrollWrapped .page {
|
||||
.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page {
|
||||
margin-inline: 5px;
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
.pdfViewer .page canvas {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pdfViewer .page canvas .structTree {
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.pdfViewer .page canvas[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pdfViewer .page canvas[zooming] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pdfViewer .page.loadingIcon:after {
|
||||
.pdfViewer .page.loadingIcon::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -174,20 +196,15 @@
|
|||
contain: strict;
|
||||
}
|
||||
|
||||
.pdfViewer .page.loading:after {
|
||||
.pdfViewer .page.loading::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pdfViewer .page:not(.loading):after {
|
||||
.pdfViewer .page:not(.loading)::after {
|
||||
transition-property: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pdfViewer.enablePermissions .textLayer span {
|
||||
user-select: none !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pdfPresentationMode .pdfViewer {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,82 +16,116 @@
|
|||
.textLayer {
|
||||
position: absolute;
|
||||
text-align: initial;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
// NOTE
|
||||
inset: 0;
|
||||
overflow: clip;
|
||||
opacity: 1;
|
||||
line-height: 1;
|
||||
text-size-adjust: none;
|
||||
forced-color-adjust: none;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
caret-color: CanvasText;
|
||||
z-index: 0;
|
||||
|
||||
.textLayer span,
|
||||
.textLayer br {
|
||||
color: transparent;
|
||||
position: absolute;
|
||||
white-space: pre;
|
||||
cursor: text;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
&.highlighting {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
|
||||
* the problem doesn't show up in "text" reference tests. */
|
||||
.textLayer span.markedContent {
|
||||
top: 0;
|
||||
height: 0;
|
||||
}
|
||||
:is(span, br) {
|
||||
color: transparent;
|
||||
position: absolute;
|
||||
white-space: pre;
|
||||
cursor: text;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.textLayer .highlight {
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
background-color: rgba(180, 0, 170, 1);
|
||||
border-radius: var(--b3-border-radius);
|
||||
}
|
||||
> :not(.markedContent),
|
||||
.markedContent span:not(.markedContent) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.textLayer .highlight.appended {
|
||||
position: initial;
|
||||
}
|
||||
/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
|
||||
* the problem doesn't show up in "text" reference tests. */
|
||||
/*#if !MOZCENTRAL*/
|
||||
span.markedContent {
|
||||
top: 0;
|
||||
height: 0;
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
.textLayer .highlight.begin {
|
||||
border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
|
||||
}
|
||||
span[role="img"] {
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.textLayer .highlight.end {
|
||||
border-radius: 0 var(--b3-border-radius) var(--b3-border-radius) 0;
|
||||
}
|
||||
.highlight {
|
||||
--highlight-bg-color: rgb(180 0 170 / 0.25);
|
||||
--highlight-selected-bg-color: rgb(0 100 0 / 0.25);
|
||||
--highlight-backdrop-filter: none;
|
||||
--highlight-selected-backdrop-filter: none;
|
||||
|
||||
.textLayer .highlight.middle {
|
||||
border-radius: 0;
|
||||
}
|
||||
@media screen and (forced-colors: active) {
|
||||
--highlight-bg-color: transparent;
|
||||
--highlight-selected-bg-color: transparent;
|
||||
--highlight-backdrop-filter: var(--hcm-highlight-filter);
|
||||
--highlight-selected-backdrop-filter: var(
|
||||
--hcm-highlight-selected-filter
|
||||
);
|
||||
}
|
||||
|
||||
.textLayer .highlight.selected {
|
||||
background-color: rgba(0, 100, 0, 1);
|
||||
}
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
background-color: var(--highlight-bg-color);
|
||||
backdrop-filter: var(--highlight-backdrop-filter);
|
||||
border-radius: 4px;
|
||||
|
||||
.textLayer ::selection {
|
||||
// NOTE
|
||||
background: var(--b3-pdf-selection);
|
||||
}
|
||||
&.appended {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
|
||||
.textLayer br::selection {
|
||||
background: transparent;
|
||||
}
|
||||
&.begin {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.textLayer .endOfContent {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
&.end {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.textLayer .endOfContent.active {
|
||||
top: 0;
|
||||
&.middle {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: var(--highlight-selected-bg-color);
|
||||
backdrop-filter: var(--highlight-selected-backdrop-filter);
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
/* stylelint-disable declaration-block-no-duplicate-properties */
|
||||
/*#if !MOZCENTRAL*/
|
||||
background: var(--b3-pdf-selection); // NOTE
|
||||
/*#endif*/
|
||||
/* stylelint-enable declaration-block-no-duplicate-properties */
|
||||
background: color-mix(in srgb, AccentColor, transparent 75%);
|
||||
}
|
||||
|
||||
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
|
||||
/*#if !MOZCENTRAL*/
|
||||
br::selection {
|
||||
background: transparent;
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
.endOfContent {
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: 100% 0 0;
|
||||
z-index: 0;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.selecting .endOfContent {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,14 +14,28 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, .13);'/></svg>");
|
||||
--xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
|
||||
--xfa-focus-outline: auto;
|
||||
}
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
:root {
|
||||
--xfa-focus-outline: 2px solid CanvasText;
|
||||
}
|
||||
.xfaLayer *:required {
|
||||
outline: 1.5px solid selectedItem;
|
||||
}
|
||||
}
|
||||
|
||||
.xfaLayer {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.xfaLayer .highlight {
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
background-color: rgba(239, 203, 237, 1);
|
||||
border-radius: var(--b3-border-radius);
|
||||
background-color: rgb(239 203 237);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.xfaLayer .highlight.appended {
|
||||
|
|
@ -29,11 +43,11 @@
|
|||
}
|
||||
|
||||
.xfaLayer .highlight.begin {
|
||||
border-radius: var(--b3-border-radius) 0 0 var(--b3-border-radius);
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.xfaLayer .highlight.end {
|
||||
border-radius: 0 var(--b3-border-radius) var(--b3-border-radius) 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.xfaLayer .highlight.middle {
|
||||
|
|
@ -41,12 +55,7 @@
|
|||
}
|
||||
|
||||
.xfaLayer .highlight.selected {
|
||||
background-color: rgba(203, 223, 203, 1);
|
||||
}
|
||||
|
||||
.xfaLayer ::selection {
|
||||
// NOTE
|
||||
background: var(--b3-pdf-selection);
|
||||
background-color: var(--b3-pdf-selection); // NOTE
|
||||
}
|
||||
|
||||
.xfaPage {
|
||||
|
|
@ -77,7 +86,7 @@
|
|||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
font-kerning: inherit;
|
||||
letter-spacing: -.01px;
|
||||
letter-spacing: -0.01px;
|
||||
text-align: inherit;
|
||||
text-decoration: inherit;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -88,14 +97,12 @@
|
|||
line-height: inherit;
|
||||
}
|
||||
|
||||
.xfaLayer div {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.xfaLayer svg {
|
||||
pointer-events: none;
|
||||
.xfaLayer *:required {
|
||||
outline: 1.5px solid red;
|
||||
}
|
||||
|
||||
.xfaLayer div,
|
||||
.xfaLayer svg,
|
||||
.xfaLayer svg * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -146,10 +153,7 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.xfaLeft > .xfaCaption,
|
||||
.xfaLeft > .xfaCaptionForCheckButton,
|
||||
.xfaRight > .xfaCaption,
|
||||
.xfaRight > .xfaCaptionForCheckButton {
|
||||
:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -165,10 +169,7 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.xfaTop > .xfaCaption,
|
||||
.xfaTop > .xfaCaptionForCheckButton,
|
||||
.xfaBottom > .xfaCaption,
|
||||
.xfaBottom > .xfaCaptionForCheckButton {
|
||||
:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -183,17 +184,15 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.xfaTextfield:focus,
|
||||
.xfaSelect:focus {
|
||||
:is(.xfaTextfield, .xfaSelect):focus {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
outline: auto;
|
||||
outline: var(--xfa-focus-outline);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.xfaCheckbox:focus,
|
||||
.xfaRadio:focus {
|
||||
outline: auto;
|
||||
:is(.xfaCheckbox, .xfaRadio):focus {
|
||||
outline: var(--xfa-focus-outline);
|
||||
}
|
||||
|
||||
.xfaTextfield,
|
||||
|
|
@ -206,10 +205,11 @@
|
|||
background-image: var(--xfa-unfocused-field-background);
|
||||
}
|
||||
|
||||
.xfaTop > .xfaTextfield,
|
||||
.xfaTop > .xfaSelect,
|
||||
.xfaBottom > .xfaTextfield,
|
||||
.xfaBottom > .xfaSelect {
|
||||
.xfaSelect {
|
||||
padding-inline: 2px;
|
||||
}
|
||||
|
||||
:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect) {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
|
|
@ -310,12 +310,7 @@
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.xfaNonInteractive input,
|
||||
.xfaNonInteractive textarea,
|
||||
.xfaDisabled input,
|
||||
.xfaDisabled textarea,
|
||||
.xfaReadOnly input,
|
||||
.xfaReadOnly textarea {
|
||||
:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea) {
|
||||
background: initial;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue