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

package/assets/web/viewer.css

@@ -13,21 +13,262 @@
  * limitations under the License.
  */
 
+.dialog{
+  --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-secondary-bg-color:#f0f0f4;
+  --button-secondary-fg-color:var(--text-primary-color);
+  --button-secondary-border-color:var(--button-secondary-bg-color);
+  --button-secondary-hover-bg-color:var(--button-secondary-bg-color);
+  --button-secondary-hover-fg-color:var(--button-secondary-fg-color);
+  --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color);
+
+  --button-primary-bg-color:#0060df;
+  --button-primary-fg-color:#fbfbfe;
+  --button-primary-hover-bg-color:var(--button-primary-bg-color);
+  --button-primary-hover-fg-color:var(--button-primary-fg-color);
+  --button-primary-hover-border-color:var(--button-primary-hover-bg-color);
+
+  font:message-box;
+  font-size:13px;
+  font-weight:400;
+  line-height:150%;
+  border-radius:4px;
+  padding:12px 16px;
+  border:1px solid var(--dialog-border-color);
+  background:var(--dialog-bg-color);
+  color:var(--text-primary-color);
+  box-shadow:var(--dialog-shadow);
+}
+
+@media (prefers-color-scheme: dark){
+
+:where(html:not(.is-light)) .dialog{
+    --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-secondary-bg-color:#2b2a33;
+    --button-primary-bg-color:#0df;
+    --button-primary-fg-color:#15141a;
+}
+  }
+
+:where(html.is-dark) .dialog{
+    --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-secondary-bg-color:#2b2a33;
+    --button-primary-bg-color:#0df;
+    --button-primary-fg-color:#15141a;
+}
+
+@media screen and (forced-colors: active){
+
+.dialog{
+    --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-secondary-bg-color:ButtonFace;
+    --button-secondary-fg-color:ButtonText;
+    --button-secondary-border-color:ButtonText;
+    --button-secondary-hover-bg-color:AccentColor;
+    --button-secondary-hover-fg-color:AccentColorText;
+
+    --button-primary-bg-color:ButtonText;
+    --button-primary-fg-color:ButtonFace;
+    --button-primary-hover-bg-color:AccentColor;
+    --button-primary-hover-fg-color:AccentColorText;
+}
+  }
+
+.dialog .mainContainer *:focus-visible{
+      outline:var(--focus-ring-outline);
+      outline-offset:2px;
+    }
+
+.dialog .mainContainer .radio{
+      display:flex;
+      flex-direction:column;
+      align-items:flex-start;
+      gap:4px;
+    }
+
+.dialog .mainContainer .radio > .radioButton{
+        display:flex;
+        gap:8px;
+        align-self:stretch;
+        align-items:center;
+      }
+
+.dialog .mainContainer .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);
+        }
+
+.dialog .mainContainer .radio > .radioButton input:hover{
+            filter:var(--hover-filter);
+          }
+
+.dialog .mainContainer .radio > .radioButton input:checked{
+            background-color:var(--radio-checked-bg-color);
+            border:4px solid var(--radio-checked-border-color);
+          }
+
+.dialog .mainContainer .radio > .radioLabel{
+        display:flex;
+        padding-inline-start:24px;
+        align-items:flex-start;
+        gap:10px;
+        align-self:stretch;
+      }
+
+.dialog .mainContainer .radio > .radioLabel > span{
+          flex:1 0 0;
+          font-size:11px;
+          color:var(--text-secondary-color);
+        }
+
+.dialog .mainContainer button{
+      border-radius:4px;
+      border:1px solid;
+      font:menu;
+      font-weight:600;
+      padding:4px 16px;
+      width:auto;
+      height:32px;
+    }
+
+.dialog .mainContainer button:hover{
+        cursor:pointer;
+        filter:var(--hover-filter);
+      }
+
+.dialog .mainContainer button.secondaryButton{
+        color:var(--button-secondary-fg-color);
+        background-color:var(--button-secondary-bg-color);
+        border-color:var(--button-secondary-border-color);
+      }
+
+.dialog .mainContainer button.secondaryButton:hover{
+          color:var(--button-secondary-hover-fg-color);
+          background-color:var(--button-secondary-hover-bg-color);
+          border-color:var(--button-secondary-hover-border-color);
+        }
+
+.dialog .mainContainer button.primaryButton{
+        color:var(--button-primary-hover-fg-color);
+        background-color:var(--button-primary-hover-bg-color);
+        border-color:var(--button-primary-hover-border-color);
+        opacity:1;
+      }
+
+.dialog .mainContainer button.primaryButton:hover{
+          color:var(--button-primary-hover-fg-color);
+          background-color:var(--button-primary-hover-bg-color);
+          border-color:var(--button-primary-hover-border-color);
+        }
+
+.dialog .mainContainer textarea{
+      font:inherit;
+      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);
+    }
+
+.dialog .mainContainer textarea:focus{
+        outline-offset:0;
+        border-color:transparent;
+      }
+
+.dialog .mainContainer textarea:disabled{
+        pointer-events:none;
+        opacity:0.4;
+      }
+
 .textLayer{
   position:absolute;
   text-align:initial;
   inset:0;
-  overflow:hidden;
-  opacity:0.25;
+  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;
-  z-index:2;
+  caret-color:CanvasText;
+  z-index:0;
 }
 
