diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index bb76d409..5daaf8ca 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -138,7 +138,7 @@ class PdfContainer {
}
async toRenderer(objectUrl) {
- pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs/pdf.worker.js";
+ pdfjsLib.GlobalWorkerOptions.workerSrc = "./pdfjs/pdf.worker.mjs";
const pdf = await pdfjsLib.getDocument(objectUrl).promise;
return {
document: pdf,
diff --git a/src/main/resources/static/pdfjs/cmaps/LICENSE b/src/main/resources/static/pdfjs/cmaps/LICENSE
index 79dd9f77..b1ad168a 100644
--- a/src/main/resources/static/pdfjs/cmaps/LICENSE
+++ b/src/main/resources/static/pdfjs/cmaps/LICENSE
@@ -13,12 +13,12 @@
%%Copyright: Redistributions in binary form must reproduce the above
%%Copyright: copyright notice, this list of conditions and the following
%%Copyright: disclaimer in the documentation and/or other materials
-%%Copyright: provided with the distribution.
+%%Copyright: provided with the distribution.
%%Copyright:
%%Copyright: Neither the name of Adobe Systems Incorporated nor the names
%%Copyright: of its contributors may be used to endorse or promote
%%Copyright: products derived from this software without specific prior
-%%Copyright: written permission.
+%%Copyright: written permission.
%%Copyright:
%%Copyright: THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
%%Copyright: CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
diff --git a/src/main/resources/static/pdfjs/css/viewer.css b/src/main/resources/static/pdfjs/css/viewer.css
index ab0ad406..22d8080d 100644
--- a/src/main/resources/static/pdfjs/css/viewer.css
+++ b/src/main/resources/static/pdfjs/css/viewer.css
@@ -13,2536 +13,3194 @@
* limitations under the License.
*/
-:root {
- --highlight-bg-color: rgba(180, 0, 170, 1);
- --highlight-selected-bg-color: rgba(0, 100, 0, 1);
+.textLayer{
+ position:absolute;
+ text-align:initial;
+ inset:0;
+ overflow:clip;
+ 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;
+ z-index:0;
}
-@media screen and (forced-colors: active) {
- :root {
- --highlight-bg-color: Highlight;
- --highlight-selected-bg-color: ButtonText;
- }
-}
-
-.textLayer {
- position: absolute;
- text-align: initial;
- inset: 0;
- overflow: hidden;
- opacity: 0.25;
- 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;
- z-index: 2;
-}
-
-.textLayer :is(span, br) {
- color: transparent;
- position: absolute;
- white-space: pre;
- cursor: text;
- transform-origin: 0% 0%;
-}
-
-/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
- * the problem doesn't show up in "text" reference tests. */
-.textLayer span.markedContent {
- top: 0;
- height: 0;
-}
-
-.textLayer .highlight {
- margin: -1px;
- padding: 1px;
- background-color: var(--highlight-bg-color);
- border-radius: 4px;
-}
-
-.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);
-}
-
-.textLayer ::-moz-selection {
- background: blue;
- background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
-}
-
-.textLayer ::selection {
- background: blue;
- background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
-}
-
-/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
-.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;
-}
-
-:root {
- --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,");
- --input-focus-border-color: Highlight;
- --input-focus-outline: 1px solid Canvas;
- --input-unfocused-border-color: transparent;
- --input-disabled-border-color: transparent;
- --input-hover-border-color: black;
- --link-outline: none;
-}
-
-@media screen and (forced-colors: active) {
- :root {
- --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;
- --hcm-highligh-filter: invert(100%);
+.textLayer.highlighting{
+ touch-action:none;
}
- .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
- .annotationLayer .choiceWidgetAnnotation select:required,
- .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
- outline: 1.5px solid selectedItem;
+.textLayer :is(span, br){
+ color:transparent;
+ position:absolute;
+ white-space:pre;
+ cursor:text;
+ transform-origin:0% 0%;
}
- .annotationLayer .linkAnnotation:hover {
- -webkit-backdrop-filter: var(--hcm-highligh-filter);
- backdrop-filter: var(--hcm-highligh-filter);
+.textLayer > :not(.markedContent),
+ .textLayer .markedContent span:not(.markedContent){
+ z-index:1;
}
- .annotationLayer .linkAnnotation > a:hover {
- opacity: 0 !important;
- background: none !important;
- box-shadow: none;
+.textLayer span.markedContent{
+ top:0;
+ height:0;
}
- .annotationLayer .popupAnnotation .popup {
- outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
- background-color: ButtonFace !important;
- color: ButtonText !important;
+.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;
}
- .annotationLayer .highlightArea:hover::after {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- -webkit-backdrop-filter: var(--hcm-highligh-filter);
- backdrop-filter: var(--hcm-highligh-filter);
- content: "";
- pointer-events: none;
+@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%);
}
- .annotationLayer .popupAnnotation.focused .popup {
- outline: calc(3px * var(--scale-factor)) solid Highlight !important;
+.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:0;
+ 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,");
+ --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;
}
-.annotationLayer {
- position: absolute;
- top: 0;
- left: 0;
- pointer-events: none;
- transform-origin: 0 0;
- z-index: 3;
+@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[data-main-rotation="90"] .norotate {
- transform: rotate(270deg) translateX(-100%);
-}
+ .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
+ outline:1.5px solid selectedItem;
+ }
-.annotationLayer[data-main-rotation="180"] .norotate {
- transform: rotate(180deg) translate(-100%, -100%);
-}
+ .annotationLayer .linkAnnotation{
+ outline:var(--link-outline);
+ }
-.annotationLayer[data-main-rotation="270"] .norotate {
- transform: rotate(90deg) translateY(-100%);
-}
+ .annotationLayer .linkAnnotation:hover{
+ -webkit-backdrop-filter:var(--hcm-highlight-filter);
+ backdrop-filter:var(--hcm-highlight-filter);
+ }
-.annotationLayer canvas {
- position: absolute;
- width: 100%;
- height: 100%;
- pointer-events: none;
-}
+ .annotationLayer .linkAnnotation > a:hover{
+ opacity:0 !important;
+ background:none !important;
+ box-shadow:none;
+ }
-.annotationLayer section {
- position: absolute;
- text-align: initial;
- pointer-events: auto;
- box-sizing: border-box;
- transform-origin: 0 0;
-}
+ .annotationLayer .popupAnnotation .popup{
+ outline:calc(1.5px * var(--scale-factor)) solid CanvasText !important;
+ background-color:ButtonFace !important;
+ color:ButtonText !important;
+ }
-.annotationLayer .linkAnnotation {
- outline: var(--link-outline);
-}
+ .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 :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
- position: absolute;
- font-size: 1em;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
+ .annotationLayer .popupAnnotation.focused .popup{
+ outline:calc(3px * var(--scale-factor)) solid Highlight !important;
+ }
+ }
-.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover {
- opacity: 0.2;
- background-color: rgba(255, 255, 0, 1);
- box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
-}
+.annotationLayer[data-main-rotation="90"] .norotate{
+ transform:rotate(270deg) translateX(-100%);
+ }
-.annotationLayer .linkAnnotation.hasBorder:hover {
- background-color: rgba(255, 255, 0, 0.2);
-}
+.annotationLayer[data-main-rotation="180"] .norotate{
+ transform:rotate(180deg) translate(-100%, -100%);
+ }
-.annotationLayer .hasBorder {
- background-size: 100% 100%;
-}
+.annotationLayer[data-main-rotation="270"] .norotate{
+ transform:rotate(90deg) translateY(-100%);
+ }
-.annotationLayer .textAnnotation img {
- position: absolute;
- cursor: pointer;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
-}
+.annotationLayer.disabled section,
+ .annotationLayer.disabled .popup{
+ pointer-events:none;
+ }
-.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 .annotationContent{
+ position:absolute;
+ width:100%;
+ height:100%;
+ pointer-events:none;
+ }
-.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
-.annotationLayer .choiceWidgetAnnotation select:required,
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
- outline: 1.5px solid red;
-}
+.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 .choiceWidgetAnnotation select option {
- padding: 0;
-}
+.annotationLayer section{
+ position:absolute;
+ text-align:initial;
+ pointer-events:auto;
+ box-sizing:border-box;
+ transform-origin:0 0;
+ }
-.annotationLayer .buttonWidgetAnnotation.radioButton input {
- border-radius: 50%;
-}
+.annotationLayer section:has(div.annotationContent) canvas.annotationContent{
+ display:none;
+ }
-.annotationLayer .textWidgetAnnotation textarea {
- resize: none;
-}
+.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
+ position:absolute;
+ font-size:1em;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ }
-.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
-.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 :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 .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 .linkAnnotation.hasBorder:hover{
+ background-color:rgb(255 255 0 / 0.2);
+ }
-.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
-.annotationLayer .choiceWidgetAnnotation select:hover,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
- border-radius: 2px;
-}
+.annotationLayer .hasBorder{
+ background-size:100% 100%;
+ }
-.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 .textAnnotation img{
+ position:absolute;
+ cursor:pointer;
+ width:100%;
+ height:100%;
+ top:0;
+ left:0;
+ }
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
- background-image: none;
- background-color: transparent;
-}
+.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 .buttonWidgetAnnotation.checkBox :focus {
- border: 2px solid var(--input-focus-border-color);
- border-radius: 2px;
- outline: var(--input-focus-outline);
-}
+.annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
+ outline:1.5px solid red;
+ }
-.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
- border: 2px solid var(--input-focus-border-color);
- outline: var(--input-focus-outline);
-}
+.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::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: 30%;
- top: 20%;
- width: 50%;
-}
-
-.annotationLayer .textWidgetAnnotation input.comb {
- font-family: monospace;
- padding-left: 2px;
- padding-right: 0;
-}
-
-.annotationLayer .textWidgetAnnotation input.comb:focus {
- /*
- * Letter spacing is placed on the right side of each character. Hence, the
- * letter spacing of the last character may be placed outside the visible
- * area, causing horizontal scrolling. We avoid this by extending the width
- * when the element has focus and revert this when it loses focus.
- */
- width: 103%;
-}
-
-.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: rgba(255, 255, 153, 1);
- box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgba(136, 136, 136, 1);
- border-radius: calc(2px * var(--scale-factor));
- 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 rgba(51, 51, 51, 1);
- 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,");
- --xfa-focus-outline: auto;
-}
-
-@media screen and (forced-colors: active) {
- :root {
- --xfa-focus-outline: 2px solid CanvasText;
+ .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{
+ height:80%;
+ left:45%;
+ width:1px;
}
- .xfaLayer *:required {
- outline: 1.5px solid selectedItem;
+.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,");
+ --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{
+ background-color:transparent;
}
-.xfaLayer .highlight {
- margin: -1px;
- padding: 1px;
- background-color: rgba(239, 203, 237, 1);
- border-radius: 4px;
+.xfaLayer .highlight{
+ margin:-1px;
+ padding:1px;
+ background-color:rgb(239 203 237);
+ border-radius:4px;
}
-.xfaLayer .highlight.appended {
- position: initial;
+.xfaLayer .highlight.appended{
+ position:initial;
}
-.xfaLayer .highlight.begin {
- border-radius: 4px 0 0 4px;
+.xfaLayer .highlight.begin{
+ border-radius:4px 0 0 4px;
}
-.xfaLayer .highlight.end {
- border-radius: 0 4px 4px 0;
+.xfaLayer .highlight.end{
+ border-radius:0 4px 4px 0;
}
-.xfaLayer .highlight.middle {
- border-radius: 0;
+.xfaLayer .highlight.middle{
+ border-radius:0;
}
-.xfaLayer .highlight.selected {
- background-color: rgba(203, 223, 203, 1);
+.xfaLayer .highlight.selected{
+ background-color:rgb(203 223 203);
}
-.xfaPage {
- overflow: hidden;
- position: relative;
+.xfaPage{
+ overflow:hidden;
+ position:relative;
}
-.xfaContentarea {
- position: absolute;
+.xfaContentarea{
+ position:absolute;
}
-.xfaPrintOnly {
- display: none;
+.xfaPrintOnly{
+ display:none;
}
-.xfaLayer {
- position: absolute;
- text-align: initial;
- top: 0;
- left: 0;
- transform-origin: 0 0;
- line-height: 1.2;
+.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 *{
+ 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 *:required{
+ outline:1.5px solid red;
}
.xfaLayer div,
.xfaLayer svg,
-.xfaLayer svg * {
- pointer-events: none;
+.xfaLayer svg *{
+ pointer-events:none;
}
-.xfaLayer a {
- color: blue;
+.xfaLayer a{
+ color:blue;
}
-.xfaRich li {
- margin-left: 3em;
+.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;
+.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;
+.xfaCaption{
+ overflow:hidden;
+ flex:0 0 auto;
}
-.xfaCaptionForCheckButton {
- overflow: hidden;
- flex: 1 1 auto;
+.xfaCaptionForCheckButton{
+ overflow:hidden;
+ flex:1 1 auto;
}
-.xfaLabel {
- height: 100%;
- width: 100%;
+.xfaLabel{
+ height:100%;
+ width:100%;
}
-.xfaLeft {
- display: flex;
- flex-direction: row;
- align-items: center;
+.xfaLeft{
+ display:flex;
+ flex-direction:row;
+ align-items:center;
}
-.xfaRight {
- display: flex;
- flex-direction: row-reverse;
- align-items: center;
+.xfaRight{
+ display:flex;
+ flex-direction:row-reverse;
+ align-items:center;
}
-:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
- max-height: 100%;
+:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){
+ max-height:100%;
}
-.xfaTop {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
+.xfaTop{
+ display:flex;
+ flex-direction:column;
+ align-items:flex-start;
}
-.xfaBottom {
- display: flex;
- flex-direction: column-reverse;
- align-items: flex-start;
+.xfaBottom{
+ display:flex;
+ flex-direction:column-reverse;
+ align-items:flex-start;
}
-:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
- width: 100%;
+:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){
+ width:100%;
}
-.xfaBorder {
- background-color: transparent;
- position: absolute;
- pointer-events: none;
+.xfaBorder{
+ background-color:transparent;
+ position:absolute;
+ pointer-events:none;
}
-.xfaWrapped {
- width: 100%;
- height: 100%;
+.xfaWrapped{
+ width:100%;
+ height:100%;
}
-:is(.xfaTextfield, .xfaSelect):focus {
- background-image: none;
- background-color: transparent;
- outline: var(--xfa-focus-outline);
- outline-offset: -1px;
+: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);
+: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{
+ height:100%;
+ width:100%;
+ flex:1 1 auto;
+ border:none;
+ resize:none;
+ background-image:var(--xfa-unfocused-field-background);
}
-.xfaSelect {
- padding-inline: 2px;
+.xfaSelect{
+ padding-inline:2px;
}
-:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect) {
- flex: 0 1 auto;
+:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){
+ flex:0 1 auto;
}
-.xfaButton {
- cursor: pointer;
- width: 100%;
- height: 100%;
- border: none;
- text-align: center;
+.xfaButton{
+ cursor:pointer;
+ width:100%;
+ height:100%;
+ border:none;
+ text-align:center;
}
-.xfaLink {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
+.xfaLink{
+ width:100%;
+ height:100%;
+ position:absolute;
+ top:0;
+ left:0;
}
.xfaCheckbox,
-.xfaRadio {
- width: 100%;
- height: 100%;
- flex: 0 0 auto;
- border: none;
+.xfaRadio{
+ width:100%;
+ height:100%;
+ flex:0 0 auto;
+ border:none;
}
-.xfaRich {
- white-space: pre-wrap;
- width: 100%;
- height: 100%;
+.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%;
+.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;
+.xfaTb{
+ display:flex;
+ flex-direction:column;
+ align-items:stretch;
}
-.xfaLr {
- display: flex;
- flex-direction: row;
- align-items: stretch;
+.xfaLr{
+ display:flex;
+ flex-direction:row;
+ align-items:stretch;
}
-.xfaRl {
- display: flex;
- flex-direction: row-reverse;
- align-items: stretch;
+.xfaRl{
+ display:flex;
+ flex-direction:row-reverse;
+ align-items:stretch;
}
-.xfaTb > div {
- justify-content: left;
+.xfaTb > div{
+ justify-content:left;
}
-.xfaPosition {
- position: relative;
+.xfaPosition{
+ position:relative;
}
-.xfaArea {
- position: relative;
+.xfaArea{
+ position:relative;
}
-.xfaValignMiddle {
- display: flex;
- align-items: center;
+.xfaValignMiddle{
+ display:flex;
+ align-items:center;
}
-.xfaTable {
- display: flex;
- flex-direction: column;
- align-items: stretch;
+.xfaTable{
+ display:flex;
+ flex-direction:column;
+ align-items:stretch;
}
-.xfaTable .xfaRow {
- display: flex;
- flex-direction: row;
- 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{
+ display:flex;
+ flex-direction:row-reverse;
+ align-items:stretch;
+ flex:1;
}
-.xfaTable .xfaRlRow > div {
- flex: 1;
+.xfaTable .xfaRlRow > div{
+ flex:1;
}
-:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea) {
- background: initial;
+:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){
+ background:initial;
}
-@media print {
+@media print{
.xfaTextfield,
- .xfaSelect {
- background: transparent;
+ .xfaSelect{
+ background:transparent;
}
- .xfaSelect {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- text-indent: 1px;
- text-overflow: "";
+ .xfaSelect{
+ -webkit-appearance:none;
+ -moz-appearance:none;
+ appearance:none;
+ text-indent:1px;
+ text-overflow:"";
}
}
-/* Ignored in GECKOVIEW builds: */
+.canvasWrapper svg{
+ transform:none;
+ }
-: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;
+.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);
+ }
- --alt-text-opacity: 0.8;
- --alt-text-add-image: url(../images/altText_add.svg);
- --alt-text-done-image: url(../images/altText_done.svg);
- --alt-text-bg-color: rgba(43, 42, 51, var(--alt-text-opacity));
- --alt-text-fg-color: #fbfbfe;
- --alt-text-border-color: var(--alt-text-bg-color);
- --alt-text-hover-bg-color: rgba(82, 82, 94, var(--alt-text-opacity));
- --alt-text-hover-fg-color: var(--alt-text-fg-color);
- --alt-text-hover-border-color: var(--alt-text-hover-bg-color);
- --alt-text-active-bg-color: rgba(91, 91, 102, var(--alt-text-opacity));
- --alt-text-active-fg-color: var(--alt-text-fg-color);
- --alt-text-active-border-color: var(--alt-text-hover-bg-color);
- --alt-text-focus-outline-color: #0060df;
- --alt-text-focus-border-color: #f0f0f4;
- --alt-text-shadow: 0 2px 6px 0 rgba(28, 27, 34, 0.5);
+.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 (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 1.1dppx) {
- :root {
- --editorFreeText-editing-cursor: url(../images/cursor-editorFreeText.svg) 0 16, text;
+@media (prefers-color-scheme: dark){
+
+: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;
-
- --alt-text-bg-color: Canvas;
- --alt-text-fg-color: ButtonText;
- --alt-text-border-color: ButtonText;
- --alt-text-hover-bg-color: Canvas;
- --alt-text-hover-fg-color: SelectedItem;
- --alt-text-hover-border-color: SelectedItem;
- --alt-text-active-bg-color: ButtonFace;
- --alt-text-active-fg-color: SelectedItem;
- --alt-text-active-border-color: ButtonText;
- --alt-text-focus-outline-color: CanvasText;
- --alt-text-focus-border-color: ButtonText;
- --alt-text-shadow: none;
- --alt-text-opacity: 1;
+@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="90"]{
+ transform:rotate(90deg);
}
-[data-editor-rotation="180"] {
- transform: rotate(180deg);
+[data-editor-rotation="180"]{
+ transform:rotate(180deg);
}
-[data-editor-rotation="270"] {
- transform: rotate(270deg);
+[data-editor-rotation="270"]{
+ transform:rotate(270deg);
}
-.annotationEditorLayer {
- background: transparent;
- position: absolute;
- inset: 0;
- font-size: calc(100px * var(--scale-factor));
- transform-origin: 0 0;
- cursor: auto;
- z-index: 4;
+.annotationEditorLayer{
+ 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.waiting{
+ content:"";
+ cursor:wait;
+ position:absolute;
+ inset:0;
+ width:100%;
+ height:100%;
}
-.annotationEditorLayer.freeTextEditing {
- cursor: var(--editorFreeText-editing-cursor);
+.annotationEditorLayer.disabled{
+ pointer-events:none;
}
-.annotationEditorLayer.inkEditing {
- cursor: var(--editorInk-editing-cursor);
+.annotationEditorLayer.freetextEditing{
+ cursor:var(--editorFreeText-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.inkEditing{
+ cursor:var(--editorInk-editing-cursor);
}
-.annotationEditorLayer .draggable.selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor) {
- cursor: move;
+.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 .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor) {
- border: var(--focus-outline);
- outline: var(--focus-outline-around);
+.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: dark){
+
+: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: dark){
+
+: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 .selectedEditor:is(.freeTextEditor, .inkEditor, .stampEditor)::before {
- /*
- This is a workaround for the lack of support for stripes(...) (see
- https://drafts.csswg.org/css-images-4/#stripes).
- The outline should be composed of 1px white, 2px blue and 1px white.
- This could be achieved in different ways:
- - using a linear-gradient;
- - using a box-shadow;
- - using an outline on the selected element and an outline+border on
- the ::before pseudo-element.
- All these options lead to incorrect rendering likely due to rounding
- issues.
- That said it doesn't mean that the current is ideal, but it's the best
- we could come up with for the moment.
- One drawback of this approach is that we use a border on the selected
- element which means that we must take care of it when positioning the
- div in js (see AnnotationEditor._borderLineWidth in editor.js).
- */
- content: "";
- position: absolute;
- inset: 0;
- border: var(--focus-outline-around);
- pointer-events: 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 :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor) {
- border: var(--hover-outline);
- outline: var(--hover-outline-around);
+.annotationEditorLayer .freeTextEditor .overlay{
+ position:absolute;
+ display:none;
+ background:transparent;
+ inset:0;
+ width:100%;
+ height:100%;
}
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor):hover:not(.selectedEditor)::before {
- content: "";
- position: absolute;
- inset: 0;
- border: var(--focus-outline-around);
+.annotationEditorLayer freeTextEditor .overlay.enabled{
+ display:block;
}
-.annotationEditorLayer .freeTextEditor {
- padding: calc(var(--freetext-padding) * var(--scale-factor));
- width: auto;
- height: auto;
- touch-action: none;
+.annotationEditorLayer .freeTextEditor .internal:empty::before{
+ content:attr(default-content);
+ color:gray;
}
-.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 .internal:focus{
+ outline:none;
+ -webkit-user-select:auto;
+ -moz-user-select:auto;
+ user-select:auto;
}
-.annotationEditorLayer .freeTextEditor .overlay {
- position: absolute;
- display: none;
- background: transparent;
- inset: 0;
- width: 100%;
- height: 100%;
+.annotationEditorLayer .inkEditor{
+ width:100%;
+ height:100%;
}
-.annotationEditorLayer .freeTextEditor .overlay.enabled {
- display: block;
+.annotationEditorLayer .inkEditor.editing{
+ cursor:inherit;
}
-.annotationEditorLayer .freeTextEditor .internal:empty::before {
- content: attr(default-content);
- color: gray;
+.annotationEditorLayer .inkEditor .inkEditorCanvas{
+ position:absolute;
+ inset:0;
+ width:100%;
+ height:100%;
+ touch-action:none;
}
-.annotationEditorLayer .freeTextEditor .internal:focus {
- outline: none;
- -webkit-user-select: auto;
- -moz-user-select: auto;
- user-select: auto;
+.annotationEditorLayer .stampEditor{
+ width:auto;
+ height:auto;
}
-.annotationEditorLayer .inkEditor {
- width: 100%;
- height: 100%;
-}
+.annotationEditorLayer .stampEditor canvas{
+ position:absolute;
+ width:100%;
+ height:100%;
+ margin:0;
+ }
-.annotationEditorLayer .inkEditor.editing {
- cursor: inherit;
-}
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers{
+ position:absolute;
+ inset:0;
+ }
-.annotationEditorLayer .inkEditor .inkEditorCanvas {
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- touch-action: none;
-}
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers.hidden{
+ display:none;
+ }
-.annotationEditorLayer .stampEditor {
- width: auto;
- height: auto;
-}
+.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 .stampEditor canvas {
- width: 100%;
- height: 100%;
-}
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topLeft{
+ top:var(--resizer-shift);
+ left:var(--resizer-shift);
+ }
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers {
- position: absolute;
- inset: 0;
-}
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topMiddle{
+ top:var(--resizer-shift);
+ left:calc(50% + var(--resizer-shift));
+ }
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers.hidden {
- display: none;
-}
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topRight{
+ top:var(--resizer-shift);
+ right:var(--resizer-shift);
+ }
-.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.middleRight{
+ top:calc(50% + var(--resizer-shift));
+ right:var(--resizer-shift);
+ }
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer.topLeft {
- top: var(--resizer-shift);
- left: 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.topMiddle {
- top: var(--resizer-shift);
- left: calc(50% + 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.topRight {
- top: var(--resizer-shift);
- right: 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.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 :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;
-}
+ :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;
-}
+ :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;
-}
+ :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;
-}
+ :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;
-}
+ :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;
-}
+ :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;
-}
+ :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;
-}
+ :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"]
- )
- .altText {
- rotate: 270deg;
-}
+ :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"]
- )
- .altText {
- inset-inline-start: calc(100% - 8px);
-}
+[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="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"]
- )
- .altText.small {
- inset-inline-start: calc(100% + 8px);
- inset-block-start: 100%;
-}
-
-[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"]
- )
- .altText {
- inset-block-end: calc(100% - 8px);
-}
-
-[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"]
- )
- .altText.small {
- inset-inline-start: -8px;
- 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"]
- )
- .altText {
- rotate: 180deg;
-
- inset-block-end: calc(100% - 8px);
- inset-inline-start: calc(100% - 8px);
-}
+ :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="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"]
- )
- .altText.small {
- inset-inline-start: 100%;
- inset-block-start: -8px;
+ :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);
}
-.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"]
- )
- .altText {
- rotate: 90deg;
+@media (prefers-color-scheme: dark){
+
+: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;
}
-[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"]
- )
- .altText {
- inset-block-end: calc(100% - 8px);
+@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;
}
-[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"]
- )
- .altText.small {
- inset-inline-start: -8px;
- inset-block-start: 0;
+@media (prefers-color-scheme: dark){
+
+: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;
}
-[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"]
- )
- .altText {
- inset-inline-start: calc(100% - 8px);
+@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;
}
-[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"]
- )
- .altText.small {
- inset-inline-start: calc(100% + 8px);
- inset-block-start: 100%;
+#highlightParamsToolbarContainer{
+ height:auto;
+ padding-inline:10px;
+ padding-block:10px 16px;
+ gap:16px;
+ display:flex;
+ flex-direction:column;
+ box-sizing:border-box;
}
-.altText {
- display: flex;
- align-items: center;
- justify-content: center;
- padding-inline: 4px;
- width: auto;
- height: 24px;
- min-width: 88px;
- z-index: 1;
- pointer-events: all;
+#highlightParamsToolbarContainer .editorParamsLabel{
+ width:-moz-fit-content;
+ width:fit-content;
+ inset-inline-start:0;
+ }
- color: var(--alt-text-fg-color);
- font: menu;
- font-size: 12px;
- border-radius: 4px;
- border: 1px solid var(--alt-text-border-color);
- background-color: var(--alt-text-bg-color);
- box-shadow: var(--alt-text-shadow);
+#highlightParamsToolbarContainer .colorPicker{
+ display:flex;
+ flex-direction:column;
+ gap:8px;
+ }
- position: absolute;
- inset-block-end: 8px;
- inset-inline-start: 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: dark){
+
+: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: dark){
+
+: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;
}
-[dir="ltr"] .altText {
- transform-origin: 0 100%;
-}
-
-[dir="rtl"] .altText {
- transform-origin: 100% 100%;
-}
-
-.altText.small {
- inset-block-end: unset;
- inset-inline-start: 0;
- inset-block-start: calc(100% + 8px);
-}
-
-[dir="ltr"] .altText.small {
- transform-origin: 0 0;
-}
-
-[dir="rtl"] .altText.small {
- transform-origin: 100% 0;
-}
-
-.altText:hover {
- background-color: var(--alt-text-hover-bg-color);
- border-color: var(--alt-text-hover-border-color);
- color: var(--alt-text-hover-fg-color);
- cursor: pointer;
-}
-
-.altText:hover::before {
- background-color: var(--alt-text-hover-fg-color);
-}
-
-.altText:active {
- background-color: var(--alt-text-active-bg-color);
- border-color: var(--alt-text-active-border-color);
- color: var(--alt-text-active-fg-color);
-}
-
-.altText:active::before {
- background-color: var(--alt-text-active-fg-color);
-}
-
-.altText:focus-visible {
- outline: 2px solid var(--alt-text-focus-outline-color);
- border-color: var(--alt-text-focus-border-color);
-}
-
-.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(--alt-text-fg-color);
- margin-inline-end: 4px;
-}
-
-.altText.done::before {
- -webkit-mask-image: var(--alt-text-done-image);
- mask-image: var(--alt-text-done-image);
-}
-
-.altText .tooltip {
- display: none;
-}
-
-.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 rgba(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: dark) {
- .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){
+ :root{
+ --pdfViewer-padding-bottom:9px;
+ --page-margin:8px auto -1px;
+ --page-border:1px solid CanvasText;
+ --spreadHorizontalWrapped-margin-LR:3.5px;
}
}
-@media screen and (forced-colors: active) {
- .altText .tooltip.show {
- --alt-text-tooltip-bg: Canvas;
- --alt-text-tooltip-fg: CanvasText;
- --alt-text-tooltip-border: CanvasText;
- --alt-text-tooltip-shadow: none;
+[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%);
+}
}
-}
-#altTextDialog {
- --dialog-bg-color: white;
- --dialog-border-color: white;
- --dialog-shadow: 0 2px 14px 0 rgba(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);
- --button-save-disabled-bg-color: var(--button-save-bg-color);
- --button-save-disabled-fg-color: var(--button-save-fg-color);
- --button-save-disabled-opacity: 0.4;
-
- 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: 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: #00ddff;
- --hover-filter: brightness(1.4);
-
- --textarea-bg-color: #42414d;
-
- --radio-bg-color: #2b2a33;
- --radio-checked-bg-color: #15141a;
- --radio-checked-border-color: #00ddff;
-
- --button-cancel-bg-color: #2b2a33;
- --button-save-bg-color: #00ddff;
- --button-save-fg-color: #15141a;
+.pdfViewer .canvasWrapper{
+ overflow:hidden;
+ width:100%;
+ height:100%;
}
+
+.pdfViewer .canvasWrapper canvas{
+ margin:0;
+ display:block;
+ }
+
+.pdfViewer .canvasWrapper canvas[hidden]{
+ display:none;
+ }
+
+.pdfViewer .canvasWrapper canvas[zooming]{
+ width:100%;
+ height:100%;
+ }
+
+.pdfViewer .canvasWrapper canvas .structTree{
+ contain:strict;
+ }
+
+.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);
}
-@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;
- --button-save-disabled-bg-color: GrayText;
- --button-save-disabled-fg-color: Canvas;
- --button-save-disabled-opacity: 1;
- }
+.pdfViewer .dummyPage{
+ position:relative;
+ width:0;
+ height:var(--viewer-container-height);
}
-#altTextDialog::backdrop {
- /* This is needed to avoid to darken the image the user want to describe. */
- -webkit-mask: url(#alttext-manager-mask);
- mask: url(#alttext-manager-mask);
+.pdfViewer.noUserSelect{
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ user-select:none;
}
-#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);
-}
-
-#altTextDialog #altTextContainer #buttons button#altTextSave:disabled {
- color: var(--button-save-disabled-fg-color);
- background-color: var(--button-save-disabled-bg-color);
- opacity: var(--button-save-disabled-opacity);
- pointer-events: none;
-}
-
-:root {
- --viewer-container-height: 0;
- --pdfViewer-padding-bottom: 0;
- --page-margin: 1px auto -8px;
- --page-border: 9px solid transparent;
- --spreadHorizontalWrapped-margin-LR: -3.5px;
- --loading-icon-delay: 400ms;
-}
-
-@media screen and (forced-colors: active) {
- :root {
- --pdfViewer-padding-bottom: 9px;
- --page-margin: 8px auto -1px;
- --page-border: 1px solid CanvasText;
- --spreadHorizontalWrapped-margin-LR: 3.5px;
- }
-}
-
-[data-main-rotation="90"] {
- transform: rotate(90deg) translateY(-100%);
-}
-
-[data-main-rotation="180"] {
- transform: rotate(180deg) translate(-100%, -100%);
-}
-
-[data-main-rotation="270"] {
- transform: rotate(270deg) translateX(-100%);
-}
-
-#hiddenCopyElement {
- position: absolute;
- top: 0;
- left: 0;
- width: 0;
- height: 0;
- display: none;
-}
-
-.pdfViewer {
- /* Define this variable here and not in :root to avoid to reflow all the UI
- when scaling (see #15929). */
- --scale-factor: 1;
-
- padding-bottom: var(--pdfViewer-padding-bottom);
-}
-
-.pdfViewer .canvasWrapper {
- overflow: hidden;
- width: 100%;
- height: 100%;
- z-index: 1;
-}
-
-.pdfViewer .page {
- direction: ltr;
- width: 816px;
- height: 1056px;
- margin: var(--page-margin);
- position: relative;
- overflow: visible;
- border: var(--page-border);
- background-clip: content-box;
- background-color: rgba(255, 255, 255, 1);
-}
-
-.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.removePageBorders .page{
+ margin:0 auto 10px;
+ border:none;
}
.pdfViewer:is(.scrollHorizontal, .scrollWrapped),
-.spread {
- margin-inline: 3.5px;
- text-align: center;
+.spread{
+ margin-inline:3.5px;
+ text-align:center;
}
.pdfViewer.scrollHorizontal,
-.spread {
- white-space: nowrap;
+.spread{
+ white-space:nowrap;
}
.pdfViewer.removePageBorders,
-.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread {
- margin-inline: 0;
+.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;
+.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:is(.scrollHorizontal, .scrollWrapped) .page{
+ margin-inline:var(--spreadHorizontalWrapped-margin-LR);
}
.pdfViewer.removePageBorders .spread .page,
-.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page {
- margin-inline: 5px;
+.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{
+ margin-inline:5px;
}
-.pdfViewer .page canvas {
- margin: 0;
- display: block;
+.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 canvas .structTree {
- contain: strict;
+.pdfViewer .page.loading::after{
+ display:block;
}
-.pdfViewer .page canvas[hidden] {
- display: none;
+.pdfViewer .page:not(.loading)::after{
+ transition-property:none;
+ display:none;
}
-.pdfViewer .page canvas[zooming] {
- width: 100%;
- height: 100%;
+.pdfPresentationMode .pdfViewer{
+ padding-bottom:0;
}
-.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;
- /* Using a delay with background-image doesn't work,
- consequently we use the display. */
- transition-property: display;
- transition-delay: var(--loading-icon-delay);
- z-index: 5;
- contain: strict;
+.pdfPresentationMode .spread{
+ margin:0;
}
-.pdfViewer .page.loading::after {
- display: block;
+.pdfPresentationMode .pdfViewer .page{
+ margin:0 auto;
+ border:2px solid transparent;
}
-.pdfViewer .page:not(.loading)::after {
- transition-property: none;
- display: none;
+:root{
+ --dir-factor:1;
+ --inline-start:left;
+ --inline-end:right;
+
+ --sidebar-width:200px;
+ --sidebar-transition-duration:200ms;
+ --sidebar-transition-timing-function:ease;
+
+ --toolbar-icon-opacity:0.7;
+ --doorhanger-icon-opacity:0.9;
+ --editor-toolbar-base-offset:105px;
+
+ --main-color:rgb(12 12 13);
+ --body-bg-color:rgb(212 212 215);
+ --progressBar-color:rgb(10 132 255);
+ --progressBar-bg-color:rgb(221 221 222);
+ --progressBar-blend-color:rgb(116 177 239);
+ --scrollbar-color:auto;
+ --scrollbar-bg-color:auto;
+ --toolbar-icon-bg-color:rgb(0 0 0);
+ --toolbar-icon-hover-bg-color:rgb(0 0 0);
+
+ --sidebar-narrow-bg-color:rgb(212 212 215 / 0.9);
+ --sidebar-toolbar-bg-color:rgb(245 246 247);
+ --toolbar-bg-color:rgb(249 249 250);
+ --toolbar-border-color:rgb(184 184 184);
+ --toolbar-box-shadow:0 1px 0 var(--toolbar-border-color);
+ --toolbar-border-bottom:none;
+ --toolbarSidebar-box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
+ --toolbarSidebar-border-bottom:none;
+ --button-hover-color:rgb(221 222 223);
+ --toggled-btn-color:rgb(0 0 0);
+ --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
+ --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
+ --toggled-hover-btn-outline:none;
+ --dropdown-btn-bg-color:rgb(215 215 219);
+ --dropdown-btn-border:none;
+ --separator-color:rgb(0 0 0 / 0.3);
+ --field-color:rgb(6 6 6);
+ --field-bg-color:rgb(255 255 255);
+ --field-border-color:rgb(187 187 188);
+ --treeitem-color:rgb(0 0 0 / 0.8);
+ --treeitem-bg-color:rgb(0 0 0 / 0.15);
+ --treeitem-hover-color:rgb(0 0 0 / 0.9);
+ --treeitem-selected-color:rgb(0 0 0 / 0.9);
+ --treeitem-selected-bg-color:rgb(0 0 0 / 0.25);
+ --thumbnail-hover-color:rgb(0 0 0 / 0.1);
+ --thumbnail-selected-color:rgb(0 0 0 / 0.2);
+ --doorhanger-bg-color:rgb(255 255 255);
+ --doorhanger-border-color:rgb(12 12 13 / 0.2);
+ --doorhanger-hover-color:rgb(12 12 13);
+ --doorhanger-hover-bg-color:rgb(237 237 237);
+ --doorhanger-separator-color:rgb(222 222 222);
+ --dialog-button-border:none;
+ --dialog-button-bg-color:rgb(12 12 13 / 0.1);
+ --dialog-button-hover-bg-color:rgb(12 12 13 / 0.3);
+
+ --loading-icon:url(../images/loading.svg);
+ --treeitem-expanded-icon:url(../images/treeitem-expanded.svg);
+ --treeitem-collapsed-icon:url(../images/treeitem-collapsed.svg);
+ --toolbarButton-editorFreeText-icon:url(../images/toolbarButton-editorFreeText.svg);
+ --toolbarButton-editorHighlight-icon:url(../images/toolbarButton-editorHighlight.svg);
+ --toolbarButton-editorInk-icon:url(../images/toolbarButton-editorInk.svg);
+ --toolbarButton-editorStamp-icon:url(../images/toolbarButton-editorStamp.svg);
+ --toolbarButton-menuArrow-icon:url(../images/toolbarButton-menuArrow.svg);
+ --toolbarButton-sidebarToggle-icon:url(../images/toolbarButton-sidebarToggle.svg);
+ --toolbarButton-secondaryToolbarToggle-icon:url(../images/toolbarButton-secondaryToolbarToggle.svg);
+ --toolbarButton-pageUp-icon:url(../images/toolbarButton-pageUp.svg);
+ --toolbarButton-pageDown-icon:url(../images/toolbarButton-pageDown.svg);
+ --toolbarButton-zoomOut-icon:url(../images/toolbarButton-zoomOut.svg);
+ --toolbarButton-zoomIn-icon:url(../images/toolbarButton-zoomIn.svg);
+ --toolbarButton-presentationMode-icon:url(../images/toolbarButton-presentationMode.svg);
+ --toolbarButton-print-icon:url(../images/toolbarButton-print.svg);
+ --toolbarButton-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);
+ --toolbarButton-backToHome-icon:url(../images/toolbarButton-home.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);
}
-.pdfPresentationMode .pdfViewer {
- padding-bottom: 0;
+[dir="rtl"]:root{
+ --dir-factor:-1;
+ --inline-start:right;
+ --inline-end:left;
}
-.pdfPresentationMode .spread {
- margin: 0;
-}
+@media (prefers-color-scheme: dark){
+ :root:where(:not(.is-light)){
+ --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);
-.pdfPresentationMode .pdfViewer .page {
- margin: 0 auto;
- border: 2px solid transparent;
-}
-
-:root {
- --dir-factor: 1;
- --inline-start: left;
- --inline-end: right;
-
- --sidebar-width: 200px;
- --sidebar-transition-duration: 200ms;
- --sidebar-transition-timing-function: ease;
-
- --toolbar-icon-opacity: 0.7;
- --doorhanger-icon-opacity: 0.9;
-
- --main-color: rgba(12, 12, 13, 1);
- --body-bg-color: rgba(212, 212, 215, 1);
- --progressBar-color: rgba(10, 132, 255, 1);
- --progressBar-bg-color: rgba(221, 221, 222, 1);
- --progressBar-blend-color: rgba(116, 177, 239, 1);
- --scrollbar-color: auto;
- --scrollbar-bg-color: auto;
- --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
- --toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
-
- --sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9);
- --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
- --toolbar-bg-color: rgba(249, 249, 250, 1);
- --toolbar-border-color: rgba(184, 184, 184, 1);
- --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 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.15),
- 0 0 1px rgba(0, 0, 0, 0.1);
- --toolbarSidebar-border-bottom: none;
- --button-hover-color: rgba(221, 222, 223, 1);
- --toggled-btn-color: rgba(0, 0, 0, 1);
- --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
- --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
- --toggled-hover-btn-outline: none;
- --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
- --dropdown-btn-border: none;
- --separator-color: rgba(0, 0, 0, 0.3);
- --field-color: rgba(6, 6, 6, 1);
- --field-bg-color: rgba(255, 255, 255, 1);
- --field-border-color: rgba(187, 187, 188, 1);
- --treeitem-color: rgba(0, 0, 0, 0.8);
- --treeitem-bg-color: rgba(0, 0, 0, 0.15);
- --treeitem-hover-color: rgba(0, 0, 0, 0.9);
- --treeitem-selected-color: rgba(0, 0, 0, 0.9);
- --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
- --thumbnail-hover-color: rgba(0, 0, 0, 0.1);
- --thumbnail-selected-color: rgba(0, 0, 0, 0.2);
- --doorhanger-bg-color: rgba(255, 255, 255, 1);
- --doorhanger-border-color: rgba(12, 12, 13, 0.2);
- --doorhanger-hover-color: rgba(12, 12, 13, 1);
- --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
- --doorhanger-separator-color: rgba(222, 222, 222, 1);
- --dialog-button-border: none;
- --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
- --dialog-button-hover-bg-color: rgba(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-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-backToHome-icon: url(../images/toolBarButton-home.svg);
- --toolbarButton-secondaryToolbarToggle-icon: url(../images/toolbarButton-secondaryToolbarToggle.svg);
- --toolbarButton-pageUp-icon: url(../images/toolbarButton-pageUp.svg);
- --toolbarButton-pageDown-icon: url(../images/toolbarButton-pageDown.svg);
- --toolbarButton-zoomOut-icon: url(../images/toolbarButton-zoomOut.svg);
- --toolbarButton-zoomIn-icon: url(../images/toolbarButton-zoomIn.svg);
- --toolbarButton-presentationMode-icon: url(../images/toolbarButton-presentationMode.svg);
- --toolbarButton-print-icon: url(../images/toolbarButton-print.svg);
- --toolbarButton-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 {
- --main-color: rgba(249, 249, 250, 1);
- --body-bg-color: rgba(42, 42, 46, 1);
- --progressBar-color: rgba(0, 96, 223, 1);
- --progressBar-bg-color: rgba(40, 40, 43, 1);
- --progressBar-blend-color: rgba(20, 68, 133, 1);
- --scrollbar-color: rgba(121, 121, 123, 1);
- --scrollbar-bg-color: rgba(35, 35, 39, 1);
- --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
- --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);
-
- --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
- --sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
- --toolbar-bg-color: rgba(56, 56, 61, 1);
- --toolbar-border-color: rgba(12, 12, 13, 1);
- --button-hover-color: rgba(102, 102, 103, 1);
- --toggled-btn-color: rgba(255, 255, 255, 1);
- --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
- --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
- --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
- --separator-color: rgba(0, 0, 0, 0.3);
- --field-color: rgba(250, 250, 250, 1);
- --field-bg-color: rgba(64, 64, 68, 1);
- --field-border-color: rgba(115, 115, 115, 1);
- --treeitem-color: rgba(255, 255, 255, 0.8);
- --treeitem-bg-color: rgba(255, 255, 255, 0.15);
- --treeitem-hover-color: rgba(255, 255, 255, 0.9);
- --treeitem-selected-color: rgba(255, 255, 255, 0.9);
- --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
- --thumbnail-hover-color: rgba(255, 255, 255, 0.1);
- --thumbnail-selected-color: rgba(255, 255, 255, 0.2);
- --doorhanger-bg-color: rgba(74, 74, 79, 1);
- --doorhanger-border-color: rgba(39, 39, 43, 1);
- --doorhanger-hover-color: rgba(249, 249, 250, 1);
- --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
- --doorhanger-separator-color: rgba(92, 92, 97, 1);
- --dialog-button-bg-color: rgba(92, 92, 97, 1);
- --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
-
- /* This image is used in elements, which unfortunately means that
- * the `mask-image` approach used with all of the other images doesn't work
- * here; hence why we still have two versions of this particular image. */
- --loading-icon: url(../images/loading-dark.svg);
+ --sidebar-narrow-bg-color:rgb(42 42 46 / 0.9);
+ --sidebar-toolbar-bg-color:rgb(50 50 52);
+ --toolbar-bg-color:rgb(56 56 61);
+ --toolbar-border-color:rgb(12 12 13);
+ --button-hover-color:rgb(102 102 103);
+ --toggled-btn-color:rgb(255 255 255);
+ --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
+ --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
+ --dropdown-btn-bg-color:rgb(74 74 79);
+ --separator-color:rgb(0 0 0 / 0.3);
+ --field-color:rgb(250 250 250);
+ --field-bg-color:rgb(64 64 68);
+ --field-border-color:rgb(115 115 115);
+ --treeitem-color:rgb(255 255 255 / 0.8);
+ --treeitem-bg-color:rgb(255 255 255 / 0.15);
+ --treeitem-hover-color:rgb(255 255 255 / 0.9);
+ --treeitem-selected-color:rgb(255 255 255 / 0.9);
+ --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
+ --thumbnail-hover-color:rgb(255 255 255 / 0.1);
+ --thumbnail-selected-color:rgb(255 255 255 / 0.2);
+ --doorhanger-bg-color:rgb(74 74 79);
+ --doorhanger-border-color:rgb(39 39 43);
+ --doorhanger-hover-color:rgb(249 249 250);
+ --doorhanger-hover-bg-color:rgb(93 94 98);
+ --doorhanger-separator-color:rgb(92 92 97);
+ --dialog-button-bg-color:rgb(92 92 97);
+ --dialog-button-hover-bg-color:rgb(115 115 115);
}
}
-@media screen and (forced-colors: active) {
- :root {
- --button-hover-color: Highlight;
- --doorhanger-hover-bg-color: Highlight;
- --toolbar-icon-opacity: 1;
- --toolbar-icon-bg-color: ButtonText;
- --toolbar-icon-hover-bg-color: ButtonFace;
- --toggled-hover-active-btn-color: ButtonText;
- --toggled-hover-btn-outline: 2px solid ButtonBorder;
- --toolbar-border-color: CanvasText;
- --toolbar-border-bottom: 1px solid var(--toolbar-border-color);
- --toolbar-box-shadow: none;
- --toggled-btn-color: HighlightText;
- --toggled-btn-bg-color: LinkText;
- --doorhanger-hover-color: ButtonFace;
- --doorhanger-border-color-whcm: 1px solid ButtonText;
- --doorhanger-triangle-opacity-whcm: 0;
- --dialog-button-border: 1px solid Highlight;
- --dialog-button-hover-bg-color: Highlight;
- --dialog-button-hover-color: ButtonFace;
- --dropdown-btn-border: 1px solid ButtonText;
- --field-border-color: ButtonText;
- --main-color: CanvasText;
- --separator-color: GrayText;
- --doorhanger-separator-color: GrayText;
- --toolbarSidebar-box-shadow: none;
- --toolbarSidebar-border-bottom: 1px solid var(--toolbar-border-color);
+: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:rgb(102 102 103);
+ --toggled-btn-color:rgb(255 255 255);
+ --toggled-btn-bg-color:rgb(0 0 0 / 0.3);
+ --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4);
+ --dropdown-btn-bg-color:rgb(74 74 79);
+ --separator-color:rgb(0 0 0 / 0.3);
+ --field-color:rgb(250 250 250);
+ --field-bg-color:rgb(64 64 68);
+ --field-border-color:rgb(115 115 115);
+ --treeitem-color:rgb(255 255 255 / 0.8);
+ --treeitem-bg-color:rgb(255 255 255 / 0.15);
+ --treeitem-hover-color:rgb(255 255 255 / 0.9);
+ --treeitem-selected-color:rgb(255 255 255 / 0.9);
+ --treeitem-selected-bg-color:rgb(255 255 255 / 0.25);
+ --thumbnail-hover-color:rgb(255 255 255 / 0.1);
+ --thumbnail-selected-color:rgb(255 255 255 / 0.2);
+ --doorhanger-bg-color:rgb(74 74 79);
+ --doorhanger-border-color:rgb(39 39 43);
+ --doorhanger-hover-color:rgb(249 249 250);
+ --doorhanger-hover-bg-color:rgb(93 94 98);
+ --doorhanger-separator-color:rgb(92 92 97);
+ --dialog-button-bg-color:rgb(92 92 97);
+ --dialog-button-hover-bg-color:rgb(115 115 115);
+ }
+
+@media screen and (forced-colors: active){
+ :root{
+ --button-hover-color:Highlight;
+ --doorhanger-hover-bg-color:Highlight;
+ --toolbar-icon-opacity:1;
+ --toolbar-icon-bg-color:ButtonText;
+ --toolbar-icon-hover-bg-color:ButtonFace;
+ --toggled-hover-active-btn-color:ButtonText;
+ --toggled-hover-btn-outline:2px solid ButtonBorder;
+ --toolbar-border-color:CanvasText;
+ --toolbar-border-bottom:1px solid var(--toolbar-border-color);
+ --toolbar-box-shadow:none;
+ --toggled-btn-color:HighlightText;
+ --toggled-btn-bg-color:LinkText;
+ --doorhanger-hover-color:ButtonFace;
+ --doorhanger-border-color-whcm:1px solid ButtonText;
+ --doorhanger-triangle-opacity-whcm:0;
+ --dialog-button-border:1px solid Highlight;
+ --dialog-button-hover-bg-color:Highlight;
+ --dialog-button-hover-color:ButtonFace;
+ --dropdown-btn-border:1px solid ButtonText;
+ --field-border-color:ButtonText;
+ --main-color:CanvasText;
+ --separator-color:GrayText;
+ --doorhanger-separator-color:GrayText;
+ --toolbarSidebar-box-shadow:none;
+ --toolbarSidebar-border-bottom:1px solid var(--toolbar-border-color);
}
}
-@media screen and (prefers-reduced-motion: reduce) {
- :root {
- --sidebar-transition-duration: 0;
+@media screen and (prefers-reduced-motion: reduce){
+ :root{
+ --sidebar-transition-duration:0;
}
}
-* {
- padding: 0;
- margin: 0;
+*{
+ padding:0;
+ margin:0;
}
html,
-body {
- height: 100%;
- width: 100%;
+body{
+ height:100%;
+ width:100%;
}
-body {
- background-color: var(--body-bg-color);
- scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
+body{
+ background-color:var(--body-bg-color);
+ scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color);
}
.hidden,
-[hidden] {
- display: none !important;
+[hidden]{
+ display:none !important;
}
-#viewerContainer.pdfPresentationMode:-webkit-full-screen {
- top: 0;
- background-color: rgba(0, 0, 0, 1);
- width: 100%;
- height: 100%;
- overflow: hidden;
- cursor: none;
- -webkit-user-select: none;
- user-select: none;
+#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;
}
-#viewerContainer.pdfPresentationMode:fullscreen {
- top: 0;
- background-color: rgba(0, 0, 0, 1);
- 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:-webkit-full-screen section:not([data-internal-link]) {
- pointer-events: none;
-}
-
-.pdfPresentationMode:fullscreen section:not([data-internal-link]) {
- pointer-events: none;
-}
-
-.pdfPresentationMode:-webkit-full-screen .textLayer span {
- cursor: none;
-}
-
-.pdfPresentationMode:fullscreen .textLayer span {
- cursor: none;
+.pdfPresentationMode:fullscreen .textLayer span{
+ cursor:none;
}
.pdfPresentationMode.pdfPresentationModeControls > *,
-.pdfPresentationMode.pdfPresentationModeControls .textLayer span {
- cursor: default;
+.pdfPresentationMode.pdfPresentationModeControls .textLayer span{
+ cursor:default;
}
-#outerContainer {
- width: 100%;
- height: 100%;
- position: relative;
+#outerContainer{
+ width:100%;
+ height:100%;
+ position:relative;
}
-#sidebarContainer {
- position: absolute;
- inset-block: 32px 0;
- inset-inline-start: calc(-1 * var(--sidebar-width));
- width: var(--sidebar-width);
- visibility: hidden;
- z-index: 100;
- font: message-box;
- border-top: 1px solid rgba(51, 51, 51, 1);
- 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);
+#sidebarContainer{
+ position:absolute;
+ inset-block:32px 0;
+ inset-inline-start:calc(-1 * var(--sidebar-width));
+ width:var(--sidebar-width);
+ visibility:hidden;
+ z-index:100;
+ font:message-box;
+ border-top:1px solid rgb(51 51 51);
+ border-inline-end:var(--doorhanger-border-color-whcm);
+ transition-property:inset-inline-start;
+ transition-duration:var(--sidebar-transition-duration);
+ transition-timing-function:var(--sidebar-transition-timing-function);
}
-#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer {
- visibility: visible;
+#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer{
+ visibility:visible;
+}
+#outerContainer.sidebarOpen #sidebarContainer{
+ inset-inline-start:0;
}
-#outerContainer.sidebarOpen #sidebarContainer {
- inset-inline-start: 0;
+#mainContainer{
+ position:absolute;
+ inset:0;
+ min-width:350px;
}
-#mainContainer {
- position: absolute;
- inset: 0;
- min-width: 350px;
+#sidebarContent{
+ inset-block:32px 0;
+ inset-inline-start:0;
+ overflow:auto;
+ position:absolute;
+ width:100%;
+ box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
}
-#sidebarContent {
- inset-block: 32px 0;
- inset-inline-start: 0;
- overflow: auto;
- position: absolute;
- width: 100%;
- box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25);
+#viewerContainer{
+ overflow:auto;
+ position:absolute;
+ inset:32px 0 0;
+ outline:none;
+}
+#viewerContainer:not(.pdfPresentationMode){
+ transition-duration:var(--sidebar-transition-duration);
+ transition-timing-function:var(--sidebar-transition-timing-function);
}
-#viewerContainer {
- overflow: auto;
- position: absolute;
- inset: 32px 0 0;
- outline: none;
+#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode){
+ inset-inline-start:var(--sidebar-width);
+ transition-property:inset-inline-start;
}
-#viewerContainer:not(.pdfPresentationMode) {
- transition-duration: var(--sidebar-transition-duration);
- transition-timing-function: var(--sidebar-transition-timing-function);
+.toolbar{
+ position:relative;
+ inset-inline:0;
+ z-index:9999;
+ cursor:default;
+ font:message-box;
}
-#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
- inset-inline-start: var(--sidebar-width);
- transition-property: inset-inline-start;
+:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer)
+ :is(input, button, select),
+.secondaryToolbar :is(input, button, a, select){
+ outline:none;
+ font:message-box;
}
-.toolbar {
- position: relative;
- inset-inline: 0;
- z-index: 9999;
- cursor: default;
- font: message-box;
+#toolbarContainer{
+ width:100%;
}
-:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer) :is(input, button, select),
-.secondaryToolbar :is(input, button, a, select) {
- outline: none;
- font: message-box;
+#toolbarSidebar{
+ width:100%;
+ height:32px;
+ background-color:var(--sidebar-toolbar-bg-color);
+ box-shadow:var(--toolbarSidebar-box-shadow);
+ border-bottom:var(--toolbarSidebar-border-bottom);
}
-#toolbarContainer {
- width: 100%;
-}
-
-#toolbarSidebar {
- width: 100%;
- height: 32px;
- background-color: var(--sidebar-toolbar-bg-color);
- box-shadow: var(--toolbarSidebar-box-shadow);
- border-bottom: var(--toolbarSidebar-border-bottom);
-}
-
-#sidebarResizer {
- position: absolute;
- inset-block: 0;
- inset-inline-end: -6px;
- width: 6px;
- z-index: 200;
- cursor: ew-resize;
+#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: 35px;
- background-color: var(--toolbar-bg-color);
- box-shadow: var(--toolbar-box-shadow);
- border-bottom: var(--toolbar-border-bottom);
+.editorParamsToolbar{
+ position:relative;
+ height:32px;
+ background-color:var(--toolbar-bg-color);
+ box-shadow:var(--toolbar-box-shadow);
+ border-bottom:var(--toolbar-border-bottom);
}
-#toolbarViewer {
- height: 35px;
+#toolbarViewer{
+ height:32px;
}
-#loadingBar {
- /* Define these variables here, and not in :root, to avoid reflowing the
- entire viewer when updating progress (see issue 15958). */
- --progressBar-percent: 0%;
- --progressBar-end-offset: 0;
+#loadingBar{
+ --progressBar-percent:0%;
+ --progressBar-end-offset:0;
- position: absolute;
- inset-inline: 0 var(--progressBar-end-offset);
- height: 4px;
- background-color: var(--progressBar-bg-color);
- border-bottom: 1px solid var(--toolbar-border-color);
- transition-property: inset-inline-start;
- transition-duration: var(--sidebar-transition-duration);
- transition-timing-function: var(--sidebar-transition-timing-function);
+ position:absolute;
+ inset-inline:0 var(--progressBar-end-offset);
+ height:4px;
+ background-color:var(--progressBar-bg-color);
+ border-bottom:1px solid var(--toolbar-border-color);
+ transition-property:inset-inline-start;
+ transition-duration:var(--sidebar-transition-duration);
+ transition-timing-function:var(--sidebar-transition-timing-function);
}
-#outerContainer.sidebarOpen #loadingBar {
- inset-inline-start: var(--sidebar-width);
+#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;
+#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)));
+@keyframes progressIndeterminate{
+ 0%{
+ transform:translateX(calc(-142px * var(--dir-factor)));
}
- 100% {
- transform: translateX(0);
+ 100%{
+ transform:translateX(0);
}
}
-#loadingBar.indeterminate .progress {
- transform: none;
- background-color: var(--progressBar-bg-color);
- transition: none;
+#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(
+#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,
@@ -2551,255 +3209,247 @@ body {
var(--progressBar-color) 95px,
var(--progressBar-blend-color) 100px
);
- animation: progressIndeterminate 1s linear infinite;
+ animation:progressIndeterminate 1s linear infinite;
}
-#outerContainer.sidebarResizing :is(#sidebarContainer, #viewerContainer, #loadingBar) {
- /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
- transition-duration: 0s;
+#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;
+.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{
+ inset-inline-start:64px;
+ min-width:300px;
+ background-color:var(--toolbar-bg-color);
}
-
-.findbar > div {
- height: 32px;
+.findbar > div{
+ height:32px;
}
-
-.findbar > div#findbarInputContainer {
- margin-inline-end: 4px;
+.findbar > div#findbarInputContainer{
+ margin-inline-end:4px;
}
-
.findbar.wrapContainers > div,
-.findbar.wrapContainers > div#findbarMessageContainer > * {
- clear: both;
+.findbar.wrapContainers > div#findbarMessageContainer > *{
+ clear:both;
+}
+.findbar.wrapContainers > div#findbarMessageContainer{
+ height:auto;
}
-.findbar.wrapContainers > div#findbarMessageContainer {
- height: auto;
+.findbar input[type="checkbox"]{
+ pointer-events:none;
}
-.findbar input[type="checkbox"] {
- pointer-events: none;
-}
-
-.findbar label {
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: 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 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);
+.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel{
+ background-color:var(--toggled-btn-bg-color) !important;
+ color:var(--toggled-btn-color);
}
-#findInput {
- width: 200px;
+#findInput{
+ width:200px;
}
-#findInput::-moz-placeholder {
- font-style: normal;
-}
+#findInput::-moz-placeholder{
+ font-style:normal;
+ }
-#findInput::placeholder {
- font-style: normal;
-}
+#findInput::placeholder{
+ font-style:normal;
+ }
-#findInput[data-status="pending"] {
- background-image: var(--loading-icon);
- background-repeat: no-repeat;
- background-position: calc(50% + 48% * var(--dir-factor));
-}
+.loadingInput:has(> #findInput[data-status="pending"])::after{
+ display:block;
+ visibility:visible;
+ }
-#findInput[data-status="notFound"] {
- background-color: rgba(255, 102, 102, 1);
-}
+#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);
+.editorParamsToolbar{
+ padding:6px 0 10px;
+ inset-inline-end:4px;
+ height:auto;
+ background-color:var(--doorhanger-bg-color);
}
-.editorParamsToolbarContainer {
- width: 220px;
- margin-bottom: -4px;
+.editorParamsToolbarContainer{
+ width:220px;
+ margin-bottom:-4px;
}
-.editorParamsToolbarContainer > .editorParamsSetter {
- min-height: 26px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-inline: 10px;
+.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;
- color: var(--main-color);
+.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 .editorParamsColor{
+ width:32px;
+ height:32px;
+ flex:none;
}
-.editorParamsToolbarContainer .editorParamsSlider {
- background-color: transparent;
- width: 90px;
- flex: 0 1 0;
+.editorParamsToolbarContainer .editorParamsSlider{
+ background-color:transparent;
+ width:90px;
+ flex:0 1 0;
}
-.editorParamsToolbarContainer .editorParamsSlider::-moz-range-progress {
- background-color: black;
+.editorParamsToolbarContainer .editorParamsSlider::-moz-range-progress{
+ background-color:black;
}
.editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-runnable-track,
-.editorParamsToolbarContainer .editorParamsSlider::-moz-range-track {
- background-color: black;
+.editorParamsToolbarContainer .editorParamsSlider::-moz-range-track{
+ background-color:black;
}
.editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-thumb,
-.editorParamsToolbarContainer .editorParamsSlider::-moz-range-thumb {
- background-color: white;
+.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;
+#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: 40px;
- background-color: var(--toolbar-bg-color);
+#editorStampParamsToolbar{
+ inset-inline-end:calc(var(--editor-toolbar-base-offset) + 0px);
}
-#editorInkParamsToolbar {
- inset-inline-end: 68px;
- background-color: var(--toolbar-bg-color);
+#editorInkParamsToolbar{
+ inset-inline-end:calc(var(--editor-toolbar-base-offset) + 28px);
}
-#editorFreeTextParamsToolbar {
- inset-inline-end: 96px;
- background-color: var(--toolbar-bg-color);
+#editorFreeTextParamsToolbar{
+ inset-inline-end:calc(var(--editor-toolbar-base-offset) + 56px);
}
-#editorStampAddImage::before {
- -webkit-mask-image: var(--editorParams-stampAddImage-icon);
- mask-image: var(--editorParams-stampAddImage-icon);
+#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);
+.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 rgba(0, 0, 0, 0);
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- opacity: var(--doorhanger-triangle-opacity-whcm);
+: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;
}
-.doorHanger::after {
- inset-inline-start: 10px;
- margin-inline-start: -8px;
- border-bottom-color: var(--toolbar-bg-color);
+#findResultsCount{
+ background-color:rgb(217 217 217);
+ color:rgb(82 82 82);
+ text-align:center;
+ padding:4px 5px;
+ margin:5px;
}
-.doorHangerRight::after {
- inset-inline-end: 10px;
- margin-inline-end: -8px;
- border-bottom-color: var(--doorhanger-bg-color);
+#findMsg[data-status="notFound"]{
+ font-weight:bold;
}
-:is(.doorHanger, .doorHangerRight)::before {
- border-bottom-color: var(--doorhanger-border-color);
- border-width: 9px;
+:is(#findResultsCount, #findMsg):empty{
+ display:none;
}
-.doorHanger::before {
- inset-inline-start: 10px;
- margin-inline-start: -9px;
-}
-
-.doorHangerRight::before {
- inset-inline-end: 10px;
- margin-inline-end: -9px;
-}
-
-#findResultsCount {
- background-color: rgba(217, 217, 217, 1);
- color: rgba(82, 82, 82, 1);
- text-align: center;
- padding: 4px 5px;
- margin: 5px;
-}
-
-#findMsg[data-status="notFound"] {
- font-weight: bold;
-}
-
-:is(#findResultsCount, #findMsg):empty {
- display: none;
-}
-
-#toolbarViewerMiddle {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
+#toolbarViewerMiddle{
+ position:absolute;
+ left:50%;
+ transform:translateX(-50%);
}
#toolbarViewerLeft,
-#toolbarSidebarLeft {
- float: var(--inline-start);
+#toolbarSidebarLeft{
+ float:var(--inline-start);
}
-
#toolbarViewerRight,
-#toolbarSidebarRight {
- float: var(--inline-end);
+#toolbarSidebarRight{
+ float:var(--inline-end);
}
#toolbarViewerLeft > *,
@@ -2807,227 +3457,216 @@ body {
#toolbarViewerRight > *,
#toolbarSidebarLeft *,
#toolbarSidebarRight *,
-.findbar * {
- position: relative;
- float: var(--inline-start);
+.findbar *{
+ position:relative;
+ float:var(--inline-start);
}
-#toolbarViewerLeft {
- padding-inline-start: 1px;
+#toolbarViewerLeft{
+ padding-inline-start:1px;
+}
+#toolbarViewerRight{
+ padding-inline-end:1px;
+}
+#toolbarSidebarRight{
+ padding-inline-end:2px;
}
-#toolbarViewerRight {
- padding-inline-end: 1px;
+.splitToolbarButton{
+ margin:2px;
+ display:inline-block;
}
-
-#toolbarSidebarRight {
- padding-inline-end: 2px;
-}
-
-.splitToolbarButton {
- margin: 2px;
- display: inline-block;
-}
-
-.splitToolbarButton > .toolbarButton {
- float: var(--inline-start);
+.splitToolbarButton > .toolbarButton{
+ float:var(--inline-start);
}
.toolbarButton,
.secondaryToolbarButton,
-.dialogButton {
- border: none;
- background: none;
- width: 28px;
- height: 28px;
- outline: none;
+.dialogButton{
+ border:none;
+ background:none;
+ width:28px;
+ height:28px;
+ outline:none;
}
-.dialogButton:is(:hover, :focus-visible) {
- background-color: var(--dialog-button-hover-bg-color);
+.dialogButton:is(:hover, :focus-visible){
+ background-color:var(--dialog-button-hover-bg-color);
}
-.dialogButton:is(:hover, :focus-visible) > span {
- color: var(--dialog-button-hover-color);
+.dialogButton:is(:hover, :focus-visible) > span{
+ color:var(--dialog-button-hover-color);
}
-.toolbarButton > span {
- display: inline-block;
- width: 0;
- height: 0;
- overflow: hidden;
+.toolbarButton > span{
+ display:inline-block;
+ width:0;
+ height:0;
+ overflow:hidden;
}
-:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] {
- opacity: 0.5;
+:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled]{
+ opacity:0.5;
}
.splitToolbarButton > .toolbarButton:is(:hover, :focus-visible),
-.dropdownToolbarButton:hover {
- background-color: var(--button-hover-color);
+.dropdownToolbarButton:hover{
+ background-color:var(--button-hover-color);
+}
+.splitToolbarButton > .toolbarButton{
+ position:relative;
+ margin:0;
+}
+#toolbarSidebar .splitToolbarButton > .toolbarButton{
+ margin-inline-end:2px;
}
-.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);
+.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;
- padding: 2px 6px 0;
- 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;
+.dialogButton{
+ min-width:16px;
+ margin:2px 1px;
+ padding:2px 6px 0;
+ border:none;
+ border-radius:2px;
+ color:var(--main-color);
+ font-size:12px;
+ line-height:14px;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ user-select:none;
+ cursor:default;
+ box-sizing:border-box;
}
-.toolbarButton:is(:hover, :focus-visible) {
- background-color: var(--button-hover-color);
+.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);
+.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);
+.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;
+.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::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);
+.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active{
+ background-color:var(--toggled-hover-active-btn-color);
}
-.dropdownToolbarButton {
- /* Define this variable here, and not in :root, to avoid reflowing the
- entire viewer when updating the width. */
- --scale-select-width: 140px;
-
- width: var(--scale-select-width);
- padding: 0;
- background-color: var(--dropdown-btn-bg-color);
- border: var(--dropdown-btn-border);
+.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::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);
}
-.dropdownToolbarButton > select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: inherit;
- height: 28px;
- font-size: 12px;
- color: var(--main-color);
- margin: 0;
- padding: 1px 0 2px;
- padding-inline-start: 6px;
- 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;
+.toolbarButtonSpacer{
+ width:30px;
+ display:inline-block;
+ height:1px;
}
:is(.toolbarButton, .secondaryToolbarButton, .treeItemToggler)::before,
-.dropdownToolbarButton::after {
- /* All matching images have a size of 16x16
- * All relevant containers have a size of 28x28 */
- position: absolute;
- display: inline-block;
- width: 16px;
- height: 16px;
+.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;
+ 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);
+.dropdownToolbarButton:is(:hover, :focus-visible, :active)::after{
+ background-color:var(--toolbar-icon-hover-bg-color);
}
-.toolbarButton::before {
- opacity: var(--toolbar-icon-opacity);
- top: 6px;
- left: 6px;
+.toolbarButton::before{
+ opacity:var(--toolbar-icon-opacity);
+ top:6px;
+ left:6px;
}
.toolbarButton:is(:hover, :focus-visible)::before,
-.secondaryToolbarButton:is(:hover, :focus-visible)::before {
- background-color: var(--toolbar-icon-hover-bg-color);
+.secondaryToolbarButton: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;
+.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));
+#sidebarToggle::before{
+ -webkit-mask-image:var(--toolbarButton-sidebarToggle-icon);
+ mask-image:var(--toolbarButton-sidebarToggle-icon);
+ transform:scaleX(var(--dir-factor));
}
-#secondaryToolbarToggle::before {
- -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
- mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
- transform: scaleX(var(--dir-factor));
+#secondaryToolbarToggle::before{
+ -webkit-mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
+ mask-image:var(--toolbarButton-secondaryToolbarToggle-icon);
+ transform:scaleX(var(--dir-factor));
}
#backToHome::before {
@@ -3036,693 +3675,677 @@ body {
transform: scaleX(var(--dir-factor));
}
-#findPrevious::before {
- -webkit-mask-image: var(--findbarButton-previous-icon);
- mask-image: var(--findbarButton-previous-icon);
+#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);
+#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);
+#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);
+#next::before{
+ -webkit-mask-image:var(--toolbarButton-pageDown-icon);
+ mask-image:var(--toolbarButton-pageDown-icon);
}
-#zoomOut::before {
- -webkit-mask-image: var(--toolbarButton-zoomOut-icon);
- mask-image: var(--toolbarButton-zoomOut-icon);
+#zoomOut::before{
+ -webkit-mask-image:var(--toolbarButton-zoomOut-icon);
+ mask-image:var(--toolbarButton-zoomOut-icon);
}
-#zoomIn::before {
- -webkit-mask-image: var(--toolbarButton-zoomIn-icon);
- mask-image: var(--toolbarButton-zoomIn-icon);
+#zoomIn::before{
+ -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);
+#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);
+#editorFreeText::before{
+ -webkit-mask-image:var(--toolbarButton-editorFreeText-icon);
+ mask-image:var(--toolbarButton-editorFreeText-icon);
}
-#editorInk::before {
- -webkit-mask-image: var(--toolbarButton-editorInk-icon);
- mask-image: var(--toolbarButton-editorInk-icon);
+#editorHighlight::before{
+ -webkit-mask-image:var(--toolbarButton-editorHighlight-icon);
+ mask-image:var(--toolbarButton-editorHighlight-icon);
}
-#editorStamp::before {
- -webkit-mask-image: var(--toolbarButton-editorStamp-icon);
- mask-image: var(--toolbarButton-editorStamp-icon);
+#editorInk::before{
+ -webkit-mask-image:var(--toolbarButton-editorInk-icon);
+ mask-image:var(--toolbarButton-editorInk-icon);
}
-#print::before,
-#secondaryPrint::before {
- -webkit-mask-image: var(--toolbarButton-print-icon);
- mask-image: var(--toolbarButton-print-icon);
+#editorStamp::before{
+ -webkit-mask-image:var(--toolbarButton-editorStamp-icon);
+ mask-image:var(--toolbarButton-editorStamp-icon);
}
-:is(#openFile, #secondaryOpenFile)::before {
- -webkit-mask-image: var(--toolbarButton-openFile-icon);
- mask-image: var(--toolbarButton-openFile-icon);
+:is(#print, #secondaryPrint)::before{
+ -webkit-mask-image:var(--toolbarButton-print-icon);
+ mask-image:var(--toolbarButton-print-icon);
}
-:is(#backToHome, #secondaryBackToHome)::before {
- -webkit-mask-image: var(--toolbarButton-backToHome-icon);
- mask-image: var(--toolbarButton-backToHome-icon);
+#secondaryOpenFile::before, #openFile::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);
+: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.secondaryToolbarButton{
+ padding-top:5px;
+ text-decoration:none;
+}
+a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{
+ opacity:0.5;
+ pointer-events: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);
}
-#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);
}
-#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));
}
-#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);
}
-#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);
}
-#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));
}
-#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);
}
-#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%;
}
-.pdfSidebarNotification::after {
- position: absolute;
- display: inline-block;
- top: 2px;
- inset-inline-end: 2px;
- /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
- content: "";
- background-color: rgba(112, 219, 85, 1);
- height: 9px;
- width: 9px;
- border-radius: 50%;
+.secondaryToolbarButton{
+ position:relative;
+ margin:0;
+ padding:0 0 1px;
+ padding-inline-start:36px;
+ height:auto;
+ min-height:26px;
+ width:auto;
+ min-width:100%;
+ text-align:start;
+ white-space:normal;
+ border-radius:0;
+ box-sizing:border-box;
+ display:inline-block;
+}
+.secondaryToolbarButton > span{
+ padding-inline-end:4px;
}
-.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;
+#firstPage::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-firstPage-icon);
+ mask-image:var(--secondaryToolbarButton-firstPage-icon);
}
-.secondaryToolbarButton > span {
- padding-inline-end: 4px;
+#lastPage::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-lastPage-icon);
+ mask-image:var(--secondaryToolbarButton-lastPage-icon);
}
-#firstPage::before {
- -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
- mask-image: var(--secondaryToolbarButton-firstPage-icon);
+#pageRotateCcw::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
+ mask-image:var(--secondaryToolbarButton-rotateCcw-icon);
}
-#lastPage::before {
- -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon);
- mask-image: var(--secondaryToolbarButton-lastPage-icon);
+#pageRotateCw::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-rotateCw-icon);
+ mask-image:var(--secondaryToolbarButton-rotateCw-icon);
}
-#pageRotateCcw::before {
- -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
- mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
+#cursorSelectTool::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-selectTool-icon);
+ mask-image:var(--secondaryToolbarButton-selectTool-icon);
}
-#pageRotateCw::before {
- -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon);
- mask-image: var(--secondaryToolbarButton-rotateCw-icon);
+#cursorHandTool::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-handTool-icon);
+ mask-image:var(--secondaryToolbarButton-handTool-icon);
}
-#cursorSelectTool::before {
- -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon);
- mask-image: var(--secondaryToolbarButton-selectTool-icon);
+#scrollPage::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-scrollPage-icon);
+ mask-image:var(--secondaryToolbarButton-scrollPage-icon);
}
-#cursorHandTool::before {
- -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon);
- mask-image: var(--secondaryToolbarButton-handTool-icon);
+#scrollVertical::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
+ mask-image:var(--secondaryToolbarButton-scrollVertical-icon);
}
-#scrollPage::before {
- -webkit-mask-image: var(--secondaryToolbarButton-scrollPage-icon);
- mask-image: var(--secondaryToolbarButton-scrollPage-icon);
+#scrollHorizontal::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
+ mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon);
}
-#scrollVertical::before {
- -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
- mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
+#scrollWrapped::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
+ mask-image:var(--secondaryToolbarButton-scrollWrapped-icon);
}
-#scrollHorizontal::before {
- -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
- mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
+#spreadNone::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-spreadNone-icon);
+ mask-image:var(--secondaryToolbarButton-spreadNone-icon);
}
-#scrollWrapped::before {
- -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
- mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
+#spreadOdd::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
+ mask-image:var(--secondaryToolbarButton-spreadOdd-icon);
}
-#spreadNone::before {
- -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon);
- mask-image: var(--secondaryToolbarButton-spreadNone-icon);
+#spreadEven::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-spreadEven-icon);
+ mask-image:var(--secondaryToolbarButton-spreadEven-icon);
}
-#spreadOdd::before {
- -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
- mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
+#documentProperties::before{
+ -webkit-mask-image:var(--secondaryToolbarButton-documentProperties-icon);
+ mask-image:var(--secondaryToolbarButton-documentProperties-icon);
}
-#spreadEven::before {
- -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon);
- mask-image: var(--secondaryToolbarButton-spreadEven-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);
}
-#documentProperties::before {
- -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
- mask-image: var(--secondaryToolbarButton-documentProperties-icon);
+.toolbarField{
+ padding:4px 7px;
+ margin:3px 0;
+ border-radius:2px;
+ background-color:var(--field-bg-color);
+ background-clip:padding-box;
+ border:1px solid var(--field-border-color);
+ box-shadow:none;
+ color:var(--field-color);
+ font-size:12px;
+ line-height:16px;
+ outline:none;
}
-.verticalToolbarSeparator {
- display: block;
- margin: 5px 2px;
- width: 1px;
- height: 22px;
- background-color: var(--separator-color);
+.toolbarField[type="checkbox"]{
+ opacity:0;
+ position:absolute !important;
+ left:0;
+ margin:10px 0 3px;
+ margin-inline-start:7px;
}
-.horizontalToolbarSeparator {
- display: block;
- margin: 6px 0;
- height: 1px;
- width: 100%;
- background-color: var(--doorhanger-separator-color);
+#pageNumber{
+ -moz-appearance:textfield;
+ text-align:end;
+ width:40px;
+ background-size:0 0;
+ transition-property:none;
}
-.toolbarField {
- padding: 4px 7px;
- margin: 3px 0;
- border-radius: 2px;
- background-color: var(--field-bg-color);
- background-clip: padding-box;
- border: 1px solid var(--field-border-color);
- box-shadow: none;
- color: var(--field-color);
- font-size: 12px;
- line-height: 16px;
- outline: none;
+#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;
}
-.toolbarField[type="checkbox"] {
- opacity: 0;
- position: absolute !important;
- left: 0;
- margin: 10px 0 3px;
- margin-inline-start: 7px;
+.toolbarLabel{
+ min-width:16px;
+ padding:7px;
+ margin:2px;
+ 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;
}
-#pageNumber {
- -moz-appearance: textfield; /* hides the spinner in moz */
- text-align: end;
- width: 40px;
- background-size: 0 0;
- transition-property: none;
-}
-
-#pageNumber.visiblePageIsLoading {
- background-image: var(--loading-icon);
- background-repeat: no-repeat;
- background-position: calc(50% - 42% * var(--dir-factor));
- background-size: 16px 16px;
- /* Using a delay with background-image doesn't work,
- consequently we use background-size. */
- transition-property: background-size;
- transition-delay: var(--loading-icon-delay);
-}
-
-#pageNumber::-webkit-inner-spin-button {
- -webkit-appearance: none;
-}
-
-.toolbarField:focus {
- border-color: #0a84ff;
-}
-
-.toolbarLabel {
- min-width: 16px;
- padding: 7px;
- margin: 2px;
- border-radius: 2px;
- color: var(--main-color);
- font-size: 12px;
- line-height: 14px;
- text-align: left;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
- cursor: default;
-}
-
-#numPages.toolbarLabel {
- padding-inline-start: 3px;
+#numPages.toolbarLabel{
+ padding-inline-start:3px;
}
#thumbnailView,
#outlineView,
#attachmentsView,
-#layersView {
- position: absolute;
- width: calc(100% - 8px);
- inset-block: 0;
- padding: 4px 4px 0;
- overflow: auto;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
+#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:calc(100% - 60px);
+ padding:10px 30px 0;
}
-#thumbnailView {
- width: calc(100% - 60px);
- padding: 10px 30px 0;
+#thumbnailView > a:is(:active, :focus){
+ outline:0;
}
-#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 10px 5px;
+ padding:1px;
+ border:7px solid transparent;
+ border-radius:2px;
}
-.thumbnail {
- /* Define these variables here, and not in :root, since the individual
- thumbnails may have different sizes. */
- --thumbnail-width: 0;
- --thumbnail-height: 0;
-
- float: var(--inline-start);
- width: var(--thumbnail-width);
- height: var(--thumbnail-height);
- margin: 0 10px 5px;
- padding: 1px;
- border: 7px solid transparent;
- border-radius: 2px;
-}
-
-#thumbnailView > a:last-of-type > .thumbnail {
- margin-bottom: 10px;
+#thumbnailView > a:last-of-type > .thumbnail{
+ margin-bottom:10px;
}
a:focus > .thumbnail,
-.thumbnail:hover {
- border-color: var(--thumbnail-hover-color);
+.thumbnail:hover{
+ border-color:var(--thumbnail-hover-color);
+}
+.thumbnail.selected{
+ border-color:var(--thumbnail-selected-color) !important;
}
-.thumbnail.selected {
- border-color: var(--thumbnail-selected-color) !important;
+.thumbnailImage{
+ width:var(--thumbnail-width);
+ height:var(--thumbnail-height);
+ opacity:0.9;
}
-
-.thumbnailImage {
- width: var(--thumbnail-width);
- height: var(--thumbnail-height);
- opacity: 0.9;
-}
-
a:focus > .thumbnail > .thumbnailImage,
-.thumbnail:hover > .thumbnailImage {
- opacity: 0.95;
+.thumbnail:hover > .thumbnailImage{
+ opacity:0.95;
+}
+.thumbnail.selected > .thumbnailImage{
+ opacity:1 !important;
}
-.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 rgba(132, 132, 132, 1);
+.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 > .treeItems{
+ margin-inline-start:20px;
}
-.treeItem > a {
- text-decoration: none;
- display: inline-block;
- /* Subtract the right padding (left, in RTL mode) of the container: */
- 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;
+.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 *{
+ cursor:pointer;
+}
+#layersView .treeItem > a > label{
+ padding-inline-start:4px;
+}
+#layersView .treeItem > a > label > input{
+ float:var(--inline-start);
+ margin-top:1px;
}
-#layersView .treeItem > a > label {
- padding-inline-start: 4px;
+.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;
}
-#layersView .treeItem > a > label > input {
- float: var(--inline-start);
- margin-top: 1px;
-}
-
-.treeItemToggler {
- position: relative;
- float: var(--inline-start);
- height: 0;
- width: 0;
- color: rgba(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);
+.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);
+.treeItem > a:hover{
+ background-color:var(--treeitem-bg-color);
+ background-clip:padding-box;
+ border-radius:2px;
+ color:var(--treeitem-hover-color);
}
-.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;
+#outlineOptionsContainer{
+ display:none;
}
-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 rgba(0, 0, 0, 0.5);
- border-radius: 4px;
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+#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::backdrop {
- background-color: rgba(0, 0, 0, 0.2);
+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-row;
}
-dialog > .row > * {
- display: table-cell;
+dialog > .row > *{
+ display:table-cell;
}
-dialog .toolbarField {
- margin: 5px 0;
+dialog .toolbarField{
+ margin:5px 0;
}
-dialog .separator {
- display: block;
- margin: 4px 0;
- height: 1px;
- width: 100%;
- background-color: var(--separator-color);
+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 .buttonRow{
+ text-align:center;
+ vertical-align:middle;
}
-dialog :link {
- color: rgba(255, 255, 255, 1);
+dialog :link{
+ color:rgb(255 255 255);
}
-#passwordDialog {
- text-align: center;
+#passwordDialog{
+ text-align:center;
+}
+#passwordDialog .toolbarField{
+ width:200px;
}
-#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;
}
-#documentPropertiesDialog {
- text-align: left;
+.grab-to-pan-grab{
+ cursor:grab !important;
}
-
-#documentPropertiesDialog .row > * {
- min-width: 100px;
- text-align: start;
+.grab-to-pan-grab
+ *:not(input):not(textarea):not(button):not(select):not(:link){
+ cursor:inherit !important;
}
-
-#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{
+ cursor:grabbing !important;
+}
+.grab-to-pan-grabbing{
+ position:fixed;
+ background:rgb(0 0 0 / 0);
+ display:block;
+ inset:0;
+ overflow:hidden;
+ z-index:50000;
}
-.grab-to-pan-grabbing {
- position: fixed;
- background: rgba(0, 0, 0, 0);
- display: block;
- inset: 0;
- overflow: hidden;
- z-index: 50000; /* should be higher than anything else in PDF.js! */
+@page{
+ margin:0;
}
-@page {
- margin: 0;
+#printContainer{
+ display:none;
}
-#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%;
-@media print {
- body {
- background: rgba(0, 0, 0, 0) none;
+ display:flex;
+ flex-direction:column;
+ justify-content:center;
+ align-items:center;
}
- body[data-pdfjsprinting] #outerContainer {
- display: none;
+ #printContainer > .xfaPrintedPage .xfaPage{
+ position:absolute;
}
- body[data-pdfjsprinting] #printContainer {
- display: block;
+ #printContainer > .xfaPrintedPage{
+ page-break-after:always;
+ page-break-inside:avoid;
+ width:100%;
+ height:100%;
+ position:relative;
}
- #printContainer {
- height: 100%;
- }
+ #printContainer > .printedPage :is(canvas, img){
+ max-width:100%;
+ max-height:100%;
- /* wrapper around (scaled) print canvas elements */
- #printContainer > .printedPage {
- page-break-after: always;
- page-break-inside: avoid;
-
- /* The wrapper always cover the whole page. */
- 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) {
- /* The intrinsic canvas / image size will make sure that we fit the page. */
- max-width: 100%;
- max-height: 100%;
-
- direction: ltr;
- display: block;
+ direction:ltr;
+ display:block;
}
}
-.visibleLargeView,
-.visibleMediumView {
- display: none;
+.visibleMediumView{
+ display:none;
}
-@media all and (max-width: 900px) {
- #toolbarViewerMiddle {
- display: table;
- margin: auto;
- left: auto;
- position: inherit;
- transform: none;
+@media all and (max-width: 900px){
+ #toolbarViewerMiddle{
+ display:table;
+ margin:auto;
+ left:auto;
+ position:inherit;
+ transform:none;
}
}
-@media all and (max-width: 840px) {
- #sidebarContainer {
- background-color: var(--sidebar-narrow-bg-color);
+@media all and (max-width: 840px){
+ #sidebarContainer{
+ background-color:var(--sidebar-narrow-bg-color);
}
-
- #outerContainer.sidebarOpen #viewerContainer {
- inset-inline-start: 0 !important;
+ #outerContainer.sidebarOpen #viewerContainer{
+ inset-inline-start:0 !important;
}
}
-@media all and (max-width: 820px) {
- #outerContainer .hiddenLargeView {
- display: none;
+@media all and (max-width: 750px){
+ :root{
+ --editor-toolbar-base-offset:40px;
}
-
- #outerContainer .visibleLargeView {
- display: inherit;
+ #outerContainer .hiddenMediumView{
+ display:none;
+ }
+ #outerContainer .visibleMediumView{
+ display:inherit;
}
}
-@media all and (max-width: 750px) {
- #outerContainer .hiddenMediumView {
- display: none;
- }
-
- #outerContainer .visibleMediumView {
- display: inherit;
- }
-}
-
-@media all and (max-width: 690px) {
+@media all and (max-width: 690px){
.hiddenSmallView,
- .hiddenSmallView * {
- display: none;
+ .hiddenSmallView *{
+ display:none;
}
-
- .toolbarButtonSpacer {
- width: 0;
+ .toolbarButtonSpacer{
+ width:0;
}
-
- .findbar {
- inset-inline-start: 34px;
+ .findbar{
+ inset-inline-start:34px;
}
}
-@media all and (max-width: 560px) {
- #scaleSelectContainer {
- display: none;
+@media all and (max-width: 560px){
+ #scaleSelectContainer{
+ display:none;
}
}
diff --git a/src/main/resources/static/pdfjs/images/altText_add.svg b/src/main/resources/static/pdfjs/images/altText_add.svg
index 6730edff..3451b536 100644
--- a/src/main/resources/static/pdfjs/images/altText_add.svg
+++ b/src/main/resources/static/pdfjs/images/altText_add.svg
@@ -1,4 +1,3 @@
+
+
diff --git a/src/main/resources/static/pdfjs/images/altText_done.svg b/src/main/resources/static/pdfjs/images/altText_done.svg
index defc9318..f54924eb 100644
--- a/src/main/resources/static/pdfjs/images/altText_done.svg
+++ b/src/main/resources/static/pdfjs/images/altText_done.svg
@@ -1,4 +1,3 @@
+
+
diff --git a/src/main/resources/static/pdfjs/images/annotation-check.svg b/src/main/resources/static/pdfjs/images/annotation-check.svg
index b6849b30..71cd16df 100644
--- a/src/main/resources/static/pdfjs/images/annotation-check.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-check.svg
@@ -1,11 +1,11 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-comment.svg b/src/main/resources/static/pdfjs/images/annotation-comment.svg
index 83fbfb44..86f1f172 100644
--- a/src/main/resources/static/pdfjs/images/annotation-comment.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-comment.svg
@@ -1,16 +1,16 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-help.svg b/src/main/resources/static/pdfjs/images/annotation-help.svg
index 81a00ac1..00938fef 100644
--- a/src/main/resources/static/pdfjs/images/annotation-help.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-help.svg
@@ -1,26 +1,26 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-insert.svg b/src/main/resources/static/pdfjs/images/annotation-insert.svg
index ca9e9e20..519ef682 100644
--- a/src/main/resources/static/pdfjs/images/annotation-insert.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-insert.svg
@@ -1,10 +1,10 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-key.svg b/src/main/resources/static/pdfjs/images/annotation-key.svg
index 733edc0b..8d09d537 100644
--- a/src/main/resources/static/pdfjs/images/annotation-key.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-key.svg
@@ -1,11 +1,11 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-newparagraph.svg b/src/main/resources/static/pdfjs/images/annotation-newparagraph.svg
index e75f9807..38d2497d 100644
--- a/src/main/resources/static/pdfjs/images/annotation-newparagraph.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-newparagraph.svg
@@ -1,11 +1,11 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-noicon.svg b/src/main/resources/static/pdfjs/images/annotation-noicon.svg
index 21423057..c07d1080 100644
--- a/src/main/resources/static/pdfjs/images/annotation-noicon.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-noicon.svg
@@ -1,7 +1,7 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-note.svg b/src/main/resources/static/pdfjs/images/annotation-note.svg
index f5f2c16a..70173651 100644
--- a/src/main/resources/static/pdfjs/images/annotation-note.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-note.svg
@@ -1,42 +1,42 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-paperclip.svg b/src/main/resources/static/pdfjs/images/annotation-paperclip.svg
index a93960b2..2bed2250 100644
--- a/src/main/resources/static/pdfjs/images/annotation-paperclip.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-paperclip.svg
@@ -2,5 +2,5 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
diff --git a/src/main/resources/static/pdfjs/images/annotation-paragraph.svg b/src/main/resources/static/pdfjs/images/annotation-paragraph.svg
index be06ce9b..6ae5212b 100644
--- a/src/main/resources/static/pdfjs/images/annotation-paragraph.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-paragraph.svg
@@ -1,16 +1,16 @@
diff --git a/src/main/resources/static/pdfjs/images/annotation-pushpin.svg b/src/main/resources/static/pdfjs/images/annotation-pushpin.svg
index 325f9d3f..6e0896cf 100644
--- a/src/main/resources/static/pdfjs/images/annotation-pushpin.svg
+++ b/src/main/resources/static/pdfjs/images/annotation-pushpin.svg
@@ -2,6 +2,6 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
diff --git a/src/main/resources/static/pdfjs/images/cursor-editorFreeHighlight.svg b/src/main/resources/static/pdfjs/images/cursor-editorFreeHighlight.svg
new file mode 100644
index 00000000..513f6bdf
--- /dev/null
+++ b/src/main/resources/static/pdfjs/images/cursor-editorFreeHighlight.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/main/resources/static/pdfjs/images/cursor-editorFreeText.svg b/src/main/resources/static/pdfjs/images/cursor-editorFreeText.svg
index 42ba1f6a..de2838ef 100644
--- a/src/main/resources/static/pdfjs/images/cursor-editorFreeText.svg
+++ b/src/main/resources/static/pdfjs/images/cursor-editorFreeText.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/cursor-editorInk.svg b/src/main/resources/static/pdfjs/images/cursor-editorInk.svg
index 249f4634..1dadb5c0 100644
--- a/src/main/resources/static/pdfjs/images/cursor-editorInk.svg
+++ b/src/main/resources/static/pdfjs/images/cursor-editorInk.svg
@@ -1,6 +1,4 @@
diff --git a/src/main/resources/static/pdfjs/images/cursor-editorTextHighlight.svg b/src/main/resources/static/pdfjs/images/cursor-editorTextHighlight.svg
new file mode 100644
index 00000000..800340cb
--- /dev/null
+++ b/src/main/resources/static/pdfjs/images/cursor-editorTextHighlight.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/main/resources/static/pdfjs/images/editor-toolbar-delete.svg b/src/main/resources/static/pdfjs/images/editor-toolbar-delete.svg
new file mode 100644
index 00000000..f84520d8
--- /dev/null
+++ b/src/main/resources/static/pdfjs/images/editor-toolbar-delete.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/src/main/resources/static/pdfjs/images/findbarButton-next.svg b/src/main/resources/static/pdfjs/images/findbarButton-next.svg
index dba19fe3..8cb39bec 100644
--- a/src/main/resources/static/pdfjs/images/findbarButton-next.svg
+++ b/src/main/resources/static/pdfjs/images/findbarButton-next.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/findbarButton-previous.svg b/src/main/resources/static/pdfjs/images/findbarButton-previous.svg
index 34137059..b610879d 100644
--- a/src/main/resources/static/pdfjs/images/findbarButton-previous.svg
+++ b/src/main/resources/static/pdfjs/images/findbarButton-previous.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/gv-toolbarButton-download.svg b/src/main/resources/static/pdfjs/images/gv-toolbarButton-download.svg
index 0e82606b..d56cf3ce 100644
--- a/src/main/resources/static/pdfjs/images/gv-toolbarButton-download.svg
+++ b/src/main/resources/static/pdfjs/images/gv-toolbarButton-download.svg
@@ -1,5 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/gv-toolbarButton-openinapp.svg b/src/main/resources/static/pdfjs/images/gv-toolbarButton-openinapp.svg
deleted file mode 100644
index 1aa278f2..00000000
--- a/src/main/resources/static/pdfjs/images/gv-toolbarButton-openinapp.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-
diff --git a/src/main/resources/static/pdfjs/images/loading.svg b/src/main/resources/static/pdfjs/images/loading.svg
index d63eaf01..0a15ff68 100644
--- a/src/main/resources/static/pdfjs/images/loading.svg
+++ b/src/main/resources/static/pdfjs/images/loading.svg
@@ -1,24 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-documentProperties.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-documentProperties.svg
index 2fc1915e..dd3917b9 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-documentProperties.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-documentProperties.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-firstPage.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-firstPage.svg
index 42fb45eb..f5c917f1 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-firstPage.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-firstPage.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-handTool.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-handTool.svg
index a67b3c50..b7073b59 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-handTool.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-handTool.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-lastPage.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-lastPage.svg
index ab9a4dea..c04f6507 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-lastPage.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-lastPage.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-rotateCcw.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-rotateCcw.svg
index 0cf4058b..da73a1b1 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-rotateCcw.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-rotateCcw.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-rotateCw.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-rotateCw.svg
index 243f809f..c41ce736 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-rotateCw.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-rotateCw.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollHorizontal.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollHorizontal.svg
index 955cae02..fb440b94 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollHorizontal.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollHorizontal.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollPage.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollPage.svg
index 4f4762ea..64a9f500 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollPage.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollPage.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollVertical.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollVertical.svg
index 8713d497..dc7e8052 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollVertical.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollVertical.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollWrapped.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollWrapped.svg
index 162db0b2..75fe26bc 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollWrapped.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-scrollWrapped.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-selectTool.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-selectTool.svg
index 1f3f22ce..94d51410 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-selectTool.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-selectTool.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadEven.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadEven.svg
index c51c427d..ce201e33 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadEven.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadEven.svg
@@ -1,5 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadNone.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadNone.svg
index e768bf94..e8d487fa 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadNone.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadNone.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadOdd.svg b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadOdd.svg
index 1788cae1..9211a427 100644
--- a/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadOdd.svg
+++ b/src/main/resources/static/pdfjs/images/secondaryToolbarButton-spreadOdd.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/toolbarButton-bookmark.svg b/src/main/resources/static/pdfjs/images/toolbarButton-bookmark.svg
index e8711178..c4c37c90 100644
--- a/src/main/resources/static/pdfjs/images/toolbarButton-bookmark.svg
+++ b/src/main/resources/static/pdfjs/images/toolbarButton-bookmark.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/toolbarButton-currentOutlineItem.svg b/src/main/resources/static/pdfjs/images/toolbarButton-currentOutlineItem.svg
index cfdb8f69..01e67623 100644
--- a/src/main/resources/static/pdfjs/images/toolbarButton-currentOutlineItem.svg
+++ b/src/main/resources/static/pdfjs/images/toolbarButton-currentOutlineItem.svg
@@ -1,4 +1,3 @@
diff --git a/src/main/resources/static/pdfjs/images/toolbarButton-download.svg b/src/main/resources/static/pdfjs/images/toolbarButton-download.svg
index 57a847d2..e2e850ad 100644
--- a/src/main/resources/static/pdfjs/images/toolbarButton-download.svg
+++ b/src/main/resources/static/pdfjs/images/toolbarButton-download.svg
@@ -1,6 +1,4 @@
diff --git a/src/main/resources/static/pdfjs/images/toolbarButton-editorFreeText.svg b/src/main/resources/static/pdfjs/images/toolbarButton-editorFreeText.svg
index 247409dc..13a67bd9 100644
--- a/src/main/resources/static/pdfjs/images/toolbarButton-editorFreeText.svg
+++ b/src/main/resources/static/pdfjs/images/toolbarButton-editorFreeText.svg
@@ -1,4 +1,5 @@
diff --git a/src/main/resources/static/pdfjs/images/toolbarButton-editorHighlight.svg b/src/main/resources/static/pdfjs/images/toolbarButton-editorHighlight.svg
new file mode 100644
index 00000000..b3cd7fda
--- /dev/null
+++ b/src/main/resources/static/pdfjs/images/toolbarButton-editorHighlight.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/main/resources/static/pdfjs/images/toolbarButton-editorInk.svg b/src/main/resources/static/pdfjs/images/toolbarButton-editorInk.svg
index 7586ebcd..b579eec7 100644
--- a/src/main/resources/static/pdfjs/images/toolbarButton-editorInk.svg
+++ b/src/main/resources/static/pdfjs/images/toolbarButton-editorInk.svg
@@ -1,6 +1,4 @@
diff --git a/src/main/resources/static/pdfjs/images/toolbarButton-editorStamp.svg b/src/main/resources/static/pdfjs/images/toolbarButton-editorStamp.svg
index 81b95819..a1fef492 100644
--- a/src/main/resources/static/pdfjs/images/toolbarButton-editorStamp.svg
+++ b/src/main/resources/static/pdfjs/images/toolbarButton-editorStamp.svg
@@ -1,9 +1,8 @@
-