From 4277205d7833d6fe89cb43ea3a4d3313cb4157d7 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Thu, 5 Oct 2023 17:43:56 +0200
Subject: [PATCH] Enable some Stylelint color-related rules to slightly reduce
 file sizes

 - Use a consistent format for all alpha-values (this rule didn't require any code changes); see https://stylelint.io/user-guide/rules/alpha-value-notation
 - Use modern and slightly shorter color notation, since [according to MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#browser_compatibility) that should be supported "everywhere" nowadays; see https://stylelint.io/user-guide/rules/color-function-notation/
 - Use "short" hexadecimal colors whenever possible; see https://stylelint.io/user-guide/rules/color-hex-length/
 - Help avoid adding broken hexadecimal colors (this rule didn't require any code changes); see https://stylelint.io/user-guide/rules/color-no-invalid-hex/
---
 .stylelintrc                                |   4 +
 examples/mobile-viewer/viewer.css           |  38 ++---
 test/annotation_layer_builder_overrides.css |   6 +-
 test/text_layer_test.css                    |   4 +-
 test/xfa_layer_builder_overrides.css        |   4 +-
 web/annotation_editor_layer_builder.css     |  18 +-
 web/annotation_layer_builder.css            |  14 +-
 web/debugger.css                            |  28 +--
 web/pdf_viewer.css                          |   2 +-
 web/text_layer_builder.css                  |   4 +-
 web/viewer-geckoview.css                    |  46 ++---
 web/viewer.css                              | 178 ++++++++++----------
 web/xfa_layer_builder.css                   |   4 +-
 13 files changed, 177 insertions(+), 173 deletions(-)

diff --git a/.stylelintrc b/.stylelintrc
index e7146c24c..530e76a96 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -6,7 +6,11 @@
   "rules": {
     "prettier/prettier": true,
 
+    "alpha-value-notation": "number",
     "block-no-empty": true,
+    "color-function-notation": "modern",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
     "declaration-block-no-duplicate-properties": true,
     "declaration-block-no-redundant-longhand-properties": true,
     "declaration-property-value-disallowed-list": {
diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
index 2f8399d61..0ce654a22 100644
--- a/examples/mobile-viewer/viewer.css
+++ b/examples/mobile-viewer/viewer.css
@@ -26,12 +26,12 @@ html {
 }
 
 header {
-  background-color: rgba(244, 244, 244, 1);
+  background-color: rgb(244 244 244 / 1);
 }
 
 header h1 {
-  border-bottom: 1px solid rgba(216, 216, 216, 1);
-  color: rgba(133, 133, 133, 1);
+  border-bottom: 1px solid rgb(216 216 216 / 1);
+  color: rgb(133 133 133 / 1);
   font-size: 23px;
   font-style: italic;
   font-weight: normal;
@@ -44,7 +44,7 @@ header h1 {
 
 body {
   background: url(images/document_bg.png);
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 1);
   font-family: sans-serif;
   font-size: 10px;
   height: 100%;
@@ -71,7 +71,7 @@ footer {
   left: 0;
   right: 0;
   z-index: 1;
-  box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
+  box-shadow: 0 -0.2rem 0.5rem rgb(50 50 50 / 0.75);
 }
 
 .toolbarButton {
@@ -81,7 +81,7 @@ footer {
   border-width: 0;
   background-position: center center;
   background-repeat: no-repeat;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0);
 }
 
 .toolbarButton.pageUp {
@@ -110,9 +110,9 @@ footer {
   left: 36%;
   text-align: center;
   border: 0;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgb(0 0 0 / 0);
   font-size: 1.2rem;
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 1);
   background-image: url(images/div_line_left.png),
     url(images/div_line_right.png);
   background-repeat: no-repeat;
@@ -190,8 +190,8 @@ canvas {
 
   position: relative;
   height: 0.6rem;
-  background-color: rgba(51, 51, 51, 1);
-  border-bottom: 1px solid rgba(51, 51, 51, 1);
+  background-color: rgb(51 51 51 / 1);
+  border-bottom: 1px solid rgb(51 51 51 / 1);
 }
 
 #loadingBar .progress {
@@ -201,7 +201,7 @@ canvas {
   transform: scaleX(var(--progressBar-percent));
   transform-origin: 0 0;
   height: 100%;
-  background-color: rgba(221, 221, 221, 1);
+  background-color: rgb(221 221 221 / 1);
   overflow: hidden;
   transition: transform 200ms;
 }
@@ -220,7 +220,7 @@ canvas {
 
 #loadingBar.indeterminate .progress {
   transform: none;
-  background-color: rgba(153, 153, 153, 1);
+  background-color: rgb(153 153 153 / 1);
   transition: none;
 }
 
@@ -232,9 +232,9 @@ canvas {
   width: 5rem;
   background-image: linear-gradient(
     to right,
-    rgba(153, 153, 153, 1) 0%,
-    rgba(255, 255, 255, 1) 50%,
-    rgba(153, 153, 153, 1) 100%
+    rgb(153 153 153 / 1) 0%,
+    rgb(255 255 255 / 1) 50%,
+    rgb(153 153 153 / 1) 100%
   );
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -242,8 +242,8 @@ canvas {
 }
 
 #errorWrapper {
-  background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
-  color: rgba(255, 255, 255, 1);
+  background: none repeat scroll 0 0 rgb(255 85 85 / 1);
+  color: rgb(255 255 255 / 1);
   left: 0;
   position: absolute;
   right: 0;
@@ -262,8 +262,8 @@ canvas {
 }
 
 #errorMoreInfo {
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
+  background-color: rgb(255 255 255 / 1);
+  color: rgb(0 0 0 / 1);
   padding: 0.3rem;
   margin: 0.3rem;
   width: 98%;
diff --git a/test/annotation_layer_builder_overrides.css b/test/annotation_layer_builder_overrides.css
index 309c965ef..617034b21 100644
--- a/test/annotation_layer_builder_overrides.css
+++ b/test/annotation_layer_builder_overrides.css
@@ -37,8 +37,8 @@
   .fileAttachmentAnnotation:not(.hasFillAlpha)
   .popupTriggerArea {
   opacity: 0.2;
-  background: rgba(255, 255, 0, 1);
-  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+  background: rgb(255 255 0 / 1);
+  box-shadow: 0 2px 10px rgb(255 255 0 / 1);
 }
 .annotationLayer .fileAttachmentAnnotation.hasFillAlpha {
   outline: 2px solid yellow;
@@ -49,7 +49,7 @@
 }
 
 .annotationLayer .linkAnnotation.hasBorder {
-  background-color: rgba(255, 255, 0, 0.2);
+  background-color: rgb(255 255 0 / 0.2);
 }
 
 .annotationLayer .popupTriggerArea::after {
diff --git a/test/text_layer_test.css b/test/text_layer_test.css
index 5b274b094..9f7b0ca57 100644
--- a/test/text_layer_test.css
+++ b/test/text_layer_test.css
@@ -26,8 +26,8 @@
   position: absolute;
   white-space: pre;
   transform-origin: 0% 0%;
-  border: solid 1px rgba(255, 0, 0, 0.5);
-  background-color: rgba(255, 255, 32, 0.1);
+  border: solid 1px rgb(255 0 0 / 0.5);
+  background-color: rgb(255 255 32 / 0.1);
   box-sizing: border-box;
 }
 
diff --git a/test/xfa_layer_builder_overrides.css b/test/xfa_layer_builder_overrides.css
index adb77c3b4..0d2414a62 100644
--- a/test/xfa_layer_builder_overrides.css
+++ b/test/xfa_layer_builder_overrides.css
@@ -15,6 +15,6 @@
 
 .xfaLink {
   opacity: 0.2;
-  background: rgba(255, 255, 0, 1);
-  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+  background: rgb(255 255 0 / 1);
+  box-shadow: 0 2px 10px rgb(255 255 0 / 1);
 }
diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
index ef2810cb5..5f0047e7d 100644
--- a/web/annotation_editor_layer_builder.css
+++ b/web/annotation_editor_layer_builder.css
@@ -45,18 +45,18 @@
   --alt-text-opacity: 0.8;
   --alt-text-add-image: url(images/altText_add.svg);
   --alt-text-done-image: url(images/altText_done.svg);
-  --alt-text-bg-color: rgba(43, 42, 51, var(--alt-text-opacity));
+  --alt-text-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: rgba(82, 82, 94, var(--alt-text-opacity));
+  --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: rgba(91, 91, 102, var(--alt-text-opacity));
+  --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 rgba(28, 27, 34, 0.5);
+  --alt-text-shadow: 0 2px 6px 0 rgb(28 27 34 / 0.5);
 }
 
 @media (min-resolution: 1.1dppx) {
@@ -558,7 +558,7 @@
       --alt-text-tooltip-bg: #f0f0f4;
       --alt-text-tooltip-fg: #15141a;
       --alt-text-tooltip-border: #8f8f9d;
-      --alt-text-tooltip-shadow: 0px 2px 6px 0px rgba(58, 57, 68, 0.2);
+      --alt-text-tooltip-shadow: 0px 2px 6px 0px rgb(58 57 68 / 0.2);
 
       @media (prefers-color-scheme: dark) {
         --alt-text-tooltip-bg: #1c1b22;
@@ -600,7 +600,7 @@
 #altTextDialog {
   --dialog-bg-color: white;
   --dialog-border-color: white;
-  --dialog-shadow: 0 2px 14px 0 rgba(58, 57, 68, 0.2);
+  --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);
@@ -635,17 +635,17 @@
     --dialog-shadow: 0 2px 14px 0 #15141a;
     --text-primary-color: #fbfbfe;
     --text-secondary-color: #cfcfd8;
-    --focus-ring-color: #00ddff;
+    --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: #00ddff;
+    --radio-checked-border-color: #0df;
 
     --button-cancel-bg-color: #2b2a33;
-    --button-save-bg-color: #00ddff;
+    --button-save-bg-color: #0df;
     --button-save-fg-color: #15141a;
   }
 
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index ecdb2cff5..56be61fda 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -123,12 +123,12 @@
   :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
   > a:hover {
   opacity: 0.2;
-  background-color: rgba(255, 255, 0, 1);
-  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+  background-color: rgb(255 255 0 / 1);
+  box-shadow: 0 2px 10px rgb(255 255 0 / 1);
 }
 
 .annotationLayer .linkAnnotation.hasBorder:hover {
-  background-color: rgba(255, 255, 0, 0.2);
+  background-color: rgb(255 255 0 / 0.2);
 }
 
 .annotationLayer .hasBorder {
@@ -291,11 +291,11 @@
 }
 
 .annotationLayer .popup {
-  background-color: rgba(255, 255, 153, 1);
+  background-color: rgb(255 255 153 / 1);
   box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
-    rgba(136, 136, 136, 1);
+    rgb(136 136 136 / 1);
   border-radius: calc(2px * var(--scale-factor));
-  outline: 1.5px solid rgb(255, 255, 74);
+  outline: 1.5px solid rgb(255 255 74);
   padding: calc(6px * var(--scale-factor));
   cursor: pointer;
   font: message-box;
@@ -327,7 +327,7 @@
 }
 
 .annotationLayer .popupContent {
-  border-top: 1px solid rgba(51, 51, 51, 1);
+  border-top: 1px solid rgb(51 51 51 / 1);
   margin-top: calc(2px * var(--scale-factor));
   padding-top: calc(2px * var(--scale-factor));
 }
diff --git a/web/debugger.css b/web/debugger.css
index c66160dd7..911f99e5e 100644
--- a/web/debugger.css
+++ b/web/debugger.css
@@ -22,8 +22,8 @@
   font: message-box;
 }
 #PDFBug {
-  background-color: rgba(255, 255, 255, 1);
-  border: 1px solid rgba(102, 102, 102, 1);
+  background-color: rgb(255 255 255 / 1);
+  border: 1px solid rgb(102 102 102 / 1);
   position: fixed;
   top: 32px;
   right: 0;
@@ -33,8 +33,8 @@
   width: var(--panel-width);
 }
 #PDFBug .controls {
-  background: rgba(238, 238, 238, 1);
-  border-bottom: 1px solid rgba(102, 102, 102, 1);
+  background: rgb(238 238 238 / 1);
+  border-bottom: 1px solid rgb(102 102 102 / 1);
   padding: 3px;
 }
 #PDFBug .panels {
@@ -50,7 +50,7 @@
 }
 .debuggerShowText,
 .debuggerHideText:hover {
-  background-color: rgba(255, 255, 0, 1);
+  background-color: rgb(255 255 0 / 1);
 }
 #PDFBug .stats {
   font-family: courier;
@@ -82,7 +82,7 @@
 }
 
 #viewer.textLayer-visible .canvasWrapper {
-  background-color: rgba(128, 255, 128, 1);
+  background-color: rgb(128 255 128 / 1);
 }
 
 #viewer.textLayer-visible .canvasWrapper canvas {
@@ -90,22 +90,22 @@
 }
 
 #viewer.textLayer-visible .textLayer span {
-  background-color: rgba(255, 255, 0, 0.1);
-  color: rgba(0, 0, 0, 1);
-  border: solid 1px rgba(255, 0, 0, 0.5);
+  background-color: rgb(255 255 0 / 0.1);
+  color: rgb(0 0 0 / 1);
+  border: solid 1px rgb(255 0 0 / 0.5);
   box-sizing: border-box;
 }
 
 #viewer.textLayer-visible .textLayer span[aria-owns] {
-  background-color: rgba(255, 0, 0, 0.3);
+  background-color: rgb(255 0 0 / 0.3);
 }
 
 #viewer.textLayer-hover .textLayer span:hover {
-  background-color: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
+  background-color: rgb(255 255 255 / 1);
+  color: rgb(0 0 0 / 1);
 }
 
 #viewer.textLayer-shadow .textLayer span {
-  background-color: rgba(255, 255, 255, 0.6);
-  color: rgba(0, 0, 0, 1);
+  background-color: rgb(255 255 255 / 0.6);
+  color: rgb(0 0 0 / 1);
 }
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index d4d83a4c1..19fc1e3d3 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -79,7 +79,7 @@
   overflow: visible;
   border: var(--page-border);
   background-clip: content-box;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: rgb(255 255 255 / 1);
 }
 
 .pdfViewer .dummyPage {
diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css
index 16d8737a2..c9e3bdeaa 100644
--- a/web/text_layer_builder.css
+++ b/web/text_layer_builder.css
@@ -14,8 +14,8 @@
  */
 
 :root {
-  --highlight-bg-color: rgba(180, 0, 170, 1);
-  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
+  --highlight-bg-color: rgb(180 0 170 / 1);
+  --highlight-selected-bg-color: rgb(0 100 0 / 1);
 }
 
 @media screen and (forced-colors: active) {
diff --git a/web/viewer-geckoview.css b/web/viewer-geckoview.css
index b0823a57c..07f334311 100644
--- a/web/viewer-geckoview.css
+++ b/web/viewer-geckoview.css
@@ -22,17 +22,17 @@
   --toolbar-icon-opacity: 1;
   --doorhanger-icon-opacity: 0.9;
 
-  --main-color: rgba(12, 12, 13, 1);
-  --body-bg-color: rgba(212, 212, 215, 1);
+  --main-color: rgb(12 12 13 / 1);
+  --body-bg-color: rgb(212 212 215 / 1);
   --scrollbar-color: auto;
   --scrollbar-bg-color: auto;
-  --field-color: rgba(6, 6, 6, 1);
-  --field-bg-color: rgba(255, 255, 255, 1);
-  --field-border-color: rgba(187, 187, 188, 1);
-  --doorhanger-bg-color: rgba(255, 255, 255, 1);
+  --field-color: rgb(6 6 6 / 1);
+  --field-bg-color: rgb(255 255 255 / 1);
+  --field-border-color: rgb(187 187 188 / 1);
+  --doorhanger-bg-color: rgb(255 255 255 / 1);
   --dialog-button-border: none;
-  --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
-  --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
+  --dialog-button-bg-color: rgb(12 12 13 / 0.1);
+  --dialog-button-hover-bg-color: rgb(12 12 13 / 0.3);
 
   --toolbar-bg-color: #f9f9fb;
   --toolbar-divider-color: #e0e0e6;
@@ -48,16 +48,16 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --main-color: rgba(249, 249, 250, 1);
-    --body-bg-color: rgba(42, 42, 46, 1);
-    --scrollbar-color: rgba(121, 121, 123, 1);
-    --scrollbar-bg-color: rgba(35, 35, 39, 1);
-    --field-color: rgba(250, 250, 250, 1);
-    --field-bg-color: rgba(64, 64, 68, 1);
-    --field-border-color: rgba(115, 115, 115, 1);
-    --doorhanger-bg-color: rgba(74, 74, 79, 1);
-    --dialog-button-bg-color: rgba(92, 92, 97, 1);
-    --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
+    --main-color: rgb(249 249 250 / 1);
+    --body-bg-color: rgb(42 42 46 / 1);
+    --scrollbar-color: rgb(121 121 123 / 1);
+    --scrollbar-bg-color: rgb(35 35 39 / 1);
+    --field-color: rgb(250 250 250 / 1);
+    --field-bg-color: rgb(64 64 68 / 1);
+    --field-border-color: rgb(115 115 115 / 1);
+    --doorhanger-bg-color: rgb(74 74 79 / 1);
+    --dialog-button-bg-color: rgb(92 92 97 / 1);
+    --dialog-button-hover-bg-color: rgb(115 115 115 / 1);
 
     --toolbar-bg-color: #2b2a33;
     --toolbar-divider-color: #5b5b66;
@@ -254,12 +254,12 @@ dialog {
   font-size: 12px;
   line-height: 14px;
   background-color: var(--doorhanger-bg-color);
-  border: 1px solid rgba(0, 0, 0, 0.5);
+  border: 1px solid rgb(0 0 0 / 0.5);
   border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
 }
 dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgb(0 0 0 / 0.2);
 }
 
 dialog > .row {
@@ -288,7 +288,7 @@ dialog .buttonRow {
 }
 
 dialog :link {
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 1);
 }
 
 #passwordDialog {
@@ -308,7 +308,7 @@ dialog :link {
 
 @media print {
   body {
-    background: rgba(0, 0, 0, 0) none;
+    background: rgb(0 0 0 / 0) none;
   }
   body[data-pdfjsprinting] #outerContainer {
     display: none;
diff --git a/web/viewer.css b/web/viewer.css
index 7a16646de..7fb9d5610 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -29,52 +29,52 @@
   --toolbar-icon-opacity: 0.7;
   --doorhanger-icon-opacity: 0.9;
 
-  --main-color: rgba(12, 12, 13, 1);
-  --body-bg-color: rgba(212, 212, 215, 1);
-  --progressBar-color: rgba(10, 132, 255, 1);
-  --progressBar-bg-color: rgba(221, 221, 222, 1);
-  --progressBar-blend-color: rgba(116, 177, 239, 1);
+  --main-color: rgb(12 12 13 / 1);
+  --body-bg-color: rgb(212 212 215 / 1);
+  --progressBar-color: rgb(10 132 255 / 1);
+  --progressBar-bg-color: rgb(221 221 222 / 1);
+  --progressBar-blend-color: rgb(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);
+  --toolbar-icon-bg-color: rgb(0 0 0 / 1);
+  --toolbar-icon-hover-bg-color: rgb(0 0 0 / 1);
 
-  --sidebar-narrow-bg-color: rgba(212, 212, 215, 0.9);
-  --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1);
-  --toolbar-bg-color: rgba(249, 249, 250, 1);
-  --toolbar-border-color: rgba(184, 184, 184, 1);
+  --sidebar-narrow-bg-color: rgb(212 212 215 / 0.9);
+  --sidebar-toolbar-bg-color: rgb(245 246 247 / 1);
+  --toolbar-bg-color: rgb(249 249 250 / 1);
+  --toolbar-border-color: rgb(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);
+      rgb(0 0 0 / 0.25),
+    0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
   --toolbarSidebar-border-bottom: none;
-  --button-hover-color: 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);
+  --button-hover-color: rgb(221 222 223 / 1);
+  --toggled-btn-color: rgb(0 0 0 / 1);
+  --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
+  --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
   --toggled-hover-btn-outline: none;
-  --dropdown-btn-bg-color: rgba(215, 215, 219, 1);
+  --dropdown-btn-bg-color: rgb(215 215 219 / 1);
   --dropdown-btn-border: none;
-  --separator-color: rgba(0, 0, 0, 0.3);
-  --field-color: rgba(6, 6, 6, 1);
-  --field-bg-color: rgba(255, 255, 255, 1);
-  --field-border-color: rgba(187, 187, 188, 1);
-  --treeitem-color: rgba(0, 0, 0, 0.8);
-  --treeitem-bg-color: rgba(0, 0, 0, 0.15);
-  --treeitem-hover-color: rgba(0, 0, 0, 0.9);
-  --treeitem-selected-color: rgba(0, 0, 0, 0.9);
-  --treeitem-selected-bg-color: rgba(0, 0, 0, 0.25);
-  --thumbnail-hover-color: rgba(0, 0, 0, 0.1);
-  --thumbnail-selected-color: rgba(0, 0, 0, 0.2);
-  --doorhanger-bg-color: rgba(255, 255, 255, 1);
-  --doorhanger-border-color: rgba(12, 12, 13, 0.2);
-  --doorhanger-hover-color: rgba(12, 12, 13, 1);
-  --doorhanger-hover-bg-color: rgba(237, 237, 237, 1);
-  --doorhanger-separator-color: rgba(222, 222, 222, 1);
+  --separator-color: rgb(0 0 0 / 0.3);
+  --field-color: rgb(6 6 6 / 1);
+  --field-bg-color: rgb(255 255 255 / 1);
+  --field-border-color: rgb(187 187 188 / 1);
+  --treeitem-color: rgb(0 0 0 / 0.8);
+  --treeitem-bg-color: rgb(0 0 0 / 0.15);
+  --treeitem-hover-color: rgb(0 0 0 / 0.9);
+  --treeitem-selected-color: rgb(0 0 0 / 0.9);
+  --treeitem-selected-bg-color: rgb(0 0 0 / 0.25);
+  --thumbnail-hover-color: rgb(0 0 0 / 0.1);
+  --thumbnail-selected-color: rgb(0 0 0 / 0.2);
+  --doorhanger-bg-color: rgb(255 255 255 / 1);
+  --doorhanger-border-color: rgb(12 12 13 / 0.2);
+  --doorhanger-hover-color: rgb(12 12 13 / 1);
+  --doorhanger-hover-bg-color: rgb(237 237 237 / 1);
+  --doorhanger-separator-color: rgb(222 222 222 / 1);
   --dialog-button-border: none;
-  --dialog-button-bg-color: rgba(12, 12, 13, 0.1);
-  --dialog-button-hover-bg-color: rgba(12, 12, 13, 0.3);
+  --dialog-button-bg-color: rgb(12 12 13 / 0.1);
+  --dialog-button-hover-bg-color: rgb(12 12 13 / 0.3);
 
   --loading-icon: url(images/loading.svg);
   --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
@@ -131,43 +131,43 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --main-color: rgba(249, 249, 250, 1);
-    --body-bg-color: rgba(42, 42, 46, 1);
-    --progressBar-color: rgba(0, 96, 223, 1);
-    --progressBar-bg-color: rgba(40, 40, 43, 1);
-    --progressBar-blend-color: rgba(20, 68, 133, 1);
-    --scrollbar-color: rgba(121, 121, 123, 1);
-    --scrollbar-bg-color: rgba(35, 35, 39, 1);
-    --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
-    --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);
+    --main-color: rgb(249 249 250 / 1);
+    --body-bg-color: rgb(42 42 46 / 1);
+    --progressBar-color: rgb(0 96 223 / 1);
+    --progressBar-bg-color: rgb(40 40 43 / 1);
+    --progressBar-blend-color: rgb(20 68 133 / 1);
+    --scrollbar-color: rgb(121 121 123 / 1);
+    --scrollbar-bg-color: rgb(35 35 39 / 1);
+    --toolbar-icon-bg-color: rgb(255 255 255 / 1);
+    --toolbar-icon-hover-bg-color: rgb(255 255 255 / 1);
 
-    --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
-    --sidebar-toolbar-bg-color: rgba(50, 50, 52, 1);
-    --toolbar-bg-color: rgba(56, 56, 61, 1);
-    --toolbar-border-color: rgba(12, 12, 13, 1);
-    --button-hover-color: rgba(102, 102, 103, 1);
-    --toggled-btn-color: rgba(255, 255, 255, 1);
-    --toggled-btn-bg-color: rgba(0, 0, 0, 0.3);
-    --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4);
-    --dropdown-btn-bg-color: rgba(74, 74, 79, 1);
-    --separator-color: rgba(0, 0, 0, 0.3);
-    --field-color: rgba(250, 250, 250, 1);
-    --field-bg-color: rgba(64, 64, 68, 1);
-    --field-border-color: rgba(115, 115, 115, 1);
-    --treeitem-color: rgba(255, 255, 255, 0.8);
-    --treeitem-bg-color: rgba(255, 255, 255, 0.15);
-    --treeitem-hover-color: rgba(255, 255, 255, 0.9);
-    --treeitem-selected-color: rgba(255, 255, 255, 0.9);
-    --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
-    --thumbnail-hover-color: rgba(255, 255, 255, 0.1);
-    --thumbnail-selected-color: rgba(255, 255, 255, 0.2);
-    --doorhanger-bg-color: rgba(74, 74, 79, 1);
-    --doorhanger-border-color: rgba(39, 39, 43, 1);
-    --doorhanger-hover-color: rgba(249, 249, 250, 1);
-    --doorhanger-hover-bg-color: rgba(93, 94, 98, 1);
-    --doorhanger-separator-color: rgba(92, 92, 97, 1);
-    --dialog-button-bg-color: rgba(92, 92, 97, 1);
-    --dialog-button-hover-bg-color: rgba(115, 115, 115, 1);
+    --sidebar-narrow-bg-color: rgb(42 42 46 / 0.9);
+    --sidebar-toolbar-bg-color: rgb(50 50 52 / 1);
+    --toolbar-bg-color: rgb(56 56 61 / 1);
+    --toolbar-border-color: rgb(12 12 13 / 1);
+    --button-hover-color: rgb(102 102 103 / 1);
+    --toggled-btn-color: rgb(255 255 255 / 1);
+    --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
+    --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
+    --dropdown-btn-bg-color: rgb(74 74 79 / 1);
+    --separator-color: rgb(0 0 0 / 0.3);
+    --field-color: rgb(250 250 250 / 1);
+    --field-bg-color: rgb(64 64 68 / 1);
+    --field-border-color: rgb(115 115 115 / 1);
+    --treeitem-color: rgb(255 255 255 / 0.8);
+    --treeitem-bg-color: rgb(255 255 255 / 0.15);
+    --treeitem-hover-color: rgb(255 255 255 / 0.9);
+    --treeitem-selected-color: rgb(255 255 255 / 0.9);
+    --treeitem-selected-bg-color: rgb(255 255 255 / 0.25);
+    --thumbnail-hover-color: rgb(255 255 255 / 0.1);
+    --thumbnail-selected-color: rgb(255 255 255 / 0.2);
+    --doorhanger-bg-color: rgb(74 74 79 / 1);
+    --doorhanger-border-color: rgb(39 39 43 / 1);
+    --doorhanger-hover-color: rgb(249 249 250 / 1);
+    --doorhanger-hover-bg-color: rgb(93 94 98 / 1);
+    --doorhanger-separator-color: rgb(92 92 97 / 1);
+    --dialog-button-bg-color: rgb(92 92 97 / 1);
+    --dialog-button-hover-bg-color: rgb(115 115 115 / 1);
 
     /* This image is used in <input> elements, which unfortunately means that
      * the `mask-image` approach used with all of the other images doesn't work
@@ -235,7 +235,7 @@ body {
 
 #viewerContainer.pdfPresentationMode:fullscreen {
   top: 0;
-  background-color: rgba(0, 0, 0, 1);
+  background-color: rgb(0 0 0 / 1);
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -270,7 +270,7 @@ body {
   visibility: hidden;
   z-index: 100;
   font: message-box;
-  border-top: 1px solid rgba(51, 51, 51, 1);
+  border-top: 1px solid rgb(51 51 51 / 1);
   border-inline-end: var(--doorhanger-border-color-whcm);
   transition-property: inset-inline-start;
   transition-duration: var(--sidebar-transition-duration);
@@ -296,7 +296,7 @@ body {
   overflow: auto;
   position: absolute;
   width: 100%;
-  box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25);
+  box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25);
 }
 
 #viewerContainer {
@@ -497,7 +497,7 @@ body {
 }
 /*#if !MOZCENTRAL*/
 #findInput::-webkit-input-placeholder {