+.textLayer.highlighting{
+    touch-action:none;
+  }
+
 .textLayer :is(span, br){
     color:transparent;
     position:absolute;
@@ -36,26 +277,39 @@
     transform-origin:0% 0%;
   }
 
+.textLayer > :not(.markedContent),
+  .textLayer .markedContent span:not(.markedContent){
+    z-index:1;
+  }
+
 .textLayer span.markedContent{
     top:0;
     height:0;
   }
 
 .textLayer .highlight{
-    --highlight-bg-color:rgb(180 0 170);
-    --highlight-selected-bg-color:rgb(0 100 0);
+    --highlight-bg-color:rgb(180 0 170 / 0.25);
+    --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
+    --highlight-backdrop-filter:none;
+    --highlight-selected-backdrop-filter:none;
 
     margin:-1px;
     padding:1px;
     background-color:var(--highlight-bg-color);
+    -webkit-backdrop-filter:var(--highlight-backdrop-filter);
+            backdrop-filter:var(--highlight-backdrop-filter);
     border-radius:4px;
   }
 
 @media screen and (forced-colors: active){
 
 .textLayer .highlight{
-      --highlight-bg-color:Highlight;
-      --highlight-selected-bg-color:ButtonText;
+      --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
+      );
   }
     }
 
@@ -77,16 +331,18 @@
 
 .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:blue;
-    background:AccentColor;
+    background:rgba(0 0 255 / 0.25);
+    background:color-mix(in srgb, AccentColor, transparent 75%);
   }
 
 .textLayer ::selection{
-    background:blue;
-    background:AccentColor;
+    background:rgba(0 0 255 / 0.25);
+    background:color-mix(in srgb, AccentColor, transparent 75%);
   }
 
 .textLayer br::-moz-selection{
@@ -101,7 +357,7 @@
     display:block;
     position:absolute;
     inset:100% 0 0;
-    z-index:-1;
+    z-index:0;
     cursor:default;
     -webkit-user-select:none;
        -moz-user-select:none;
@@ -126,7 +382,6 @@
   left:0;
   pointer-events:none;
   transform-origin:0 0;
-  z-index:3;
 }
 
 @media screen and (forced-colors: active){
@@ -137,7 +392,6 @@
     --input-disabled-border-color:GrayText;
     --input-hover-border-color:Highlight;
     --link-outline:1.5px solid LinkText;
-    --hcm-highlight-filter:invert(100%);
 }
 
     .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{
@@ -194,13 +448,31 @@
     transform:rotate(90deg) translateY(-100%);
   }
 
