/* 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; 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,"); --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; } } 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,"); --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; 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{ 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; } }