@4tw/vue-cli-plugin-pdfjs-viewer 1.4.0 → 1.5.0

package/assets/web/viewer.css

@@ -333,8 +333,8 @@
 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
     border-radius:50%;
     height:50%;
-    left:30%;
-    top:20%;
+    left:25%;
+    top:25%;
     width:50%;
   }
 
@@ -773,6 +773,61 @@
   }
 }
 
+.canvasWrapper svg{
+    transform:none;
+  }
+
+.canvasWrapper svg[data-main-rotation="90"] use:not(.clip){
+        transform:matrix(0, 1, -1, 0, 1, 0);
+      }
+
+.canvasWrapper svg[data-main-rotation="180"] use:not(.clip){
+        transform:matrix(-1, 0, 0, -1, 1, 1);
+      }
+
+.canvasWrapper svg[data-main-rotation="270"] use:not(.clip){
+        transform:matrix(0, -1, 1, 0, 0, 1);
+      }
+
+.canvasWrapper svg.highlight{
+      --blend-mode:multiply;
+
+      position:absolute;
+      mix-blend-mode:var(--blend-mode);
+      fill-rule:evenodd;
+    }
+
+@media screen and (forced-colors: active){
+
+.canvasWrapper svg.highlight{
+        --blend-mode:difference;
+    }
+      }
+
+.canvasWrapper svg.highlightOutline{
+      position:absolute;
+      mix-blend-mode:normal;
+      fill-rule:evenodd;
+      fill:none;
+    }
+
+.canvasWrapper svg.highlightOutline.hovered{
+        stroke:var(--hover-outline-color);
+        stroke-width:var(--outline-width);
+      }
+
+.canvasWrapper svg.highlightOutline.selected .mainOutline{
+          stroke:var(--outline-around-color);
+          stroke-width:calc(
+            var(--outline-width) + 2 * var(--outline-around-width)
+          );
+        }
+
+.canvasWrapper svg.highlightOutline.selected .secondaryOutline{
+          stroke:var(--outline-color);
+          stroke-width:var(--outline-width);
+        }
+
 :root{
   --outline-width:2px;
   --outline-color:#0060df;
@@ -795,22 +850,6 @@
   );
   --editorFreeText-editing-cursor:text;
   --editorInk-editing-cursor:url(images/cursor-editorInk.svg) 0 16, pointer;
-
-  --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:rgb(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:rgb(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:rgb(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 rgb(28 27 34 / 0.5);
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 1.1dppx){
@@ -826,29 +865,17 @@
     --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;
   }
 }
 
 [data-editor-rotation="90"]{
   transform:rotate(90deg);
 }
+
 [data-editor-rotation="180"]{
   transform:rotate(180deg);
 }
+
 [data-editor-rotation="270"]{
   transform:rotate(270deg);
 }
@@ -924,30 +951,39 @@
       border:var(--focus-outline-around);
     }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar{
     --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
     --editor-toolbar-bg-color:#f0f0f4;
     --editor-toolbar-fg-color:#2e2e56;
     --editor-toolbar-border-color:#8f8f9d;
+    --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
     --editor-toolbar-hover-bg-color:#e0e0e6;
-    --editor-toolbar-active-bg-color:#cfcfd8;
+    --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:28px;
+    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% + 6px);
+    inset-block-start:calc(100% + var(--editor-toolbar-vert-offset));
 
-    border-radius:4px;
+    border-radius:6px;
     background-color:var(--editor-toolbar-bg-color);
     border:1px solid var(--editor-toolbar-border-color);
     box-shadow:var(--editor-toolbar-shadow);
@@ -955,63 +991,86 @@
 
 @media (prefers-color-scheme: dark){
 
-:where(html:not(.is-light)) .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
+:where(html:not(.is-light)) .annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar{
       --editor-toolbar-bg-color:#2b2a33;
       --editor-toolbar-fg-color:#fbfbfe;
-      --editor-toolbar-border-color:#2b2a33;
       --editor-toolbar-hover-bg-color:#52525e;
-      --editor-toolbar-active-bg-color:#5b5b66;
       --editor-toolbar-focus-outline-color:#0df;
   }
     }
 
