diff options
Diffstat (limited to 'toolkit/components/pdfjs/content/web/viewer.css')
| -rw-r--r-- | toolkit/components/pdfjs/content/web/viewer.css | 3648 |
1 files changed, 3648 insertions, 0 deletions
diff --git a/toolkit/components/pdfjs/content/web/viewer.css b/toolkit/components/pdfjs/content/web/viewer.css new file mode 100644 index 0000000000..238df7ce7f --- /dev/null +++ b/toolkit/components/pdfjs/content/web/viewer.css @@ -0,0 +1,3648 @@ +/* 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 + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.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; + z-index:2; + 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; + z-index:3; + + &[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; + } + } + + canvas{ + position:absolute; + width:100%; + height:100%; + pointer-events:none; + } + + section{ + position:absolute; + text-align:initial; + pointer-events:auto; + box-sizing:border-box; + transform-origin:0 0; + } + + :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)); + } + } + } + } + } +} + +: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; +} + +.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; + z-index:4; +} + +.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){ + .editToolbar{ + --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg); + --editor-toolbar-bg-color:#f0f0f4; + --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; + } + + .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; + } + + &::before{ + content:""; + width:8px; + aspect-ratio:1; + display:block; + border-radius:100%; + background-color:var(--example-color); + } + + .editorParamsSlider{ + width:unset; + height:14px; + } + + &::after{ + content:""; + width:24px; + aspect-ratio:1; + display:block; + border-radius:100%; + background-color:var(--example-color); + } + } + } +} + +: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%; + z-index:1; +} + +.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; + 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{ + 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{ + 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{ + visibility:visible; + + transition-property:visibility; + transition-delay:var(--loading-icon-delay); + } +} + +.loadingInput{ + &::after{ + position:absolute; + visibility:hidden; + 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; + } +} |