-.annotationLayer canvas{
+.annotationLayer.disabled section,
+    .annotationLayer.disabled .popup{
+      pointer-events:none;
+    }
+
+.annotationLayer .annotationContent{
     position:absolute;
     width:100%;
     height:100%;
     pointer-events:none;
   }
 
+.annotationLayer .annotationContent.freetext{
+      background:transparent;
+      border:none;
+      inset:0;
+      overflow:visible;
+      white-space:nowrap;
+      font:10px sans-serif;
+      line-height:1.35;
+      -webkit-user-select:none;
+         -moz-user-select:none;
+              user-select:none;
+    }
+
 .annotationLayer section{
     position:absolute;
     text-align:initial;
@@ -209,6 +481,10 @@
     transform-origin:0 0;
   }
 
+.annotationLayer section:has(div.annotationContent) canvas.annotationContent{
+        display:none;
+      }
+
 .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{
     position:absolute;
     font-size:1em;
@@ -333,8 +609,8 @@
 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{
     border-radius:50%;
     height:50%;
-    left:30%;
-    top:20%;
+    left:25%;
+    top:25%;
     width:50%;
   }
 
@@ -773,123 +1049,432 @@
   }
 }
 
-: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;
-
-  --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){
-  :root{
-    --editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text;
+.canvasWrapper svg{
+    transform:none;
   }
-}
 
-@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;
+.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-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;
-  }
-}
+.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);
+      }
 
-[data-editor-rotation="90"]{
-  transform:rotate(90deg);
-}
-[data-editor-rotation="180"]{
-  transform:rotate(180deg);
-}
-[data-editor-rotation="270"]{
-  transform:rotate(270deg);
-}
+.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);
+      }
 
-.annotationEditorLayer{
-  background:transparent;
-  position:absolute;
-  inset:0;
-  font-size:calc(100px * var(--scale-factor));
-  transform-origin:0 0;
-  cursor:auto;
-  z-index:4;
-}
+.canvasWrapper svg.highlight{
+      --blend-mode:multiply;
 
-.annotationEditorLayer.waiting{
-  content:"";
-  cursor:wait;
-  position:absolute;
-  inset:0;
-  width:100%;
-  height:100%;
-}
+      position:absolute;
+      mix-blend-mode:var(--blend-mode);
+    }
 
-.annotationEditorLayer.disabled{
-  pointer-events:none;
-}
+@media screen and (forced-colors: active){
 
-.annotationEditorLayer.freetextEditing{
-  cursor:var(--editorFreeText-editing-cursor);
-}
+.canvasWrapper svg.highlight{
+        --blend-mode:difference;
+    }
+      }
 
-.annotationEditorLayer.inkEditing{
-  cursor:var(--editorInk-editing-cursor);
-}
+.canvasWrapper svg.highlight:not(.free){
+        fill-rule:evenodd;
+      }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor){
-  position:absolute;
-  background:transparent;
-  z-index:1;
-  transform-origin:0 0;
-  cursor:auto;
+.canvasWrapper svg.highlightOutline{
+      position:absolute;
+      mix-blend-mode:normal;
+      fill-rule:evenodd;
+      fill:none;
+    }
+
+.canvasWrapper svg.highlightOutline.hovered:not(.free):not(.selected){
+          stroke:var(--hover-outline-color);
+          stroke-width:var(--outline-width);
+        }
+
+.canvasWrapper svg.highlightOutline.selected:not(.free) .mainOutline{
+            stroke:var(--outline-around-color);
+            stroke-width:calc(
+              var(--outline-width) + 2 * var(--outline-around-width)
+            );
+          }
+
+.canvasWrapper svg.highlightOutline.selected:not(.free) .secondaryOutline{
+            stroke:var(--outline-color);
+            stroke-width:var(--outline-width);
+          }
+
+.canvasWrapper svg.highlightOutline.free.hovered:not(.selected){
+          stroke:var(--hover-outline-color);
+          stroke-width:calc(2 * var(--outline-width));
+        }
+
+.canvasWrapper svg.highlightOutline.free.selected .mainOutline{
+            stroke:var(--outline-around-color);
+            stroke-width:calc(
+              2 * (var(--outline-width) + var(--outline-around-width))
+            );
+          }
+
+.canvasWrapper svg.highlightOutline.free.selected .secondaryOutline{
+            stroke:var(--outline-color);
+            stroke-width:calc(2 * var(--outline-width));
+          }
+
+.toggle-button{
+  --button-background-color:#f0f0f4;
+  --button-background-color-hover:#e0e0e6;
+  --button-background-color-active:#cfcfd8;
+  --color-accent-primary:#0060df;
+  --color-accent-primary-hover:#0250bb;
+  --color-accent-primary-active:#054096;
+  --border-interactive-color:#8f8f9d;
+  --border-radius-circle:9999px;
+  --border-width:1px;
+  --size-item-small:16px;
+  --size-item-large:32px;
+  --color-canvas:white;
+
+  --toggle-background-color:var(--button-background-color);
+  --toggle-background-color-hover:var(--button-background-color-hover);
+  --toggle-background-color-active:var(--button-background-color-active);
+  --toggle-background-color-pressed:var(--color-accent-primary);
+  --toggle-background-color-pressed-hover:var(--color-accent-primary-hover);
+  --toggle-background-color-pressed-active:var(--color-accent-primary-active);
+  --toggle-border-color:var(--border-interactive-color);
+  --toggle-border-color-hover:var(--toggle-border-color);
+  --toggle-border-color-active:var(--toggle-border-color);
+  --toggle-border-radius:var(--border-radius-circle);
+  --toggle-border-width:var(--border-width);
+  --toggle-height:var(--size-item-small);
+  --toggle-width:var(--size-item-large);
+  --toggle-dot-background-color:var(--toggle-border-color);
+  --toggle-dot-background-color-hover:var(--toggle-dot-background-color);
+  --toggle-dot-background-color-active:var(--toggle-dot-background-color);
+  --toggle-dot-background-color-on-pressed:var(--color-canvas);
+  --toggle-dot-margin:1px;
+  --toggle-dot-height:calc(
+    var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
+      var(--toggle-border-width)
+  );
+  --toggle-dot-width:var(--toggle-dot-height);
+  --toggle-dot-transform-x:calc(
+    var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
+  );
+
+  -webkit-appearance:none;
+
+     -moz-appearance:none;
+
+          appearance:none;
+  padding:0;
+  margin:0;
+  border:var(--toggle-border-width) solid var(--toggle-border-color);
+  height:var(--toggle-height);
+  width:var(--toggle-width);
+  border-radius:var(--toggle-border-radius);
+  background:var(--toggle-background-color);
+  box-sizing:border-box;
+  flex-shrink:0;
+}
+
+@media (prefers-color-scheme: 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;
+  }
+}
+
+[data-editor-rotation="90"]{
+  transform:rotate(90deg);
+}
+
+[data-editor-rotation="180"]{
+  transform:rotate(180deg);
+}
+
+[data-editor-rotation="270"]{
+  transform:rotate(270deg);
+}
+
+.annotationEditorLayer{
+  background:transparent;
+  position:absolute;
+  inset:0;
+  font-size:calc(100px * var(--scale-factor));
+  transform-origin:0 0;
+  cursor:auto;
+}
+
+.annotationEditorLayer.waiting{
+  content:"";
+  cursor:wait;
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+}
+
+.annotationEditorLayer.disabled{
+  pointer-events:none;
+}
+
+.annotationEditorLayer.freetextEditing{
+  cursor:var(--editorFreeText-editing-cursor);
+}
+
+.annotationEditorLayer.inkEditing{
+  cursor:var(--editorInk-editing-cursor);
+}
+
+.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor){
+  position:absolute;
+  background:transparent;
+  z-index:1;
+  transform-origin:0 0;
+  cursor:auto;
   max-width:100%;
   max-height:100%;
   border:var(--unfocus-outline);
@@ -899,6 +1484,10 @@
     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);
@@ -924,30 +1513,40 @@
       border:var(--focus-outline-around);
     }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
+: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-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 +1554,111 @@
 
 @media (prefers-color-scheme: dark){
 
-:where(html:not(.is-light)) .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar{
+: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-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) :is(.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .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{
+: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-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{
+:is(.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar.hidden{
       display:none;
     }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar:has(:focus-visible){
+:is(.annotationEditorLayer
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),.textLayer) .editToolbar:has(:focus-visible){
       border-color:transparent;
     }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons{
+[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;
-      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;
+: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);
       }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons .delete::before{
+: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);
@@ -1025,21 +1672,156 @@
           height:100%;
         }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons > *:hover{
+: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;
         }
 
-.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) .editToolbar .buttons > *:active{
+: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;
-          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);
+: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;
@@ -1069,7 +1851,7 @@
   height:100%;
 }
 
-.annotationEditorLayer .freeTextEditor .overlay.enabled{
+.annotationEditorLayer freeTextEditor .overlay.enabled{
   display:block;
 }
 
@@ -1107,11 +1889,15 @@
   height:auto;
 }
 
-.annotationEditorLayer .stampEditor canvas{
-  width:100%;
-  height:100%;
-}
-
+.annotationEditorLayer .stampEditor canvas{
+    position:absolute;
+    width:100%;
+    height:100%;
+    margin:0;
+    top:0;
+    left:0;
+  }
+
 .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers{
       position:absolute;
       inset:0;
@@ -1322,58 +2108,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 +2125,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 +2136,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 +2148,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 +2169,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,460 +2180,419 @@
       [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;
+.dialog.altText::backdrop{
+    -webkit-mask:url(#alttext-manager-mask);
+            mask:url(#alttext-manager-mask);
   }
 
-[dir="ltr"] .altText{
-    transform-origin:0 100%;
+.dialog.altText.positioned{
+    margin:0;
   }
 
-[dir="rtl"] .altText{
-    transform-origin:100% 100%;
+.dialog.altText #altTextContainer{
+    width:300px;
+    height:-moz-fit-content;
+    height:fit-content;
+    display:inline-flex;
+    flex-direction:column;
+    align-items:flex-start;
+    gap:16px;
   }
 
-.altText.small{
+.dialog.altText #altTextContainer #overallDescription{
+      display:flex;
+      flex-direction:column;
+      align-items:flex-start;
+      gap:4px;
+      align-self:stretch;
+    }
 
-    inset-block-end:unset;
-    inset-inline-start:0;
-    inset-block-start:calc(100% + 8px);
-  }
+.dialog.altText #altTextContainer #overallDescription span{
+        align-self:stretch;
+      }
 
-[dir="ltr"] .altText.small{
-      transform-origin:0 0;
-    }
+.dialog.altText #altTextContainer #overallDescription .title{
+        font-size:13px;
+        font-style:normal;
+        font-weight:590;
+      }
 
-[dir="rtl"] .altText.small{
-      transform-origin:100% 0;
+.dialog.altText #altTextContainer #addDescription{
+      display:flex;
+      flex-direction:column;
+      align-items:stretch;
+      gap:8px;
     }
 
-.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;
-  }
+.dialog.altText #altTextContainer #addDescription .descriptionArea{
+        flex:1;
+        padding-inline:24px 10px;
+      }
+
+.dialog.altText #altTextContainer #addDescription .descriptionArea textarea{
+          width:100%;
+          min-height:75px;
+        }
 
-.altText:hover::before{
-      background-color:var(--alt-text-hover-fg-color);
+.dialog.altText #altTextContainer #buttons{
+      display:flex;
+      justify-content:flex-end;
+      align-items:flex-start;
+      gap:8px;
+      align-self:stretch;
     }
 
-.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);
-  }
+.colorPicker{
+  --hover-outline-color:#0250bb;
+  --selected-outline-color:#0060df;
+  --swatch-border-color:#cfcfd8;
+}
 
-.altText:active::before{
-      background-color:var(--alt-text-active-fg-color);
-    }
+@media (prefers-color-scheme: dark){
 
-.altText:focus-visible{
-    outline:2px solid var(--alt-text-focus-outline-color);
-    border-color:var(--alt-text-focus-border-color);
+:where(html:not(.is-light)) .colorPicker{
+    --hover-outline-color:#80ebff;
+    --selected-outline-color:#aaf2ff;
+    --swatch-border-color:#52525e;
+}
   }
 
-.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;
-  }
+:where(html.is-dark) .colorPicker{
+    --hover-outline-color:#80ebff;
+    --selected-outline-color:#aaf2ff;
+    --swatch-border-color:#52525e;
+}
 
-.altText.done::before{
-    -webkit-mask-image:var(--alt-text-done-image);
-            mask-image:var(--alt-text-done-image);
-  }
+@media screen and (forced-colors: active){
 
-.altText .tooltip{
-    display:none;
+.colorPicker{
+    --hover-outline-color:Highlight;
+    --selected-outline-color:var(--hover-outline-color);
+    --swatch-border-color:ButtonText;
+}
   }
 
-.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;
+.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;
+  }
 
-      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);
+.colorPicker button:is(:hover, .selected) > .swatch{
+    border:none;
+  }
 
-      pointer-events:none;
+.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{
+      rotate:0deg;
     }
 
-@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;
+.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{
+      rotate:270deg;
     }
-      }
 
-: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;
+.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{
+      rotate:180deg;
     }
 
-@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;
+.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{
+      rotate:90deg;
     }
-      }
-
-#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);
+.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;
+  }
 
-  --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);
+.annotationEditorLayer .highlightEditor:not(.free){
+      transform:none;
+    }
 
-  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 .highlightEditor .internal{
+      position:absolute;
+      top:0;
+      left:0;
+      width:100%;
+      height:100%;
+      pointer-events:auto;
+    }
 
-@media (prefers-color-scheme: dark){
+.annotationEditorLayer .highlightEditor.disabled .internal{
+      pointer-events:none;
+    }
 
-: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);
+.annotationEditorLayer .highlightEditor.selectedEditor .internal{
+        cursor:pointer;
+      }
 
-    --textarea-bg-color:#42414d;
+.annotationEditorLayer .highlightEditor .editToolbar{
+      --editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg);
 
-    --radio-bg-color:#2b2a33;
-    --radio-checked-bg-color:#15141a;
-    --radio-checked-border-color:#0df;
+      transform-origin:center !important;
+    }
 
-    --button-cancel-bg-color:#2b2a33;
-    --button-save-bg-color:#0df;
-    --button-save-fg-color:#15141a;
-}
-  }
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker{
+          position:relative;
+          width:auto;
+          display:flex;
+          justify-content:center;
+          align-items:center;
+          gap:4px;
+          padding:4px;
+        }
 
-: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);
+.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;
+          }
 
-    --textarea-bg-color:#42414d;
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:hover::after{
+            background-color:var(--editor-toolbar-hover-fg-color);
+          }
 
-    --radio-bg-color:#2b2a33;
-    --radio-checked-bg-color:#15141a;
-    --radio-checked-border-color:#0df;
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker:has(.dropdown:not(.hidden)){
+            background-color:var(--editor-toolbar-hover-bg-color);
+          }
 
-    --button-cancel-bg-color:#2b2a33;
-    --button-save-bg-color:#0df;
-    --button-save-fg-color:#15141a;
-}
+.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));
+          }
 
-@media screen and (forced-colors: active){
+.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;
+            }
 
-#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;
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:active, :focus-visible){
+                outline:none;
+              }
 
-    --textarea-border-color:ButtonBorder;
-    --textarea-bg-color:Field;
-    --textarea-fg-color:ButtonText;
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button > .swatch{
+                outline-offset:2px;
+              }
 
-    --radio-bg-color:ButtonFace;
-    --radio-checked-bg-color:ButtonFace;
-    --radio-border-color:ButtonText;
-    --radio-checked-border-color:ButtonText;
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button[aria-selected="true"] > .swatch{
+                outline:2px solid var(--selected-outline-color);
+              }
 
-    --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;
+.annotationEditorLayer .highlightEditor .editToolbar .buttons .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch{
+                outline:2px solid var(--hover-outline-color);
+              }
 
-    --button-save-bg-color:ButtonText;
-    --button-save-fg-color:ButtonFace;
-    --button-save-hover-bg-color:AccentColor;
-    --button-save-hover-fg-color:AccentColorText;
+.editorParamsToolbar:has(#highlightParamsToolbarContainer){
+  padding:unset;
 }
-  }
 
-#altTextDialog::backdrop{
-    -webkit-mask:url(#alttext-manager-mask);
-            mask:url(#alttext-manager-mask);
-  }
+#highlightParamsToolbarContainer{
+  height:auto;
+  padding-inline:10px;
+  padding-block:10px 16px;
+  gap:16px;
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+}
 
