Skip to content

GitLab

Commit 791e653c authored by dechen lin's avatar dechen lin
Browse files

feat: add web project

parent 9d689790
Hide whitespace changes
Inline Side-by-side
Showing with 21088 additions and 0 deletions
projects/web/public/pdfjs-dist/web/viewer.css 0 → 100644
View file @ 791e653c
/* 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.
*/
/* custom */
.tooltip {
position: absolute;
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
z-index: 100;
pointer-events: none;
}
.tooltip::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #333;
}
.textLayer{
position:absolute;
text-align:initial;
inset:0;
overflow:hidden;
opacity:1;
line-height:1;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
text-size-adjust:none;
forced-color-adjust:none;
transform-origin:0 0;
caret-color:CanvasText;
}
.textLayer.highlighting{
touch-action:none;
}
.textLayer :is(span, br){
color:transparent;
/* color: rgba(18, 19, 22, 80%); */
position:absolute;
white-space:pre;
cursor:text;
transform-origin:0% 0%;
z-index: 999;
}
.textLayer span.markedContent{
top:0;
height:0;
}
.textLayer .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;
margin:-1px;
padding:1px;
background-color:var(--highlight-bg-color);
-webkit-backdrop-filter:var(--highlight-backdrop-filter);
backdrop-filter:var(--highlight-backdrop-filter);
border-radius:4px;
}
@media screen and (forced-colors: active){
.textLayer .highlight{
--highlight-bg-color:transparent;
--highlight-selected-bg-color:transparent;
--highlight-backdrop-filter:var(--hcm-highlight-filter);
--highlight-selected-backdrop-filter:var(
--hcm-highlight-selected-filter
);
}
}
.textLayer .highlight.appended{
position:initial;
}
.textLayer .highlight.begin{
border-radius:4px 0 0 4px;
}
.textLayer .highlight.end{
border-radius:0 4px 4px 0;
}
.textLayer .highlight.middle{
border-radius:0;
}
.textLayer .highlight.selected{
background-color:var(--highlight-selected-bg-color);
-webkit-backdrop-filter:var(--highlight-selected-backdrop-filter);
backdrop-filter:var(--highlight-selected-backdrop-filter);
}
.textLayer ::-moz-selection{
background:rgba(0 0 255 / 0.25);
background:color-mix(in srgb, AccentColor, transparent 75%);
}
.textLayer ::selection{
background:rgba(0 0 255 / 0.25);
background:color-mix(in srgb, AccentColor, transparent 75%);
}
.textLayer br::-moz-selection{
background:transparent;
}
.textLayer br::selection{
background:transparent;
}
.textLayer .endOfContent{
display:block;
position:absolute;
inset:100% 0 0;
z-index:-1;
cursor:default;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.textLayer .endOfContent.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;
position:absolute;
top:0;
left:0;
pointer-events:none;
transform-origin:0 0;
}
@media screen and (forced-colors: active){
.annotationLayer{
--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;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
outline:1.5px solid selectedItem;
}
.annotationLayer .linkAnnotation{
outline:var(--link-outline);
}
.annotationLayer .linkAnnotation:hover{
-webkit-backdrop-filter:var(--hcm-highlight-filter);
backdrop-filter:var(--hcm-highlight-filter);
}
.annotationLayer .linkAnnotation > a:hover{
opacity:0 !important;
background:none !important;
box-shadow:none;
}
.annotationLayer .popupAnnotation .popup{
outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
background-color:ButtonFace !important;
color:ButtonText !important;
}
.annotationLayer .highlightArea:hover::after{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-backdrop-filter:var(--hcm-highlight-filter);
backdrop-filter:var(--hcm-highlight-filter);
content:"";
pointer-events:none;
}
.annotationLayer .popupAnnotation.focused .popup{
outline:calc(3px * var(--scale-factor)) solid Highlight !important;
}
}
.annotationLayer[data-main-rotation="90"] .norotate{
transform:rotate(270deg) translateX(-100%);
}
.annotationLayer[data-main-rotation="180"] .norotate{
transform:rotate(180deg) translate(-100%, -100%);
}
.annotationLayer[data-main-rotation="270"] .norotate{
transform:rotate(90deg) translateY(-100%);
}
.annotationLayer.disabled section,
.annotationLayer.disabled .popup{
pointer-events:none;
}
.annotationLayer .annotationContent{
position:absolute;
width:100%;
height:100%;
pointer-events:none;
}
.annotationLayer .annotationContent.freetext{
background:transparent;
border:none;
inset:0;
overflow:visible;
white-space:nowrap;
font:10px sans-serif;
line-height:1.35;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.annotationLayer section{
position:absolute;
text-align:initial;
pointer-events:auto;
box-sizing:border-box;
transform-origin:0 0;
}
.annotationLayer section:has(div.annotationContent) canvas.annotationContent{
display:none;
}
.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
position:absolute;
font-size:1em;
top:0;
left:0;
width:100%;
height:100%;
}
.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
> a:hover{
opacity:0.2;
background-color:rgb(255 255 0);
box-shadow:0 2px 10px rgb(255 255 0);
}
.annotationLayer .linkAnnotation.hasBorder:hover{
background-color:rgb(255 255 0 / 0.2);
}
.annotationLayer .hasBorder{
background-size:100% 100%;
}
.annotationLayer .textAnnotation img{
position:absolute;
cursor:pointer;
width:100%;
height:100%;
top:0;
left:0;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .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%;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
outline:1.5px solid red;
}
.annotationLayer .choiceWidgetAnnotation select option{
padding:0;
}
.annotationLayer .buttonWidgetAnnotation.radioButton input{
border-radius:50%;
}
.annotationLayer .textWidgetAnnotation textarea{
resize:none;
}
.annotationLayer .textWidgetAnnotation [disabled]:is(input, textarea), .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled]{
background:none;
border:2px solid var(--input-disabled-border-color);
cursor:not-allowed;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover{
border:2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover{
border-radius:2px;
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus{
background:none;
border:2px solid var(--input-focus-border-color);
border-radius:2px;
outline:var(--input-focus-outline);
}
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{
background-image:none;
background-color:transparent;
}
.annotationLayer .buttonWidgetAnnotation.checkBox :focus{
border:2px solid var(--input-focus-border-color);
border-radius:2px;
outline:var(--input-focus-outline);
}
.annotationLayer .buttonWidgetAnnotation.radioButton :focus{
border:2px solid var(--input-focus-border-color);
outline:var(--input-focus-outline);
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
background-color:CanvasText;
content:"";
display:block;
position:absolute;
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
height:80%;
left:45%;
width:1px;
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{
transform:rotate(45deg);
}
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
transform:rotate(-45deg);
}
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
border-radius:50%;
height:50%;
left:25%;
top:25%;
width:50%;
}
.annotationLayer .textWidgetAnnotation input.comb{
font-family:monospace;
padding-left:2px;
padding-right:0;
}
.annotationLayer .textWidgetAnnotation input.comb:focus{
width:103%;
}
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{
height:100%;
width:100%;
}
.annotationLayer .popupAnnotation{
position:absolute;
font-size:calc(9px * var(--scale-factor));
pointer-events:none;
width:-moz-max-content;
width:max-content;
max-width:45%;
height:auto;
}
.annotationLayer .popup{
background-color:rgb(255 255 153);
box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);
border-radius:calc(2px * var(--scale-factor));
outline:1.5px solid rgb(255 255 74);
padding:calc(6px * var(--scale-factor));
cursor:pointer;
font:message-box;
white-space:normal;
word-wrap:break-word;
pointer-events:auto;
}
.annotationLayer .popupAnnotation.focused .popup{
outline-width:3px;
}
.annotationLayer .popup *{
font-size:calc(9px * var(--scale-factor));
}
.annotationLayer .popup > .header{
display:inline-block;
}
.annotationLayer .popup > .header h1{
display:inline;
}
.annotationLayer .popup > .header .popupDate{
display:inline-block;
margin-left:calc(5px * var(--scale-factor));
width:-moz-fit-content;
width:fit-content;
}
.annotationLayer .popupContent{
border-top:1px solid rgb(51 51 51);
margin-top:calc(2px * var(--scale-factor));
padding-top:calc(2px * var(--scale-factor));
}
.annotationLayer .richText > *{
white-space:pre-wrap;
font-size:calc(9px * var(--scale-factor));
}
.annotationLayer .popupTriggerArea{
cursor:pointer;
}
.annotationLayer section svg{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.annotationLayer .annotationTextContent{
position:absolute;
width:100%;
height:100%;
opacity:0;
color:transparent;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
pointer-events:none;
}
.annotationLayer .annotationTextContent span{
width:100%;
display:inline-block;
}
.annotationLayer 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{
-o-object-position:left top;
object-position:left top;
-o-object-fit:contain;
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{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
text-indent:1px;
text-overflow:"";
}
}
/* .canvasWrapper svg{
transform:none;
}
.canvasWrapper svg[data-main-rotation="90"] mask,
.canvasWrapper svg[data-main-rotation="90"] use:not(.clip, .mask){
transform:matrix(0, 1, -1, 0, 1, 0);
}
.canvasWrapper svg[data-main-rotation="180"] mask,
.canvasWrapper svg[data-main-rotation="180"] use:not(.clip, .mask){
transform:matrix(-1, 0, 0, -1, 1, 1);
}
.canvasWrapper svg[data-main-rotation="270"] mask,
.canvasWrapper svg[data-main-rotation="270"] use:not(.clip, .mask){
transform:matrix(0, -1, 1, 0, 0, 1);
}
.canvasWrapper svg.highlight{
--blend-mode:multiply;
position:absolute;
mix-blend-mode:var(--blend-mode);
} */
@media screen and (forced-colors: active){
.canvasWrapper svg.highlight{
--blend-mode:difference;
}
}
.canvasWrapper svg.highlight:not(.free){
fill-rule:evenodd;
}
.canvasWrapper svg.highlightOutline{
position:absolute;
mix-blend-mode:normal;
fill-rule:evenodd;
fill:none;
}
.canvasWrapper svg.highlightOutline.hovered:not(.free):not(.selected){
stroke:var(--hover-outline-color);
stroke-width:var(--outline-width);
}
.canvasWrapper svg.highlightOutline.selected:not(.free) .mainOutline{
stroke:var(--outline-around-color);
stroke-width:calc(
var(--outline-width) + 2 * var(--outline-around-width)
);
}
.canvasWrapper svg.highlightOutline.selected:not(.free) .secondaryOutline{
stroke:var(--outline-color);
stroke-width:var(--outline-width);
}
.canvasWrapper svg.highlightOutline.free.hovered:not(.selected){
stroke:var(--hover-outline-color);
stroke-width:calc(2 * var(--outline-width));
}
.canvasWrapper svg.highlightOutline.free.selected .mainOutline{
stroke:var(--outline-around-color);
stroke-width:calc(
2 * (var(--outline-width) + var(--outline-around-width))
);
}
.canvasWrapper svg.highlightOutline.free.selected .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;
--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)
);
-webkit-appearance:none;
-moz-appearance:none;
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;
}
@media (prefers-color-scheme: light){
:where(html:not(.is-light)) .toggle-button{
--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;
}
}
:where(html.is-dark) .toggle-button{
--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){
.toggle-button{
--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-button:focus-visible{
outline:var(--focus-outline);
outline-offset:var(--focus-outline-offset);
}
.toggle-button:enabled:hover{
background:var(--toggle-background-color-hover);
border-color:var(--toggle-border-color);
}
.toggle-button:enabled:active{
background:var(--toggle-background-color-active);
border-color:var(--toggle-border-color);
}
.toggle-button[aria-pressed="true"]{
background:var(--toggle-background-color-pressed);
border-color:transparent;
}
.toggle-button[aria-pressed="true"]:enabled:hover{
background:var(--toggle-background-color-pressed-hover);
border-color:transparent;
}
.toggle-button[aria-pressed="true"]:enabled:active{
background:var(--toggle-background-color-pressed-active);
border-color:transparent;
}
.toggle-button::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;
}
.toggle-button[aria-pressed="true"]::before{
translate:var(--toggle-dot-transform-x);
background-color:var(--toggle-dot-background-color-on-pressed);
}
.toggle-button[aria-pressed="true"]:enabled:hover::before,
.toggle-button[aria-pressed="true"]:enabled:active::before{
background-color:var(--toggle-dot-background-color-on-pressed);
}
[dir="rtl"] .toggle-button[aria-pressed="true"]::before{
translate:calc(-1 * var(--toggle-dot-transform-x));
}
@media (prefers-reduced-motion: no-preference){
.toggle-button::before{
transition:translate 100ms;
}
}
@media (prefers-contrast){
.toggle-button:enabled:hover{
border-color:var(--toggle-border-color-hover);
}
.toggle-button:enabled:active{
border-color:var(--toggle-border-color-active);
}
.toggle-button[aria-pressed="true"]:enabled{
border-color:var(--toggle-border-color);
position:relative;
}
.toggle-button[aria-pressed="true"]:enabled:hover,
.toggle-button[aria-pressed="true"]:enabled:hover:active{
border-color:var(--toggle-border-color-hover);
}
.toggle-button[aria-pressed="true"]:enabled:active{
background-color:var(--toggle-dot-background-color-active);
border-color:var(--toggle-dot-background-color-hover);
}
.toggle-button:hover::before,
.toggle-button:active::before{
background-color:var(--toggle-dot-background-color-hover);
}
}
@media (forced-colors){
.toggle-button{
--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);
}
.toggle-button[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;
}
.toggle-button[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);
}
.textLayer.highlighting:not(.free) span{
cursor:var(--editorHighlight-editing-cursor);
}
.textLayer.highlighting.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);
}
.annotationEditorLayer .draggable.selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor){
cursor:move;
}
.annotationEditorLayer .moving:is(.freeTextEditor, .inkEditor, .stampEditor){
touch-action:none;
}
.annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor){
border:var(--focus-outline);
outline:var(--focus-outline-around);
}
.annotationEditorLayer .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor)::before{
content:"";
position:absolute;
inset:0;
border:var(--focus-outline-around);
pointer-events:none;
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor){
border:var(--hover-outline);
outline:var(--hover-outline-around);
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor)::before{
content:"";
position:absolute;
inset:0;
border:var(--focus-outline-around);
}
:is(.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;
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);
}
@media (prefers-color-scheme: light){
:where(html:not(.is-light)) :is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
--editor-toolbar-bg-color:#2b2a33;
--editor-toolbar-fg-color:#fbfbfe;
--editor-toolbar-hover-bg-color:#52525e;
--editor-toolbar-focus-outline-color:#0df;
}
}
:where(html.is-dark) :is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
--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){
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
--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;
}
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar.hidden{
display:none;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar:has(:focus-visible){
border-color:transparent;
}
[dir="ltr"] :is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
transform-origin:100% 0;
}
[dir="rtl"] :is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar{
transform-origin:0 0;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons{
display:flex;
justify-content:center;
align-items:center;
gap:0;
height:100%;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .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;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton{
width:var(--editor-toolbar-height);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton::before{
content:"";
-webkit-mask-image:var(--editor-toolbar-highlight-image);
mask-image:var(--editor-toolbar-highlight-image);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:100%;
height:100%;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .highlightButton:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete{
width:var(--editor-toolbar-height);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete::before{
content:"";
-webkit-mask-image:var(--editor-toolbar-delete-image);
mask-image:var(--editor-toolbar-delete-image);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:100%;
height:100%;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .delete:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > *{
height:var(--editor-toolbar-height);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider){
border:none;
background-color:transparent;
cursor:pointer;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):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;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):hover:active{
outline:none;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons > :not(.divider):focus-visible{
border-radius:2px;
outline:2px solid var(--editor-toolbar-focus-outline-color);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .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:-moz-max-content;
width:max-content;
padding-inline:8px;
pointer-events:all;
font:menu;
font-weight:590;
font-size:12px;
color:var(--editor-toolbar-fg-color);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText:disabled{
pointer-events:none;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText::before{
content:"";
-webkit-mask-image:var(--alt-text-add-image);
mask-image:var(--alt-text-add-image);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
display:inline-block;
width:12px;
height:13px;
background-color:var(--editor-toolbar-fg-color);
margin-inline-end:4px;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText:hover::before{
background-color:var(--editor-toolbar-hover-fg-color);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText.done::before{
-webkit-mask-image:var(--alt-text-done-image);
mask-image:var(--alt-text-done-image);
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip{
display:none;
}
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.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);
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:-moz-max-content;
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;
}
@media (prefers-color-scheme: light){
:where(html:not(.is-light)) :is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
--alt-text-tooltip-bg:#1c1b22;
--alt-text-tooltip-fg:#fbfbfe;
--alt-text-tooltip-shadow:0px 2px 6px 0px #15141a;
}
}
:where(html.is-dark) :is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
--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){
:is(.annotationEditorLayer
:is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar .buttons .altText .tooltip.show{
--alt-text-tooltip-bg:Canvas;
--alt-text-tooltip-fg:CanvasText;
--alt-text-tooltip-border:CanvasText;
--alt-text-tooltip-shadow: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);
-webkit-user-select:none;
-moz-user-select:none;
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;
-webkit-user-select:auto;
-moz-user-select:auto;
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;
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers.hidden{
display:none;
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .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;
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topLeft{
top:var(--resizer-shift);
left:var(--resizer-shift);
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topMiddle{
top:var(--resizer-shift);
left:calc(50% + var(--resizer-shift));
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topRight{
top:var(--resizer-shift);
right:var(--resizer-shift);
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.middleRight{
top:calc(50% + var(--resizer-shift));
right:var(--resizer-shift);
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomRight{
bottom:var(--resizer-shift);
right:var(--resizer-shift);
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomMiddle{
bottom:var(--resizer-shift);
left:calc(50% + var(--resizer-shift));
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.bottomLeft{
bottom:var(--resizer-shift);
left:var(--resizer-shift);
}
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.middleLeft{
top:calc(50% + var(--resizer-shift));
left:var(--resizer-shift);
}
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topLeft,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topLeft,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topLeft,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topLeft,
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomRight,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomRight,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomRight,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomRight{
cursor:nwse-resize;
}
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topMiddle,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topMiddle,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topMiddle,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topMiddle,
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomMiddle,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomMiddle,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomMiddle,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomMiddle{
cursor:ns-resize;
}
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topRight,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topRight,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topRight,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topRight,
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomLeft,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomLeft,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomLeft,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomLeft{
cursor:nesw-resize;
}
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleRight,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleRight,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleRight,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleRight,
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleLeft,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleLeft,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleLeft,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleLeft{
cursor:ew-resize;
}
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topLeft,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topLeft,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topLeft,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topLeft,
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomRight,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomRight,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomRight,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomRight{
cursor:nesw-resize;
}
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topMiddle,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topMiddle,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topMiddle,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topMiddle,
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomMiddle,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomMiddle,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomMiddle,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomMiddle{
cursor:ew-resize;
}
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.topRight,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.topRight,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.topRight,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.topRight,
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.bottomLeft,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.bottomLeft,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.bottomLeft,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.bottomLeft{
cursor:nwse-resize;
}
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleRight,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleRight,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleRight,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleRight,
.annotationEditorLayer[data-main-rotation="0"]
:is([data-editor-rotation="90"], [data-editor-rotation="270"]) > .resizers > .resizer.middleLeft,
.annotationEditorLayer[data-main-rotation="90"]
:is([data-editor-rotation="0"], [data-editor-rotation="180"]) > .resizers > .resizer.middleLeft,
.annotationEditorLayer[data-main-rotation="180"]
:is([data-editor-rotation="270"], [data-editor-rotation="90"]) > .resizers > .resizer.middleLeft,
.annotationEditorLayer[data-main-rotation="270"]
:is([data-editor-rotation="180"], [data-editor-rotation="0"]) > .resizers > .resizer.middleLeft{
cursor:ns-resize;
}
.annotationEditorLayer
: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"] .annotationEditorLayer
: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{
inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset));
inset-block-start:0;
}
[dir="rtl"] .annotationEditorLayer
: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{
inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
inset-block-start:0;
}
.annotationEditorLayer
: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));
}
.annotationEditorLayer
: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"] .annotationEditorLayer
: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{
inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
inset-block-start:100%;
}
[dir="rtl"] .annotationEditorLayer
: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{
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);
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);
}
@media (prefers-color-scheme: light){
:where(html:not(.is-light)) #altTextDialog{
--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;
}
}
:where(html.is-dark) #altTextDialog{
--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){
#altTextDialog{
--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;
}
}
#altTextDialog::backdrop{
-webkit-mask:url(#alttext-manager-mask);
mask:url(#alttext-manager-mask);
}
#altTextDialog.positioned{
margin:0;
}
#altTextDialog #altTextContainer{
width:300px;
height:-moz-fit-content;
height:fit-content;
display:inline-flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
}
#altTextDialog #altTextContainer *:focus-visible{
outline:var(--focus-ring-outline);
outline-offset:2px;
}
#altTextDialog #altTextContainer .radio{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
}
#altTextDialog #altTextContainer .radio .radioButton{
display:flex;
gap:8px;
align-self:stretch;
align-items:center;
}
#altTextDialog #altTextContainer .radio .radioButton input{
-webkit-appearance:none;
-moz-appearance:none;
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);
}
#altTextDialog #altTextContainer .radio .radioButton input:hover{
filter:var(--hover-filter);
}
#altTextDialog #altTextContainer .radio .radioButton input:checked{
background-color:var(--radio-checked-bg-color);
border:4px solid var(--radio-checked-border-color);
}
#altTextDialog #altTextContainer .radio .radioLabel{
display:flex;
padding-inline-start:24px;
align-items:flex-start;
gap:10px;
align-self:stretch;
}
#altTextDialog #altTextContainer .radio .radioLabel span{
flex:1 0 0;
font-size:11px;
color:var(--text-secondary-color);
}
#altTextDialog #altTextContainer #overallDescription{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
align-self:stretch;
}
#altTextDialog #altTextContainer #overallDescription span{
align-self:stretch;
}
#altTextDialog #altTextContainer #overallDescription .title{
font-size:13px;
font-style:normal;
font-weight:590;
}
#altTextDialog #altTextContainer #addDescription{
display:flex;
flex-direction:column;
align-items:stretch;
gap:8px;
}
#altTextDialog #altTextContainer #addDescription .descriptionArea{
flex:1;
padding-inline:24px 10px;
}
#altTextDialog #altTextContainer #addDescription .descriptionArea 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);
}
#altTextDialog #altTextContainer #addDescription .descriptionArea textarea:focus{
outline-offset:0;
border-color:transparent;
}
#altTextDialog #altTextContainer #addDescription .descriptionArea textarea:disabled{
pointer-events:none;
opacity:0.4;
}
#altTextDialog #altTextContainer #buttons{
display:flex;
justify-content:flex-end;
align-items:flex-start;
gap:8px;
align-self:stretch;
}
#altTextDialog #altTextContainer #buttons button{
border-radius:4px;
border:1px solid;
font:menu;
font-weight:600;
padding:4px 16px;
width:auto;
height:32px;
}
#altTextDialog #altTextContainer #buttons button:hover{
cursor:pointer;
filter:var(--hover-filter);
}
#altTextDialog #altTextContainer #buttons button#altTextCancel{
color:var(--button-cancel-fg-color);
background-color:var(--button-cancel-bg-color);
border-color:var(--button-cancel-border-color);
}
#altTextDialog #altTextContainer #buttons button#altTextCancel:hover{
color:var(--button-cancel-hover-fg-color);
background-color:var(--button-cancel-hover-bg-color);
border-color:var(--button-cancel-hover-border-color);
}
#altTextDialog #altTextContainer #buttons button#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;
}
#altTextDialog #altTextContainer #buttons button#altTextSave: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: light){
:where(html:not(.is-light)) .colorPicker{
--hover-outline-color:#80ebff;
--selected-outline-color:#aaf2ff;
--swatch-border-color:#52525e;
}
}
:where(html.is-dark) .colorPicker{
--hover-outline-color:#80ebff;
--selected-outline-color:#aaf2ff;
--swatch-border-color:#52525e;
}
@media screen and (forced-colors: active){
.colorPicker{
--hover-outline-color:Highlight;
--selected-outline-color:var(--hover-outline-color);
--swatch-border-color:ButtonText;
}
}
.colorPicker .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;
}
.colorPicker button:is(:hover, .selected) > .swatch{
border:none;
}
.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{
rotate:0deg;
}
.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{
rotate:270deg;
}
.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{
rotate:180deg;
}
.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{
rotate:90deg;
}
.annotationEditorLayer .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;
}
.annotationEditorLayer .highlightEditor:not(.free){
transform:none;
}
.annotationEditorLayer .highlightEditor .internal{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:auto;
}
.annotationEditorLayer .highlightEditor.disabled .internal{
pointer-events:none;
}
.annotationEditorLayer .highlightEditor.selectedEditor .internal{
cursor:pointer;
}
.annotationEditorLayer .highlightEditor .editToolbar{
--editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg);
transform-origin:center !important;
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker{
position:relative;
width:auto;
display:flex;
justify-content:center;
align-items:center;
gap:4px;
padding:4px;
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker::after{
content:"";
-webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image);
mask-image:var(--editor-toolbar-colorpicker-arrow-image);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
display:inline-block;
background-color:var(--editor-toolbar-fg-color);
width:12px;
height:12px;
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:hover::after{
background-color:var(--editor-toolbar-hover-fg-color);
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden)){
background-color:var(--editor-toolbar-hover-bg-color);
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden))::after{
scale:-1;
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .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));
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button{
width:100%;
height:auto;
border:none;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
background:none;
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:active, :focus-visible){
outline:none;
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button > .swatch{
outline-offset:2px;
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button[aria-selected="true"] > .swatch{
outline:2px solid var(--selected-outline-color);
}
.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button: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;
}
#highlightParamsToolbarContainer .editorParamsLabel{
width:-moz-fit-content;
width:fit-content;
inset-inline-start:0;
}
#highlightParamsToolbarContainer .colorPicker{
display:flex;
flex-direction:column;
gap:8px;
}
#highlightParamsToolbarContainer .colorPicker .dropdown{
display:flex;
justify-content:space-between;
align-items:center;
flex-direction:row;
height:auto;
}
#highlightParamsToolbarContainer .colorPicker .dropdown button{
width:auto;
height:auto;
border:none;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
background:none;
flex:0 0 auto;
}
#highlightParamsToolbarContainer .colorPicker .dropdown button .swatch{
width:24px;
height:24px;
}
#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:active, :focus-visible){
outline:none;
}
#highlightParamsToolbarContainer .colorPicker .dropdown button[aria-selected="true"] > .swatch{
outline:2px solid var(--selected-outline-color);
}
#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch{
outline:2px solid var(--hover-outline-color);
}
#highlightParamsToolbarContainer #editorHighlightThickness{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
align-self:stretch;
}
#highlightParamsToolbarContainer #editorHighlightThickness .editorParamsLabel{
width:100%;
height:auto;
align-self:stretch;
}
#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
display:flex;
justify-content:space-between;
align-items:center;
align-self:stretch;
--example-color:#bfbfc9;
}
@media (prefers-color-scheme: light){
:where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
--example-color:#80808e;
}
}
:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
--example-color:#80808e;
}
@media screen and (forced-colors: active){
#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
--example-color:CanvasText;
}
}
:is(#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker > .editorParamsSlider[disabled]){
opacity:0.4;
}
#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::before,
#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
content:"";
width:8px;
aspect-ratio:1;
display:block;
border-radius:100%;
background-color:var(--example-color);
}
#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
width:24px;
}
#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker .editorParamsSlider{
width:unset;
height:14px;
}
#highlightParamsToolbarContainer #editorHighlightVisibility{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
align-self:stretch;
}
#highlightParamsToolbarContainer #editorHighlightVisibility .divider{
--divider-color:#d7d7db;
margin-block:4px;
width:100%;
height:1px;
background-color:var(--divider-color);
}
@media (prefers-color-scheme: light){
:where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
--divider-color:#8f8f9d;
}
}
:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
--divider-color:#8f8f9d;
}
@media screen and (forced-colors: active){
#highlightParamsToolbarContainer #editorHighlightVisibility .divider{
--divider-color:CanvasText;
}
}
#highlightParamsToolbarContainer #editorHighlightVisibility .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;
--num-page-width: 10px;
}
@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){
.pdfViewer{
--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{
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.pdfViewer.removePageBorders .page{
margin:0 auto 10px;
border:none;
}
.pdfViewer:is(.scrollHorizontal, .scrollWrapped),
.spread{
margin-inline:3.5px;
text-align:center;
display: flex;
flex-direction: column;
align-items: center;
}
.pdfViewer.scrollHorizontal,
.spread{
white-space:nowrap;
}
.pdfViewer.removePageBorders,
.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.removePageBorders .spread .page,
.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{
margin-inline:5px;
}
.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{
--toolbar-height: 48px;
--dir-factor:1;
--inline-start:left;
--inline-end:right;
--sidebar-width:128px;
--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(255, 255, 255);
--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(255, 255, 255);
--toolbar-border-color:#EBECF0;
--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: #F4F5F9;
--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: #0D53DE;
--thumbnail-selected-color: #0D53DE;
--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-sidebarToggle-icon-open:url(images/toolbarButton-sidebarToggle-open.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-layerChange-icon:url(images/layer-button.svg);
--toolbarButton-layerChange-icon-show:url(images/layer-button-show.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-openFile-icon:url(images/toolbarButton-openFile.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);
}
[dir="rtl"]:root{
--dir-factor:-1;
--inline-start:right;
--inline-end:left;
}
@media (prefers-color-scheme: dark){
:root:where(:not(.is-dark)){
// custom ban dark theme
/* --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: #F4F5F9;
--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); */
}
}
:root:where(.is-dark){
--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: #F4F5F9;
--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:#F4F5F9;
--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;
-webkit-user-select:none;
-moz-user-select: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:var(--toolbar-height) 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:0;
inset-inline-start:0;
overflow:auto;
position:absolute;
width:100%;
border-right: 1px solid #EBECF0;
}
#viewerContainer{
overflow:auto;
position:absolute;
inset:var(--toolbar-height) 0 0;
outline:none;
&::-webkit-scrollbar {
scrollbar-gutter: stable;
background: white !important;
width: 6px !important;
height: 6px !important;
}
/* 滚动条里面轨道 */
&::-webkit-scrollbar-track {
scrollbar-gutter: stable;
background: white !important;
}
/* 滑块 */
&::-webkit-scrollbar-thumb {
background-color: #EBECF0 !important;
scrollbar-gutter: stable;
border-radius: 10px;
}
}
#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{
display: flex;
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: var(--toolbar-height);
background-color:var(--toolbar-bg-color);
box-shadow:var(--toolbar-box-shadow);
border-bottom:var(--toolbar-border-bottom);
}
#toolbarViewer{
height: var(--toolbar-height);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
#loadingBar{
--progressBar-percent:0%;
--progressBar-end-offset:0;
position:absolute;
inset-inline:0 var(--progressBar-end-offset);
height:4px;
bottom: 0;
transform: translateY(100%);
background-color:var(--progressBar-bg-color);
border-bottom:0px 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{
-webkit-user-select:none;
-moz-user-select:none;
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;
}
#findInput::-moz-placeholder{
font-style:normal;
}
#findInput::placeholder{
font-style:normal;
}
.loadingInput:has(> #findInput[data-status="pending"])::after{
display:block;
visibility:visible;
}
#findInput[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::-webkit-slider-runnable-track,
.editorParamsToolbarContainer .editorParamsSlider::-moz-range-track{
background-color:black;
}
.editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-thumb,
.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{
-webkit-mask-image:var(--editorParams-stampAddImage-icon);
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{
margin-left:auto;
left:auto;
margin-right:16px;
}
#toolbarViewerLeft,
#toolbarSidebarLeft{
float:var(--inline-start);
}
#toolbarViewerRight,
#toolbarSidebarRight{
float:var(--inline-end);
}
#toolbarViewerLeft > *,
#toolbarViewerMiddle > *,
#toolbarViewerRight > *,
#toolbarSidebarLeft *,
#toolbarSidebarRight *,
.findbar *{
position:relative;
float:var(--inline-start);
}
#toolbarViewerLeft{
padding-inline-start:1px;
width: calc(50% - 120px);
}
#toolbarViewerRight{
padding-inline-end:1px;
z-index: 99;
position: absolute;
right: 0;
}
#toolbarSidebarRight{
padding-inline-end:2px;
}
.splitToolbarButton{
display: flex;
align-items: center;
white-space: nowrap;
}
.odlPageControl {
position: absolute;
left: calc(50% - 14px);
transform: translateX(-50%);
}
.splitToolbarButton > .toolbarButton{
cursor: pointer;
float:var(--inline-start);
}
.toolbarButton,
.secondaryToolbarButton,
.dialogButton{
border:none;
background:none;
width:16px;
height: 16px;
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:var(--inline-start);
margin:4px 0;
width:1px;
height:20px;
background-color:var(--separator-color);
}
.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
.dialogButton{
min-width:16px;
margin:2px 1px;
border:none;
border-radius:2px;
color:var(--main-color);
font-size:12px;
line-height:14px;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
cursor:default;
box-sizing:border-box;
}
.toolbarButton {
min-width:12px;
}
.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;
-webkit-mask-image:var(--toolbarButton-menuArrow-icon);
mask-image:var(--toolbarButton-menuArrow-icon);
}
.dropdownToolbarButton > select{
-webkit-appearance:none;
-moz-appearance:none;
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);
-webkit-mask-size:cover;
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:0px;
left: 0px;
}
.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{
-webkit-mask-image:var(--toolbarButton-sidebarToggle-icon);
mask-image:var(--toolbarButton-sidebarToggle-icon);
transform:scaleX(var(--dir-factor));
margin-left: 1px;
margin-top: 1px;
}
#secondaryToolbarToggle::before{
-webkit-mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
transform:scaleX(var(--dir-factor));
}
#findPrevious::before{
-webkit-mask-image:var(--findbarButton-previous-icon);
mask-image:var(--findbarButton-previous-icon);
}
#findNext::before{
-webkit-mask-image:var(--findbarButton-next-icon);
mask-image:var(--findbarButton-next-icon);
}
#previous::before{
-webkit-mask-image:var(--toolbarButton-pageUp-icon);
mask-image:var(--toolbarButton-pageUp-icon);
}
#next::before{
-webkit-mask-image:var(--toolbarButton-pageDown-icon);
mask-image:var(--toolbarButton-pageDown-icon);
}
#splitLine {
width: 1px;
height: 12px;
background: #D7D8DD;
margin-right: 16px;
margin-top: 2px;
}
/* custom layerChange icon */
#layerChange {
margin-right: 16px;
}
#layerChange::before{
cursor: pointer;
-webkit-mask-image:var(--toolbarButton-layerChange-icon-show);
mask-image:var(--toolbarButton-layerChange-icon-show);
}
.layerChange-active::before {
cursor: pointer;
-webkit-mask-image:var(--toolbarButton-layerChange-icon) !important;
mask-image:var(--toolbarButton-layerChange-icon) !important;
}
#zoomOut::before{
cursor: pointer;
-webkit-mask-image:var(--toolbarButton-zoomOut-icon);
mask-image:var(--toolbarButton-zoomOut-icon);
}
#zoomIn::before{
cursor: pointer;
-webkit-mask-image:var(--toolbarButton-zoomIn-icon);
mask-image:var(--toolbarButton-zoomIn-icon);
}
#presentationMode::before{
-webkit-mask-image:var(--toolbarButton-presentationMode-icon);
mask-image:var(--toolbarButton-presentationMode-icon);
}
#editorFreeText::before{
-webkit-mask-image:var(--toolbarButton-editorFreeText-icon);
mask-image:var(--toolbarButton-editorFreeText-icon);
}
#editorHighlight::before{
-webkit-mask-image:var(--toolbarButton-editorHighlight-icon);
mask-image:var(--toolbarButton-editorHighlight-icon);
}
#editorInk::before{
-webkit-mask-image:var(--toolbarButton-editorInk-icon);
mask-image:var(--toolbarButton-editorInk-icon);
}
#editorStamp::before{
-webkit-mask-image:var(--toolbarButton-editorStamp-icon);
mask-image:var(--toolbarButton-editorStamp-icon);
}
:is(#print, #secondaryPrint)::before{
-webkit-mask-image:var(--toolbarButton-print-icon);
mask-image:var(--toolbarButton-print-icon);
}
#secondaryOpenFile::before{
-webkit-mask-image:var(--toolbarButton-openFile-icon);
mask-image:var(--toolbarButton-openFile-icon);
}
:is(#download, #secondaryDownload)::before{
-webkit-mask-image:var(--toolbarButton-download-icon);
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{
-webkit-mask-image:var(--toolbarButton-bookmark-icon);
mask-image:var(--toolbarButton-bookmark-icon);
}
#viewThumbnail::before{
-webkit-mask-image:var(--toolbarButton-viewThumbnail-icon);
mask-image:var(--toolbarButton-viewThumbnail-icon);
}
#viewOutline::before{
-webkit-mask-image:var(--toolbarButton-viewOutline-icon);
mask-image:var(--toolbarButton-viewOutline-icon);
transform:scaleX(var(--dir-factor));
}
#viewAttachments::before{
-webkit-mask-image:var(--toolbarButton-viewAttachments-icon);
mask-image:var(--toolbarButton-viewAttachments-icon);
}
#viewLayers::before{
-webkit-mask-image:var(--toolbarButton-viewLayers-icon);
mask-image:var(--toolbarButton-viewLayers-icon);
}
#currentOutlineItem::before{
-webkit-mask-image:var(--toolbarButton-currentOutlineItem-icon);
mask-image:var(--toolbarButton-currentOutlineItem-icon);
transform:scaleX(var(--dir-factor));
}
#viewFind::before{
-webkit-mask-image:var(--toolbarButton-search-icon);
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%;
/* [custom] */
display: none;
}
.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{
-webkit-mask-image:var(--secondaryToolbarButton-firstPage-icon);
mask-image:var(--secondaryToolbarButton-firstPage-icon);
}
#lastPage::before{
-webkit-mask-image:var(--secondaryToolbarButton-lastPage-icon);
mask-image:var(--secondaryToolbarButton-lastPage-icon);
}
#pageRotateCcw::before{
-webkit-mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
}
#pageRotateCw::before{
-webkit-mask-image:var(--secondaryToolbarButton-rotateCw-icon);
mask-image:var(--secondaryToolbarButton-rotateCw-icon);
}
#cursorSelectTool::before{
-webkit-mask-image:var(--secondaryToolbarButton-selectTool-icon);
mask-image:var(--secondaryToolbarButton-selectTool-icon);
}
#cursorHandTool::before{
-webkit-mask-image:var(--secondaryToolbarButton-handTool-icon);
mask-image:var(--secondaryToolbarButton-handTool-icon);
}
#scrollPage::before{
-webkit-mask-image:var(--secondaryToolbarButton-scrollPage-icon);
mask-image:var(--secondaryToolbarButton-scrollPage-icon);
}
#scrollVertical::before{
-webkit-mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
}
#scrollHorizontal::before{
-webkit-mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
}
#scrollWrapped::before{
-webkit-mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
}
#spreadNone::before{
-webkit-mask-image:var(--secondaryToolbarButton-spreadNone-icon);
mask-image:var(--secondaryToolbarButton-spreadNone-icon);
}
#spreadOdd::before{
-webkit-mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
}
#spreadEven::before{
-webkit-mask-image:var(--secondaryToolbarButton-spreadEven-icon);
mask-image:var(--secondaryToolbarButton-spreadEven-icon);
}
#documentProperties::before{
-webkit-mask-image:var(--secondaryToolbarButton-documentProperties-icon);
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:1px 7px;
margin:3px 2px;
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);
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:center;
width: fit-content !important;
background-size:0 0;
font-size: 14px !important;
transition-property:none;
margin-top: 6px;
}
#pageNumber::-webkit-inner-spin-button{
-webkit-appearance:none;
}
.loadingInput:has(> #pageNumber.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);
-webkit-mask-size:cover;
mask-size:cover;
-webkit-mask-image:var(--loading-icon);
mask-image:var(--loading-icon);
}
.loadingInput.start::after{
inset-inline-start:4px;
}
.loadingInput.end::after{
inset-inline-end:4px;
}
.toolbarField:focus{
border-color:#0a84ff;
}
.toolbarLabel{
min-width:16px;
padding:7px;
margin:2px;
padding-top: 10px;
border-radius:2px;
color:var(--main-color);
font-size:12px;
line-height:14px;
text-align:left;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
cursor:default;
}
#numPages.toolbarLabel{
min-width: var(--num-page-width);
margin-right: -4px;
padding-inline-start:3px;
font-size: 14px;
}
#thumbnailView,
#outlineView,
#attachmentsView,
#layersView{
position:absolute;
width:calc(100% - 8px);
inset-block:0;
padding:4px 4px 0;
overflow:auto;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
#thumbnailView{
width: 100%;
padding:10px 0px 0;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
/* 滚动条整体部分 */
&::-webkit-scrollbar {
scrollbar-gutter: stable;
background: white !important;
width: 6px !important;
height: 6px !important;
}
/* 滚动条里面轨道 */
&::-webkit-scrollbar-track {
scrollbar-gutter: stable;
background: white !important;
}
/* 滑块 */
&::-webkit-scrollbar-thumb {
background-color: #EBECF0 !important;
scrollbar-gutter: stable;
border-radius: 10px;
}
& > a {
text-decoration: none;
}
}
#thumbnailView > a:is(:active, :focus){
outline:0;
}
.thumbnail{
--thumbnail-width:0;
--thumbnail-height:0;
float:var(--inline-start);
width:var(--thumbnail-width);
height:var(--thumbnail-height);
margin:0 0px 8px;
padding:1px;
border:1px solid #EBECF0;
border-radius:4px;
}
#thumbnailView > a:last-of-type > .thumbnail{
margin-bottom:10px;
}
/* a:focus > .thumbnail,
.thumbnail:hover{
border-color:var(--thumbnail-hover-color);
} */
a:hover > .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;
-webkit-user-select:none;
-moz-user-select:none;
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:var(--inline-start);
margin-top:1px;
}
.treeItemToggler{
position:relative;
float:var(--inline-start);
height:0;
width:0;
color:rgb(255 255 255 / 0.5);
}
.treeItemToggler::before{
inset-inline-end:4px;
-webkit-mask-image:var(--treeitem-expanded-icon);
mask-image:var(--treeitem-expanded-icon);
}
.treeItemToggler.treeItemsHidden::before{
-webkit-mask-image:var(--treeitem-collapsed-icon);
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)) #outlineOptionsContainer{
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){
}
@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;
}
}
#odlCustomRatio {
min-width: 10px;
}
#scaleSelect {
border: none;
background: transparent;
}
.odlImageNum {
text-align: center;
text-decoration: none;
margin-bottom: 8px;
color: rgba(18, 19, 22, 0.80);
}
.odl_selected {
& > .odlImageNum {
color: var(--thumbnail-selected-color);
}
}
#odlScale {
font-size: 14px;
margin: 2px 8px 0;
user-select: none;
}
#toolbarViewerLeft {
display: flex;
align-items: center;
}
#sidebarToggle {
width: 20px;
height: 20px;
margin-left: 16px;
cursor: pointer;
}
#sidebarToggle::before,.toggled::before {
width: 18px !important;
height: 18px !important;
}
#sidebarToggle {
margin-right: 8px;
&:active {
background-color: #F4F5F9 !important;
}
}
#sidebarToggle.toggled {
background-color: #F4F5F9;
border-radius: 2px;
width: 20px !important;
height: 20px !important;
}
#sidebarToggle.toggled::before {
-webkit-mask-image:var(--toolbarButton-sidebarToggle-icon) !important;
mask-image:var(--toolbarButton-sidebarToggle-icon) !important;
width: 18px !important;
height: 18px !important;
margin-left: 1px;
margin-top: 1px;
}
#sidebarToggle:is(:hover, :focus-visible) {
border-radius: 2px;
}
#odl-pdf-title {
margin-left: 8px;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100%)
}
@media all and (max-width: 690px){
#odl-pdf-title {
max-width: 160px;
}
}
projects/web/public/pdfjs-dist/web/viewer.html 0 → 100644
View file @ 791e653c
<!DOCTYPE html>
<!--
Copyright 2012 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.
Adobe CMap resources are covered by their own copyright but the same license:
Copyright 1990-2015 Adobe Systems Incorporated.
See https://github.com/adobe-type-tools/cmap-resources
-->
<html dir="ltr" mozdisallowselectionprint>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<title>PDF.js viewer</title>
<style>
.upload-button {
padding: 10px 20px;
background-color: #1890ff;
color: white;
border: none;
cursor: pointer;
}
.preview-container {
width: 100%;
height: 1000px;
border: none;
}
</style>
<script>
const odlIdDomToolbarList = {
odl_scale: 'odlScale'
}
const odlCustomSiderDomList = {
odl_imageNum: 'odlImageNum'
}
window.odlIdDomToolbarList = odlIdDomToolbarList;
window.odlCustomSiderDomList = odlCustomSiderDomList;
window.getOdlViewDom = (obj) => {
if(!obj) return {}
let res = {}
for (let key in obj) {
res = {...res, [`${obj[key]}`]: document.getElementById(obj[key])}
}
return res
}
</script>
<script>
window.onerror = function(message, source, lineno, colno, error) {
console.log('An error occurred:', message, message === "Uncaught TypeError: Promise.withResolvers is not a function");
// 可以在这里进行错误处理，如发送错误报告等
if( message === "Uncaught TypeError: Promise.withResolvers is not a function" ) {
window.parent.postMessage({'error': '很抱歉，您的浏览器版本过低，无法正常显示PDF。请升级浏览器至最新版本，以获得更好的浏览体验'}, '*');
}
return true;
};
</script>
<script src="../build/pdf.mjs" type="module" onerror="handleScriptError()"></script>
<link rel="stylesheet" href="./custom.css">
<link rel="stylesheet" href="viewer.css">
<script src="layer.js" type="module"></script>
<script src="custom.js" type="module"></script>
<script src="viewer.mjs" type="module"></script>
</head>
<body tabindex="1">
<div id="outerContainer">
<div id="sidebarContainer">
<div id="toolbarSidebar" style="display: none;">
<div id="toolbarSidebarLeft">
<div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
<button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
<span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span>
</button>
<button id="viewOutline" class="toolbarButton" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false" aria-controls="outlineView">
<span data-l10n-id="pdfjs-document-outline-button-label">Document Outline</span>
</button>
<button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4" data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
<span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
</button>
<button id="viewLayers" class="toolbarButton" title="Show Layers (double-click to reset all layers to the default state)" tabindex="5" data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false" aria-controls="layersView">
<span data-l10n-id="pdfjs-layers-button-label">Layers</span>
</button>
</div>
</div>
<div id="toolbarSidebarRight">
<div id="outlineOptionsContainer">
<div class="verticalToolbarSeparator"></div>
<button id="currentOutlineItem" class="toolbarButton" disabled="disabled" title="Find Current Outline Item" tabindex="6" data-l10n-id="pdfjs-current-outline-item-button">
<span data-l10n-id="pdfjs-current-outline-item-button-label">Current Outline Item</span>
</button>
</div>
</div>
</div>
<div id="sidebarContent">
<div id="thumbnailView">
</div>
<div id="outlineView" class="hidden">
</div>
<div id="attachmentsView" class="hidden">
</div>
<div id="layersView" class="hidden">
</div>
</div>
<div id="sidebarResizer"></div>
</div> <!-- sidebarContainer -->
<div id="mainContainer">
<div class="findbar hidden doorHanger" id="findbar">
<div id="findbarInputContainer">
<span class="loadingInput end">
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="pdfjs-find-input" aria-invalid="false">
</span>
<div class="splitToolbarButton">
<button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="pdfjs-find-previous-button">
<span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
</button>
<button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="pdfjs-find-next-button">
<span data-l10n-id="pdfjs-find-next-button-label">Next</span>
</button>
</div>
</div>
<div id="findbarOptionsOneContainer">
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="pdfjs-find-highlight-checkbox">Highlight All</label>
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="pdfjs-find-match-case-checkbox-label">Match Case</label>
</div>
<div id="findbarOptionsTwoContainer">
<input type="checkbox" id="findMatchDiacritics" class="toolbarField" tabindex="96">
<label for="findMatchDiacritics" class="toolbarLabel" data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match Diacritics</label>
<input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="97">
<label for="findEntireWord" class="toolbarLabel" data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole Words</label>
</div>
<div id="findbarMessageContainer" aria-live="polite">
<span id="findResultsCount" class="toolbarLabel"></span>
<span id="findMsg" class="toolbarLabel"></span>
</div>
</div> <!-- findbar -->
<div class="editorParamsToolbar hidden doorHangerRight" id="editorHighlightParamsToolbar">
<div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
<div id="editorHighlightColorPicker" class="colorPicker">
<span id="highlightColorPickerLabel" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
</div>
<div id="editorHighlightThickness">
<label for="editorFreeHighlightThickness" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
<div class="thicknessPicker">
<input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider" data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12" min="8" max="24" step="1" tabindex="101">
</div>
</div>
<div id="editorHighlightVisibility">
<div class="divider"></div>
<div class="toggler">
<label for="editorHighlightShowAll" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show all</label>
<button id="editorHighlightShowAll" class="toggle-button" data-l10n-id="pdfjs-editor-highlight-show-all-button" aria-pressed="true" tabindex="102"></button>
</div>
</div>
</div>
</div>
<div class="editorParamsToolbar hidden doorHangerRight" id="editorFreeTextParamsToolbar">
<div class="editorParamsToolbarContainer">
<div class="editorParamsSetter">
<label for="editorFreeTextColor" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
<input type="color" id="editorFreeTextColor" class="editorParamsColor" tabindex="103">
</div>
<div class="editorParamsSetter">
<label for="editorFreeTextFontSize" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
<input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100" step="1" tabindex="104">
</div>
</div>
</div>
<div class="editorParamsToolbar hidden doorHangerRight" id="editorInkParamsToolbar">
<div class="editorParamsToolbarContainer">
<div class="editorParamsSetter">
<label for="editorInkColor" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
<input type="color" id="editorInkColor" class="editorParamsColor" tabindex="105">
</div>
<div class="editorParamsSetter">
<label for="editorInkThickness" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
<input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1" tabindex="106">
</div>
<div class="editorParamsSetter">
<label for="editorInkOpacity" class="editorParamsLabel" data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
<input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100" min="1" max="100" step="1" tabindex="107">
</div>
</div>
</div>
<div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
<div class="editorParamsToolbarContainer">
<button id="editorStampAddImage" class="secondaryToolbarButton" title="Add image" tabindex="108" data-l10n-id="pdfjs-editor-stamp-add-image-button">
<span class="editorParamsLabel" data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add image</span>
</button>
</div>
</div>
<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
<div id="secondaryToolbarButtonContainer">
<button id="secondaryOpenFile" class="secondaryToolbarButton" title="Open File" tabindex="51" data-l10n-id="pdfjs-open-file-button">
<span data-l10n-id="pdfjs-open-file-button-label">Open</span>
</button>
<button id="secondaryPrint" class="secondaryToolbarButton visibleMediumView" title="Print" tabindex="52" data-l10n-id="pdfjs-print-button">
<span data-l10n-id="pdfjs-print-button-label">Print</span>
</button>
<button id="secondaryDownload" class="secondaryToolbarButton visibleMediumView" title="Save" tabindex="53" data-l10n-id="pdfjs-save-button">
<span data-l10n-id="pdfjs-save-button-label">Save</span>
</button>
<div class="horizontalToolbarSeparator"></div>
<button id="presentationMode" class="secondaryToolbarButton" title="Switch to Presentation Mode" tabindex="54" data-l10n-id="pdfjs-presentation-mode-button">
<span data-l10n-id="pdfjs-presentation-mode-button-label">Presentation Mode</span>
</button>
<a href="#" id="viewBookmark" class="secondaryToolbarButton" title="Current Page (View URL from Current Page)" tabindex="55" data-l10n-id="pdfjs-bookmark-button">
<span data-l10n-id="pdfjs-bookmark-button-label">Current Page</span>
</a>
<div id="viewBookmarkSeparator" class="horizontalToolbarSeparator"></div>
<button id="firstPage" class="secondaryToolbarButton" title="Go to First Page" tabindex="56" data-l10n-id="pdfjs-first-page-button">
<span data-l10n-id="pdfjs-first-page-button-label">Go to First Page</span>
</button>
<button id="lastPage" class="secondaryToolbarButton" title="Go to Last Page" tabindex="57" data-l10n-id="pdfjs-last-page-button">
<span data-l10n-id="pdfjs-last-page-button-label">Go to Last Page</span>
</button>
<div class="horizontalToolbarSeparator"></div>
<button id="pageRotateCw" class="secondaryToolbarButton" title="Rotate Clockwise" tabindex="58" data-l10n-id="pdfjs-page-rotate-cw-button">
<span data-l10n-id="pdfjs-page-rotate-cw-button-label">Rotate Clockwise</span>
</button>
<button id="pageRotateCcw" class="secondaryToolbarButton" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="pdfjs-page-rotate-ccw-button">
<span data-l10n-id="pdfjs-page-rotate-ccw-button-label">Rotate Counterclockwise</span>
</button>
<div class="horizontalToolbarSeparator"></div>
<div id="cursorToolButtons" role="radiogroup">
<button id="cursorSelectTool" class="secondaryToolbarButton toggled" title="Enable Text Selection Tool" tabindex="60" data-l10n-id="pdfjs-cursor-text-select-tool-button" role="radio" aria-checked="true">
<span data-l10n-id="pdfjs-cursor-text-select-tool-button-label">Text Selection Tool</span>
</button>
<button id="cursorHandTool" class="secondaryToolbarButton" title="Enable Hand Tool" tabindex="61" data-l10n-id="pdfjs-cursor-hand-tool-button" role="radio" aria-checked="false">
<span data-l10n-id="pdfjs-cursor-hand-tool-button-label">Hand Tool</span>
</button>
</div>
<div class="horizontalToolbarSeparator"></div>
<div id="scrollModeButtons" role="radiogroup">
<button id="scrollPage" class="secondaryToolbarButton" title="Use Page Scrolling" tabindex="62" data-l10n-id="pdfjs-scroll-page-button" role="radio" aria-checked="false">
<span data-l10n-id="pdfjs-scroll-page-button-label">Page Scrolling</span>
</button>
<button id="scrollVertical" class="secondaryToolbarButton toggled" title="Use Vertical Scrolling" tabindex="63" data-l10n-id="pdfjs-scroll-vertical-button" role="radio" aria-checked="true">
<span data-l10n-id="pdfjs-scroll-vertical-button-label" >Vertical Scrolling</span>
</button>
<button id="scrollHorizontal" class="secondaryToolbarButton" title="Use Horizontal Scrolling" tabindex="64" data-l10n-id="pdfjs-scroll-horizontal-button" role="radio" aria-checked="false">
<span data-l10n-id="pdfjs-scroll-horizontal-button-label">Horizontal Scrolling</span>
</button>
<button id="scrollWrapped" class="secondaryToolbarButton" title="Use Wrapped Scrolling" tabindex="65" data-l10n-id="pdfjs-scroll-wrapped-button" role="radio" aria-checked="false">
<span data-l10n-id="pdfjs-scroll-wrapped-button-label">Wrapped Scrolling</span>
</button>
</div>
<div class="horizontalToolbarSeparator"></div>
<div id="spreadModeButtons" role="radiogroup">
<button id="spreadNone" class="secondaryToolbarButton toggled" title="Do not join page spreads" tabindex="66" data-l10n-id="pdfjs-spread-none-button" role="radio" aria-checked="true">
<span data-l10n-id="pdfjs-spread-none-button-label">No Spreads</span>
</button>
<button id="spreadOdd" class="secondaryToolbarButton" title="Join page spreads starting with odd-numbered pages" tabindex="67" data-l10n-id="pdfjs-spread-odd-button" role="radio" aria-checked="false">
<span data-l10n-id="pdfjs-spread-odd-button-label">Odd Spreads</span>
</button>
<button id="spreadEven" class="secondaryToolbarButton" title="Join page spreads starting with even-numbered pages" tabindex="68" data-l10n-id="pdfjs-spread-even-button" role="radio" aria-checked="false">
<span data-l10n-id="pdfjs-spread-even-button-label">Even Spreads</span>
</button>
</div>
<div class="horizontalToolbarSeparator"></div>
<button id="documentProperties" class="secondaryToolbarButton" title="Document Properties…" tabindex="69" data-l10n-id="pdfjs-document-properties-button" aria-controls="documentPropertiesDialog">
<span data-l10n-id="pdfjs-document-properties-button-label">Document Properties…</span>
</button>
</div>
</div> <!-- secondaryToolbar -->
<div class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
<span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
</button>
<div class="toolbarButtonSpacer" style="display: none;"></div>
<div id="odl-pdf-title"></div>
<button id="viewFind" style="display: none;" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
<span data-l10n-id="pdfjs-findbar-button-label">Find</span>
</button>
</div>
<div class="splitToolbarButton hiddenSmallView odlPageControl">
<button class="toolbarButton" title="Previous Page" id="previous" tabindex="13" data-l10n-id="pdfjs-previous-button">
<span data-l10n-id="pdfjs-previous-button-label">Previous</span>
</button>
<span class="loadingInput start">
<input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="pdfjs-page-input" autocomplete="off">
</span>
<span id="numPages" class="toolbarLabel"></span>
<button class="toolbarButton" title="Next Page" id="next" tabindex="14" data-l10n-id="pdfjs-next-button">
<span data-l10n-id="pdfjs-next-button-label">Next</span>
</button>
</div>
<div id="toolbarViewerRight">
<div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup" style="display:none;">
<button id="editorHighlight" class="toolbarButton" hidden="true" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button">
<span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
</button>
<button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="32" data-l10n-id="pdfjs-editor-free-text-button">
<span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
</button>
<button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="33" data-l10n-id="pdfjs-editor-ink-button">
<span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
</button>
<button id="editorStamp" class="toolbarButton hidden" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="34" data-l10n-id="pdfjs-editor-stamp-button">
<span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
</button>
</div>
<button id="print" class="toolbarButton hiddenMediumView" title="Print" tabindex="41" data-l10n-id="pdfjs-print-button" style="display: none;">
<span data-l10n-id="pdfjs-print-button-label">Print</span>
</button>
<button id="download" class="toolbarButton hiddenMediumView" title="Save" tabindex="42" data-l10n-id="pdfjs-save-button" style="display: none;">
<span data-l10n-id="pdfjs-save-button-label">Save</span>
</button>
<button id="secondaryToolbarToggle" class="toolbarButton" hidden="true" title="Tools" tabindex="43" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar">
<span data-l10n-id="pdfjs-tools-button-label">Tools</span>
</button>
</div>
<div id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button id="layerChange" class="toolbarButton layerChange-active" title="Layer Change" data-l10n-id="pdfjs-layer-change-button">
<span data-l10n-id="pdfjs-layer-change-button-label">Layer Change</span>
</button>
<span id="splitLine"></span>
<button id="zoomOut" class="toolbarButton" title="Zoom Out" tabindex="21" data-l10n-id="pdfjs-zoom-out-button">
<span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span>
</button>
<div id="odlScale"></div>
<button id="zoomIn" class="toolbarButton" title="Zoom In" tabindex="22" data-l10n-id="pdfjs-zoom-in-button">
<span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span>
</button>
</div>
</div>
<span id="scaleSelectContainer" class="dropdownToolbarButton" style="display: none;" >
<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="pdfjs-zoom-select">
<!-- <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="pdfjs-page-scale-auto">Automatic Zoom</option>
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="pdfjs-page-scale-actual">Actual Size</option>
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page Fit</option>
<option id="pageWidthOption" title="" value="page-width" data-l10n-id="pdfjs-page-scale-width">Page Width</option> -->
<option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
<!-- <option title="" value="0.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 50 }'>50%</option>
<option title="" value="0.75" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 75 }'>75%</option>
<option title="" value="1" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 100 }'>100%</option>
<option title="" value="1.25" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 125 }'>125%</option>
<option title="" value="1.5" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 150 }'>150%</option>
<option title="" value="2" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 200 }'>200%</option>
<option title="" value="3" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 300 }'>300%</option>
<option title="" value="4" data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 400 }'>400%</option> -->
</select>
</span>
</div>
<div id="loadingBar">
<div class="progress">
<div class="glimmer">
</div>
</div>
</div>
</div>
</div>
<div id="viewerContainer" tabindex="0">
<div id="viewer" class="pdfViewer"></div>
</div>
</div> <!-- mainContainer -->
<div id="dialogContainer">
<dialog id="passwordDialog">
<div class="row">
<label for="password" id="passwordText" data-l10n-id="pdfjs-password-label">Enter the password to open this PDF file:</label>
</div>
<div class="row">
<input type="password" id="password" class="toolbarField">
</div>
<div class="buttonRow">
<button id="passwordCancel" class="dialogButton"><span data-l10n-id="pdfjs-password-cancel-button">Cancel</span></button>
<button id="passwordSubmit" class="dialogButton"><span data-l10n-id="pdfjs-password-ok-button">OK</span></button>
</div>
</dialog>
<dialog id="documentPropertiesDialog">
<div class="row">
<span id="fileNameLabel" data-l10n-id="pdfjs-document-properties-file-name">File name:</span>
<p id="fileNameField" aria-labelledby="fileNameLabel">-</p>
</div>
<div class="row">
<span id="fileSizeLabel" data-l10n-id="pdfjs-document-properties-file-size">File size:</span>
<p id="fileSizeField" aria-labelledby="fileSizeLabel">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span id="titleLabel" data-l10n-id="pdfjs-document-properties-title">Title:</span>
<p id="titleField" aria-labelledby="titleLabel">-</p>
</div>
<div class="row">
<span id="authorLabel" data-l10n-id="pdfjs-document-properties-author">Author:</span>
<p id="authorField" aria-labelledby="authorLabel">-</p>
</div>
<div class="row">
<span id="subjectLabel" data-l10n-id="pdfjs-document-properties-subject">Subject:</span>
<p id="subjectField" aria-labelledby="subjectLabel">-</p>
</div>
<div class="row">
<span id="keywordsLabel" data-l10n-id="pdfjs-document-properties-keywords">Keywords:</span>
<p id="keywordsField" aria-labelledby="keywordsLabel">-</p>
</div>
<div class="row">
<span id="creationDateLabel" data-l10n-id="pdfjs-document-properties-creation-date">Creation Date:</span>
<p id="creationDateField" aria-labelledby="creationDateLabel">-</p>
</div>
<div class="row">
<span id="modificationDateLabel" data-l10n-id="pdfjs-document-properties-modification-date">Modification Date:</span>
<p id="modificationDateField" aria-labelledby="modificationDateLabel">-</p>
</div>
<div class="row">
<span id="creatorLabel" data-l10n-id="pdfjs-document-properties-creator">Creator:</span>
<p id="creatorField" aria-labelledby="creatorLabel">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span id="producerLabel" data-l10n-id="pdfjs-document-properties-producer">PDF Producer:</span>
<p id="producerField" aria-labelledby="producerLabel">-</p>
</div>
<div class="row">
<span id="versionLabel" data-l10n-id="pdfjs-document-properties-version">PDF Version:</span>
<p id="versionField" aria-labelledby="versionLabel">-</p>
</div>
<div class="row">
<span id="pageCountLabel" data-l10n-id="pdfjs-document-properties-page-count">Page Count:</span>
<p id="pageCountField" aria-labelledby="pageCountLabel">-</p>
</div>
<div class="row">
<span id="pageSizeLabel" data-l10n-id="pdfjs-document-properties-page-size">Page Size:</span>
<p id="pageSizeField" aria-labelledby="pageSizeLabel">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span id="linearizedLabel" data-l10n-id="pdfjs-document-properties-linearized">Fast Web View:</span>
<p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
</div>
<div class="buttonRow">
<button id="documentPropertiesClose" class="dialogButton"><span data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
</div>
</dialog>
<dialog id="altTextDialog" aria-labelledby="dialogLabel" aria-describedby="dialogDescription">
<div id="altTextContainer">
<div id="overallDescription">
<span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label" class="title">Choose an option</span>
<span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
Alt text (alternative text) helps when people can’t see the image or when it doesn’t load.
</span>
</div>
<div id="addDescription">
<div class="radio">
<div class="radioButton">
<input type="radio" id="descriptionButton" name="altTextOption" tabindex="0" aria-describedby="descriptionAreaLabel" checked>
<label for="descriptionButton" data-l10n-id="pdfjs-editor-alt-text-add-description-label">Add a description</label>
</div>
<div class="radioLabel">
<span id="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-add-description-description">
Aim for 1-2 sentences that describe the subject, setting, or actions.
</span>
</div>
</div>
<div class="descriptionArea">
<textarea id="descriptionTextarea" placeholder="For example, “A young man sits down at a table to eat a meal”" aria-labelledby="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-textarea" tabindex="0"></textarea>
</div>
</div>
<div id="markAsDecorative">
<div class="radio">
<div class="radioButton">
<input type="radio" id="decorativeButton" name="altTextOption" aria-describedby="decorativeLabel">
<label for="decorativeButton" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-label">Mark as decorative</label>
</div>
<div class="radioLabel">
<span id="decorativeLabel" data-l10n-id="pdfjs-editor-alt-text-mark-decorative-description">
This is used for ornamental images, like borders or watermarks.
</span>
</div>
</div>
</div>
<div id="buttons">
<button id="altTextCancel" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
<button id="altTextSave" tabindex="0"><span data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
</div>
</div>
</dialog>
<dialog id="printServiceDialog" style="min-width: 200px;">
<div class="row">
<span data-l10n-id="pdfjs-print-progress-message">Preparing document for printing…</span>
</div>
<div class="row">
<progress value="0" max="100"></progress>
<span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
</div>
<div class="buttonRow">
<button id="printCancel" class="dialogButton"><span data-l10n-id="pdfjs-print-progress-close-button">Cancel</span></button>
</div>
</dialog>
</div> <!-- dialogContainer -->
</div> <!-- outerContainer -->
<div id="printContainer"></div>
</body>
</html>
projects/web/public/pdfjs-dist/web/viewer.mjs 0 → 100644
View file @ 791e653c
This source diff could not be displayed because it is too large. You can view the blob instead.
projects/web/src/App.css 0 → 100644
View file @ 791e653c
body,html, #root {
width: 100%;
height: 100vh;
background: white;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
projects/web/src/App.tsx 0 → 100644
View file @ 791e653c
import { Home } from "./pages/home";
import "./App.css";
import QueryProvider from "./context/query-provider";
function App() {
return (
<QueryProvider>
<Home />
</QueryProvider>
);
}
export default App;
projects/web/src/api/extract.ts 0 → 100644
View file @ 791e653c
import axios from "./http";
import { message } from "antd";
import { ExtractTaskType } from "@/types/extract-task-type";
import { getLocale } from "@/utils/locale";
export interface PdfExtractTaskReq {
fileKey: string;
fileName: string;
taskType: ExtractTaskType;
isOcr?: boolean;
}
export interface SubmitRes {
filename: string;
url: string;
id: string;
}
export const handleErrorMsg = (res: any) => {
const isCN = getLocale() === "zh-CN";
const msg = isCN ? res?.data?.error?.msg : res?.data?.error?.msgZh;
message.error(msg);
return { data: null, error: res.data?.error };
};
export const postExtractTask = (
params: PdfExtractTaskReq
): Promise<SubmitRes | null> => {
return axios
.post<SubmitRes>(`/api/v2/extract/task/submit`, params)
.then((res) => {
if (!res?.data?.error) {
return res.data.data;
} else {
handleErrorMsg(res);
return null;
}
});
};
export const postReUploadExtractTask = (
id: string
): Promise<SubmitRes | null> => {
return axios
.put<SubmitRes>(`/api/v2/extract/task/submit`, {
id: Number(id),
})
.then((res) => {
if (!res?.data?.error) {
return res.data.data;
} else {
handleErrorMsg(res);
return null;
}
});
};
export interface TaskIdProgress {
state: "running" | "done" | "pending" | "failed" | "unknown";
markdownUrl: string[] | [];
fullMdLink: string;
content: string[] | [];
url: string;
fileName: string;
thumb: string;
type: ExtractTaskType | "unknown";
isTemplate?: boolean;
fileInfo?: {
pages: number;
width: number;
height: number;
};
}
export const getExtractTaskIdProgress = async (
jobID: string | number
): Promise<TaskIdProgress | null> => {
return axios
.get<TaskIdProgress>(`/api/v2/extract/task/progress?id=${jobID}`)
.then((res) => {
if (res?.data?.error) {
handleErrorMsg(res);
}
return res.data.data;
});
};
export interface TaskIdResItem {
queues: number;
rank: number;
id?: number;
url: string;
fileName?: string;
fullMdLink?: string;
type: ExtractTaskType | "unknown";
state: "running" | "done" | "pending" | "failed" | "unknown";
markdownUrl: string[];
}
export type TaskIdRes = TaskIdResItem[];
// Get ongoing tasks
export const getPdfExtractQueue = async (): Promise<TaskIdRes | null> => {
return axios.get<TaskIdRes>(`/api/v2/extract/taskQueue`).then((res) => {
if (!res?.data?.error) {
return res.data.data;
} else {
handleErrorMsg(res);
return null;
}
});
};
interface TaskHistoryResponse {
list: TaskItem[];
total: number;
pageNo: number;
pageSize: number;
}
interface TaskItem {
fileName: string;
id: string;
type: string;
thumb: string;
state: string; // 提取状态
}
export const getExtractorHistory = ({
pageNo,
pageSize,
}: {
pageNo?: number;
pageSize?: number;
}): Promise<TaskHistoryResponse | null> => {
return axios
.get<TaskHistoryResponse>(
`/api/v2/extract/list?pageNo=${pageNo || 1}&pageSize=${pageSize || 10}`
)
.then((res) => {
if (!res?.data?.error) {
return res.data.data;
} else {
handleErrorMsg(res);
return null;
}
});
};
export const deleteExtractJob = (jobId: string) => {
return axios.delete(`/api/v2/extract/task/${jobId}`);
};
interface UploadResponse {
file_key: string;
url: string;
}
export const localUpload = (file: File) => {
const formData = new FormData();
formData.append("file", file);
return axios.post<UploadResponse>("/api/v2/analysis/upload_pdf", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
};
projects/web/src/api/http.ts 0 → 100644
View file @ 791e653c
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
import Cookies from "js-cookie";
import { message } from "antd";
interface ApiResponse<T> {
code: number;
msg: string;
data: T;
}
interface ErrorResponse {
code: number;
msg: string;
msgZh: string;
}
export interface ProcessedResponse<T> {
data: T;
error: null | Pick<ErrorResponse, "msg" | "msgZh">;
}
interface CustomAxiosInstance
extends Omit<AxiosInstance, "get" | "post" | "put" | "delete"> {
get<T, R = AxiosResponse<ProcessedResponse<T>>>(
url: string,
config?: AxiosRequestConfig
): Promise<R>;
post<T, R = AxiosResponse<ProcessedResponse<T>>>(
url: string,
data?: unknown,
config?: AxiosRequestConfig
): Promise<R>;
put<T, R = AxiosResponse<ProcessedResponse<T>>>(
url: string,
data?: unknown,
config?: AxiosRequestConfig
): Promise<R>;
delete<T, R = AxiosResponse<ProcessedResponse<T>>>(
url: string,
config?: AxiosRequestConfig
): Promise<R>;
}
const instance: CustomAxiosInstance = axios.create({
baseURL: "",
timeout: 10000,
headers: {
"Content-Type": "application/json",
},
});
const processResponse = <T>(
response: AxiosResponse<ApiResponse<T>>
): ProcessedResponse<T> => {
if (response.data.code === 200) {
return {
data: response.data.data,
error: null,
};
} else {
return {
data: response.data.data || ({} as T),
error: {
msg: response.data.msg,
msgZh: (response.data as unknown as ErrorResponse).msgZh,
},
};
}
};
instance.interceptors.request.use(
(config) => {
// TODO： 开源的的时候要去掉
config.headers.Authorization = `Bearer ${Cookies.get("uaa-token")}`;
return config;
},
(error) => {
return Promise.reject(error);
}
);
instance.interceptors.response.use(
<T>(
response: AxiosResponse<ApiResponse<T>>
): AxiosResponse<ProcessedResponse<T>> => {
return { ...response, data: processResponse(response) };
},
(error) => {
message.error(error?.response?.data?.msg || "Error");
return Promise.reject(error);
}
);
export default instance;
projects/web/src/api/oss.ts 0 → 100644
View file @ 791e653c
import http from "./http";
import { UploadFile } from "antd/es/upload/interface";
import { stringify } from "qs";
import { localUpload } from "./extract";
interface IUploadRes {
downloadUrl: string;
headers: any;
key: string;
previewUrl: string;
putUrl: string;
}
/**
* 获取上传链接的接口
* openRead 是否返回公开链接
*/
export const uploadUrl = (
fileName: string,
openRead: boolean,
fileType = ""
): Promise<IUploadRes> =>
http
.post<IUploadRes>(
`/datasets/api/v2/file?${stringify({ fileName, openRead, fileType })}`
)
.then((res) => res.data.data);
export interface IFile extends UploadFile {
url?: string;
thumbUrl?: string;
objectKey?: string;
}
// 获取 阿里云上传链接
export const uploadToOss = async (
file: IFile,
openRead: boolean,
fileType = ""
): Promise<any> => {
const { downloadUrl, previewUrl, key, putUrl, headers } = await uploadUrl(
file.name,
openRead,
fileType
);
file.url = downloadUrl;
file.thumbUrl = previewUrl;
file.objectKey = key;
// 上传文件
await http.put(putUrl, file, { headers: { ...headers } });
return {
downloadUrl,
objectKey: key,
thumbUrl: previewUrl,
url: downloadUrl,
};
};
interface IUploadOptions {
openRead: boolean;
fileType: string;
uploadType?: "local" | "oss";
}
// 可覆盖 antd customUpload 的上传逻辑
export const customUploadToOss = async (
options: any,
otherUploadOptions: IUploadOptions
) => {
const { openRead, fileType, uploadType = "local" } = otherUploadOptions;
console.log("test-options", options.file);
const uploadFile = async () => {
switch (uploadType) {
case "oss":
return await uploadToOss(options.file, openRead, fileType)
.then((res) => {
options?.onSuccess({ ...res, ...options.file });
return res;
})
.catch((error) => {
options?.onError(error);
return {};
});
case "local":
return await localUpload(options.file);
default:
throw new Error(`Unsupported upload type: ${uploadType}`);
}
};
try {
const res = await uploadFile();
options?.onSuccess({ ...res, ...options.file });
} catch (error) {
options?.onError(error);
}
};
projects/web/src/assets/imgs/online.experience/EmbedOutlined-active.svg 0 → 100644
View file @ 791e653c
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0209 9.135C10.1032 8.83545 9.9271 8.52588 9.62755 8.44355C9.328 8.36123 9.01842 8.53733 8.93608 8.83688L7.97929 12.3179C7.89696 12.6175 8.07305 12.9271 8.3726 13.0094C8.67215 13.0917 8.98173 12.9156 9.06406 12.6161L10.0209 9.135Z" fill="#0D53DE"/>
<path d="M7.05842 8.57835C7.28023 8.79585 7.28373 9.15199 7.06623 9.3738L5.86173 10.6022L6.98588 11.8832C7.19079 12.1167 7.16762 12.4721 6.93412 12.677C6.70062 12.8819 6.34522 12.8587 6.14031 12.6252L4.67194 10.952C4.47781 10.7308 4.48703 10.3973 4.69309 10.1872L6.26296 8.58616C6.48046 8.36434 6.8366 8.36084 7.05842 8.57835Z" fill="#0D53DE"/>
<path d="M10.9323 9.3467C10.7148 9.12489 10.7183 8.76875 10.9401 8.55125C11.1619 8.33375 11.5181 8.33724 11.7356 8.55906L13.3054 10.1601C13.5115 10.3702 13.5207 10.7037 13.3266 10.9249L11.8582 12.5981C11.6533 12.8316 11.2979 12.8548 11.0644 12.6499C10.8309 12.445 10.8077 12.0896 11.0127 11.8561L12.1368 10.5751L10.9323 9.3467Z" fill="#0D53DE"/>
<path d="M2.25 3.5C2.25 3.08579 2.58579 2.75 3 2.75H15C15.4142 2.75 15.75 3.08579 15.75 3.5V15.5C15.75 15.9142 15.4142 16.25 15 16.25H3C2.58579 16.25 2.25 15.9142 2.25 15.5V3.5ZM14.25 4.25H3.75V5.20796H14.25V4.25ZM14.25 6.70796H3.75V14.75H14.25V6.70796Z" fill="#0D53DE"/>
</svg>
projects/web/src/assets/imgs/online.experience/EmbedOutlined.svg 0 → 100644
View file @ 791e653c
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0209 9.135C10.1032 8.83545 9.9271 8.52588 9.62755 8.44355C9.328 8.36123 9.01842 8.53733 8.93608 8.83688L7.97929 12.3179C7.89696 12.6175 8.07305 12.9271 8.3726 13.0094C8.67215 13.0917 8.98173 12.9156 9.06406 12.6161L10.0209 9.135Z" fill="#121316" fill-opacity="0.8"/>
<path d="M7.05842 8.57835C7.28023 8.79585 7.28373 9.15199 7.06623 9.3738L5.86173 10.6022L6.98588 11.8832C7.19079 12.1167 7.16762 12.4721 6.93412 12.677C6.70062 12.8819 6.34522 12.8587 6.14031 12.6252L4.67194 10.952C4.47781 10.7308 4.48703 10.3973 4.69309 10.1872L6.26296 8.58616C6.48046 8.36434 6.8366 8.36084 7.05842 8.57835Z" fill="#121316" fill-opacity="0.8"/>
<path d="M10.9323 9.3467C10.7148 9.12489 10.7183 8.76875 10.9401 8.55125C11.1619 8.33375 11.5181 8.33724 11.7356 8.55906L13.3054 10.1601C13.5115 10.3702 13.5207 10.7037 13.3266 10.9249L11.8582 12.5981C11.6533 12.8316 11.2979 12.8548 11.0644 12.6499C10.8309 12.445 10.8077 12.0896 11.0127 11.8561L12.1368 10.5751L10.9323 9.3467Z" fill="#121316" fill-opacity="0.8"/>
<path d="M2.25 3.5C2.25 3.08579 2.58579 2.75 3 2.75H15C15.4142 2.75 15.75 3.08579 15.75 3.5V15.5C15.75 15.9142 15.4142 16.25 15 16.25H3C2.58579 16.25 2.25 15.9142 2.25 15.5V3.5ZM14.25 4.25H3.75V5.20796H14.25V4.25ZM14.25 6.70796H3.75V14.75H14.25V6.70796Z" fill="#121316" fill-opacity="0.8"/>
</svg>
projects/web/src/assets/imgs/online.experience/GradientGitHub.svg 0 → 100644
View file @ 791e653c
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00078 1.80054C5.02566 1.80054 1.80078 5.10534 1.80078 9.1827C1.80078 12.4443 3.8643 15.2113 6.72486 16.1869C7.08486 16.256 7.20078 16.0263 7.20078 15.8319V14.4581C5.19846 14.9045 4.78086 13.5869 4.78086 13.5869C4.45326 12.733 3.98166 12.5069 3.98166 12.5069C3.3279 12.0483 4.03062 12.0584 4.03062 12.0584C4.7535 12.1102 5.13438 12.8194 5.13438 12.8194C5.7759 13.9477 6.81846 13.6222 7.22958 13.4329C7.29366 12.9562 7.48086 12.6301 7.6875 12.445C6.08766 12.2578 4.40646 11.6257 4.40646 8.79822C4.40646 7.99038 4.68798 7.33302 5.14806 6.81606C5.0739 6.62958 4.82694 5.87862 5.21862 4.86126C5.21862 4.86126 5.82342 4.66398 7.19862 5.6187C7.78537 5.4549 8.3916 5.37134 9.00078 5.3703C9.61062 5.37174 10.2176 5.45526 10.8051 5.6187C12.1789 4.66398 12.7829 4.8627 12.7829 4.8627C13.1739 5.87862 12.9269 6.6303 12.8535 6.81678C13.3157 7.33302 13.5944 7.9911 13.5944 8.79822C13.5944 11.6329 11.9103 12.2571 10.3069 12.4393C10.5639 12.6682 10.8008 13.1175 10.8008 13.8073V15.8333C10.8008 16.0285 10.916 16.2589 11.281 16.1869C14.1416 15.2098 16.2008 12.4429 16.2008 9.1827C16.2008 5.10534 12.9773 1.80054 9.00078 1.80054Z" fill="url(#paint0_linear_2118_5951)"/>
<defs>
<linearGradient id="paint0_linear_2118_5951" x1="-10" y1="11.5" x2="43.4144" y2="32.5121" gradientUnits="userSpaceOnUse">
<stop stop-color="#38A0FF"/>
<stop offset="0.489661" stop-color="#0D53DE"/>
<stop offset="1" stop-color="#5246FF"/>
</linearGradient>
</defs>
</svg>
projects/web/src/assets/imgs/online.experience/PdfOutlined-active.svg 0 → 100644
View file @ 791e653c
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.55 8.75V5.9375L11.1983 2.75H10.8259H3.75V16.25H12.75" stroke="#0D53DE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 2.75V6.5H14.25" stroke="#0D53DE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.96382 10.336C7.76177 10.336 7.66401 10.3686 7.55972 10.4338C7.46196 10.4989 7.42285 10.6358 7.42285 10.7987V14.038C7.42285 14.1358 7.45544 14.2401 7.52062 14.3378C7.58579 14.403 7.69008 14.4747 7.85302 14.4747C8.02248 14.4747 8.12024 14.4095 8.18542 14.3378C8.25059 14.2727 8.28318 14.1684 8.28318 14.038V13.0343H8.78504C9.68448 13.0343 10.1863 12.565 10.1863 11.6656C10.1863 11.2289 10.0495 10.8639 9.82135 10.6619C9.58672 10.4272 9.25432 10.3295 8.78504 10.3295L7.96382 10.336ZM9.33905 11.6721C9.33905 11.8742 9.30646 12.0371 9.20217 12.1088C9.137 12.174 8.96754 12.2457 8.76549 12.2457H8.26363V11.1442H8.76549C8.96754 11.1442 9.09789 11.1768 9.20217 11.281C9.30646 11.3397 9.33905 11.4766 9.33905 11.6721ZM13.2171 10.9421C13.0802 10.7401 12.8847 10.6097 12.6826 10.4729C12.448 10.4077 12.1807 10.336 11.8809 10.336H10.9098C10.7729 10.336 10.6426 10.336 10.5448 10.4729C10.5122 10.538 10.4796 10.6423 10.4796 10.7727V14.0119C10.4796 14.1488 10.5122 14.2466 10.5448 14.3118C10.6426 14.4486 10.7794 14.4486 10.9098 14.4486H11.9135C12.2133 14.4486 12.448 14.3835 12.6826 14.2792C12.8847 14.1814 13.0867 14.0119 13.2171 13.8099C13.3539 13.6079 13.4517 13.4058 13.5169 13.1386C13.582 12.9039 13.6146 12.6367 13.6146 12.3695C13.6146 12.1023 13.582 11.835 13.5169 11.6004C13.4452 11.3723 13.3474 11.1377 13.2171 10.9421ZM12.5457 13.3471C12.4089 13.5492 12.2133 13.647 11.9461 13.647H11.3465V11.1377H11.7832C12.1156 11.1377 12.3828 11.2354 12.5197 11.4375C12.6891 11.6395 12.7543 11.9719 12.7543 12.376C12.7804 12.8127 12.6826 13.1125 12.5457 13.3471ZM16.0913 10.336H14.4163C14.2794 10.336 14.1491 10.3686 14.0839 10.4338C13.9861 10.4989 13.947 10.6358 13.947 10.7662V14.0445C13.947 14.1423 13.9796 14.2466 14.0448 14.3118C14.11 14.4095 14.2143 14.4486 14.3772 14.4486C14.5141 14.4486 14.6444 14.416 14.7096 14.3118C14.7422 14.2466 14.8074 14.1749 14.8074 14.0119V12.6758H15.9414C16.1435 12.6758 16.3064 12.5781 16.3455 12.4086C16.3781 12.2717 16.3781 12.174 16.3455 12.1414C16.3129 12.0762 16.2478 11.8742 15.9414 11.8742H14.7748V11.1051H16.0457C16.1826 11.1051 16.2804 11.0725 16.3455 11.0399C16.4107 11.0073 16.4824 10.903 16.4824 10.7075C16.5215 10.5054 16.3586 10.336 16.0913 10.336Z" fill="#0D53DE"/>
</svg>
projects/web/src/assets/imgs/online.experience/PdfOutlined.svg 0 → 100644
View file @ 791e653c
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.55 8.75V5.9375L11.1983 2.75H10.8259H3.75V16.25H12.75" stroke="#121316" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 2.75V6.5H14.25" stroke="#121316" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.96382 10.336C7.76177 10.336 7.66401 10.3686 7.55972 10.4338C7.46196 10.4989 7.42285 10.6358 7.42285 10.7987V14.038C7.42285 14.1358 7.45544 14.2401 7.52062 14.3378C7.58579 14.403 7.69008 14.4747 7.85302 14.4747C8.02248 14.4747 8.12024 14.4095 8.18542 14.3378C8.25059 14.2727 8.28318 14.1684 8.28318 14.038V13.0343H8.78504C9.68448 13.0343 10.1863 12.565 10.1863 11.6656C10.1863 11.2289 10.0495 10.8639 9.82135 10.6619C9.58672 10.4272 9.25432 10.3295 8.78504 10.3295L7.96382 10.336ZM9.33905 11.6721C9.33905 11.8742 9.30646 12.0371 9.20217 12.1088C9.137 12.174 8.96754 12.2457 8.76549 12.2457H8.26363V11.1442H8.76549C8.96754 11.1442 9.09789 11.1768 9.20217 11.281C9.30646 11.3397 9.33905 11.4766 9.33905 11.6721ZM13.2171 10.9421C13.0802 10.7401 12.8847 10.6097 12.6826 10.4729C12.448 10.4077 12.1807 10.336 11.8809 10.336H10.9098C10.7729 10.336 10.6426 10.336 10.5448 10.4729C10.5122 10.538 10.4796 10.6423 10.4796 10.7727V14.0119C10.4796 14.1488 10.5122 14.2466 10.5448 14.3118C10.6426 14.4486 10.7794 14.4486 10.9098 14.4486H11.9135C12.2133 14.4486 12.448 14.3835 12.6826 14.2792C12.8847 14.1814 13.0867 14.0119 13.2171 13.8099C13.3539 13.6079 13.4517 13.4058 13.5169 13.1386C13.582 12.9039 13.6146 12.6367 13.6146 12.3695C13.6146 12.1023 13.582 11.835 13.5169 11.6004C13.4452 11.3723 13.3474 11.1377 13.2171 10.9421ZM12.5457 13.3471C12.4089 13.5492 12.2133 13.647 11.9461 13.647H11.3465V11.1377H11.7832C12.1156 11.1377 12.3828 11.2354 12.5197 11.4375C12.6891 11.6395 12.7543 11.9719 12.7543 12.376C12.7804 12.8127 12.6826 13.1125 12.5457 13.3471ZM16.0913 10.336H14.4163C14.2794 10.336 14.1491 10.3686 14.0839 10.4338C13.9861 10.4989 13.947 10.6358 13.947 10.7662V14.0445C13.947 14.1423 13.9796 14.2466 14.0448 14.3118C14.11 14.4095 14.2143 14.4486 14.3772 14.4486C14.5141 14.4486 14.6444 14.416 14.7096 14.3118C14.7422 14.2466 14.8074 14.1749 14.8074 14.0119V12.6758H15.9414C16.1435 12.6758 16.3064 12.5781 16.3455 12.4086C16.3781 12.2717 16.3781 12.174 16.3455 12.1414C16.3129 12.0762 16.2478 11.8742 15.9414 11.8742H14.7748V11.1051H16.0457C16.1826 11.1051 16.2804 11.0725 16.3455 11.0399C16.4107 11.0073 16.4824 10.903 16.4824 10.7075C16.5215 10.5054 16.3586 10.336 16.0913 10.336Z" fill="#121316" fill-opacity="0.8" />
</svg>
projects/web/src/assets/imgs/online.experience/UploadingOutlined.svg 0 → 100644
View file @ 791e653c
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.16667 11.1667C3.53486 11.1667 3.83333 11.4652 3.83333 11.8334V13.1667H13.1667V11.8334C13.1667 11.4652 13.4651 11.1667 13.8333 11.1667C14.2015 11.1667 14.5 11.4652 14.5 11.8334V13.8334C14.5 14.2016 14.2015 14.5001 13.8333 14.5001H3.16667C2.79848 14.5001 2.5 14.2016 2.5 13.8334V11.8334C2.5 11.4652 2.79848 11.1667 3.16667 11.1667Z" fill="white"/>
<path d="M11.0524 6.66189C11.3127 6.92224 11.7348 6.92224 11.9952 6.66189C12.2555 6.40154 12.2555 5.97943 11.9952 5.71908L8.97147 2.69538C8.84644 2.57036 8.67687 2.50012 8.50006 2.50012C8.32325 2.50012 8.15368 2.57036 8.02866 2.69539L5.00499 5.71909C4.74464 5.97944 4.74464 6.40155 5.00499 6.6619C5.26535 6.92224 5.68746 6.92224 5.9478 6.66189L7.83301 4.77667L7.83301 10.5001C7.83301 10.8682 8.13148 11.1667 8.49967 11.1667C8.86786 11.1667 9.16634 10.8682 9.16634 10.5001L9.16634 4.77588L11.0524 6.66189Z" fill="white"/>
</svg>
projects/web/src/assets/imgs/online.experience/file-upload-bg.svg 0 → 100644
View file @ 791e653c
<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="upload">
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M29.75 47.7505V37.2505H36.75L28 26.7505L19.25 37.2505H26.25V47.7505H16.625C12.9057 47.6408 9.81575 46.3557 7.35525 43.8952C4.89475 41.4347 3.60967 38.3448 3.5 34.6255C3.5735 31.1978 4.69467 28.2905 6.8635 25.9035C9.03233 23.5165 11.7938 22.1037 15.148 21.665C15.8048 18.4928 17.3087 15.9407 19.6595 14.0087C22.0103 12.0767 24.7905 11.074 28 11.0005C31.2083 11.074 33.9885 12.0767 36.3405 14.0087C38.6925 15.9407 40.1963 18.4928 40.852 21.665C44.2062 22.1025 46.9677 23.5153 49.1365 25.9035C51.3053 28.2917 52.4265 31.199 52.5 34.6255C52.3903 38.3448 51.1053 41.4347 48.6448 43.8952C46.1843 46.3557 43.0943 47.6408 39.375 47.7505H29.75Z" fill="url(#paint0_linear_3498_1415)"/>
</g>
<defs>
<linearGradient id="paint0_linear_3498_1415" x1="-16.2123" y1="21.4363" x2="50.2795" y2="54.8555" gradientUnits="userSpaceOnUse">
<stop stop-color="#0D53DE"/>
<stop offset="1" stop-color="#5246FF"/>
</linearGradient>
</defs>
</svg>
projects/web/src/assets/pdf/comingSoonLayer.svg 0 → 100644
View file @ 791e653c
<svg width="329" height="183" viewBox="0 0 329 183" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b_4102_962)">
<rect width="329" height="183" rx="12" fill="white" fill-opacity="0.1"/>
</g>
<defs>
<filter id="filter0_b_4102_962" x="-60" y="-60" width="449" height="303" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="30"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4102_962"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_4102_962" result="shape"/>
</filter>
</defs>
</svg>
projects/web/src/assets/pdf/exitFullScreen.svg 0 → 100644
View file @ 791e653c
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame">
<path id="Vector" d="M13.3333 14.4998H2.66667C2.29847 14.4998 2 14.2013 2 13.8331V3.16642C2 2.79823 2.29847 2.49976 2.66667 2.49976H13.3333C13.7015 2.49976 14 2.79823 14 3.16642V13.8331C14 14.2013 13.7015 14.4998 13.3333 14.4998Z" stroke="#464A53" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M1.99935 3.16642C1.99935 2.79823 2.29782 2.49976 2.66602 2.49976H6.66602V7.16642H1.99935V3.16642Z" stroke="#464A53" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M8.33268 8.83325L11.666 12.1666M11.666 12.1666V9.83325M11.666 12.1666H9.33268" stroke="#464A53" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment