pdfjs-viewer-element 2.0.0 → 2.0.1

package/dist/{pdfjs-2.15.349-dist → pdfjs}/web/viewer.css

@@ -13,6 +13,18 @@
  * limitations under the License.
  */
 
+:root {
+  --highlight-bg-color: rgba(180, 0, 170, 1);
+  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
+}
+
+@media screen and (forced-colors: active) {
+  :root {
+    --highlight-bg-color: Highlight;
+    --highlight-selected-bg-color: ButtonText;
+  }
+}
+
 .textLayer {
   position: absolute;
   text-align: initial;
@@ -21,12 +33,14 @@
   right: 0;
   bottom: 0;
   overflow: hidden;
-  opacity: 0.2;
+  opacity: 0.25;
   line-height: 1;
   -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
           text-size-adjust: none;
   forced-color-adjust: none;
+  transform-origin: 0 0;
+  z-index: 2;
 }
 
 .textLayer span,
@@ -48,7 +62,7 @@
 .textLayer .highlight {
   margin: -1px;
   padding: 1px;
-  background-color: rgba(180, 0, 170, 1);
+  background-color: var(--highlight-bg-color);
   border-radius: 4px;
 }
 
@@ -69,15 +83,17 @@
 }
 
 .textLayer .highlight.selected {
-  background-color: rgba(0, 100, 0, 1);
+  background-color: var(--highlight-selected-bg-color);
 }
 
 .textLayer ::-moz-selection {
-  background: rgba(0, 0, 255, 1);
+  background: blue;
+  background: AccentColor;
 }
 
 .textLayer ::selection {
-  background: rgba(0, 0, 255, 1);
+  background: blue;
+  background: AccentColor;
 }
 
 /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
@@ -109,9 +125,22 @@
 
 :root {
   --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+  --input-focus-border-color: Highlight;
+  --input-focus-outline: 1px solid Canvas;
+  --input-unfocused-border-color: transparent;
+  --input-disabled-border-color: transparent;
+  --input-hover-border-color: black;
+  --link-outline: none;
 }
 
-@media (forced-colors: active) {
+@media screen and (forced-colors: active) {
+  :root {
+    --input-focus-border-color: CanvasText;
+    --input-unfocused-border-color: ActiveText;
+    --input-disabled-border-color: GrayText;
+    --input-hover-border-color: Highlight;
+    --link-outline: 1.5px solid LinkText;
+  }
   .annotationLayer .textWidgetAnnotation input:required,
   .annotationLayer .textWidgetAnnotation textarea:required,
   .annotationLayer .choiceWidgetAnnotation select:required,
@@ -119,6 +148,11 @@
   .annotationLayer .buttonWidgetAnnotation.radioButton input:required {
     outline: 1.5px solid selectedItem;
   }
+
+  .annotationLayer .linkAnnotation:hover {
+    -webkit-backdrop-filter: invert(100%);
+            backdrop-filter: invert(100%);
+  }
 }
 
 .annotationLayer {
@@ -127,6 +161,7 @@
   left: 0;
   pointer-events: none;
   transform-origin: 0 0;
+  z-index: 3;
 }
 
 .annotationLayer section {
@@ -137,6 +172,10 @@
   transform-origin: 0 0;
 }
 
+.annotationLayer .linkAnnotation {
+  outline: var(--link-outline);
+}
+
 .annotationLayer .linkAnnotation > a,
 .annotationLayer .buttonWidgetAnnotation.pushButton > a {
   position: absolute;
@@ -172,7 +211,7 @@
 .annotationLayer .buttonWidgetAnnotation.checkBox input,
 .annotationLayer .buttonWidgetAnnotation.radioButton input {
   background-image: var(--annotation-unfocused-field-background);
-  border: 1px solid transparent;
+  border: 2px solid var(--input-unfocused-border-color);
   box-sizing: border-box;
   font: calc(9px * var(--scale-factor)) sans-serif;
   height: 100%;
@@ -207,7 +246,7 @@
 .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
 .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
   background: none;
-  border: 1px solid transparent;
+  border: 2px solid var(--input-disabled-border-color);
   cursor: not-allowed;
 }
 
@@ -216,24 +255,39 @@
 .annotationLayer .choiceWidgetAnnotation select:hover,
 .annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
 .annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
-  border: 1px solid rgba(0, 0, 0, 1);
+  border: 2px solid var(--input-hover-border-color);
+}
+.annotationLayer .textWidgetAnnotation input:hover,
+.annotationLayer .textWidgetAnnotation textarea:hover,
+.annotationLayer .choiceWidgetAnnotation select:hover,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
+  border-radius: 2px;
 }
 
 .annotationLayer .textWidgetAnnotation input:focus,
 .annotationLayer .textWidgetAnnotation textarea:focus,
 .annotationLayer .choiceWidgetAnnotation select:focus {
   background: none;
-  border: 1px solid transparent;
+  border: 2px solid var(--input-focus-border-color);
+  border-radius: 2px;
+  outline: var(--input-focus-outline);
 }
 
-.annotationLayer .textWidgetAnnotation input :focus,
-.annotationLayer .textWidgetAnnotation textarea :focus,
-.annotationLayer .choiceWidgetAnnotation select :focus,
 .annotationLayer .buttonWidgetAnnotation.checkBox :focus,
 .annotationLayer .buttonWidgetAnnotation.radioButton :focus {
   background-image: none;
   background-color: transparent;
-  outline: auto;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
+  border: 2px solid var(--input-focus-border-color);
+  border-radius: 2px;
+  outline: var(--input-focus-outline);
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
+  border: 2px solid var(--input-focus-border-color);
+  outline: var(--input-focus-outline);
 }
 
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
@@ -306,7 +360,6 @@
 
 .annotationLayer .popup {
   position: absolute;
-  z-index: 200;
   max-width: calc(180px * var(--scale-factor));
   background-color: rgba(255, 255, 153, 1);
   box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
@@ -368,17 +421,42 @@
   height: 100%;
 }
 
+.annotationLayer .annotationTextContent {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  color: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
+}
+
+.annotationLayer .annotationTextContent span {
+  width: 100%;
+  display: inline-block;
+}
+
 
 :root {
   --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+  --xfa-focus-outline: auto;
 }
 
-@media (forced-colors: active) {
+@media screen and (forced-colors: active) {
+  :root {
+    --xfa-focus-outline: 2px solid CanvasText;
+  }
   .xfaLayer *:required {
     outline: 1.5px solid selectedItem;
   }
 }
 
+.xfaLayer {
+  background-color: transparent;
+}
+
 .xfaLayer .highlight {
   margin: -1px;
   padding: 1px;
@@ -406,14 +484,6 @@
   background-color: rgba(203, 223, 203, 1);
 }
 
-.xfaLayer ::-moz-selection {
-  background: rgba(0, 0, 255, 1);
-}
-
-.xfaLayer ::selection {
-  background: rgba(0, 0, 255, 1);
-}
-
 .xfaPage {
   overflow: hidden;
   position: relative;
@@ -556,13 +626,13 @@
 .xfaSelect:focus {
   background-image: none;
   background-color: transparent;
-  outline: auto;
+  outline: var(--xfa-focus-outline);
   outline-offset: -1px;
 }
 
 .xfaCheckbox:focus,
 .xfaRadio:focus {
-  outline: auto;
+  outline: var(--xfa-focus-outline);
 }
 
 .xfaTextfield,
@@ -575,6 +645,10 @@
   background-image: var(--xfa-unfocused-field-background);
 }
 
+.xfaSelect {
+  padding-inline: 2px;
+}
+
 .xfaTop > .xfaTextfield,
 .xfaTop > .xfaSelect,
 .xfaBottom > .xfaTextfield,
@@ -707,14 +781,22 @@
 
 
 :root {
-  --focus-outline: solid 2px red;
+  --focus-outline: solid 2px blue;
   --hover-outline: dashed 2px blue;
   --freetext-line-height: 1.35;
   --freetext-padding: 2px;
-  --editorInk-editing-cursor: url(images/toolbarButton-editorInk.svg) 0 16;
+  --editorFreeText-editing-cursor: text;
+  --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 1.1dppx) {
+  :root {
+    --editorFreeText-editing-cursor: url(images/cursor-editorFreeText.svg) 0 16,
+      text;
+  }
 }
 
-@media (forced-colors: active) {
+@media screen and (forced-colors: active) {
   :root {
     --focus-outline: solid 3px ButtonText;
     --hover-outline: dashed 3px ButtonText;
@@ -738,6 +820,16 @@
   left: 0;
   font-size: calc(100px * var(--scale-factor));
   transform-origin: 0 0;
+  cursor: auto;
+  z-index: 4;
+}
+
+.annotationEditorLayer.freeTextEditing {
+  cursor: var(--editorFreeText-editing-cursor);
+}
+
+.annotationEditorLayer.inkEditing {
+  cursor: var(--editorInk-editing-cursor);
 }
 
 .annotationEditorLayer .selectedEditor {
@@ -756,6 +848,7 @@
   z-index: 1;
   transform-origin: 0 0;
   touch-action: none;
+  cursor: auto;
 }
 
 .annotationEditorLayer .freeTextEditor .internal {
@@ -820,7 +913,7 @@
 
 .annotationEditorLayer .inkEditor.editing {
   resize: none;
-  cursor: var(--editorInk-editing-cursor), pointer;
+  cursor: inherit;
 }
 
 .annotationEditorLayer .inkEditor .inkEditorCanvas {
@@ -837,9 +930,8 @@
   --pdfViewer-padding-bottom: 0;
   --page-margin: 1px auto -8px;
   --page-border: 9px solid transparent;
-  --page-border-image: url(images/shadow.png) 9 9 repeat;
   --spreadHorizontalWrapped-margin-LR: -3.5px;
-  --scale-factor: 1;
+  --loading-icon-delay: 400ms;
 }
 
 @media screen and (forced-colors: active) {
@@ -847,7 +939,6 @@
     --pdfViewer-padding-bottom: 9px;
     --page-margin: 8px auto -1px;
     --page-border: 1px solid CanvasText;
-    --page-border-image: none;
     --spreadHorizontalWrapped-margin-LR: 3.5px;
   }
 }
@@ -863,11 +954,18 @@
 }
 
 .pdfViewer {
+  /* Define this variable here and not in :root to avoid to reflow all the UI
+     when scaling (see #15929). */
+  --scale-factor: 1;
+
   padding-bottom: var(--pdfViewer-padding-bottom);
 }
 
 .pdfViewer .canvasWrapper {
   overflow: hidden;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
 }
 
 .pdfViewer .page {
@@ -878,8 +976,6 @@
   position: relative;
   overflow: visible;
   border: var(--page-border);
-  -o-border-image: var(--page-border-image);
-     border-image: var(--page-border-image);
   background-clip: content-box;
   background-color: rgba(255, 255, 255, 1);
 }
@@ -895,15 +991,6 @@
   border: none;
 }
 
-.pdfViewer.singlePageView {
-  display: inline-block;
-}
-
-.pdfViewer.singlePageView .page {
-  margin: 0;
-  border: none;
-}
-
 .pdfViewer.scrollHorizontal,
 .pdfViewer.scrollWrapped,
 .spread {
@@ -953,21 +1040,43 @@
   display: block;
 }
 
+.pdfViewer .page canvas .structTree {
+  contain: strict;
+}
+
 .pdfViewer .page canvas[hidden] {
   display: none;
 }
 
-.pdfViewer .page .loadingIcon {
+.pdfViewer .page canvas[zooming] {
+  width: 100%;
+  height: 100%;
+}
+
+.pdfViewer .page.loadingIcon:after {
   position: absolute;
-  display: block;
-  left: 0;
   top: 0;
-  right: 0;
-  bottom: 0;
+  left: 0;
+  content: "";
+  width: 100%;
+  height: 100%;
   background: url("images/loading-icon.gif") center no-repeat;
+  display: none;
+  /* Using a delay with background-image doesn't work,
+     consequently we use the display. */
+  transition-property: display;
+  transition-delay: var(--loading-icon-delay);
+  z-index: 5;
+  contain: strict;
 }
-.pdfViewer .page .loadingIcon.notVisible {
-  background: none;
+
+.pdfViewer .page.loading:after {
+  display: block;
+}
+
+.pdfViewer .page:not(.loading):after {
+  transition-property: none;
+  display: none;
 }
 
 .pdfViewer.enablePermissions .textLayer span {
@@ -992,37 +1101,42 @@
 
 :root {
   --dir-factor: 1;
+  --inline-start: left;
+  --inline-end: right;
+
   --sidebar-width: 200px;
   --sidebar-transition-duration: 200ms;
   --sidebar-transition-timing-function: ease;
-  --scale-select-container-width: 140px;
-  --scale-select-overflow: 22px;
 
   --toolbar-icon-opacity: 0.7;
   --doorhanger-icon-opacity: 0.9;
 
   --main-color: rgba(12, 12, 13, 1);
-  --body-bg-color: rgba(237, 237, 240, 1);
-  --errorWrapper-bg-color: rgba(255, 110, 110, 1);
-  --progressBar-percent: 0%;
-  --progressBar-end-offset: 0;
+  --body-bg-color: rgba(212, 212, 215, 1);
   --progressBar-color: rgba(10, 132, 255, 1);
-  --progressBar-indeterminate-bg-color: rgba(221, 221, 222, 1);
-  --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1);
+  --progressBar-bg-color: rgba(221, 221, 222, 1);
+  --progressBar-blend-color: rgba(116, 177, 239, 1);
   --scrollbar-color: auto;
   --scrollbar-bg-color: auto;
   --toolbar-icon-bg-color: rgba(0, 0, 0, 1);
   --toolbar-icon-hover-bg-color: rgba(0, 0, 0, 1);
 
-  --sidebar-narrow-bg-color: rgba(237, 237, 240, 0.9);
+  --sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9);
   --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
   --toolbar-bg-color: rgba(249, 249, 250, 1);
-  --toolbar-border-color: rgba(204, 204, 204, 1);
+  --toolbar-border-color: rgba(184, 184, 184, 1);
+  --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
+  --toolbar-border-bottom: none;
+  --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0
+      rgba(0, 0, 0, 0.25),
+    0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
+  --toolbarSidebar-border-bottom: none;
   --button-hover-color: rgba(221, 222, 223, 1);
   --toggled-btn-color: rgba(0, 0, 0, 1);
   --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
   --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
   --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
+  --dropdown-btn-border: none;
   --separator-color: rgba(0, 0, 0, 0.3);
   --field-color: rgba(6, 6, 6, 1);
   --field-bg-color: rgba(255, 255, 255, 1);
@@ -1037,14 +1151,13 @@
   --doorhanger-hover-color: rgba(12, 12, 13, 1);
   --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
   --doorhanger-separator-color: rgba(222, 222, 222, 1);
-  --dialog-button-border: 0 none;
+  --dialog-button-border: none;
   --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
   --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
 
   --loading-icon: url(images/loading.svg);
   --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
   --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
-  --toolbarButton-editorNone-icon: url(images/toolbarButton-editorNone.svg);
   --toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg);
   --toolbarButton-editorInk-icon: url(images/toolbarButton-editorInk.svg);
   --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
@@ -1085,16 +1198,17 @@
 
 [dir="rtl"]:root {
   --dir-factor: -1;
+  --inline-start: right;
+  --inline-end: left;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --main-color: rgba(249, 249, 250, 1);
     --body-bg-color: rgba(42, 42, 46, 1);
-    --errorWrapper-bg-color: rgba(169, 14, 14, 1);
     --progressBar-color: rgba(0, 96, 223, 1);
-    --progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1);
-    --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1);
+    --progressBar-bg-color: rgba(40, 40, 43, 1);
+    --progressBar-blend-color: rgba(20, 68, 133, 1);
     --scrollbar-color: rgba(121, 121, 123, 1);
     --scrollbar-bg-color: rgba(35, 35, 39, 1);
     --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
@@ -1140,6 +1254,9 @@
     --toolbar-icon-opacity: 1;
     --toolbar-icon-bg-color: ButtonText;
     --toolbar-icon-hover-bg-color: ButtonFace;
+    --toolbar-border-color: CanvasText;
+    --toolbar-border-bottom: 1px solid var(--toolbar-border-color);
+    --toolbar-box-shadow: none;
     --toggled-btn-color: HighlightText;
     --toggled-btn-bg-color: LinkText;
     --doorhanger-hover-color: ButtonFace;
@@ -1148,7 +1265,19 @@
     --dialog-button-border: 1px solid Highlight;
     --dialog-button-hover-bg-color: Highlight;
     --dialog-button-hover-color: ButtonFace;
+    --dropdown-btn-border: 1px solid ButtonText;
     --field-border-color: ButtonText;
+    --main-color: CanvasText;
+    --separator-color: GrayText;
+    --doorhanger-separator-color: GrayText;
+    --toolbarSidebar-box-shadow: none;
+    --toolbarSidebar-border-bottom: 1px solid var(--toolbar-border-color);
+  }
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :root {
+    --sidebar-transition-duration: 0;
   }
 }
 
@@ -1165,14 +1294,6 @@ body {
 
 body {
   background-color: var(--body-bg-color);
-}
-
-body,
-input,
-button,
-select {
-  font: message-box;
-  outline: none;
   scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
 }
 
@@ -1204,12 +1325,12 @@ select {
           user-select: none;
 }
 
-.pdfPresentationMode:-webkit-full-screen a:not(.internalLink) {
-  display: none;
+.pdfPresentationMode:-webkit-full-screen section:not([data-internal-link]) {
+  pointer-events: none;
 }
 
-.pdfPresentationMode:fullscreen a:not(.internalLink) {
-  display: none;
+.pdfPresentationMode:fullscreen section:not([data-internal-link]) {
+  pointer-events: none;
 }
 
 .pdfPresentationMode:-webkit-full-screen .textLayer span {
@@ -1231,30 +1352,6 @@ select {
   position: relative;
 }
 
-[dir="ltr"] #sidebarContainer {
-  left: calc(-1 * var(--sidebar-width));
-}
-
-[dir="rtl"] #sidebarContainer {
-  right: calc(-1 * var(--sidebar-width));
-}
-
-[dir="ltr"] #sidebarContainer {
-  border-right: var(--doorhanger-border-color-whcm);
-}
-
-[dir="rtl"] #sidebarContainer {
-  border-left: var(--doorhanger-border-color-whcm);
-}
-
-[dir="ltr"] #sidebarContainer {
-  transition-property: left;
-}
-
-[dir="rtl"] #sidebarContainer {
-  transition-property: right;
-}
-
 #sidebarContainer {
   position: absolute;
   top: 32px;