-:where(html.is-dark) .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
+:where(html.is-dark) .annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar{
       --editor-toolbar-bg-color:#2b2a33;
       --editor-toolbar-fg-color:#fbfbfe;
-      --editor-toolbar-border-color:#2b2a33;
       --editor-toolbar-hover-bg-color:#52525e;
-      --editor-toolbar-active-bg-color:#5b5b66;
       --editor-toolbar-focus-outline-color:#0df;
   }
 
 @media screen and (forced-colors: active){
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar{
       --editor-toolbar-bg-color:ButtonFace;
       --editor-toolbar-fg-color:ButtonText;
       --editor-toolbar-border-color:ButtonText;
-      --editor-toolbar-hover-bg-color:AccentColor;
-      --editor-toolbar-active-bg-color:ButtonFace;
+      --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;
   }
     }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar.hidden{
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar.hidden{
       display:none;
     }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar:has(:focus-visible){
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar:has(:focus-visible){
       border-color:transparent;
     }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons{
+[dir="ltr"] .annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar{
+      transform-origin:100% 0;
+    }
+
+[dir="rtl"] .annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar{
+      transform-origin:0 0;
+    }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons{
       display:flex;
-      padding:0 2px;
       justify-content:center;
       align-items:center;
-      gap:4px;
+      gap:0;
+      height:100%;
     }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons .delete{
-        width:24px;
-        height:24px;
-        cursor:pointer;
-        border:none;
-        background-color:transparent;
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .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;
       }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons .delete::before{
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons .delete{
+        width:var(--editor-toolbar-height);
+      }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons .delete::before{
           content:"";
           -webkit-mask-image:var(--editor-toolbar-delete-image);
                   mask-image:var(--editor-toolbar-delete-image);
@@ -1025,21 +1084,156 @@
           height:100%;
         }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons > *:hover{
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons .delete:hover::before{
+          background-color:var(--editor-toolbar-hover-fg-color);
+        }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons > *{
+        height:var(--editor-toolbar-height);
+      }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons > :not(.divider){
+        border:none;
+        background-color:transparent;
+        cursor:pointer;
+      }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .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;
         }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons > *:active{
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons > :not(.divider):hover:active{
+            outline:none;
+          }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons > :not(.divider):focus-visible{
           border-radius:2px;
-          background-color:var(--editor-toolbar-active-bg-color);
+          outline:2px solid var(--editor-toolbar-focus-outline-color);
         }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons > *:focus-visible{
-          border-radius:3px;
-          outline:2px solid var(--editor-toolbar-focus-outline-color);
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .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);
+      }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons .altText:disabled{
+          pointer-events:none;
+        }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .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;
         }
 
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons .altText:hover::before{
+          background-color:var(--editor-toolbar-hover-fg-color);
+        }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons .altText.done::before{
+          -webkit-mask-image:var(--alt-text-done-image);
+                  mask-image:var(--alt-text-done-image);
+        }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .editToolbar .buttons .altText .tooltip{
+          display:none;
+        }
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .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)) .annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .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) .annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .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){
+
+.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor) .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;
@@ -1069,7 +1263,7 @@
   height:100%;
 }
 
-.annotationEditorLayer .freeTextEditor .overlay.enabled{
+.annotationEditorLayer freeTextEditor .overlay.enabled{
   display:block;
 }
 
@@ -1322,58 +1516,6 @@
         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;
-    }
-
-[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"]
-    ) .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;
-        }
-
 .annotationEditorLayer
     :is(
       [data-main-rotation="0"] [data-editor-rotation="90"],
@@ -1391,7 +1533,7 @@
       [data-main-rotation="180"] [data-editor-rotation="270"],
       [data-main-rotation="270"] [data-editor-rotation="180"]
     ) .editToolbar{
-        inset-inline-start:calc(100% + 6px);
+        inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset));
         inset-block-start:0;
       }
 
