Source code
Revision control
Copy as Markdown
Other Tools
/* Copyright 2014 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
*
*
* 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.
*/
.textLayer{
position:absolute;
text-align:initial;
inset:0;
overflow:hidden;
opacity:1;
line-height:1;
text-size-adjust:none;
forced-color-adjust:none;
transform-origin:0 0;
caret-color:CanvasText;
&.highlighting{
touch-action:none;
}
:is(span, br){
color:transparent;
position:absolute;
white-space:pre;
cursor:text;
transform-origin:0% 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;
@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
);
}
margin:-1px;
padding:1px;
background-color:var(--highlight-bg-color);
backdrop-filter:var(--highlight-backdrop-filter);
border-radius:4px;
&.appended{
position:initial;
}
&.begin{
border-radius:4px 0 0 4px;
}
&.end{
border-radius:0 4px 4px 0;
}
&.middle{
border-radius:0;
}
&.selected{
background-color:var(--highlight-selected-bg-color);
backdrop-filter:var(--highlight-selected-backdrop-filter);
}
}
::selection{
background:color-mix(in srgb, AccentColor, transparent 75%);
}
.endOfContent{
display:block;
position:absolute;
inset:100% 0 0;
z-index:-1;
cursor:default;
user-select:none;
&.active{
top:0;
}
}
}
.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){
--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;
}
}
position:absolute;
top:0;
left:0;
pointer-events:none;
transform-origin:0 0;
&[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%);
}
&.disabled{
section,
.popup{
pointer-events:none;
}
}
.annotationContent{
position:absolute;
width:100%;
height:100%;
pointer-events:none;
&.freetext{
background:transparent;
border:none;
inset:0;
overflow:visible;
white-space:nowrap;
font:10px sans-serif;
line-height:1.35;
user-select:none;
}
}
section{
position:absolute;
text-align:initial;
pointer-events:auto;
box-sizing:border-box;
transform-origin:0 0;
&:has(div.annotationContent){
canvas.annotationContent{
display:none;
}
}
}
:is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
position:absolute;
font-size:1em;
top:0;
left:0;
width:100%;
height:100%;
}
: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);
}
.linkAnnotation.hasBorder:hover{
background-color:rgb(255 255 0 / 0.2);
}
.hasBorder{
background-size:100% 100%;
}
.textAnnotation img{
position:absolute;
cursor:pointer;
width:100%;
height:100%;
top:0;
left:0;
}
.textWidgetAnnotation :is(input, textarea),
.choiceWidgetAnnotation select,
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
background-image:var(--annotation-unfocused-field-background);
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%;
}
.textWidgetAnnotation :is(input, textarea):required,
.choiceWidgetAnnotation select:required,
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
outline:1.5px solid red;
}
.choiceWidgetAnnotation select option{
padding:0;
}
.buttonWidgetAnnotation.radioButton input{
border-radius:50%;
}
.textWidgetAnnotation textarea{
resize:none;
}
.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;
}
.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;
}
.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);
}
.buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
background-image:none;
background-color:transparent;
}
.buttonWidgetAnnotation.checkBox :focus{
border:2px solid var(--input-focus-border-color);
border-radius:2px;
outline:var(--input-focus-outline);
}
.buttonWidgetAnnotation.radioButton :focus{
border:2px solid var(--input-focus-border-color);
outline:var(--input-focus-outline);
}
.buttonWidgetAnnotation.checkBox input:checked::before,
.buttonWidgetAnnotation.checkBox input:checked::after,
.buttonWidgetAnnotation.radioButton input:checked::before{
background-color:CanvasText;
content:"";
display:block;
position:absolute;
}
.buttonWidgetAnnotation.checkBox input:checked::before,
.buttonWidgetAnnotation.checkBox input:checked::after{
height:80%;
left:45%;
width:1px;
}
.buttonWidgetAnnotation.checkBox input:checked::before{
transform:rotate(45deg);
}
.buttonWidgetAnnotation.checkBox input:checked::after{
transform:rotate(-45deg);
}
.buttonWidgetAnnotation.radioButton input:checked::before{
border-radius:50%;
height:50%;
left:25%;
top:25%;
width:50%;
}
.textWidgetAnnotation input.comb{
font-family:monospace;
padding-left:2px;
padding-right:0;
}
.textWidgetAnnotation input.comb:focus{
width:103%;
}
.buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
appearance:none;
}
.fileAttachmentAnnotation .popupTriggerArea{
height:100%;
width:100%;
}
.popupAnnotation{
position:absolute;
font-size:calc(9px * var(--scale-factor));
pointer-events:none;
width:max-content;
max-width:45%;
height:auto;
}
.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;
}
.popupAnnotation.focused .popup{
outline-width:3px;
}
.popup *{
font-size:calc(9px * var(--scale-factor));
}
.popup > .header{
display:inline-block;
}
.popup > .header h1{
display:inline;
}
.popup > .header .popupDate{
display:inline-block;
margin-left:calc(5px * var(--scale-factor));
width:-moz-fit-content;
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;
}
}
: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, 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:rgb(239 203 237);
border-radius:4px;
}
.xfaLayer .highlight.appended{
position:initial;
}
.xfaLayer .highlight.begin{
border-radius:4px 0 0 4px;
}
.xfaLayer .highlight.end{
border-radius:0 4px 4px 0;
}
.xfaLayer .highlight.middle{
border-radius:0;
}
.xfaLayer .highlight.selected{
background-color:rgb(203 223 203);
}
.xfaPage{
overflow:hidden;
position:relative;
}
.xfaContentarea{
position:absolute;
}
.xfaPrintOnly{
display:none;
}
.xfaLayer{
position:absolute;
text-align:initial;
top:0;
left:0;
transform-origin:0 0;
line-height:1.2;
}
.xfaLayer *{
color:inherit;
font:inherit;
font-style:inherit;
font-weight:inherit;
font-kerning:inherit;
letter-spacing:-0.01px;
text-align:inherit;
text-decoration:inherit;
box-sizing:border-box;
background-color:transparent;
padding:0;
margin:0;
pointer-events:auto;
line-height:inherit;
}
.xfaLayer *:required{
outline:1.5px solid red;
}
.xfaLayer div,
.xfaLayer svg,
.xfaLayer svg *{
pointer-events:none;
}
.xfaLayer a{
color:blue;
}
.xfaRich li{
margin-left:3em;
}
.xfaFont{
color:black;
font-weight:normal;
font-kerning:none;
font-size:10px;
font-style:normal;
letter-spacing:0;
text-decoration:none;
vertical-align:0;
}
.xfaCaption{
overflow:hidden;
flex:0 0 auto;
}
.xfaCaptionForCheckButton{
overflow:hidden;
flex:1 1 auto;
}
.xfaLabel{
height:100%;
width:100%;
}
.xfaLeft{
display:flex;
flex-direction:row;
align-items:center;
}
.xfaRight{
display:flex;
flex-direction:row-reverse;
align-items:center;
}
:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
max-height:100%;
}
.xfaTop{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.xfaBottom{
display:flex;
flex-direction:column-reverse;
align-items:flex-start;
}
:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
width:100%;
}
.xfaBorder{
background-color:transparent;
position:absolute;
pointer-events:none;
}
.xfaWrapped{
width:100%;
height:100%;
}
:is(.xfaTextfield, .xfaSelect):focus{
background-image:none;
background-color:transparent;
outline:var(--xfa-focus-outline);
outline-offset:-1px;
}
:is(.xfaCheckbox, .xfaRadio):focus{
outline:var(--xfa-focus-outline);
}
.xfaTextfield,
.xfaSelect{
height:100%;
width:100%;
flex:1 1 auto;
border:none;
resize:none;
background-image:var(--xfa-unfocused-field-background);
}
.xfaSelect{
padding-inline:2px;
}
:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
flex:0 1 auto;
}
.xfaButton{
cursor:pointer;
width:100%;
height:100%;
border:none;
text-align:center;
}
.xfaLink{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.xfaCheckbox,
.xfaRadio{
width:100%;
height:100%;
flex:0 0 auto;
border:none;
}
.xfaRich{
white-space:pre-wrap;
width:100%;
height:100%;
}
.xfaImage{
object-position:left top;
object-fit:contain;
width:100%;
height:100%;
}
.xfaLrTb,
.xfaRlTb,
.xfaTb{
display:flex;
flex-direction:column;
align-items:stretch;
}
.xfaLr{
display:flex;
flex-direction:row;
align-items:stretch;
}
.xfaRl{
display:flex;
flex-direction:row-reverse;
align-items:stretch;
}
.xfaTb > div{
justify-content:left;
}
.xfaPosition{
position:relative;
}
.xfaArea{
position:relative;
}
.xfaValignMiddle{
display:flex;
align-items:center;
}
.xfaTable{
display:flex;
flex-direction:column;
align-items:stretch;
}
.xfaTable .xfaRow{
display:flex;
flex-direction:row;
align-items:stretch;
}
.xfaTable .xfaRlRow{
display:flex;
flex-direction:row-reverse;
align-items:stretch;
flex:1;
}
.xfaTable .xfaRlRow > div{
flex:1;
}
:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
background:initial;
}
@media print{
.xfaTextfield,
.xfaSelect{
background:transparent;
}
.xfaSelect{
appearance:none;
text-indent:1px;
text-overflow:"";
}
}
.canvasWrapper{
svg{
transform:none;
&[data-main-rotation="90"]{
mask,
use:not(.clip, .mask){
transform:matrix(0, 1, -1, 0, 1, 0);
}
}
&[data-main-rotation="180"]{
mask,
use:not(.clip, .mask){
transform:matrix(-1, 0, 0, -1, 1, 1);
}
}
&[data-main-rotation="270"]{
mask,
use:not(.clip, .mask){
transform:matrix(0, -1, 1, 0, 0, 1);
}
}
&.highlight{
--blend-mode:multiply;
@media screen and (forced-colors: active){
--blend-mode:difference;
}
position:absolute;
mix-blend-mode:var(--blend-mode);
&:not(.free){
fill-rule:evenodd;
}
}
&.highlightOutline{
position:absolute;
mix-blend-mode:normal;
fill-rule:evenodd;
fill:none;
&:not(.free){
&.hovered:not(.selected){
stroke:var(--hover-outline-color);
stroke-width:var(--outline-width);
}
&.selected{
.mainOutline{
stroke:var(--outline-around-color);
stroke-width:calc(
var(--outline-width) + 2 * var(--outline-around-width)
);
}
.secondaryOutline{
stroke:var(--outline-color);
stroke-width:var(--outline-width);
}
}
}
&.free{
&.hovered:not(.selected){
stroke:var(--hover-outline-color);
stroke-width:calc(2 * var(--outline-width));
}
&.selected{
.mainOutline{
stroke:var(--outline-around-color);
stroke-width:calc(
2 * (var(--outline-width) + var(--outline-around-width))
);
}
.secondaryOutline{
stroke:var(--outline-color);
stroke-width:calc(2 * var(--outline-width));
}
}
}
}
}
}
.toggle-button{
--button-background-color:#f0f0f4;
--button-background-color-hover:#e0e0e6;
--button-background-color-active:#cfcfd8;
--color-accent-primary:#0060df;
--color-accent-primary-hover:#0250bb;
--color-accent-primary-active:#054096;
--border-interactive-color:#8f8f9d;
--border-radius-circle:9999px;
--border-width:1px;
--size-item-small:16px;
--size-item-large:32px;
--color-canvas:white;
@media (prefers-color-scheme: dark){
--button-background-color:color-mix(in srgb, currentColor 7%, transparent);
--button-background-color-hover:color-mix(
in srgb,
currentColor 14%,
transparent
);
--button-background-color-active:color-mix(
in srgb,
currentColor 21%,
transparent
);
--color-accent-primary:#0df;
--color-accent-primary-hover:#80ebff;
--color-accent-primary-active:#aaf2ff;
--border-interactive-color:#bfbfc9;
--color-canvas:#1c1b22;
}
@media (forced-colors: active){
--color-accent-primary:ButtonText;
--color-accent-primary-hover:SelectedItem;
--color-accent-primary-active:SelectedItem;
--border-interactive-color:ButtonText;
--button-background-color:ButtonFace;
--border-interactive-color-hover:SelectedItem;
--border-interactive-color-active:SelectedItem;
--border-interactive-color-disabled:GrayText;
--color-canvas:ButtonText;
}
--toggle-background-color:var(--button-background-color);
--toggle-background-color-hover:var(--button-background-color-hover);
--toggle-background-color-active:var(--button-background-color-active);
--toggle-background-color-pressed:var(--color-accent-primary);
--toggle-background-color-pressed-hover:var(--color-accent-primary-hover);
--toggle-background-color-pressed-active:var(--color-accent-primary-active);
--toggle-border-color:var(--border-interactive-color);
--toggle-border-color-hover:var(--toggle-border-color);
--toggle-border-color-active:var(--toggle-border-color);
--toggle-border-radius:var(--border-radius-circle);
--toggle-border-width:var(--border-width);
--toggle-height:var(--size-item-small);
--toggle-width:var(--size-item-large);
--toggle-dot-background-color:var(--toggle-border-color);
--toggle-dot-background-color-hover:var(--toggle-dot-background-color);
--toggle-dot-background-color-active:var(--toggle-dot-background-color);
--toggle-dot-background-color-on-pressed:var(--color-canvas);
--toggle-dot-margin:1px;
--toggle-dot-height:calc(
var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
var(--toggle-border-width)
);
--toggle-dot-width:var(--toggle-dot-height);
--toggle-dot-transform-x:calc(
var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
);
appearance:none;
padding:0;
margin:0;
border:var(--toggle-border-width) solid var(--toggle-border-color);
height:var(--toggle-height);
width:var(--toggle-width);
border-radius:var(--toggle-border-radius);
background:var(--toggle-background-color);
box-sizing:border-box;
flex-shrink:0;
&:focus-visible{
outline:var(--focus-outline);
outline-offset:var(--focus-outline-offset);
}
&:enabled:hover{
background:var(--toggle-background-color-hover);
border-color:var(--toggle-border-color);
}
&:enabled:active{
background:var(--toggle-background-color-active);
border-color:var(--toggle-border-color);
}
&[aria-pressed="true"]{
background:var(--toggle-background-color-pressed);
border-color:transparent;
}
&[aria-pressed="true"]:enabled:hover{
background:var(--toggle-background-color-pressed-hover);
border-color:transparent;
}
&[aria-pressed="true"]:enabled:active{
background:var(--toggle-background-color-pressed-active);
border-color:transparent;
}
&::before{
display:block;
content:"";
background-color:var(--toggle-dot-background-color);
height:var(--toggle-dot-height);
width:var(--toggle-dot-width);
margin:var(--toggle-dot-margin);
border-radius:var(--toggle-border-radius);
translate:0;
}
&[aria-pressed="true"]::before{
translate:var(--toggle-dot-transform-x);
background-color:var(--toggle-dot-background-color-on-pressed);
}
&[aria-pressed="true"]:enabled:hover::before,
&[aria-pressed="true"]:enabled:active::before{
background-color:var(--toggle-dot-background-color-on-pressed);
}
&[aria-pressed="true"]:-moz-locale-dir(rtl)::before,
&[aria-pressed="true"]:dir(rtl)::before{
translate:calc(-1 * var(--toggle-dot-transform-x));
}
@media (prefers-reduced-motion: no-preference){
&::before{
transition:translate 100ms;
}
}
@media (prefers-contrast){
&:enabled:hover{
border-color:var(--toggle-border-color-hover);
}
&:enabled:active{
border-color:var(--toggle-border-color-active);
}
&[aria-pressed="true"]:enabled{
border-color:var(--toggle-border-color);
position:relative;
}
&[aria-pressed="true"]:enabled:hover,
&[aria-pressed="true"]:enabled:hover:active{
border-color:var(--toggle-border-color-hover);
}
&[aria-pressed="true"]:enabled:active{
background-color:var(--toggle-dot-background-color-active);
border-color:var(--toggle-dot-background-color-hover);
}
&:hover::before,
&:active::before{
background-color:var(--toggle-dot-background-color-hover);
}
}
@media (forced-colors){
--toggle-dot-background-color:var(--color-accent-primary);
--toggle-dot-background-color-hover:var(--color-accent-primary-hover);
--toggle-dot-background-color-active:var(--color-accent-primary-active);
--toggle-dot-background-color-on-pressed:var(--button-background-color);
--toggle-background-color-disabled:var(--button-background-color-disabled);
--toggle-border-color-hover:var(--border-interactive-color-hover);
--toggle-border-color-active:var(--border-interactive-color-active);
--toggle-border-color-disabled:var(--border-interactive-color-disabled);
&[aria-pressed="true"]:enabled::after{
border:1px solid var(--button-background-color);
content:"";
position:absolute;
height:var(--toggle-height);
width:var(--toggle-width);
display:block;
border-radius:var(--toggle-border-radius);
inset:-2px;
}
&[aria-pressed="true"]:enabled:active::after{
border-color:var(--toggle-border-color-active);
}
}
}
:root{
--outline-width:2px;
--outline-color:#0060df;
--outline-around-width:1px;
--outline-around-color:#f0f0f4;
--hover-outline-around-color:var(--outline-around-color);
--focus-outline:solid var(--outline-width) var(--outline-color);
--unfocus-outline:solid var(--outline-width) transparent;
--focus-outline-around:solid var(--outline-around-width) var(--outline-around-color);
--hover-outline-color:#8f8f9d;
--hover-outline:solid var(--outline-width) var(--hover-outline-color);
--hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color);
--freetext-line-height:1.35;
--freetext-padding:2px;
--resizer-bg-color:var(--outline-color);
--resizer-size:6px;
--resizer-shift:calc(
0px - (var(--outline-width) + var(--resizer-size)) / 2 -
var(--outline-around-width)
);
--editorFreeText-editing-cursor:text;
--editorInk-editing-cursor:url(images/cursor-editorInk.svg) 0 16, pointer;
--editorHighlight-editing-cursor:url(images/cursor-editorTextHighlight.svg) 24 24, text;
--editorFreeHighlight-editing-cursor:url(images/cursor-editorFreeHighlight.svg) 1 18, pointer;
}
.visuallyHidden{
position:absolute;
top:0;
left:0;
border:0;
margin:0;
padding:0;
width:0;
height:0;
overflow:hidden;
white-space:nowrap;
font-size:0;
}
.textLayer.highlighting{
cursor:var(--editorFreeHighlight-editing-cursor);
&:not(.free) span{
cursor:var(--editorHighlight-editing-cursor);
}
&.free span{
cursor:var(--editorFreeHighlight-editing-cursor);
}
}
@media (min-resolution: 1.1dppx){
:root{
--editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text;
}
}
@media screen and (forced-colors: active){
:root{
--outline-color:CanvasText;
--outline-around-color:ButtonFace;
--resizer-bg-color:ButtonText;
--hover-outline-color:Highlight;
--hover-outline-around-color:SelectedItemText;
}
}
[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;
}
.annotationEditorLayer.waiting{
content:"";
cursor:wait;
position:absolute;
inset:0;
width:100%;
height:100%;
}
.annotationEditorLayer.disabled{
pointer-events:none;
}
.annotationEditorLayer.freetextEditing{
cursor:var(--editorFreeText-editing-cursor);
}
.annotationEditorLayer.inkEditing{
cursor:var(--editorInk-editing-cursor);
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor){
position:absolute;
background:transparent;
z-index:1;
transform-origin:0 0;
cursor:auto;
max-width:100%;
max-height:100%;
border:var(--unfocus-outline);
&.draggable.selectedEditor{
cursor:move;
}
&.moving{
touch-action:none;
}
&.selectedEditor{
border:var(--focus-outline);
outline:var(--focus-outline-around);
&::before{
content:"";
position:absolute;
inset:0;
border:var(--focus-outline-around);
pointer-events:none;
}
}
&:hover:not(.selectedEditor){
border:var(--hover-outline);
outline:var(--hover-outline-around);
&::before{
content:"";
position:absolute;
inset:0;
border:var(--focus-outline-around);
}
}
}
.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
.textLayer{
.editToolbar{
--editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
--editor-toolbar-bg-color:#f0f0f4;
--editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg);
--editor-toolbar-fg-color:#2e2e56;
--editor-toolbar-border-color:#8f8f9d;
--editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
--editor-toolbar-hover-bg-color:#e0e0e6;
--editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color);
--editor-toolbar-hover-outline:none;
--editor-toolbar-focus-outline-color:#0060df;
--editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2);
--editor-toolbar-vert-offset:6px;
--editor-toolbar-height:28px;
--editor-toolbar-padding:2px;
@media (prefers-color-scheme: dark){
--editor-toolbar-bg-color:#2b2a33;
--editor-toolbar-fg-color:#fbfbfe;
--editor-toolbar-hover-bg-color:#52525e;
--editor-toolbar-focus-outline-color:#0df;
}
@media screen and (forced-colors: active){
--editor-toolbar-bg-color:ButtonFace;
--editor-toolbar-fg-color:ButtonText;
--editor-toolbar-border-color:ButtonText;
--editor-toolbar-hover-border-color:AccentColor;
--editor-toolbar-hover-bg-color:ButtonFace;
--editor-toolbar-hover-fg-color:AccentColor;
--editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color);
--editor-toolbar-focus-outline-color:ButtonBorder;
--editor-toolbar-shadow:none;
}
display:flex;
width:-moz-fit-content;
width:fit-content;
height:var(--editor-toolbar-height);
flex-direction:column;
justify-content:center;
align-items:center;
cursor:default;
pointer-events:auto;
box-sizing:content-box;
padding:var(--editor-toolbar-padding);
position:absolute;
inset-inline-end:0;
inset-block-start:calc(100% + var(--editor-toolbar-vert-offset));
border-radius:6px;
background-color:var(--editor-toolbar-bg-color);
border:1px solid var(--editor-toolbar-border-color);
box-shadow:var(--editor-toolbar-shadow);
&.hidden{
display:none;
}
&:has(:focus-visible){
border-color:transparent;
}
&:dir(ltr){
transform-origin:100% 0;
}
&:dir(rtl){
transform-origin:0 0;
}
.buttons{
display:flex;
justify-content:center;
align-items:center;
gap:0;
height:100%;
.divider{
width:1px;
height:calc(
2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height)
);
background-color:var(--editor-toolbar-border-color);
display:inline-block;
margin-inline:2px;
}
.highlightButton{
width:var(--editor-toolbar-height);
&::before{
content:"";
mask-image:var(--editor-toolbar-highlight-image);
mask-repeat:no-repeat;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:100%;
height:100%;
}
&:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
}
.delete{
width:var(--editor-toolbar-height);
&::before{
content:"";
mask-image:var(--editor-toolbar-delete-image);
mask-repeat:no-repeat;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:100%;
height:100%;
}
&:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
}
> *{
height:var(--editor-toolbar-height);
}
> :not(.divider){
border:none;
background-color:transparent;
cursor:pointer;
&:hover{
border-radius:2px;
background-color:var(--editor-toolbar-hover-bg-color);
color:var(--editor-toolbar-hover-fg-color);
outline:var(--editor-toolbar-hover-outline);
outline-offset:1px;
&:active{
outline:none;
}
}
&:focus-visible{
border-radius:2px;
outline:2px solid var(--editor-toolbar-focus-outline-color);
}
}
.altText{
--alt-text-add-image:url(images/altText_add.svg);
--alt-text-done-image:url(images/altText_done.svg);
display:flex;
align-items:center;
justify-content:center;
width:max-content;
padding-inline:8px;
pointer-events:all;
font:menu;
font-weight:590;
font-size:12px;
color:var(--editor-toolbar-fg-color);
&:disabled{
pointer-events:none;
}
&::before{
content:"";
mask-image:var(--alt-text-add-image);
mask-repeat:no-repeat;
mask-position:center;
display:inline-block;
width:12px;
height:13px;
background-color:var(--editor-toolbar-fg-color);
margin-inline-end:4px;
}
&:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
&.done::before{
mask-image:var(--alt-text-done-image);
}
.tooltip{
display:none;
&.show{
--alt-text-tooltip-bg:#f0f0f4;
--alt-text-tooltip-fg:#15141a;
--alt-text-tooltip-border:#8f8f9d;
--alt-text-tooltip-shadow:0px 2px 6px 0px rgb(58 57 68 / 0.2);
@media (prefers-color-scheme: dark){
--alt-text-tooltip-bg:#1c1b22;
--alt-text-tooltip-fg:#fbfbfe;
--alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
}
@media screen and (forced-colors: active){
--alt-text-tooltip-bg:Canvas;
--alt-text-tooltip-fg:CanvasText;
--alt-text-tooltip-border:CanvasText;
--alt-text-tooltip-shadow:none;
}
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
position:absolute;
top:calc(100% + 2px);
inset-inline-start:0;
padding-block:2px 3px;
padding-inline:3px;
max-width:300px;
width:max-content;
height:auto;
font-size:12px;
border:0.5px solid var(--alt-text-tooltip-border);
background:var(--alt-text-tooltip-bg);
box-shadow:var(--alt-text-tooltip-shadow);
color:var(--alt-text-tooltip-fg);
pointer-events:none;
}
}
}
}
}
}
.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 .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 canvas{
width:100%;
height:100%;
}
.annotationEditorLayer{
:is(.freeTextEditor, .inkEditor, .stampEditor){
& > .resizers{
position:absolute;
inset:0;
&.hidden{
display:none;
}
& > .resizer{
width:var(--resizer-size);
height:var(--resizer-size);
background:content-box var(--resizer-bg-color);
border:var(--focus-outline-around);
border-radius:2px;
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;
}
}
}
&
:is(
[data-main-rotation="0"] [data-editor-rotation="90"],
[data-main-rotation="90"] [data-editor-rotation="0"],
[data-main-rotation="180"] [data-editor-rotation="270"],
[data-main-rotation="270"] [data-editor-rotation="180"]
){
.editToolbar{
rotate:270deg;
&:dir(ltr){
inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset));
inset-block-start:0;
}
&:dir(rtl){
inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
inset-block-start:0;
}
}
}
&
:is(
[data-main-rotation="0"] [data-editor-rotation="180"],
[data-main-rotation="90"] [data-editor-rotation="90"],
[data-main-rotation="180"] [data-editor-rotation="0"],
[data-main-rotation="270"] [data-editor-rotation="270"]
){
.editToolbar{
rotate:180deg;
inset-inline-end:100%;
inset-block-start:calc(0pc - var(--editor-toolbar-vert-offset));
}
}
&
:is(
[data-main-rotation="0"] [data-editor-rotation="270"],
[data-main-rotation="90"] [data-editor-rotation="180"],
[data-main-rotation="180"] [data-editor-rotation="90"],
[data-main-rotation="270"] [data-editor-rotation="0"]
){
.editToolbar{
rotate:90deg;
&:dir(ltr){
inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
inset-block-start:100%;
}
&:dir(rtl){
inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset));
inset-block-start:0;
}
}
}
}
#altTextDialog{
--dialog-bg-color:white;
--dialog-border-color:white;
--dialog-shadow:0 2px 14px 0 rgb(58 57 68 / 0.2);
--text-primary-color:#15141a;
--text-secondary-color:#5b5b66;
--hover-filter:brightness(0.9);
--focus-ring-color:#0060df;
--focus-ring-outline:2px solid var(--focus-ring-color);
--textarea-border-color:#8f8f9d;
--textarea-bg-color:white;
--textarea-fg-color:var(--text-secondary-color);
--radio-bg-color:#f0f0f4;
--radio-checked-bg-color:#fbfbfe;
--radio-border-color:#8f8f9d;
--radio-checked-border-color:#0060df;
--button-cancel-bg-color:#f0f0f4;
--button-cancel-fg-color:var(--text-primary-color);
--button-cancel-border-color:var(--button-cancel-bg-color);
--button-cancel-hover-bg-color:var(--button-cancel-bg-color);
--button-cancel-hover-fg-color:var(--button-cancel-fg-color);
--button-cancel-hover-border-color:var(--button-cancel-hover-bg-color);
--button-save-bg-color:#0060df;
--button-save-fg-color:#fbfbfe;
--button-save-hover-bg-color:var(--button-save-bg-color);
--button-save-hover-fg-color:var(--button-save-fg-color);
--button-save-hover-border-color:var(--button-save-hover-bg-color);
@media (prefers-color-scheme: dark){
--dialog-bg-color:#1c1b22;
--dialog-border-color:#1c1b22;
--dialog-shadow:0 2px 14px 0 #15141a;
--text-primary-color:#fbfbfe;
--text-secondary-color:#cfcfd8;
--focus-ring-color:#0df;
--hover-filter:brightness(1.4);
--textarea-bg-color:#42414d;
--radio-bg-color:#2b2a33;
--radio-checked-bg-color:#15141a;
--radio-checked-border-color:#0df;
--button-cancel-bg-color:#2b2a33;
--button-save-bg-color:#0df;
--button-save-fg-color:#15141a;
}
@media screen and (forced-colors: active){
--dialog-bg-color:Canvas;
--dialog-border-color:CanvasText;
--dialog-shadow:none;
--text-primary-color:CanvasText;
--text-secondary-color:CanvasText;
--hover-filter:none;
--focus-ring-color:ButtonBorder;
--textarea-border-color:ButtonBorder;
--textarea-bg-color:Field;
--textarea-fg-color:ButtonText;
--radio-bg-color:ButtonFace;
--radio-checked-bg-color:ButtonFace;
--radio-border-color:ButtonText;
--radio-checked-border-color:ButtonText;
--button-cancel-bg-color:ButtonFace;
--button-cancel-fg-color:ButtonText;
--button-cancel-border-color:ButtonText;
--button-cancel-hover-bg-color:AccentColor;
--button-cancel-hover-fg-color:AccentColorText;
--button-save-bg-color:ButtonText;
--button-save-fg-color:ButtonFace;
--button-save-hover-bg-color:AccentColor;
--button-save-hover-fg-color:AccentColorText;
}
font:message-box;
font-size:13px;
font-weight:400;
line-height:150%;
border-radius:4px;
padding:12px 16px;
border:1px solid var(--dialog-border-color);
background:var(--dialog-bg-color);
color:var(--text-primary-color);
box-shadow:var(--dialog-shadow);
&::backdrop{
mask:url(#alttext-manager-mask);
}
&.positioned{
margin:0;
}
& #altTextContainer{
width:300px;
height:-moz-fit-content;
height:fit-content;
display:inline-flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
& *:focus-visible{
outline:var(--focus-ring-outline);
outline-offset:2px;
}
& .radio{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
& .radioButton{
display:flex;
gap:8px;
align-self:stretch;
align-items:center;
& input{
appearance:none;
box-sizing:border-box;
width:16px;
height:16px;
border-radius:50%;
background-color:var(--radio-bg-color);
border:1px solid var(--radio-border-color);
&:hover{
filter:var(--hover-filter);
}
&:checked{
background-color:var(--radio-checked-bg-color);
border:4px solid var(--radio-checked-border-color);
}
}
}
& .radioLabel{
display:flex;
padding-inline-start:24px;
align-items:flex-start;
gap:10px;
align-self:stretch;
& span{
flex:1 0 0;
font-size:11px;
color:var(--text-secondary-color);
}
}
}
& #overallDescription{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
align-self:stretch;
& span{
align-self:stretch;
}
& .title{
font-size:13px;
font-style:normal;
font-weight:590;
}
}
& #addDescription{
display:flex;
flex-direction:column;
align-items:stretch;
gap:8px;
& .descriptionArea{
flex:1;
padding-inline:24px 10px;
textarea{
font:inherit;
width:100%;
min-height:75px;
padding:8px;
resize:none;
margin:0;
box-sizing:border-box;
border-radius:4px;
border:1px solid var(--textarea-border-color);
background:var(--textarea-bg-color);
color:var(--textarea-fg-color);
&:focus{
outline-offset:0;
border-color:transparent;
}
&:disabled{
pointer-events:none;
opacity:0.4;
}
}
}
}
& #buttons{
display:flex;
justify-content:flex-end;
align-items:flex-start;
gap:8px;
align-self:stretch;
button{
border-radius:4px;
border:1px solid;
font:menu;
font-weight:600;
padding:4px 16px;
width:auto;
height:32px;
&:hover{
cursor:pointer;
filter:var(--hover-filter);
}
&#altTextCancel{
color:var(--button-cancel-fg-color);
background-color:var(--button-cancel-bg-color);
border-color:var(--button-cancel-border-color);
&:hover{
color:var(--button-cancel-hover-fg-color);
background-color:var(--button-cancel-hover-bg-color);
border-color:var(--button-cancel-hover-border-color);
}
}
&#altTextSave{
color:var(--button-save-hover-fg-color);
background-color:var(--button-save-hover-bg-color);
border-color:var(--button-save-hover-border-color);
opacity:1;
&:hover{
color:var(--button-save-hover-fg-color);
background-color:var(--button-save-hover-bg-color);
border-color:var(--button-save-hover-border-color);
}
}
}
}
}
}
.colorPicker{
--hover-outline-color:#0250bb;
--selected-outline-color:#0060df;
--swatch-border-color:#cfcfd8;
@media (prefers-color-scheme: dark){
--hover-outline-color:#80ebff;
--selected-outline-color:#aaf2ff;
--swatch-border-color:#52525e;
}
@media screen and (forced-colors: active){
--hover-outline-color:Highlight;
--selected-outline-color:var(--hover-outline-color);
--swatch-border-color:ButtonText;
}
.swatch{
width:16px;
height:16px;
border:1px solid var(--swatch-border-color);
border-radius:100%;
outline-offset:2px;
box-sizing:border-box;
forced-color-adjust:none;
}
button:is(:hover, .selected) > .swatch{
border:none;
}
}
.annotationEditorLayer{
&[data-main-rotation="0"]{
.highlightEditor:not(.free) > .editToolbar{
rotate:0deg;
}
}
&[data-main-rotation="90"]{
.highlightEditor:not(.free) > .editToolbar{
rotate:270deg;
}
}
&[data-main-rotation="180"]{
.highlightEditor:not(.free) > .editToolbar{
rotate:180deg;
}
}
&[data-main-rotation="270"]{
.highlightEditor:not(.free) > .editToolbar{
rotate:90deg;
}
}
.highlightEditor{
position:absolute;
background:transparent;
z-index:1;
cursor:auto;
max-width:100%;
max-height:100%;
border:none;
outline:none;
pointer-events:none;
transform-origin:0 0;
&:not(.free){
transform:none;
}
.internal{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:auto;
}
&.disabled .internal{
pointer-events:none;
}
&.selectedEditor{
.internal{
cursor:pointer;
}
}
.editToolbar{
--editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg);
transform-origin:center !important;
.buttons{
.colorPicker{
position:relative;
width:auto;
display:flex;
justify-content:center;
align-items:center;
gap:4px;
padding:4px;
&::after{
content:"";
mask-image:var(--editor-toolbar-colorpicker-arrow-image);
mask-repeat:no-repeat;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:12px;
height:12px;
}
&:hover::after{
background-color:var(--editor-toolbar-hover-fg-color);
}
&:has(.dropdown:not(.hidden)){
background-color:var(--editor-toolbar-hover-bg-color);
&::after{
scale:-1;
}
}
.dropdown{
position:absolute;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
gap:11px;
padding-block:8px;
border-radius:6px;
background-color:var(--editor-toolbar-bg-color);
border:1px solid var(--editor-toolbar-border-color);
box-shadow:var(--editor-toolbar-shadow);
inset-block-start:calc(100% + 4px);
width:calc(100% + 2 * var(--editor-toolbar-padding));
button{
width:100%;
height:auto;
border:none;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
background:none;
&:is(:active, :focus-visible){
outline:none;
}
> .swatch{
outline-offset:2px;
}
&[aria-selected="true"] > .swatch{
outline:2px solid var(--selected-outline-color);
}
&:is(:hover, :active, :focus-visible) > .swatch{
outline:2px solid var(--hover-outline-color);
}
}
}
}
}
}
}
}
.editorParamsToolbar:has(#highlightParamsToolbarContainer){
padding:unset;
}
#highlightParamsToolbarContainer{
height:auto;
padding-inline:10px;
padding-block:10px 16px;
gap:16px;
display:flex;
flex-direction:column;
box-sizing:border-box;
.editorParamsLabel{
width:-moz-fit-content;
width:fit-content;
inset-inline-start:0;
}
.colorPicker{
display:flex;
flex-direction:column;
gap:8px;
.dropdown{
display:flex;
justify-content:space-between;
align-items:center;
flex-direction:row;
height:auto;
button{
width:auto;
height:auto;
border:none;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
background:none;
flex:0 0 auto;
.swatch{
width:24px;
height:24px;
}
&:is(:active, :focus-visible){
outline:none;
}
&[aria-selected="true"] > .swatch{
outline:2px solid var(--selected-outline-color);
}
&:is(:hover, :active, :focus-visible) > .swatch{
outline:2px solid var(--hover-outline-color);
}
}
}
}
#editorHighlightThickness{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
align-self:stretch;
.editorParamsLabel{
width:100%;
height:auto;
align-self:stretch;
}
.thicknessPicker{
display:flex;
justify-content:space-between;
align-items:center;
align-self:stretch;
--example-color:#bfbfc9;
@media (prefers-color-scheme: dark){
--example-color:#80808e;
}
@media screen and (forced-colors: active){
--example-color:CanvasText;
}
:is(& > .editorParamsSlider[disabled]){
opacity:0.4;
}
&::before,
&::after{
content:"";
width:8px;
aspect-ratio:1;
display:block;
border-radius:100%;
background-color:var(--example-color);
}
&::after{
width:24px;
}
.editorParamsSlider{
width:unset;
height:14px;
}
}
}
#editorHighlightVisibility{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
align-self:stretch;
.divider{
--divider-color:#d7d7db;
@media (prefers-color-scheme: dark){
--divider-color:#8f8f9d;
}
@media screen and (forced-colors: active){
--divider-color:CanvasText;
}
margin-block:4px;
width:100%;
height:1px;
background-color:var(--divider-color);
}
.toggler{
display:flex;
justify-content:space-between;
align-items:center;
align-self:stretch;
}
}
}
:root{
--viewer-container-height:0;
--pdfViewer-padding-bottom:0;
--page-margin:1px auto -8px;
--page-border:9px solid transparent;
--spreadHorizontalWrapped-margin-LR:-3.5px;
--loading-icon-delay:400ms;
}
@media screen and (forced-colors: active){
:root{
--pdfViewer-padding-bottom:9px;
--page-margin:8px auto -1px;
--page-border:1px solid CanvasText;
--spreadHorizontalWrapped-margin-LR:3.5px;
}
}
[data-main-rotation="90"]{
transform:rotate(90deg) translateY(-100%);
}
[data-main-rotation="180"]{
transform:rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation="270"]{
transform:rotate(270deg) translateX(-100%);
}
#hiddenCopyElement,
.hiddenCanvasElement{
position:absolute;
top:0;
left:0;
width:0;
height:0;
display:none;
}
.pdfViewer{
--scale-factor:1;
padding-bottom:var(--pdfViewer-padding-bottom);
--hcm-highlight-filter:none;
--hcm-highlight-selected-filter:none;
@media screen and (forced-colors: active){
--hcm-highlight-filter:invert(100%);
}
}
.pdfViewer .canvasWrapper{
overflow:hidden;
width:100%;
height:100%;
}
.pdfViewer .page{
direction:ltr;
width:816px;
height:1056px;
margin:var(--page-margin);
position:relative;
overflow:visible;
border:var(--page-border);
background-clip:content-box;
background-color:rgb(255 255 255);
}
.pdfViewer .dummyPage{
position:relative;
width:0;
height:var(--viewer-container-height);
}
.pdfViewer.noUserSelect{
user-select:none;
}
.pdfViewer:is(.scrollHorizontal, .scrollWrapped),
.spread{
margin-inline:3.5px;
text-align:center;
}
.pdfViewer.scrollHorizontal,
.spread{
white-space:nowrap;
}
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{
margin-inline:0;
}
.spread :is(.page, .dummyPage),
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){
display:inline-block;
vertical-align:middle;
}
.spread .page,
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{
margin-inline:var(--spreadHorizontalWrapped-margin-LR);
}
.pdfViewer .page canvas{
margin:0;
}
.pdfViewer .page canvas .structTree{
contain:strict;
}
.pdfViewer .page canvas[hidden]{
display:none;
}
.pdfViewer .page canvas[zooming]{
width:100%;
height:100%;
}
.pdfViewer .page.loadingIcon::after{
position:absolute;
top:0;
left:0;
content:"";
width:100%;
height:100%;
background:url("images/loading-icon.gif") center no-repeat;
display:none;
transition-property:display;
transition-delay:var(--loading-icon-delay);
z-index:5;
contain:strict;
}
.pdfViewer .page.loading::after{
display:block;
}
.pdfViewer .page:not(.loading)::after{
transition-property:none;
display:none;
}
.pdfPresentationMode .pdfViewer{
padding-bottom:0;
}
.pdfPresentationMode .spread{
margin:0;
}
.pdfPresentationMode .pdfViewer .page{
margin:0 auto;
border:2px solid transparent;
}
:root{
--dir-factor:1;
--sidebar-width:200px;
--sidebar-transition-duration:200ms;
--sidebar-transition-timing-function:ease;
--toolbar-icon-opacity:0.7;
--doorhanger-icon-opacity:0.9;
--editor-toolbar-base-offset:105px;
--main-color:rgb(12 12 13);
--body-bg-color:rgb(212 212 215);
--progressBar-color:rgb(10 132 255);
--progressBar-bg-color:rgb(221 221 222);
--progressBar-blend-color:rgb(116 177 239);
--scrollbar-color:auto;
--scrollbar-bg-color:auto;
--toolbar-icon-bg-color:rgb(0 0 0);
--toolbar-icon-hover-bg-color:rgb(0 0 0);
--sidebar-narrow-bg-color:rgb(212 212 215 / 0.9);
--sidebar-toolbar-bg-color:rgb(245 246 247);
--toolbar-bg-color:rgb(249 249 250);
--toolbar-border-color:rgb(184 184 184);
--toolbar-box-shadow:0 1px 0 var(--toolbar-border-color);
--toolbar-border-bottom:none;
--toolbarSidebar-box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
--toolbarSidebar-border-bottom:none;
--button-hover-color:rgb(221 222 223);
--toggled-btn-color:rgb(0 0 0);
--toggled-btn-bg-color:rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
--toggled-hover-btn-outline:none;
--dropdown-btn-bg-color:rgb(215 215 219);
--dropdown-btn-border:none;
--separator-color:rgb(0 0 0 / 0.3);
--field-color:rgb(6 6 6);
--field-bg-color:rgb(255 255 255);
--field-border-color:rgb(187 187 188);
--treeitem-color:rgb(0 0 0 / 0.8);
--treeitem-bg-color:rgb(0 0 0 / 0.15);
--treeitem-hover-color:rgb(0 0 0 / 0.9);
--treeitem-selected-color:rgb(0 0 0 / 0.9);
--treeitem-selected-bg-color:rgb(0 0 0 / 0.25);
--thumbnail-hover-color:rgb(0 0 0 / 0.1);
--thumbnail-selected-color:rgb(0 0 0 / 0.2);
--doorhanger-bg-color:rgb(255 255 255);
--doorhanger-border-color:rgb(12 12 13 / 0.2);
--doorhanger-hover-color:rgb(12 12 13);
--doorhanger-hover-bg-color:rgb(237 237 237);
--doorhanger-separator-color:rgb(222 222 222);
--dialog-button-border:none;
--dialog-button-bg-color:rgb(12 12 13 / 0.1);
--dialog-button-hover-bg-color:rgb(12 12 13 / 0.3);
--loading-icon:url(images/loading.svg);
--treeitem-expanded-icon:url(images/treeitem-expanded.svg);
--treeitem-collapsed-icon:url(images/treeitem-collapsed.svg);
--toolbarButton-editorFreeText-icon:url(images/toolbarButton-editorFreeText.svg);
--toolbarButton-editorHighlight-icon:url(images/toolbarButton-editorHighlight.svg);
--toolbarButton-editorInk-icon:url(images/toolbarButton-editorInk.svg);
--toolbarButton-editorStamp-icon:url(images/toolbarButton-editorStamp.svg);
--toolbarButton-menuArrow-icon:url(images/toolbarButton-menuArrow.svg);
--toolbarButton-sidebarToggle-icon:url(images/toolbarButton-sidebarToggle.svg);
--toolbarButton-secondaryToolbarToggle-icon:url(images/toolbarButton-secondaryToolbarToggle.svg);
--toolbarButton-pageUp-icon:url(images/toolbarButton-pageUp.svg);
--toolbarButton-pageDown-icon:url(images/toolbarButton-pageDown.svg);
--toolbarButton-zoomOut-icon:url(images/toolbarButton-zoomOut.svg);
--toolbarButton-zoomIn-icon:url(images/toolbarButton-zoomIn.svg);
--toolbarButton-presentationMode-icon:url(images/toolbarButton-presentationMode.svg);
--toolbarButton-print-icon:url(images/toolbarButton-print.svg);
--toolbarButton-download-icon:url(images/toolbarButton-download.svg);
--toolbarButton-bookmark-icon:url(images/toolbarButton-bookmark.svg);
--toolbarButton-viewThumbnail-icon:url(images/toolbarButton-viewThumbnail.svg);
--toolbarButton-viewOutline-icon:url(images/toolbarButton-viewOutline.svg);
--toolbarButton-viewAttachments-icon:url(images/toolbarButton-viewAttachments.svg);
--toolbarButton-viewLayers-icon:url(images/toolbarButton-viewLayers.svg);
--toolbarButton-currentOutlineItem-icon:url(images/toolbarButton-currentOutlineItem.svg);
--toolbarButton-search-icon:url(images/toolbarButton-search.svg);
--findbarButton-previous-icon:url(images/findbarButton-previous.svg);
--findbarButton-next-icon:url(images/findbarButton-next.svg);
--secondaryToolbarButton-firstPage-icon:url(images/secondaryToolbarButton-firstPage.svg);
--secondaryToolbarButton-lastPage-icon:url(images/secondaryToolbarButton-lastPage.svg);
--secondaryToolbarButton-rotateCcw-icon:url(images/secondaryToolbarButton-rotateCcw.svg);
--secondaryToolbarButton-rotateCw-icon:url(images/secondaryToolbarButton-rotateCw.svg);
--secondaryToolbarButton-selectTool-icon:url(images/secondaryToolbarButton-selectTool.svg);
--secondaryToolbarButton-handTool-icon:url(images/secondaryToolbarButton-handTool.svg);
--secondaryToolbarButton-scrollPage-icon:url(images/secondaryToolbarButton-scrollPage.svg);
--secondaryToolbarButton-scrollVertical-icon:url(images/secondaryToolbarButton-scrollVertical.svg);
--secondaryToolbarButton-scrollHorizontal-icon:url(images/secondaryToolbarButton-scrollHorizontal.svg);
--secondaryToolbarButton-scrollWrapped-icon:url(images/secondaryToolbarButton-scrollWrapped.svg);
--secondaryToolbarButton-spreadNone-icon:url(images/secondaryToolbarButton-spreadNone.svg);
--secondaryToolbarButton-spreadOdd-icon:url(images/secondaryToolbarButton-spreadOdd.svg);
--secondaryToolbarButton-spreadEven-icon:url(images/secondaryToolbarButton-spreadEven.svg);
--secondaryToolbarButton-documentProperties-icon:url(images/secondaryToolbarButton-documentProperties.svg);
--editorParams-stampAddImage-icon:url(images/toolbarButton-zoomIn.svg);
}
:root:dir(rtl){
--dir-factor:-1;
}
@media (prefers-color-scheme: dark){
:root{
--main-color:rgb(249 249 250);
--body-bg-color:rgb(42 42 46);
--progressBar-color:rgb(0 96 223);
--progressBar-bg-color:rgb(40 40 43);
--progressBar-blend-color:rgb(20 68 133);
--scrollbar-color:rgb(121 121 123);
--scrollbar-bg-color:rgb(35 35 39);
--toolbar-icon-bg-color:rgb(255 255 255);
--toolbar-icon-hover-bg-color:rgb(255 255 255);
--sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
--sidebar-toolbar-bg-color:rgb(50 50 52);
--toolbar-bg-color:rgb(56 56 61);
--toolbar-border-color:rgb(12 12 13);
--button-hover-color:rgb(102 102 103);
--toggled-btn-color:rgb(255 255 255);
--toggled-btn-bg-color:rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
--dropdown-btn-bg-color:rgb(74 74 79);
--separator-color:rgb(0 0 0 / 0.3);
--field-color:rgb(250 250 250);
--field-bg-color:rgb(64 64 68);
--field-border-color:rgb(115 115 115);
--treeitem-color:rgb(255 255 255 / 0.8);
--treeitem-bg-color:rgb(255 255 255 / 0.15);
--treeitem-hover-color:rgb(255 255 255 / 0.9);
--treeitem-selected-color:rgb(255 255 255 / 0.9);
--treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
--thumbnail-hover-color:rgb(255 255 255 / 0.1);
--thumbnail-selected-color:rgb(255 255 255 / 0.2);
--doorhanger-bg-color:rgb(74 74 79);
--doorhanger-border-color:rgb(39 39 43);
--doorhanger-hover-color:rgb(249 249 250);
--doorhanger-hover-bg-color:rgb(93 94 98);
--doorhanger-separator-color:rgb(92 92 97);
--dialog-button-bg-color:rgb(92 92 97);
--dialog-button-hover-bg-color:rgb(115 115 115);
}
}
@media screen and (forced-colors: active){
:root{
--button-hover-color:Highlight;
--doorhanger-hover-bg-color:Highlight;
--toolbar-icon-opacity:1;
--toolbar-icon-bg-color:ButtonText;
--toolbar-icon-hover-bg-color:ButtonFace;
--toggled-hover-active-btn-color:ButtonText;
--toggled-hover-btn-outline:2px solid ButtonBorder;
--toolbar-border-color:CanvasText;
--toolbar-border-bottom:1px solid var(--toolbar-border-color);
--toolbar-box-shadow:none;
--toggled-btn-color:HighlightText;
--toggled-btn-bg-color:LinkText;
--doorhanger-hover-color:ButtonFace;
--doorhanger-border-color-whcm:1px solid ButtonText;
--doorhanger-triangle-opacity-whcm:0;
--dialog-button-border:1px solid Highlight;
--dialog-button-hover-bg-color:Highlight;
--dialog-button-hover-color:ButtonFace;
--dropdown-btn-border:1px solid ButtonText;
--field-border-color:ButtonText;
--main-color:CanvasText;
--separator-color:GrayText;
--doorhanger-separator-color:GrayText;
--toolbarSidebar-box-shadow:none;
--toolbarSidebar-border-bottom:1px solid var(--toolbar-border-color);
}
}
@media screen and (prefers-reduced-motion: reduce){
:root{
--sidebar-transition-duration:0;
}
}
*{
padding:0;
margin:0;
}
html,
body{
height:100%;
width:100%;
}
body{
background-color:var(--body-bg-color);
scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color);
}
.hidden,
[hidden]{
display:none !important;
}
#viewerContainer.pdfPresentationMode:fullscreen{
top:0;
background-color:rgb(0 0 0);
width:100%;
height:100%;
overflow:hidden;
cursor:none;
user-select:none;
}
.pdfPresentationMode:fullscreen section:not([data-internal-link]){
pointer-events:none;
}
.pdfPresentationMode:fullscreen .textLayer span{
cursor:none;
}
.pdfPresentationMode.pdfPresentationModeControls > *,
.pdfPresentationMode.pdfPresentationModeControls .textLayer span{
cursor:default;
}
#outerContainer{
width:100%;
height:100%;
position:relative;
}
#sidebarContainer{
position:absolute;
inset-block:32px 0;
inset-inline-start:calc(-1 * var(--sidebar-width));
width:var(--sidebar-width);
visibility:hidden;
z-index:100;
font:message-box;
border-top:1px solid rgb(51 51 51);
border-inline-end:var(--doorhanger-border-color-whcm);
transition-property:inset-inline-start;
transition-duration:var(--sidebar-transition-duration);
transition-timing-function:var(--sidebar-transition-timing-function);
}
#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer{
visibility:visible;
}
#outerContainer.sidebarOpen #sidebarContainer{
inset-inline-start:0;
}
#mainContainer{
position:absolute;
inset:0;
min-width:350px;
}
#sidebarContent{
inset-block:32px 0;
inset-inline-start:0;
overflow:auto;
position:absolute;
width:100%;
box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
}
#viewerContainer{
overflow:auto;
position:absolute;
inset:32px 0 0;
outline:none;
}
#viewerContainer:not(.pdfPresentationMode){
transition-duration:var(--sidebar-transition-duration);
transition-timing-function:var(--sidebar-transition-timing-function);
}
#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode){
inset-inline-start:var(--sidebar-width);
transition-property:inset-inline-start;
}
.toolbar{
position:relative;
inset-inline:0;
z-index:9999;
cursor:default;
font:message-box;
}
:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
:is(input, button, select),
.secondaryToolbar :is(input, button, a, select){
outline:none;
font:message-box;
}
#toolbarContainer{
width:100%;
}
#toolbarSidebar{
width:100%;
height:32px;
background-color:var(--sidebar-toolbar-bg-color);
box-shadow:var(--toolbarSidebar-box-shadow);
border-bottom:var(--toolbarSidebar-border-bottom);
}
#sidebarResizer{
position:absolute;
inset-block:0;
inset-inline-end:-6px;
width:6px;
z-index:200;
cursor:ew-resize;
}
#toolbarContainer,
.findbar,
.secondaryToolbar,
.editorParamsToolbar{
position:relative;
height:32px;
background-color:var(--toolbar-bg-color);
box-shadow:var(--toolbar-box-shadow);
border-bottom:var(--toolbar-border-bottom);
}
#toolbarViewer{
height:32px;
}
#loadingBar{
--progressBar-percent:0%;
--progressBar-end-offset:0;
position:absolute;
inset-inline:0 var(--progressBar-end-offset);
height:4px;
background-color:var(--progressBar-bg-color);
border-bottom:1px solid var(--toolbar-border-color);
transition-property:inset-inline-start;
transition-duration:var(--sidebar-transition-duration);
transition-timing-function:var(--sidebar-transition-timing-function);
}
#outerContainer.sidebarOpen #loadingBar{
inset-inline-start:var(--sidebar-width);
}
#loadingBar .progress{
position:absolute;
top:0;
inset-inline-start:0;
width:100%;
transform:scaleX(var(--progressBar-percent));
transform-origin:calc(50% - 50% * var(--dir-factor)) 0;
height:100%;
background-color:var(--progressBar-color);
overflow:hidden;
transition:transform 200ms;
}
@keyframes progressIndeterminate{
0%{
transform:translateX(calc(-142px * var(--dir-factor)));
}
100%{
transform:translateX(0);
}
}
#loadingBar.indeterminate .progress{
transform:none;
background-color:var(--progressBar-bg-color);
transition:none;
}
#loadingBar.indeterminate .progress .glimmer{
position:absolute;
top:0;
inset-inline-start:0;
height:100%;
width:calc(100% + 150px);
background:repeating-linear-gradient(
135deg,
var(--progressBar-blend-color) 0,
var(--progressBar-bg-color) 5px,
var(--progressBar-bg-color) 45px,
var(--progressBar-color) 55px,
var(--progressBar-color) 95px,
var(--progressBar-blend-color) 100px
);
animation:progressIndeterminate 1s linear infinite;
}
#outerContainer.sidebarResizing
:is(#sidebarContainer, #viewerContainer, #loadingBar){
transition-duration:0s;
}
.findbar,
.secondaryToolbar,
.editorParamsToolbar{
top:32px;
position:absolute;
z-index:30000;
height:auto;
padding:0 4px;
margin:4px 2px;
font:message-box;
font-size:12px;
line-height:14px;
text-align:left;
cursor:default;
}
.findbar{
inset-inline-start:64px;
min-width:300px;
background-color:var(--toolbar-bg-color);
}
.findbar > div{
height:32px;
}
.findbar > div#findbarInputContainer{
margin-inline-end:4px;
}
.findbar.wrapContainers > div,
.findbar.wrapContainers > div#findbarMessageContainer > *{
clear:both;
}
.findbar.wrapContainers > div#findbarMessageContainer{
height:auto;
}
.findbar input[type="checkbox"]{
pointer-events:none;
}
.findbar label{
user-select:none;
}
.findbar label:hover,
.findbar input:focus-visible + label{
color:var(--toggled-btn-color);
background-color:var(--button-hover-color);
}
.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel{
background-color:var(--toggled-btn-bg-color) !important;
color:var(--toggled-btn-color);
}
#findInput{
width:200px;
&::placeholder{
font-style:normal;
}
.loadingInput:has(> &[data-status="pending"])::after{
display:block;
visibility:visible;
}
&[data-status="notFound"]{
background-color:rgb(255 102 102);
}
}
.secondaryToolbar,
.editorParamsToolbar{
padding:6px 0 10px;
inset-inline-end:4px;
height:auto;
background-color:var(--doorhanger-bg-color);
}
.editorParamsToolbarContainer{
width:220px;
margin-bottom:-4px;
}
.editorParamsToolbarContainer > .editorParamsSetter{
min-height:26px;
display:flex;
align-items:center;
justify-content:space-between;
padding-inline:10px;
}
.editorParamsToolbarContainer .editorParamsLabel{
padding-inline-end:10px;
flex:none;
font:menu;
font-size:13px;
font-style:normal;
font-weight:400;
line-height:150%;
color:var(--main-color);
}
.editorParamsToolbarContainer .editorParamsColor{
width:32px;
height:32px;
flex:none;
}
.editorParamsToolbarContainer .editorParamsSlider{
background-color:transparent;
width:90px;
flex:0 1 0;
}
.editorParamsToolbarContainer .editorParamsSlider::-moz-range-progress{
background-color:black;
}
.editorParamsToolbarContainer .editorParamsSlider::-moz-range-track{
background-color:black;
}
.editorParamsToolbarContainer .editorParamsSlider::-moz-range-thumb{
background-color:white;
}
#secondaryToolbarButtonContainer{
max-width:220px;
min-height:26px;
max-height:calc(var(--viewer-container-height) - 40px);
overflow-y:auto;
margin-bottom:-4px;
}
#editorStampParamsToolbar{
inset-inline-end:calc(var(--editor-toolbar-base-offset) + 0px);
}
#editorInkParamsToolbar{
inset-inline-end:calc(var(--editor-toolbar-base-offset) + 28px);
}
#editorFreeTextParamsToolbar{
inset-inline-end:calc(var(--editor-toolbar-base-offset) + 56px);
}
#editorHighlightParamsToolbar{
inset-inline-end:calc(var(--editor-toolbar-base-offset) + 84px);
}
#editorStampAddImage::before{
mask-image:var(--editorParams-stampAddImage-icon);
}
.doorHanger,
.doorHangerRight{
border-radius:2px;
box-shadow:0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color);
border:var(--doorhanger-border-color-whcm);
}
:is(.doorHanger, .doorHangerRight)::after,
:is(.doorHanger, .doorHangerRight)::before{
bottom:100%;
border:8px solid rgb(0 0 0 / 0);
content:" ";
height:0;
width:0;
position:absolute;
pointer-events:none;
opacity:var(--doorhanger-triangle-opacity-whcm);
}
.doorHanger::after{
inset-inline-start:10px;
margin-inline-start:-8px;
border-bottom-color:var(--toolbar-bg-color);
}
.doorHangerRight::after{
inset-inline-end:10px;
margin-inline-end:-8px;
border-bottom-color:var(--doorhanger-bg-color);
}
:is(.doorHanger, .doorHangerRight)::before{
border-bottom-color:var(--doorhanger-border-color);
border-width:9px;
}
.doorHanger::before{
inset-inline-start:10px;
margin-inline-start:-9px;
}
.doorHangerRight::before{
inset-inline-end:10px;
margin-inline-end:-9px;
}
#findResultsCount{
background-color:rgb(217 217 217);
color:rgb(82 82 82);
text-align:center;
padding:4px 5px;
margin:5px;
}
#findMsg[data-status="notFound"]{
font-weight:bold;
}
:is(#findResultsCount, #findMsg):empty{
display:none;
}
#toolbarViewerMiddle{
position:absolute;
left:50%;
transform:translateX(-50%);
}
#toolbarViewerLeft,
#toolbarSidebarLeft{
float:inline-start;
}
#toolbarViewerRight,
#toolbarSidebarRight{
float:inline-end;
}
#toolbarViewerLeft > *,
#toolbarViewerMiddle > *,
#toolbarViewerRight > *,
#toolbarSidebarLeft *,
#toolbarSidebarRight *,
.findbar *{
position:relative;
float:inline-start;
}
#toolbarViewerLeft{
padding-inline-start:1px;
}
#toolbarViewerRight{
padding-inline-end:1px;
}
#toolbarSidebarRight{
padding-inline-end:2px;
}
.splitToolbarButton{
margin:2px;
display:inline-block;
}
.splitToolbarButton > .toolbarButton{
float:inline-start;
}
.toolbarButton,
.secondaryToolbarButton,
.dialogButton{
border:none;
background:none;
width:28px;
height:28px;
outline:none;
}
.dialogButton:is(:hover, :focus-visible){
background-color:var(--dialog-button-hover-bg-color);
}
.dialogButton:is(:hover, :focus-visible) > span{
color:var(--dialog-button-hover-color);
}
.toolbarButton > span{
display:inline-block;
width:0;
height:0;
overflow:hidden;
}
:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled]{
opacity:0.5;
}
.splitToolbarButton > .toolbarButton:is(:hover, :focus-visible),
.dropdownToolbarButton:hover{
background-color:var(--button-hover-color);
}
.splitToolbarButton > .toolbarButton{
position:relative;
margin:0;
}
#toolbarSidebar .splitToolbarButton > .toolbarButton{
margin-inline-end:2px;
}
.splitToolbarButtonSeparator{
float:inline-start;
margin:4px 0;
width:1px;
height:20px;
background-color:var(--separator-color);
}
.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
.dialogButton{
min-width:16px;
margin:2px 1px;
padding:2px 6px 0;
border:none;
border-radius:2px;
color:var(--main-color);
font-size:12px;
line-height:14px;
user-select:none;
cursor:default;
box-sizing:border-box;
}
.toolbarButton:is(:hover, :focus-visible){
background-color:var(--button-hover-color);
}
.secondaryToolbarButton:is(:hover, :focus-visible){
background-color:var(--doorhanger-hover-bg-color);
color:var(--doorhanger-hover-color);
}
:is(.toolbarButton, .secondaryToolbarButton).toggled,
.splitToolbarButton.toggled > .toolbarButton.toggled{
background-color:var(--toggled-btn-bg-color);
color:var(--toggled-btn-color);
}
:is(.toolbarButton, .secondaryToolbarButton).toggled:hover,
.splitToolbarButton.toggled > .toolbarButton.toggled:hover{
outline:var(--toggled-hover-btn-outline) !important;
}
:is(.toolbarButton, .secondaryToolbarButton).toggled::before{
background-color:var(--toggled-btn-color);
}
:is(.toolbarButton, .secondaryToolbarButton).toggled:hover:active,
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active{
background-color:var(--toggled-hover-active-btn-color);
}
.dropdownToolbarButton{
display:flex;
width:-moz-fit-content;
width:fit-content;
min-width:140px;
padding:0;
background-color:var(--dropdown-btn-bg-color);
border:var(--dropdown-btn-border);
}
.dropdownToolbarButton::after{
top:6px;
inset-inline-end:6px;
pointer-events:none;
mask-image:var(--toolbarButton-menuArrow-icon);
}
.dropdownToolbarButton > select{
appearance:none;
width:inherit;
min-width:inherit;
height:28px;
font-size:12px;
color:var(--main-color);
margin:0;
padding-block:1px 2px;
padding-inline:6px 38px;
border:none;
background-color:var(--dropdown-btn-bg-color);
}
.dropdownToolbarButton > select:is(:hover, :focus-visible){
background-color:var(--button-hover-color);
color:var(--toggled-btn-color);
}
.dropdownToolbarButton > select > option{
background:var(--doorhanger-bg-color);
color:var(--main-color);
}
.toolbarButtonSpacer{
width:30px;
display:inline-block;
height:1px;
}
:is(.toolbarButton, .secondaryToolbarButton, .treeItemToggler)::before,
.dropdownToolbarButton::after{
position:absolute;
display:inline-block;
width:16px;
height:16px;
content:"";
background-color:var(--toolbar-icon-bg-color);
mask-size:cover;
}
.dropdownToolbarButton:is(:hover, :focus-visible, :active)::after{
background-color:var(--toolbar-icon-hover-bg-color);
}
.toolbarButton::before{
opacity:var(--toolbar-icon-opacity);
top:6px;
left:6px;
}
.toolbarButton:is(:hover, :focus-visible)::before,
.secondaryToolbarButton:is(:hover, :focus-visible)::before{
background-color:var(--toolbar-icon-hover-bg-color);
}
.secondaryToolbarButton::before{
opacity:var(--doorhanger-icon-opacity);
top:5px;
inset-inline-start:12px;
}
#sidebarToggle::before{
mask-image:var(--toolbarButton-sidebarToggle-icon);
transform:scaleX(var(--dir-factor));
}
#secondaryToolbarToggle::before{
mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
transform:scaleX(var(--dir-factor));
}
#findPrevious::before{
mask-image:var(--findbarButton-previous-icon);
}
#findNext::before{
mask-image:var(--findbarButton-next-icon);
}
#previous::before{
mask-image:var(--toolbarButton-pageUp-icon);
}
#next::before{
mask-image:var(--toolbarButton-pageDown-icon);
}
#zoomOut::before{
mask-image:var(--toolbarButton-zoomOut-icon);
}
#zoomIn::before{
mask-image:var(--toolbarButton-zoomIn-icon);
}
#presentationMode::before{
mask-image:var(--toolbarButton-presentationMode-icon);
}
#editorFreeText::before{
mask-image:var(--toolbarButton-editorFreeText-icon);
}
#editorHighlight::before{
mask-image:var(--toolbarButton-editorHighlight-icon);
}
#editorInk::before{
mask-image:var(--toolbarButton-editorInk-icon);
}
#editorStamp::before{
mask-image:var(--toolbarButton-editorStamp-icon);
}
:is(#print, #secondaryPrint)::before{
mask-image:var(--toolbarButton-print-icon);
}
:is(#download, #secondaryDownload)::before{
mask-image:var(--toolbarButton-download-icon);
}
a.secondaryToolbarButton{
padding-top:5px;
text-decoration:none;
}
a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{
opacity:0.5;
pointer-events:none;
}
#viewBookmark::before{
mask-image:var(--toolbarButton-bookmark-icon);
}
#viewThumbnail::before{
mask-image:var(--toolbarButton-viewThumbnail-icon);
}
#viewOutline::before{
mask-image:var(--toolbarButton-viewOutline-icon);
transform:scaleX(var(--dir-factor));
}
#viewAttachments::before{
mask-image:var(--toolbarButton-viewAttachments-icon);
}
#viewLayers::before{
mask-image:var(--toolbarButton-viewLayers-icon);
}
#currentOutlineItem::before{
mask-image:var(--toolbarButton-currentOutlineItem-icon);
transform:scaleX(var(--dir-factor));
}
#viewFind::before{
mask-image:var(--toolbarButton-search-icon);
}
.pdfSidebarNotification::after{
position:absolute;
display:inline-block;
top:2px;
inset-inline-end:2px;
content:"";
background-color:rgb(112 219 85);
height:9px;
width:9px;
border-radius:50%;
}
.secondaryToolbarButton{
position:relative;
margin:0;
padding:0 0 1px;
padding-inline-start:36px;
height:auto;
min-height:26px;
width:auto;
min-width:100%;
text-align:start;
white-space:normal;
border-radius:0;
box-sizing:border-box;
display:inline-block;
}
.secondaryToolbarButton > span{
padding-inline-end:4px;
}
#firstPage::before{
mask-image:var(--secondaryToolbarButton-firstPage-icon);
}
#lastPage::before{
mask-image:var(--secondaryToolbarButton-lastPage-icon);
}
#pageRotateCcw::before{
mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
}
#pageRotateCw::before{
mask-image:var(--secondaryToolbarButton-rotateCw-icon);
}
#cursorSelectTool::before{
mask-image:var(--secondaryToolbarButton-selectTool-icon);
}
#cursorHandTool::before{
mask-image:var(--secondaryToolbarButton-handTool-icon);
}
#scrollPage::before{
mask-image:var(--secondaryToolbarButton-scrollPage-icon);
}
#scrollVertical::before{
mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
}
#scrollHorizontal::before{
mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
}
#scrollWrapped::before{
mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
}
#spreadNone::before{
mask-image:var(--secondaryToolbarButton-spreadNone-icon);
}
#spreadOdd::before{
mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
}
#spreadEven::before{
mask-image:var(--secondaryToolbarButton-spreadEven-icon);
}
#documentProperties::before{
mask-image:var(--secondaryToolbarButton-documentProperties-icon);
}
.verticalToolbarSeparator{
display:block;
margin:5px 2px;
width:1px;
height:22px;
background-color:var(--separator-color);
}
.horizontalToolbarSeparator{
display:block;
margin:6px 0;
height:1px;
width:100%;
background-color:var(--doorhanger-separator-color);
}
.toolbarField{
padding:4px 7px;
margin:3px 0;
border-radius:2px;
background-color:var(--field-bg-color);
background-clip:padding-box;
border:1px solid var(--field-border-color);
box-shadow:none;
color:var(--field-color);
font-size:12px;
line-height:16px;
outline:none;
}
.toolbarField[type="checkbox"]{
opacity:0;
position:absolute !important;
left:0;
margin:10px 0 3px;
margin-inline-start:7px;
}
#pageNumber{
-moz-appearance:textfield;
text-align:end;
width:40px;
background-size:0 0;
transition-property:none;
.loadingInput:has(> &.loading)::after{
display:block;
visibility:visible;
transition-property:visibility;
transition-delay:var(--loading-icon-delay);
}
}
.loadingInput{
&::after{
position:absolute;
visibility:hidden;
display:none;
top:calc(50% - 8px);
width:16px;
height:16px;
content:"";
background-color:var(--toolbar-icon-bg-color);
mask-size:cover;
mask-image:var(--loading-icon);
}
&.start::after{
inset-inline-start:4px;
}
&.end::after{
inset-inline-end:4px;
}
}
.toolbarField:focus{
border-color:#0a84ff;
}
.toolbarLabel{
min-width:16px;
padding:7px;
margin:2px;
border-radius:2px;
color:var(--main-color);
font-size:12px;
line-height:14px;
text-align:left;
user-select:none;
cursor:default;
}
#numPages.toolbarLabel{
padding-inline-start:3px;
}
#thumbnailView,
#outlineView,
#attachmentsView,
#layersView{
position:absolute;
width:calc(100% - 8px);
inset-block:0;
padding:4px 4px 0;
overflow:auto;
user-select:none;
}
#thumbnailView{
width:calc(100% - 60px);
padding:10px 30px 0;
}
#thumbnailView > a:is(:active, :focus){
outline:0;
}
.thumbnail{
--thumbnail-width:0;
--thumbnail-height:0;
float:inline-start;
width:var(--thumbnail-width);
height:var(--thumbnail-height);
margin:0 10px 5px;
padding:1px;
border:7px solid transparent;
border-radius:2px;
}
#thumbnailView > a:last-of-type > .thumbnail{
margin-bottom:10px;
}
a:focus > .thumbnail,
.thumbnail:hover{
border-color:var(--thumbnail-hover-color);
}
.thumbnail.selected{
border-color:var(--thumbnail-selected-color) !important;
}
.thumbnailImage{
width:var(--thumbnail-width);
height:var(--thumbnail-height);
opacity:0.9;
}
a:focus > .thumbnail > .thumbnailImage,
.thumbnail:hover > .thumbnailImage{
opacity:0.95;
}
.thumbnail.selected > .thumbnailImage{
opacity:1 !important;
}
.thumbnail:not([data-loaded]) > .thumbnailImage{
width:calc(var(--thumbnail-width) - 2px);
height:calc(var(--thumbnail-height) - 2px);
border:1px dashed rgb(132 132 132);
}
.treeWithDeepNesting > .treeItem,
.treeItem > .treeItems{
margin-inline-start:20px;
}
.treeItem > a{
text-decoration:none;
display:inline-block;
min-width:calc(100% - 4px);
height:auto;
margin-bottom:1px;
padding:2px 0 5px;
padding-inline-start:4px;
border-radius:2px;
color:var(--treeitem-color);
font-size:13px;
line-height:15px;
user-select:none;
white-space:normal;
cursor:pointer;
}
#layersView .treeItem > a *{
cursor:pointer;
}
#layersView .treeItem > a > label{
padding-inline-start:4px;
}
#layersView .treeItem > a > label > input{
float:inline-start;
margin-top:1px;
}
.treeItemToggler{
position:relative;
float:inline-start;
height:0;
width:0;
color:rgb(255 255 255 / 0.5);
}
.treeItemToggler::before{
inset-inline-end:4px;
mask-image:var(--treeitem-expanded-icon);
}
.treeItemToggler.treeItemsHidden::before{
mask-image:var(--treeitem-collapsed-icon);
transform:scaleX(var(--dir-factor));
}
.treeItemToggler.treeItemsHidden ~ .treeItems{
display:none;
}
.treeItem.selected > a{
background-color:var(--treeitem-selected-bg-color);
color:var(--treeitem-selected-color);
}
.treeItemToggler:hover,
.treeItemToggler:hover + a,
.treeItemToggler:hover ~ .treeItems,
.treeItem > a:hover{
background-color:var(--treeitem-bg-color);
background-clip:padding-box;
border-radius:2px;
color:var(--treeitem-hover-color);
}
#outlineOptionsContainer{
display:none;
#sidebarContainer:has(#outlineView:not(.hidden)) &{
display:inherit;
}
}
.dialogButton{
width:auto;
margin:3px 4px 2px !important;
padding:2px 11px;
color:var(--main-color);
background-color:var(--dialog-button-bg-color);
border:var(--dialog-button-border) !important;
}
dialog{
margin:auto;
padding:15px;
border-spacing:4px;
color:var(--main-color);
font:message-box;
font-size:12px;
line-height:14px;
background-color:var(--doorhanger-bg-color);
border:1px solid rgb(0 0 0 / 0.5);
border-radius:4px;
box-shadow:0 1px 4px rgb(0 0 0 / 0.3);
}
dialog::backdrop{
background-color:rgb(0 0 0 / 0.2);
}
dialog > .row{
display:table-row;
}
dialog > .row > *{
display:table-cell;
}
dialog .toolbarField{
margin:5px 0;
}
dialog .separator{
display:block;
margin:4px 0;
height:1px;
width:100%;
background-color:var(--separator-color);
}
dialog .buttonRow{
text-align:center;
vertical-align:middle;
}
dialog :link{
color:rgb(255 255 255);
}
#passwordDialog{
text-align:center;
}
#passwordDialog .toolbarField{
width:200px;
}
#documentPropertiesDialog{
text-align:left;
}
#documentPropertiesDialog .row > *{
min-width:100px;
text-align:start;
}
#documentPropertiesDialog .row > span{
width:125px;
word-wrap:break-word;
}
#documentPropertiesDialog .row > p{
max-width:225px;
word-wrap:break-word;
}
#documentPropertiesDialog .buttonRow{
margin-top:10px;
}
.grab-to-pan-grab{
cursor:grab !important;
}
.grab-to-pan-grab
*:not(input):not(textarea):not(button):not(select):not(:link){
cursor:inherit !important;
}
.grab-to-pan-grab:active,
.grab-to-pan-grabbing{
cursor:grabbing !important;
}
.grab-to-pan-grabbing{
position:fixed;
background:rgb(0 0 0 / 0);
display:block;
inset:0;
overflow:hidden;
z-index:50000;
}
@page{
margin:0;
}
#printContainer{
display:none;
}
@media print{
body{
background:rgb(0 0 0 / 0) none;
}
body[data-pdfjsprinting] #outerContainer{
display:none;
}
body[data-pdfjsprinting] #printContainer{
display:block;
}
#printContainer{
height:100%;
}
#printContainer > .printedPage{
page-break-after:always;
page-break-inside:avoid;
height:100%;
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#printContainer > .xfaPrintedPage .xfaPage{
position:absolute;
}
#printContainer > .xfaPrintedPage{
page-break-after:always;
page-break-inside:avoid;
width:100%;
height:100%;
position:relative;
}
#printContainer > .printedPage :is(canvas, img){
max-width:100%;
max-height:100%;
direction:ltr;
display:block;
}
}
.visibleMediumView{
display:none;
}
@media all and (max-width: 900px){
#toolbarViewerMiddle{
display:table;
margin:auto;
left:auto;
position:inherit;
transform:none;
}
}
@media all and (max-width: 840px){
#sidebarContainer{
background-color:var(--sidebar-narrow-bg-color);
}
#outerContainer.sidebarOpen #viewerContainer{
inset-inline-start:0 !important;
}
}
@media all and (max-width: 750px){
:root{
--editor-toolbar-base-offset:40px;
}
#outerContainer .hiddenMediumView{
display:none;
}
#outerContainer .visibleMediumView{
display:inherit;
}
}
@media all and (max-width: 690px){
.hiddenSmallView,
.hiddenSmallView *{
display:none;
}
.toolbarButtonSpacer{
width:0;
}
.findbar{
inset-inline-start:34px;
}
}
@media all and (max-width: 560px){
#scaleSelectContainer{
display:none;
}
}