@@ -1263,6 +1360,7 @@ select {
   width: var(--sidebar-width);
   visibility: hidden;
   z-index: 100;
+  font: message-box;
   border-top: 1px solid rgba(51, 51, 51, 1);
   -webkit-border-end: var(--doorhanger-border-color-whcm);
           border-inline-end: var(--doorhanger-border-color-whcm);
@@ -1275,12 +1373,6 @@ select {
 #outerContainer.sidebarOpen #sidebarContainer {
   visibility: visible;
 }
-[dir="ltr"] #outerContainer.sidebarOpen #sidebarContainer {
-  left: 0;
-}
-[dir="rtl"] #outerContainer.sidebarOpen #sidebarContainer {
-  right: 0;
-}
 #outerContainer.sidebarOpen #sidebarContainer {
   inset-inline-start: 0;
 }
@@ -1294,14 +1386,6 @@ select {
   min-width: 350px;
 }
 
-[dir="ltr"] #sidebarContent {
-  left: 0;
-}
-
-[dir="rtl"] #sidebarContent {
-  right: 0;
-}
-
 #sidebarContent {
   top: 32px;
   bottom: 0;
@@ -1309,7 +1393,6 @@ select {
   overflow: auto;
   position: absolute;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.1);
   box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25);
 }
 
@@ -1327,22 +1410,6 @@ select {
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
 
-[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
-  left: var(--sidebar-width);
-}
-
-[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
-  right: var(--sidebar-width);
-}
-
-[dir="ltr"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
-  transition-property: left;
-}
-
-[dir="rtl"] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
-  transition-property: right;
-}
-
 #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
   inset-inline-start: var(--sidebar-width);
   transition-property: inset-inline-start;
@@ -1354,6 +1421,27 @@ select {
   right: 0;
   z-index: 9999;
   cursor: default;
+  font: message-box;
+}
+
+.toolbar input,
+.toolbar button,
+.toolbar select,
+.secondaryToolbar input,
+.secondaryToolbar button,
+.secondaryToolbar a,
+.secondaryToolbar select,
+.editorParamsToolbar input,
+.editorParamsToolbar button,
+.editorParamsToolbar select,
+.findbar input,
+.findbar button,
+.findbar select,
+#sidebarContainer input,
+#sidebarContainer button,
+#sidebarContainer select {
+  outline: none;
+  font: message-box;
 }
 
 #toolbarContainer {
@@ -1364,16 +1452,8 @@ select {
   width: 100%;
   height: 32px;
   background-color: var(--sidebar-toolbar-bg-color);
-  box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25),
-    0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
-}
-
-[dir="ltr"] #sidebarResizer {
-  right: -6px;
-}
-
-[dir="rtl"] #sidebarResizer {
-  left: -6px;
+  box-shadow: var(--toolbarSidebar-box-shadow);
+  border-bottom: var(--toolbarSidebar-border-bottom);
 }
 
 #sidebarResizer {
@@ -1393,50 +1473,30 @@ select {
   position: relative;
   height: 32px;
   background-color: var(--toolbar-bg-color);
-  box-shadow: 0 1px 0 var(--toolbar-border-color);
+  box-shadow: var(--toolbar-box-shadow);
+  border-bottom: var(--toolbar-border-bottom);
 }
 
 #toolbarViewer {
   height: 32px;
 }
 
-[dir="ltr"] #loadingBar {
-  left: 0;
-  right: var(--progressBar-end-offset);
-}
-
-[dir="rtl"] #loadingBar {
-  right: 0;
-  left: var(--progressBar-end-offset);
-}
-
-[dir="ltr"] #loadingBar {
-  transition-property: left;
-}
-
-[dir="rtl"] #loadingBar {
-  transition-property: right;
-}
-
 #loadingBar {
+  /* Define these variables here, and not in :root, to avoid reflowing the
+     entire viewer when updating progress (see issue 15958). */
+  --progressBar-percent: 0%;
+  --progressBar-end-offset: 0;
+
   position: absolute;
   inset-inline: 0 var(--progressBar-end-offset);
   height: 4px;
-  background-color: var(--body-bg-color);
+  background-color: var(--progressBar-bg-color);
   border-bottom: 1px solid var(--toolbar-border-color);
   transition-property: inset-inline-start;
   transition-duration: var(--sidebar-transition-duration);
   transition-timing-function: var(--sidebar-transition-timing-function);
 }
 
-[dir="ltr"] #outerContainer.sidebarOpen #loadingBar {
-  left: var(--sidebar-width);
-}
-
-[dir="rtl"] #outerContainer.sidebarOpen #loadingBar {
-  right: var(--sidebar-width);
-}
-
 #outerContainer.sidebarOpen #loadingBar {
   inset-inline-start: var(--sidebar-width);
 }
@@ -1454,15 +1514,6 @@ select {
   transition: transform 200ms;
 }
 
-@-webkit-keyframes progressIndeterminate {
-  0% {
-    transform: translateX(-142px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
 @keyframes progressIndeterminate {
   0% {
     transform: translateX(-142px);
@@ -1474,7 +1525,7 @@ select {
 
 #loadingBar.indeterminate .progress {
   transform: none;
-  background-color: var(--progressBar-indeterminate-bg-color);
+  background-color: var(--progressBar-bg-color);
   transition: none;
 }
 
@@ -1486,15 +1537,14 @@ select {
   width: calc(100% + 150px);
   background: repeating-linear-gradient(
     135deg,
-    var(--progressBar-indeterminate-blend-color) 0,
-    var(--progressBar-indeterminate-bg-color) 5px,
-    var(--progressBar-indeterminate-bg-color) 45px,
+    var(--progressBar-blend-color) 0,
+    var(--progressBar-bg-color) 5px,
+    var(--progressBar-bg-color) 45px,
     var(--progressBar-color) 55px,
     var(--progressBar-color) 95px,
-    var(--progressBar-indeterminate-blend-color) 100px
+    var(--progressBar-blend-color) 100px
   );
-  -webkit-animation: progressIndeterminate 1s linear infinite;
-          animation: progressIndeterminate 1s linear infinite;
+  animation: progressIndeterminate 1s linear infinite;
 }
 
 #outerContainer.sidebarResizing #sidebarContainer,
@@ -1509,24 +1559,17 @@ select {
 .editorParamsToolbar {
   top: 32px;
   position: absolute;
-  z-index: 10000;
+  z-index: 30000;
   height: auto;
   padding: 0 4px;
   margin: 4px 2px;
+  font: message-box;
   font-size: 12px;
   line-height: 14px;
   text-align: left;
   cursor: default;
 }
 
-[dir="ltr"] .findbar {
-  left: 64px;
-}
-
-[dir="rtl"] .findbar {
-  right: 64px;
-}
-
 .findbar {
   inset-inline-start: 64px;
   min-width: 300px;
@@ -1535,12 +1578,6 @@ select {
 .findbar > div {
   height: 32px;
 }
-[dir="ltr"] .findbar > div#findbarInputContainer {
-  margin-right: 4px;
-}
-[dir="rtl"] .findbar > div#findbarInputContainer {
-  margin-left: 4px;
-}
 .findbar > div#findbarInputContainer {
   -webkit-margin-end: 4px;
           margin-inline-end: 4px;
@@ -1592,22 +1629,11 @@ select {
   background-color: rgba(255, 102, 102, 1);
 }
 
-[dir="ltr"] .secondaryToolbar,[dir="ltr"] 
-.editorParamsToolbar {
-  right: 4px;
-}
-
-[dir="rtl"] .secondaryToolbar,[dir="rtl"] 
-.editorParamsToolbar {
-  left: 4px;
-}
-
 .secondaryToolbar,
 .editorParamsToolbar {
   padding: 6px 0 10px;
   inset-inline-end: 4px;
   height: auto;
-  z-index: 30000;
   background-color: var(--doorhanger-bg-color);
 }
 
@@ -1621,19 +1647,9 @@ select {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-left: 10px;
-  padding-right: 10px;
   padding-inline: 10px;
 }
 
-[dir="ltr"] .editorParamsToolbarContainer .editorParamsLabel {
-  padding-right: 10px;
-}
-
-[dir="rtl"] .editorParamsToolbarContainer .editorParamsLabel {
-  padding-left: 10px;
-}
-
 .editorParamsToolbarContainer .editorParamsLabel {
   -webkit-padding-end: 10px;
           padding-inline-end: 10px;
@@ -1675,27 +1691,11 @@ select {
   margin-bottom: -4px;
 }
 
-[dir="ltr"] #editorInkParamsToolbar {
-  right: 40px;
-}
-
-[dir="rtl"] #editorInkParamsToolbar {
-  left: 40px;
-}
-
 #editorInkParamsToolbar {
   inset-inline-end: 40px;
   background-color: var(--toolbar-bg-color);
 }
 
-[dir="ltr"] #editorFreeTextParamsToolbar {
-  right: 68px;
-}
-
-[dir="rtl"] #editorFreeTextParamsToolbar {
-  left: 68px;
-}
-
 #editorFreeTextParamsToolbar {
   inset-inline-end: 68px;
   background-color: var(--toolbar-bg-color);
@@ -1721,36 +1721,12 @@ select {
   pointer-events: none;
   opacity: var(--doorhanger-triangle-opacity-whcm);
 }
-[dir="ltr"] .doorHanger:after {
-  left: 10px;
-}
-[dir="rtl"] .doorHanger:after {
-  right: 10px;
-}
-[dir="ltr"] .doorHanger:after {
-  margin-left: -8px;
-}
-[dir="rtl"] .doorHanger:after {
-  margin-right: -8px;
-}
 .doorHanger:after {
   inset-inline-start: 10px;
   -webkit-margin-start: -8px;
           margin-inline-start: -8px;
   border-bottom-color: var(--toolbar-bg-color);
 }
-[dir="ltr"] .doorHangerRight:after {
-  right: 10px;
-}
-[dir="rtl"] .doorHangerRight:after {
-  left: 10px;
-}
-[dir="ltr"] .doorHangerRight:after {
-  margin-right: -8px;
-}
-[dir="rtl"] .doorHangerRight:after {
-  margin-left: -8px;
-}
 .doorHangerRight:after {
   inset-inline-end: 10px;
   -webkit-margin-end: -8px;
@@ -1762,35 +1738,11 @@ select {
   border-bottom-color: var(--doorhanger-border-color);
   border-width: 9px;
 }
-[dir="ltr"] .doorHanger:before {
-  left: 10px;
-}
-[dir="rtl"] .doorHanger:before {
-  right: 10px;
-}
-[dir="ltr"] .doorHanger:before {
-  margin-left: -9px;
-}
-[dir="rtl"] .doorHanger:before {
-  margin-right: -9px;
-}
 .doorHanger:before {
   inset-inline-start: 10px;
   -webkit-margin-start: -9px;
           margin-inline-start: -9px;
 }
-[dir="ltr"] .doorHangerRight:before {
-  right: 10px;
-}
-[dir="rtl"] .doorHangerRight:before {
-  left: 10px;
-}
-[dir="ltr"] .doorHangerRight:before {
-  margin-right: -9px;
-}
-[dir="rtl"] .doorHangerRight:before {
-  margin-left: -9px;
-}
 .doorHangerRight:before {
   inset-inline-end: 10px;
   -webkit-margin-end: -9px;
@@ -1820,49 +1772,13 @@ select {
   transform: translateX(-50%);
 }
 
-[dir="ltr"] #toolbarViewerLeft,[dir="ltr"] 
-#toolbarSidebarLeft {
-  float: left;
-}
-
-[dir="rtl"] #toolbarViewerLeft,[dir="rtl"] 
-#toolbarSidebarLeft {
-  float: right;
-}
-
 #toolbarViewerLeft,
 #toolbarSidebarLeft {
-  float: inline-start;
-}
-[dir="ltr"] #toolbarViewerRight,[dir="ltr"] 
-#toolbarSidebarRight {
-  float: right;
-}
-[dir="rtl"] #toolbarViewerRight,[dir="rtl"] 
-#toolbarSidebarRight {
-  float: left;
+  float: var(--inline-start);
 }
 #toolbarViewerRight,
 #toolbarSidebarRight {