-#altTextDialog.positioned{
-    margin:0;
+#highlightParamsToolbarContainer .editorParamsLabel{
+    width:-moz-fit-content;
+    width:fit-content;
+    inset-inline-start:0;
   }
 
-#altTextDialog #altTextContainer{
-    width:300px;
-    height:-moz-fit-content;
-    height:fit-content;
-    display:inline-flex;
+#highlightParamsToolbarContainer .colorPicker{
+    display:flex;
     flex-direction:column;
-    align-items:flex-start;
-    gap:16px;
+    gap:8px;
   }
 
-#altTextDialog #altTextContainer *:focus-visible{
-      outline:var(--focus-ring-outline);
-      outline-offset:2px;
-    }
-
-#altTextDialog #altTextContainer .radio{
+#highlightParamsToolbarContainer .colorPicker .dropdown{
       display:flex;
-      flex-direction:column;
-      align-items:flex-start;
-      gap:4px;
+      justify-content:space-between;
+      align-items:center;
+      flex-direction:row;
+      height:auto;
     }
 
-#altTextDialog #altTextContainer .radio .radioButton{
+#highlightParamsToolbarContainer .colorPicker .dropdown button{
+        width:auto;
+        height:auto;
+        border:none;
+        cursor:pointer;
         display:flex;
-        gap:8px;
-        align-self:stretch;
+        justify-content:center;
         align-items:center;
+        background:none;
+        flex:0 0 auto;
       }
 
-#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);
+#highlightParamsToolbarContainer .colorPicker .dropdown button .swatch{
+          width:24px;
+          height:24px;
         }
 
-#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);
-          }
+#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:active, :focus-visible){
+          outline:none;
+        }
 
-#altTextDialog #altTextContainer .radio .radioLabel{
-        display:flex;
-        padding-inline-start:24px;
-        align-items:flex-start;
-        gap:10px;
-        align-self:stretch;
-      }
+#highlightParamsToolbarContainer .colorPicker .dropdown button[aria-selected="true"] > .swatch{
+          outline:2px solid var(--selected-outline-color);
+        }
 
-#altTextDialog #altTextContainer .radio .radioLabel span{
-          flex:1 0 0;
-          font-size:11px;
-          color:var(--text-secondary-color);
+#highlightParamsToolbarContainer .colorPicker .dropdown button:is(:hover, :active, :focus-visible) > .swatch{
+          outline:2px solid var(--hover-outline-color);
         }
 
-#altTextDialog #altTextContainer #overallDescription{
+#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;
-      flex-direction:column;
-      align-items:flex-start;
-      gap:4px;
+      justify-content:space-between;
+      align-items:center;
       align-self:stretch;
+
+      --example-color:#bfbfc9;
     }
 
-#altTextDialog #altTextContainer #overallDescription span{
-        align-self:stretch;
-      }
+@media (prefers-color-scheme: dark){
 
-#altTextDialog #altTextContainer #overallDescription .title{
-        font-size:13px;
-        font-style:normal;
-        font-weight:590;
+:where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
+        --example-color:#80808e;
+    }
       }
 
-#altTextDialog #altTextContainer #addDescription{
-      display:flex;
-      flex-direction:column;
-      align-items:stretch;
-      gap:8px;
+:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
+        --example-color:#80808e;
     }
 
-#altTextDialog #altTextContainer #addDescription .descriptionArea{
-        flex:1;
-        padding-inline:24px 10px;
+@media screen and (forced-colors: active){
+
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
+        --example-color:CanvasText;
+    }
       }
 
-#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);
-        }
+:is(#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker > .editorParamsSlider[disabled]){
+        opacity:0.4;
+      }
 
-#altTextDialog #altTextContainer #addDescription .descriptionArea textarea:focus{
-            outline-offset:0;
-            border-color:transparent;
-          }
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::before,
+      #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
+        content:"";
+        width:8px;
+        aspect-ratio:1;
+        display:block;
+        border-radius:100%;
+        background-color:var(--example-color);
+      }
 