-  color: rgba(191, 191, 191, 1);
+  color: rgb(191 191 191 / 1);
 }
 /*#endif*/
 #findInput::placeholder {
@@ -509,7 +509,7 @@ body {
   background-position: calc(50% + 48% * var(--dir-factor));
 }
 #findInput[data-status="notFound"] {
-  background-color: rgba(255, 102, 102, 1);
+  background-color: rgb(255 102 102 / 1);
 }
 
 .secondaryToolbar,
@@ -607,7 +607,7 @@ body {
 :is(.doorHanger, .doorHangerRight)::after,
 :is(.doorHanger, .doorHangerRight)::before {
   bottom: 100%;
-  border: 8px solid rgba(0, 0, 0, 0);
+  border: 8px solid rgb(0 0 0 / 0);
   content: " ";
   height: 0;
   width: 0;
@@ -639,8 +639,8 @@ body {
 }
 
 #findResultsCount {
-  background-color: rgba(217, 217, 217, 1);
-  color: rgba(82, 82, 82, 1);
+  background-color: rgb(217 217 217 / 1);
+  color: rgb(82 82 82 / 1);
   text-align: center;
   padding: 4px 5px;
   margin: 5px;
@@ -981,7 +981,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
   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);
+  background-color: rgb(112 219 85 / 1);
   height: 9px;
   width: 9px;
   border-radius: 50%;
@@ -1206,7 +1206,7 @@ a:focus > .thumbnail > .thumbnailImage,
 .thumbnail:not([data-loaded]) > .thumbnailImage {
   width: calc(var(--thumbnail-width) - 2px);
   height: calc(var(--thumbnail-height) - 2px);
-  border: 1px dashed rgba(132, 132, 132, 1);
+  border: 1px dashed rgb(132 132 132 / 1);
 }
 
 .treeWithDeepNesting > .treeItem,
@@ -1248,7 +1248,7 @@ a:focus > .thumbnail > .thumbnailImage,
   float: var(--inline-start);
   height: 0;
   width: 0;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgb(255 255 255 / 0.5);
 }
 .treeItemToggler::before {
   inset-inline-end: 4px;
@@ -1295,12 +1295,12 @@ dialog {
   font-size: 12px;
   line-height: 14px;
   background-color: var(--doorhanger-bg-color);
-  border: 1px solid rgba(0, 0, 0, 0.5);
+  border: 1px solid rgb(0 0 0 / 0.5);
   border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
 }
 dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgb(0 0 0 / 0.2);
 }
 
 dialog > .row {
@@ -1329,7 +1329,7 @@ dialog .buttonRow {
 }
 
 dialog :link {
-  color: rgba(255, 255, 255, 1);
+  color: rgb(255 255 255 / 1);
 }
 
 #passwordDialog {
@@ -1371,7 +1371,7 @@ dialog :link {
 }
 .grab-to-pan-grabbing {
   position: fixed;
-  background: rgba(0, 0, 0, 0);
+  background: rgb(0 0 0 / 0);
   display: block;
   inset: 0;
   overflow: hidden;
@@ -1388,7 +1388,7 @@ dialog :link {
 
 @media print {
   body {
-    background: rgba(0, 0, 0, 0) none;
+    background: rgb(0 0 0 / 0) none;
   }
   body[data-pdfjsprinting] #outerContainer {
     display: none;
diff --git a/web/xfa_layer_builder.css b/web/xfa_layer_builder.css
index 921372821..8b46a778e 100644
--- a/web/xfa_layer_builder.css
+++ b/web/xfa_layer_builder.css
@@ -34,7 +34,7 @@
 .xfaLayer .highlight {
   margin: -1px;
   padding: 1px;
-  background-color: rgba(239, 203, 237, 1);
+  background-color: rgb(239 203 237 / 1);
   border-radius: 4px;
 }
 
@@ -55,7 +55,7 @@
 }
 
 .xfaLayer .highlight.selected {
-  background-color: rgba(203, 223, 203, 1);
+  background-color: rgb(203 223 203 / 1);
 }
 
 .xfaPage {