-  float: inline-end;
-}
-
-[dir="ltr"] #toolbarViewerLeft > *,[dir="ltr"] 
-#toolbarViewerMiddle > *,[dir="ltr"] 
-#toolbarViewerRight > *,[dir="ltr"] 
-#toolbarSidebarLeft *,[dir="ltr"] 
-#toolbarSidebarRight *,[dir="ltr"] 
-.findbar * {
-  float: left;
-}
-
-[dir="rtl"] #toolbarViewerLeft > *,[dir="rtl"] 
-#toolbarViewerMiddle > *,[dir="rtl"] 
-#toolbarViewerRight > *,[dir="rtl"] 
-#toolbarSidebarLeft *,[dir="rtl"] 
-#toolbarSidebarRight *,[dir="rtl"] 
-.findbar * {
-  float: right;
+  float: var(--inline-end);
 }
 
 #toolbarViewerLeft > *,
@@ -1872,37 +1788,17 @@ select {
 #toolbarSidebarRight *,
 .findbar * {
   position: relative;
-  float: inline-start;
-}
-
-[dir="ltr"] #toolbarViewerLeft {
-  padding-left: 1px;
-}
-
-[dir="rtl"] #toolbarViewerLeft {
-  padding-right: 1px;
+  float: var(--inline-start);
 }
 
 #toolbarViewerLeft {
   -webkit-padding-start: 1px;
           padding-inline-start: 1px;
 }
-[dir="ltr"] #toolbarViewerRight {
-  padding-right: 1px;
-}
-[dir="rtl"] #toolbarViewerRight {
-  padding-left: 1px;
-}
 #toolbarViewerRight {
   -webkit-padding-end: 1px;
           padding-inline-end: 1px;
 }
-[dir="ltr"] #toolbarSidebarRight {
-  padding-right: 2px;
-}
-[dir="rtl"] #toolbarSidebarRight {
-  padding-left: 2px;
-}
 #toolbarSidebarRight {
   -webkit-padding-end: 2px;
           padding-inline-end: 2px;
@@ -1912,23 +1808,18 @@ select {
   margin: 2px;
   display: inline-block;
 }
-[dir="ltr"] .splitToolbarButton > .toolbarButton {
-  float: left;
-}
-[dir="rtl"] .splitToolbarButton > .toolbarButton {
-  float: right;
-}
 .splitToolbarButton > .toolbarButton {
-  float: inline-start;
+  float: var(--inline-start);
 }
 
 .toolbarButton,
 .secondaryToolbarButton,
 .dialogButton {
-  border: 0 none;
+  border: none;
   background: none;
   width: 28px;
   height: 28px;
+  outline: none;
 }
 
 .dialogButton:hover,
@@ -1963,27 +1854,13 @@ select {
   position: relative;
   margin: 0;
 }
-[dir="ltr"] #toolbarSidebar .splitToolbarButton > .toolbarButton {
-  margin-right: 2px;
-}
-[dir="rtl"] #toolbarSidebar .splitToolbarButton > .toolbarButton {
-  margin-left: 2px;
-}
 #toolbarSidebar .splitToolbarButton > .toolbarButton {
   -webkit-margin-end: 2px;
           margin-inline-end: 2px;
 }
 