-#altTextDialog #altTextContainer #addDescription .descriptionArea textarea:disabled{
-            pointer-events:none;
-            opacity:0.4;
-          }
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
+        width:24px;
+      }
 
-#altTextDialog #altTextContainer #buttons{
-      display:flex;
-      justify-content:flex-end;
-      align-items:flex-start;
-      gap:8px;
-      align-self:stretch;
+#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);
     }
 
-#altTextDialog #altTextContainer #buttons button{
-        border-radius:4px;
-        border:1px solid;
-        font:menu;
-        font-weight:600;
-        padding:4px 16px;
-        width:auto;
-        height:32px;
-      }
+@media (prefers-color-scheme: dark){
 
-#altTextDialog #altTextContainer #buttons button:hover{
-          cursor:pointer;
-          filter:var(--hover-filter);
-        }
+:where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
+        --divider-color:#8f8f9d;
+    }
+      }
 
-#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);
-        }
+:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightVisibility .divider{
+        --divider-color:#8f8f9d;
+    }
 
-#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);
-          }
+@media screen and (forced-colors: active){
 
-#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;
-        }
+#highlightParamsToolbarContainer #editorHighlightVisibility .divider{
+        --divider-color:CanvasText;
+    }
+      }
 
-#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);
-          }
+#highlightParamsToolbarContainer #editorHighlightVisibility .toggler{
+      display:flex;
+      justify-content:space-between;
+      align-items:center;
+      align-self:stretch;
+    }
 
 :root{
   --viewer-container-height:0;
@@ -2008,7 +2622,8 @@
   transform:rotate(270deg) translateX(-100%);
 }
 
-#hiddenCopyElement{
+#hiddenCopyElement,
+.hiddenCanvasElement{
   position:absolute;
   top:0;
   left:0;
@@ -2021,14 +2636,45 @@
   --scale-factor:1;
 
   padding-bottom:var(--pdfViewer-padding-bottom);
+
+  --hcm-highlight-filter:none;
+  --hcm-highlight-selected-filter:none;
 }
 
-.pdfViewer .canvasWrapper{
-  overflow:hidden;
-  width:100%;
-  height:100%;
-  z-index:1;
+@media screen and (forced-colors: active){
+
+.pdfViewer{
+    --hcm-highlight-filter:invert(100%);
 }
+  }
+
+.pdfViewer.copyAll{
+    cursor:wait;
+  }
+
+.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;
@@ -2091,24 +2737,6 @@
   margin-inline:5px;
 }
 
-.pdfViewer .page canvas{
-  margin:0;
-  display:block;
-}
-
-.pdfViewer .page canvas .structTree{
-  contain:strict;
-}
-
-.pdfViewer .page canvas[hidden]{
-  display:none;
-}
-
-.pdfViewer .page canvas[zooming]{
-  width:100%;
-  height:100%;
-}
-
 .pdfViewer .page.loadingIcon::after{
   position:absolute;
   top:0;
@@ -2208,6 +2836,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);
@@ -2387,22 +3016,20 @@ body{
   scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color);
 }
 
+body.wait::before{
+    content:"";
+    position:fixed;
+    width:100%;
+    height:100%;
+    z-index:100000;
+    cursor:wait;
+  }
+
 .hidden,
 [hidden]{
   display:none !important;
 }
 
-#viewerContainer.pdfPresentationMode:-webkit-full-screen{
-  top:0;
-  background-color:rgb(0 0 0);
-  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);
@@ -2415,18 +3042,10 @@ body{
           user-select: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;
 }
@@ -2684,6 +3303,7 @@ body{
   }
 
 .loadingInput:has(> #findInput[data-status="pending"])::after{
+    display:block;
     visibility:visible;
   }
 
@@ -2715,6 +3335,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 +3389,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 +3726,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);
@@ -3319,6 +3953,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{
   }
 
 .loadingInput:has(> #pageNumber.loading)::after{
+    display:block;
     visibility:visible;
 
     transition-property:visibility;
@@ -3328,6 +3963,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{
 .loadingInput::after{
     position:absolute;
     visibility:hidden;
+    display:none;
     top:calc(50% - 8px);
     width:16px;
     height:16px;
@@ -3508,6 +4144,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;