@@ -1402,33 +1544,8 @@
       [data-main-rotation="180"] [data-editor-rotation="270"],
       [data-main-rotation="270"] [data-editor-rotation="180"]
     ) .editToolbar{
-        inset-inline-end:calc(100% + 6px);
-        inset-block-end:0;
-        inset-block-start:unset;
-      }
-
-.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);
-    }
-
-.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;
+        inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
+        inset-block-start:0;
       }
 
 .annotationEditorLayer
@@ -1439,63 +1556,10 @@
       [data-main-rotation="270"] [data-editor-rotation="270"]
     ) .editToolbar{
       rotate:180deg;
-      inset-inline-start:0;
-      inset-block-end:calc(100% + 6px);
-      inset-block-start:unset;
-    }
-
-.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;
+      inset-inline-end:100%;
+      inset-block-start:calc(0pc - var(--editor-toolbar-vert-offset));
     }
 
-[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);
-      }
-
-[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;
-        }
-
-[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);
-      }
-
-[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%;
-        }
-
 .annotationEditorLayer
     :is(
       [data-main-rotation="0"] [data-editor-rotation="270"],
@@ -1513,9 +1577,8 @@
       [data-main-rotation="180"] [data-editor-rotation="90"],
       [data-main-rotation="270"] [data-editor-rotation="0"]
     ) .editToolbar{
-        inset-inline-end:calc(100% + 6px);
-        inset-block-end:0;
-        inset-block-start:unset;
+        inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset));
+        inset-block-start:100%;
       }
 
 [dir="rtl"] .annotationEditorLayer
@@ -1525,166 +1588,10 @@
       [data-main-rotation="180"] [data-editor-rotation="90"],
       [data-main-rotation="270"] [data-editor-rotation="0"]
     ) .editToolbar{
-        inset-inline-start:calc(100% + 6px);
+        inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset));
         inset-block-start:0;
       }
 
-.altText{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  padding-inline:4px;
-  width:-moz-max-content;
-  width:max-content;
-  height:24px;
-  min-width:88px;
-  z-index:1;
-  pointer-events:all;
-
-  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);
-
-  position:absolute;
-  inset-block-end:8px;
-  inset-inline-start:8px;
-}
-
-.altText:disabled{
-    pointer-events:none;
-  }
-
-[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 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)) .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) .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){
-
-.altText .tooltip.show{
-        --alt-text-tooltip-bg:Canvas;
-        --alt-text-tooltip-fg:CanvasText;
-        --alt-text-tooltip-border:CanvasText;
-        --alt-text-tooltip-shadow:none;
-    }
-      }
-
 #altTextDialog{
   --dialog-bg-color:white;
   --dialog-border-color:white;
@@ -1980,6 +1887,240 @@
             border-color:var(--button-save-hover-border-color);
           }
 