-[dir="ltr"] .splitToolbarButtonSeparator {
-  float: left;
-}
-
-[dir="rtl"] .splitToolbarButtonSeparator {
-  float: right;
-}
-
 .splitToolbarButtonSeparator {
-  float: inline-start;
+  float: var(--inline-start);
   margin: 4px 0;
   width: 1px;
   height: 20px;
@@ -2038,44 +1915,35 @@ select {
 }
 
 .dropdownToolbarButton {
-  width: var(--scale-select-container-width);
+  /* Define this variable here, and not in :root, to avoid reflowing the
+     entire viewer when updating the width. */
+  --scale-select-width: 140px;
+
+  width: var(--scale-select-width);
   padding: 0;
-  overflow: hidden;
   background-color: var(--dropdown-btn-bg-color);
-}
-[dir="ltr"] .dropdownToolbarButton::after {
-  right: 7px;
-}
-[dir="rtl"] .dropdownToolbarButton::after {
-  left: 7px;
+  border: var(--dropdown-btn-border);
 }
 .dropdownToolbarButton::after {
   top: 6px;
-  inset-inline-end: 7px;
+  inset-inline-end: 6px;
   pointer-events: none;
   -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
           mask-image: var(--toolbarButton-menuArrow-icon);
 }
 
-[dir="ltr"] .dropdownToolbarButton > select {
-  padding-left: 4px;
-}
-
-[dir="rtl"] .dropdownToolbarButton > select {
-  padding-right: 4px;
-}
-
 .dropdownToolbarButton > select {
-  width: calc(
-    var(--scale-select-container-width) + var(--scale-select-overflow)
-  );
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: inherit;
   height: 28px;
   font-size: 12px;
   color: var(--main-color);
   margin: 0;
   padding: 1px 0 2px;
-  -webkit-padding-start: 4px;
-          padding-inline-start: 4px;
+  -webkit-padding-start: 6px;
+          padding-inline-start: 6px;
   border: none;
   background-color: var(--dropdown-btn-bg-color);
 }
@@ -2131,14 +1999,6 @@ select {
   background-color: var(--toolbar-icon-hover-bg-color);
 }
 
-[dir="ltr"] .secondaryToolbarButton::before {
-  left: 12px;
-}
-
-[dir="rtl"] .secondaryToolbarButton::before {
-  right: 12px;
-}
-
 .secondaryToolbarButton::before {
   opacity: var(--doorhanger-icon-opacity);
   top: 5px;
@@ -2187,17 +2047,11 @@ select {
           mask-image: var(--toolbarButton-zoomIn-icon);
 }
 
-#presentationMode::before,
-#secondaryPresentationMode::before {
+#presentationMode::before {
   -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
           mask-image: var(--toolbarButton-presentationMode-icon);
 }
 
-#editorNone::before {
-  -webkit-mask-image: var(--toolbarButton-editorNone-icon);
-          mask-image: var(--toolbarButton-editorNone-icon);
-}
-
 #editorFreeText::before {
   -webkit-mask-image: var(--toolbarButton-editorFreeText-icon);
           mask-image: var(--toolbarButton-editorFreeText-icon);
@@ -2227,7 +2081,7 @@ select {
 }
 
 a.secondaryToolbarButton {
-  padding-top: 6px;
+  padding-top: 5px;
   text-decoration: none;
 }
 a.toolbarButton[href="#"],
@@ -2236,8 +2090,7 @@ a.secondaryToolbarButton[href="#"] {
   pointer-events: none;
 }
 
-#viewBookmark::before,
-#secondaryViewBookmark::before {
+#viewBookmark::before {
   -webkit-mask-image: var(--toolbarButton-bookmark-icon);
           mask-image: var(--toolbarButton-bookmark-icon);
 }
@@ -2274,19 +2127,11 @@ a.secondaryToolbarButton[href="#"] {
           mask-image: var(--toolbarButton-search-icon);
 }
 
-[dir="ltr"] .pdfSidebarNotification::after {
-  left: 17px;
-}
-
-[dir="rtl"] .pdfSidebarNotification::after {
-  right: 17px;
-}
-
 .pdfSidebarNotification::after {
   position: absolute;
   display: inline-block;
-  top: 1px;
-  inset-inline-start: 17px;
+  top: 2px;
+  inset-inline-end: 2px;
   /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
   content: "";
   background-color: rgba(112, 219, 85, 1);
@@ -2295,22 +2140,6 @@ a.secondaryToolbarButton[href="#"] {
   border-radius: 50%;
 }
 
-[dir="ltr"] .secondaryToolbarButton {
-  padding-left: 36px;
-}
-
-[dir="rtl"] .secondaryToolbarButton {
-  padding-right: 36px;
-}
-
-[dir="ltr"] .secondaryToolbarButton {
-  text-align: left;
-}
-
-[dir="rtl"] .secondaryToolbarButton {
-  text-align: right;
-}
-
 .secondaryToolbarButton {
   position: relative;
   margin: 0;
@@ -2325,12 +2154,7 @@ a.secondaryToolbarButton[href="#"] {
   white-space: normal;
   border-radius: 0;
   box-sizing: border-box;
-}
-[dir="ltr"] .secondaryToolbarButton > span {
-  padding-right: 4px;
-}
-[dir="rtl"] .secondaryToolbarButton > span {
-  padding-left: 4px;
+  display: inline-block;
 }
 .secondaryToolbarButton > span {
   -webkit-padding-end: 4px;
@@ -2433,15 +2257,7 @@ a.secondaryToolbarButton[href="#"] {
   color: var(--field-color);
   font-size: 12px;
   line-height: 16px;
-  outline-style: none;
-}
-
-[dir="ltr"] .toolbarField[type="checkbox"] {
-  margin-left: 7px;
-}
-
-[dir="rtl"] .toolbarField[type="checkbox"] {
-  margin-right: 7px;
+  outline: none;
 }
 
 .toolbarField[type="checkbox"] {
@@ -2457,11 +2273,18 @@ a.secondaryToolbarButton[href="#"] {
   -moz-appearance: textfield; /* hides the spinner in moz */
   text-align: right;
   width: 40px;
+  background-size: 0 0;
+  transition-property: none;
 }
 #pageNumber.visiblePageIsLoading {
   background-image: var(--loading-icon);
   background-repeat: no-repeat;
   background-position: 3px;
+  background-size: 16px 16px;
+  /* Using a delay with background-image doesn't work,
+     consequently we use background-size. */
+  transition-property: background-size;
+  transition-delay: var(--loading-icon-delay);
 }
 #pageNumber::-webkit-inner-spin-button {
   -webkit-appearance: none;
@@ -2486,14 +2309,6 @@ a.secondaryToolbarButton[href="#"] {
   cursor: default;
 }
 
-[dir="ltr"] #numPages.toolbarLabel {
-  padding-left: 3px;
-}
-
-[dir="rtl"] #numPages.toolbarLabel {
-  padding-right: 3px;
-}
-
 #numPages.toolbarLabel {
   -webkit-padding-start: 3px;
           padding-inline-start: 3px;
@@ -2523,16 +2338,8 @@ a.secondaryToolbarButton[href="#"] {
   outline: 0;
 }
 
-[dir="ltr"] .thumbnail {
-  float: left;
-}
-
-[dir="rtl"] .thumbnail {
-  float: right;
-}
-
 .thumbnail {
-  float: inline-start;
+  float: var(--inline-start);
   margin: 0 10px 5px;
 }
 
@@ -2584,30 +2391,12 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   color: rgba(255, 255, 255, 1);
 }
 
-[dir="ltr"] .treeWithDeepNesting > .treeItem,[dir="ltr"] 
-.treeItem > .treeItems {
-  margin-left: 20px;
-}
-
-[dir="rtl"] .treeWithDeepNesting > .treeItem,[dir="rtl"] 
-.treeItem > .treeItems {
-  margin-right: 20px;
-}
-
 .treeWithDeepNesting > .treeItem,
 .treeItem > .treeItems {
   -webkit-margin-start: 20px;
           margin-inline-start: 20px;
 }
 
-[dir="ltr"] .treeItem > a {
-  padding-left: 4px;
-}
-
-[dir="rtl"] .treeItem > a {
-  padding-right: 4px;
-}
-
 .treeItem > a {
   text-decoration: none;
   display: inline-block;
@@ -2632,48 +2421,22 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 #layersView .treeItem > a * {
   cursor: pointer;
 }
-[dir="ltr"] #layersView .treeItem > a > label {
-  padding-left: 4px;
-}
-[dir="rtl"] #layersView .treeItem > a > label {
-  padding-right: 4px;
-}
 #layersView .treeItem > a > label {
   -webkit-padding-start: 4px;
           padding-inline-start: 4px;
 }
-[dir="ltr"] #layersView .treeItem > a > label > input {
-  float: left;
-}
-[dir="rtl"] #layersView .treeItem > a > label > input {
-  float: right;
-}
 #layersView .treeItem > a > label > input {
-  float: inline-start;
+  float: var(--inline-start);
   margin-top: 1px;
 }
 
-[dir="ltr"] .treeItemToggler {
-  float: left;
-}
-
-[dir="rtl"] .treeItemToggler {
-  float: right;
-}
-
 .treeItemToggler {
   position: relative;
-  float: inline-start;
+  float: var(--inline-start);
   height: 0;
   width: 0;
   color: rgba(255, 255, 255, 0.5);
 }
-[dir="ltr"] .treeItemToggler::before {
-  right: 4px;
-}
-[dir="rtl"] .treeItemToggler::before {
-  left: 4px;
-}
 .treeItemToggler::before {
   inset-inline-end: 4px;
   -webkit-mask-image: var(--treeitem-expanded-icon);
@@ -2703,45 +2466,6 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   color: var(--treeitem-hover-color);
 }
 
-/* TODO: file FF bug to support ::-moz-selection:window-inactive
-   so we can override the opaque grey background when the window is inactive;
-   see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
-::-moz-selection {
-  background: rgba(0, 0, 255, 0.3);
-}
-::selection {
-  background: rgba(0, 0, 255, 0.3);
-}
-
-#errorWrapper {
-  background-color: var(--errorWrapper-bg-color);
-  color: var(--main-color);
-  left: 0;
-  position: absolute;
-  right: 0;
-  z-index: 1000;
-  padding: 3px 6px;
-}
-
-#errorMessageLeft {
-  float: left;
-}
-#errorMessageRight {
-  float: right;
-}
-
-#errorSpacer {
-  clear: both;
-}
-#errorMoreInfo {
-  background-color: var(--field-bg-color);
-  color: var(--field-color);
-  border: 1px solid var(--field-border-color);
-  padding: 3px;
-  margin: 3px;
-  width: 98%;
-}
-
 .dialogButton {
   width: auto;
   margin: 3px 4px 2px !important;
@@ -2756,6 +2480,7 @@ dialog {
   padding: 15px;
   border-spacing: 4px;
   color: var(--main-color);
+  font: message-box;
   font-size: 12px;
   line-height: 14px;
   background-color: var(--doorhanger-bg-color);
@@ -2809,12 +2534,6 @@ dialog :link {
 #documentPropertiesDialog {
   text-align: left;
 }
-[dir="ltr"] #documentPropertiesDialog .row > * {
-  text-align: left;
-}
-[dir="rtl"] #documentPropertiesDialog .row > * {
-  text-align: right;
-}
 #documentPropertiesDialog .row > * {
   min-width: 100px;
   text-align: start;
@@ -2832,7 +2551,6 @@ dialog :link {
 }
 
 .grab-to-pan-grab {
-  cursor: -webkit-grab !important;
   cursor: grab !important;
 }
 .grab-to-pan-grab
@@ -2841,7 +2559,6 @@ dialog :link {
 }
 .grab-to-pan-grab:active,
 .grab-to-pan-grabbing {
-  cursor: -webkit-grabbing !important;
   cursor: grabbing !important;
   position: fixed;
   background: rgba(0, 0, 0, 0);
@@ -2914,8 +2631,7 @@ dialog :link {
 }
 
 .visibleLargeView,
-.visibleMediumView,
-.visibleSmallView {
+.visibleMediumView {
   display: none;
 }
 
@@ -2933,12 +2649,6 @@ dialog :link {
   #sidebarContainer {
     background-color: var(--sidebar-narrow-bg-color);
   }
-  [dir="ltr"] #outerContainer.sidebarOpen #viewerContainer {
-    left: 0 !important;
-  }
-  [dir="rtl"] #outerContainer.sidebarOpen #viewerContainer {
-    right: 0 !important;
-  }
   #outerContainer.sidebarOpen #viewerContainer {
     inset-inline-start: 0 !important;
   }
@@ -2967,18 +2677,9 @@ dialog :link {
   .hiddenSmallView * {
     display: none;
   }
-  .visibleSmallView {
-    display: inherit;
-  }
   .toolbarButtonSpacer {
     width: 0;
   }
-  [dir="ltr"] .findbar {
-    left: 34px;
-  }
-  [dir="rtl"] .findbar {
-    right: 34px;
-  }
   .findbar {
     inset-inline-start: 34px;
   }