+.colorPicker{
+  --hover-outline-color:#0250bb;
+  --selected-outline-color:#0060df;
+  --swatch-border-color:#cfcfd8;
+}
+
+@media (prefers-color-scheme: dark){
+
+:where(html:not(.is-light)) .colorPicker{
+    --hover-outline-color:#80ebff;
+    --selected-outline-color:#aaf2ff;
+    --swatch-border-color:#52525e;
+}
+  }
+
+:where(html.is-dark) .colorPicker{
+    --hover-outline-color:#80ebff;
+    --selected-outline-color:#aaf2ff;
+    --swatch-border-color:#52525e;
+}
+
+@media screen and (forced-colors: active){
+
+.colorPicker{
+    --hover-outline-color:Highlight;
+    --selected-outline-color:var(--hover-outline-color);
+    --swatch-border-color:ButtonText;
+}
+  }
+
+.colorPicker .swatch{
+    width:16px;
+    height:16px;
+    border:1px solid var(--swatch-border-color);
+    border-radius:100%;
+    outline-offset:2px;
+    box-sizing:border-box;
+    forced-color-adjust:none;
+  }
+
+.colorPicker button:is(:hover, .selected) > .swatch{
+    border:none;
+  }
+
+.annotationEditorLayer[data-main-rotation="0"] .highlightEditor > .editToolbar{
+      rotate:0deg;
+    }
+
+.annotationEditorLayer[data-main-rotation="90"] .highlightEditor > .editToolbar{
+      rotate:270deg;
+    }
+
+.annotationEditorLayer[data-main-rotation="180"] .highlightEditor > .editToolbar{
+      rotate:180deg;
+    }
+
+.annotationEditorLayer[data-main-rotation="270"] .highlightEditor > .editToolbar{
+      rotate:90deg;
+    }
+
+.annotationEditorLayer .highlightEditor{
+    position:absolute;
+    background:transparent;
+    z-index:1;
+    transform-origin:0 0;
+    cursor:auto;
+    max-width:100%;
+    max-height:100%;
+    border:none;
+    outline:none;
+    pointer-events:none;
+    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 .dropdown{
+            position:absolute;
+            display:flex;
+            justify-content:center;
+            align-items:center;
+            flex-direction:column;
+            gap:11px;
+            padding-block:8px;
+            border-radius:6px;
+            background-color:var(--editor-toolbar-bg-color);
+            border:1px solid var(--editor-toolbar-border-color);
+            box-shadow:var(--editor-toolbar-shadow);
+            inset-block-start:calc(100% + 4px);
+            width:calc(100% + 2 * var(--editor-toolbar-padding));
+          }
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button{
+              width:100%;
+              height:auto;
+              border:none;
+              cursor:pointer;
+              display:flex;
+              justify-content:center;
+              align-items:center;
+              background:none;
+            }
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:active, :focus-visible){
+                outline:none;
+              }
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button > .swatch{
+                outline-offset:2px;
+              }
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button[aria-selected="true"] > .swatch{
+                outline:2px solid var(--selected-outline-color);
+              }
+
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch{
+                outline:2px solid var(--hover-outline-color);
+              }
+
+.editorParamsToolbar:has(#highlightParamsToolbarContainer){
+  padding:unset;
+}
+
+#highlightParamsToolbarContainer{
+  height:auto;
+  padding-inline:10px;
+  padding-block:10px 16px;
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+}
+
+#highlightParamsToolbarContainer .colorPicker{
+    display:flex;
+    flex-direction:column;
+    gap:8px;
+  }
+
+#highlightParamsToolbarContainer .colorPicker #highlightColorPickerLabel{
+      width:-moz-fit-content;
+      width:fit-content;
+      inset-inline-start:0;
+    }
+
+#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);
+        }
+
 :root{
   --viewer-container-height:0;
   --pdfViewer-padding-bottom:0;
@@ -2208,6 +2349,7 @@
   --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);
@@ -2715,6 +2857,11 @@ body{
 .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);
 }
 
@@ -2764,6 +2911,10 @@ body{
   inset-inline-end:calc(var(--editor-toolbar-base-offset) + 56px);
 }
 
+#editorHighlightParamsToolbar{
+  inset-inline-end:calc(var(--editor-toolbar-base-offset) + 84px);
+}
+
 #editorStampAddImage::before{
   -webkit-mask-image:var(--editorParams-stampAddImage-icon);
           mask-image:var(--editorParams-stampAddImage-icon);
@@ -3097,6 +3248,11 @@ body{
           mask-image:var(--toolbarButton-editorFreeText-icon);
 }
 
+#editorHighlight::before{
+  -webkit-mask-image:var(--toolbarButton-editorHighlight-icon);
+          mask-image:var(--toolbarButton-editorHighlight-icon);
+}
+
 #editorInk::before{
   -webkit-mask-image:var(--toolbarButton-editorInk-icon);
           mask-image:var(--toolbarButton-editorInk-icon);
@@ -3508,6 +3664,14 @@ a:focus > .thumbnail > .thumbnailImage,
   color:var(--treeitem-hover-color);
 }
 
+#outlineOptionsContainer{
+  display:none;
+}
+
+#sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer{
+    display:inherit;
+  }
+
 .dialogButton{
   width:auto;
   margin:3px 4px 2px !important;