From 0bdb1ab202e5bb482339c7b9e9335148b134f4cf Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 25 Dec 2019 13:28:04 +0100
Subject: [PATCH 1/7] Convert all HSL colors to RGBA colors

---
 web/viewer.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index a1ce11ad0..b0cca8711 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -326,7 +326,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   min-width: 16px;
   padding: 0px 6px 0px 6px;
   margin: 4px 2px 4px 2px;
-  color: hsl(0,0%,85%);
+  color: rgba(217, 217, 217, 1);
   font-size: 12px;
   line-height: 14px;
   text-align: left;
@@ -360,7 +360,7 @@ html[dir='rtl'] .findbar {
   width: 200px;
 }
 #findInput::-webkit-input-placeholder {
-  color: hsl(0, 0%, 75%);
+  color: rgba(191, 191, 191, 1);
 }
 #findInput::placeholder {
   font-style: italic;
@@ -451,8 +451,8 @@ html[dir='ltr'] .doorHangerRight:before {
 }
 
 #findResultsCount {
-  background-color: hsl(0, 0%, 85%);
-  color: hsl(0, 0%, 32%);
+  background-color: rgba(217, 217, 217, 1);
+  color: rgba(82, 82, 82, 1);
   text-align: center;
   padding: 3px 4px;
 }
@@ -719,7 +719,7 @@ html[dir='rtl'] .dropdownToolbarButton {
 .dropdownToolbarButton > select {
   min-width: 140px;
   font-size: 12px;
-  color: hsl(0,0%,95%);
+  color: rgba(242, 242, 242, 1);
   margin: 0;
   padding: 3px 2px 2px;
   border: none;
@@ -727,7 +727,7 @@ html[dir='rtl'] .dropdownToolbarButton {
 }
 
 .dropdownToolbarButton > select > option {
-  background: hsl(0,0%,24%);
+  background: rgba(61, 61, 61, 1);
 }
 
 #customScaleOption {
@@ -1036,7 +1036,7 @@ html[dir='rtl'] .verticalToolbarSeparator {
   border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
   box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
               0 1px 0 hsla(0,0%,100%,.05);
-  color: hsl(0,0%,95%);
+  color: rgba(242, 242, 242, 1);
   font-size: 12px;
   line-height: 14px;
   outline-style: none;
@@ -1085,7 +1085,7 @@ html[dir='rtl'] .verticalToolbarSeparator {
   margin: 4px 2px 4px 0;
   border: 1px solid transparent;
   border-radius: 2px;
-  color: hsl(0,0%,85%);
+  color: rgba(217, 217, 217, 1);
   font-size: 12px;
   line-height: 14px;
   text-align: left;
@@ -1373,7 +1373,7 @@ html[dir='rtl'] .outlineItemToggler::before {
   display: inline-block;
   padding: 15px;
   border-spacing: 4px;
-  color: hsl(0,0%,85%);
+  color: rgba(217, 217, 217, 1);
   font-size: 12px;
   line-height: 14px;
   background-color: #474747; /* fallback */

From 3717dcdf57dc976b323318726c434c2093b9873e Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 25 Dec 2019 14:15:39 +0100
Subject: [PATCH 2/7] Convert all HSLA colors to RGBA colors

---
 web/viewer.css | 220 ++++++++++++++++++++++++-------------------------
 1 file changed, 110 insertions(+), 110 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index b0cca8711..c8b91b700 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -155,15 +155,15 @@ html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
   -webkit-overflow-scrolling: touch;
   position: absolute;
   width: 100%;
-  background-color: hsla(0,0%,0%,.1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 html[dir='ltr'] #sidebarContent {
   left: 0;
-  box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
 }
 html[dir='rtl'] #sidebarContent {
   right: 0;
-  box-shadow: inset 1px 0 0 hsla(0,0%,0%,.25);
+  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
 }
 
 #viewerContainer {
@@ -181,10 +181,10 @@ html[dir='rtl'] #sidebarContent {
   transition-timing-function: ease;
 }
 html[dir='ltr'] #viewerContainer {
-  box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
+  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
 }
 html[dir='rtl'] #viewerContainer {
-  box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05);
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
 }
 
 #outerContainer.sidebarResizing #viewerContainer {
@@ -220,19 +220,19 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio
   height: 32px;
   background-color: #424242; /* fallback */
   background-image: url(images/texture.png),
-                    linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
+                    linear-gradient(rgba(77, 77, 77, 0.99), rgba(64, 64, 64, 0.95));
 }
 html[dir='ltr'] #toolbarSidebar {
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
-              inset 0 -1px 0 hsla(0,0%,100%,.05),
-              0 1px 0 hsla(0,0%,0%,.15),
-              0 0 1px hsla(0,0%,0%,.1);
+              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
+              0 1px 0 rgba(0, 0, 0, 0.15),
+              0 0 1px rgba(0, 0, 0, 0.1);
 }
 html[dir='rtl'] #toolbarSidebar {
   box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
-              inset 0 1px 0 hsla(0,0%,100%,.05),
-              0 1px 0 hsla(0,0%,0%,.15),
-              0 0 1px hsla(0,0%,0%,.1);
+              inset 0 1px 0 rgba(255, 255, 255, 0.05),
+              0 1px 0 rgba(0, 0, 0, 0.15),
+              0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 #sidebarResizer {
@@ -255,19 +255,19 @@ html[dir='rtl'] #sidebarResizer {
   height: 32px;
   background-color: #474747; /* fallback */
   background-image: url(images/texture.png),
-                    linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
+                    linear-gradient(rgba(82, 82, 82, 0.99), rgba(69, 69, 69, 0.95));
 }
 html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
-  box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15),
-              inset 0 -1px 0 hsla(0,0%,100%,.05),
-              0 1px 0 hsla(0,0%,0%,.15),
-              0 1px 1px hsla(0,0%,0%,.1);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
+              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
+              0 1px 0 rgba(0, 0, 0, 0.15),
+              0 1px 1px rgba(0, 0, 0, 0.1);
 }
 html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
-  box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15),
-              inset 0 -1px 0 hsla(0,0%,100%,.05),
-              0 1px 0 hsla(0,0%,0%,.15),
-              0 1px 1px hsla(0,0%,0%,.1);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
+              inset 0 -1px 0 rgba(255, 255, 255, 0.05),
+              0 1px 0 rgba(0, 0, 0, 0.15),
+              0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
 #toolbarViewer {
@@ -401,7 +401,7 @@ html[dir='rtl'] .secondaryToolbar {
 
 .doorHanger,
 .doorHangerRight {
-  border: 1px solid hsla(0,0%,0%,.5);
+  border: 1px solid rgba(0, 0, 0, 0.5);
   border-radius: 2px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
@@ -417,12 +417,12 @@ html[dir='rtl'] .secondaryToolbar {
 }
 .doorHanger:after,
 .doorHangerRight:after {
-  border-bottom-color: hsla(0,0%,32%,.99);
+  border-bottom-color: rgba(82, 82, 82, 0.99);
   border-width: 8px;
 }
 .doorHanger:before,
 .doorHangerRight:before {
-  border-bottom-color: hsla(0,0%,0%,.5);
+  border-bottom-color: rgba(0, 0, 0, 0.5);
   border-width: 9px;
 }
 
@@ -545,14 +545,14 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
 .splitToolbarButton:focus > .toolbarButton,
 .splitToolbarButton.toggled > .toolbarButton,
 .toolbarButton.textButton {
-  background-color: hsla(0,0%,0%,.12);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-color: rgba(0, 0, 0, 0.12);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
   background-clip: padding-box;
-  border: 1px solid hsla(0,0%,0%,.35);
-  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 0 1px hsla(0,0%,100%,.15) inset,
-              0 1px 0 hsla(0,0%,100%,.05);
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
+              0 0 1px rgba(255, 255, 255, 0.15) inset,
+              0 1px 0 rgba(255, 255, 255, 0.05);
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 150ms;
   transition-timing-function: ease;
@@ -565,10 +565,10 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
 .overlayButton:focus,
 .toolbarButton.textButton:hover,
 .toolbarButton.textButton:focus {
-  background-color: hsla(0,0%,0%,.2);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 0 1px hsla(0,0%,100%,.15) inset,
-              0 0 1px hsla(0,0%,0%,.05);
+  background-color: rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
+              0 0 1px rgba(255, 255, 255, 0.15) inset,
+              0 0 1px rgba(0, 0, 0, 0.05);
   z-index: 199;
 }
 .splitToolbarButton > .toolbarButton {
@@ -595,9 +595,9 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
 .splitToolbarButtonSeparator {
   padding: 8px 0;
   width: 1px;
-  background-color: hsla(0,0%,0%,.5);
+  background-color: rgba(0, 0, 0, 0.5);
   z-index: 99;
-  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
   display: inline-block;
   margin: 5px 0;
 }
@@ -611,7 +611,7 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
 .splitToolbarButton.toggled > .splitToolbarButtonSeparator {
   padding: 12px 0;
   margin: 1px 0;
-  box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
   transition-property: padding;
   transition-duration: 10ms;
   transition-timing-function: ease;
@@ -625,7 +625,7 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
   padding: 2px 6px 0;
   border: 1px solid transparent;
   border-radius: 2px;
-  color: hsla(0,0%,100%,.8);
+  color: rgba(255, 255, 255, 0.8);
   font-size: 12px;
   line-height: 14px;
   user-select: none;
@@ -653,26 +653,26 @@ html[dir='rtl'] .dropdownToolbarButton {
 .overlayButton,
 .secondaryToolbarButton:hover,
 .secondaryToolbarButton:focus {
-  background-color: hsla(0,0%,0%,.12);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-color: rgba(0, 0, 0, 0.12);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
   background-clip: padding-box;
-  border: 1px solid hsla(0,0%,0%,.35);
-  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 0 1px hsla(0,0%,100%,.15) inset,
-              0 1px 0 hsla(0,0%,100%,.05);
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
+              0 0 1px rgba(255, 255, 255, 0.15) inset,
+              0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .toolbarButton:hover:active,
 .overlayButton:hover:active,
 .dropdownToolbarButton:hover:active,
 .secondaryToolbarButton:hover:active {
-  background-color: hsla(0,0%,0%,.2);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
-  border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
-  box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
-              0 0 1px hsla(0,0%,0%,.2) inset,
-              0 1px 0 hsla(0,0%,100%,.05);
+  background-color: rgba(0, 0, 0, 0.2);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
+  border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
+              0 0 1px rgba(0, 0, 0, 0.2) inset,
+              0 1px 0 rgba(255, 255, 255, 0.05);
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 10ms;
   transition-timing-function: linear;
@@ -681,12 +681,12 @@ html[dir='rtl'] .dropdownToolbarButton {
 .toolbarButton.toggled,
 .splitToolbarButton.toggled > .toolbarButton.toggled,
 .secondaryToolbarButton.toggled {
-  background-color: hsla(0,0%,0%,.3);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
-  border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5);
-  box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
-              0 0 1px hsla(0,0%,0%,.2) inset,
-              0 1px 0 hsla(0,0%,100%,.05);
+  background-color: rgba(0, 0, 0, 0.3);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
+  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.5);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
+              0 0 1px rgba(0, 0, 0, 0.2) inset,
+              0 1px 0 rgba(255, 255, 255, 0.05);
   transition-property: background-color, border-color, box-shadow;
   transition-duration: 10ms;
   transition-timing-function: linear;
@@ -695,11 +695,11 @@ html[dir='rtl'] .dropdownToolbarButton {
 .toolbarButton.toggled:hover:active,
 .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
 .secondaryToolbarButton.toggled:hover:active {
-  background-color: hsla(0,0%,0%,.4);
-  border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
-  box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
-              0 0 1px hsla(0,0%,0%,.3) inset,
-              0 1px 0 hsla(0,0%,100%,.05);
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.55);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset,
+              0 0 1px rgba(0, 0, 0, 0.3) inset,
+              0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .dropdownToolbarButton {
@@ -1005,8 +1005,8 @@ html[dir="rtl"] .secondaryToolbarButton > span {
   padding: 8px 0;
   margin: 8px 4px;
   width: 1px;
-  background-color: hsla(0,0%,0%,.5);
-  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 html[dir='ltr'] .verticalToolbarSeparator {
   margin-left: 2px;
@@ -1020,22 +1020,22 @@ html[dir='rtl'] .verticalToolbarSeparator {
   margin: 0 0 4px 0;
   height: 1px;
   width: 100%;
-  background-color: hsla(0,0%,0%,.5);
-  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 
 .toolbarField {
   padding: 3px 6px;
   margin: 4px 0 4px 0;
   border-radius: 2px;
-  background-color: hsla(0,0%,100%,.09);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-color: rgba(255, 255, 255, 0.09);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
   background-clip: padding-box;
   border-width: 1px;
   border-style: solid;
-  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
-  box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
-              0 1px 0 hsla(0,0%,100%,.05);
+  border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset,
+              0 1px 0 rgba(255, 255, 255, 0.05);
   color: rgba(242, 242, 242, 1);
   font-size: 12px;
   line-height: 14px;
@@ -1070,13 +1070,13 @@ html[dir='rtl'] .verticalToolbarSeparator {
 }
 
 .toolbarField:hover {
-  background-color: hsla(0,0%,100%,.11);
-  border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
+  background-color: rgba(255, 255, 255, 0.11);
+  border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.43) rgba(0, 0, 0, 0.45);
 }
 
 .toolbarField:focus {
-  background-color: hsla(0,0%,100%,.15);
-  border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
+  background-color: rgba(255, 255, 255, 0.15);
+  border-color: rgba(77, 184, 255, 0.8) rgba(77, 184, 255, 0.85) rgba(77, 184, 255, 0.9);
 }
 
 .toolbarLabel {
@@ -1152,28 +1152,28 @@ a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
 
 a:focus > .thumbnail > .thumbnailSelectionRing,
 .thumbnail:hover > .thumbnailSelectionRing {
-  background-color: hsla(0,0%,100%,.15);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-color: rgba(255, 255, 255, 0.15);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
   background-clip: padding-box;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 0 1px hsla(0,0%,100%,.2) inset,
-              0 0 1px hsla(0,0%,0%,.2);
-  color: hsla(0,0%,100%,.9);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
+              0 0 1px rgba(255, 255, 255, 0.2) inset,
+              0 0 1px rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
-  box-shadow: 0 0 0 1px hsla(0,0%,0%,.5);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
   opacity: 1;
 }
 
 .thumbnail.selected > .thumbnailSelectionRing {
-  background-color: hsla(0,0%,100%,.3);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-color: rgba(255, 255, 255, 0.3);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
   background-clip: padding-box;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 0 1px hsla(0,0%,100%,.1) inset,
-              0 0 1px hsla(0,0%,0%,.2);
-  color: hsla(0,0%,100%,1);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
+              0 0 1px rgba(255, 255, 255, 0.1) inset,
+              0 0 1px rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255,1);
 }
 
 #outlineView,
@@ -1214,7 +1214,7 @@ html[dir='rtl'] .outlineItem > .outlineItems {
   height: auto;
   margin-bottom: 1px;
   border-radius: 2px;
-  color: hsla(0,0%,100%,.8);
+  color: rgba(255, 255, 255, 0.8);
   font-size: 13px;
   line-height: 15px;
   user-select: none;
@@ -1248,7 +1248,7 @@ html[dir='rtl'] .attachmentsItem > button {
   position: relative;
   height: 0;
   width: 0;
-  color: hsla(0,0%,100%,.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 .outlineItemToggler::before {
   content: url(images/treeitem-expanded.png);
@@ -1282,29 +1282,29 @@ html[dir='rtl'] .outlineItemToggler::before {
 .outlineItemToggler:hover ~ .outlineItems,
 .outlineItem > a:hover,
 .attachmentsItem > button:hover {
-  background-color: hsla(0,0%,100%,.02);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-color: rgba(255, 255, 255, 0.02);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
   background-clip: padding-box;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 0 1px hsla(0,0%,100%,.2) inset,
-              0 0 1px hsla(0,0%,0%,.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
+              0 0 1px rgba(255, 255, 255, 0.2) inset,
+              0 0 1px rgba(0, 0, 0, 0.2);
   border-radius: 2px;
-  color: hsla(0,0%,100%,.9);
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .outlineItem.selected {
-  background-color: hsla(0,0%,100%,.08);
-  background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-color: rgba(255, 255, 255, 0.08);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
   background-clip: padding-box;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 0 1px hsla(0,0%,100%,.1) inset,
-              0 0 1px hsla(0,0%,0%,.2);
-  color: hsla(0,0%,100%,1);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
+              0 0 1px rgba(255, 255, 255, 0.1) inset,
+              0 0 1px rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255, 1);
 }
 
 .noResults {
   font-size: 12px;
-  color: hsla(0,0%,100%,.8);
+  color: rgba(255, 255, 255, 0.8);
   font-style: italic;
   cursor: default;
 }
@@ -1355,7 +1355,7 @@ html[dir='rtl'] .outlineItemToggler::before {
   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: hsla(0,0%,0%,.2);
+  background-color: rgba(0, 0, 0, 0.2);
   z-index: 40000;
 }
 #overlayContainer > * {
@@ -1378,8 +1378,8 @@ html[dir='rtl'] .outlineItemToggler::before {
   line-height: 14px;
   background-color: #474747; /* fallback */
   background-image: url(images/texture.png),
-                    linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
-  border: 1px solid hsla(0,0%,0%,.5);
+                    linear-gradient(rgba(82, 82, 82,0.99), rgba(69, 69, 69, 0.95));
+  border: 1px solid rgba(0, 0, 0, 0.5);
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
@@ -1401,8 +1401,8 @@ html[dir='rtl'] .outlineItemToggler::before {
   margin: 4px 0 4px 0;
   height: 1px;
   width: 100%;
-  background-color: hsla(0,0%,0%,.5);
-  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 
 .dialog .buttonRow {
@@ -1848,7 +1848,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 
 @media all and (max-width: 840px) {
   #sidebarContent {
-    background-color: hsla(0,0%,0%,.7);
+    background-color: rgba(0, 0, 0, 0.7);
   }
 
   html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer {

From dd1c8a914904452cbb4d330b304cc4ee82703157 Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 25 Dec 2019 14:19:09 +0100
Subject: [PATCH 3/7] Convert all RGB colors to RGBA colors

---
 web/text_layer_builder.css | 9 +++++----
 web/viewer.css             | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css
index 83c2beda4..77206a51c 100644
--- a/web/text_layer_builder.css
+++ b/web/text_layer_builder.css
@@ -35,8 +35,7 @@
 .textLayer .highlight {
   margin: -1px;
   padding: 1px;
-
-  background-color: rgb(180, 0, 170);
+  background-color: rgba(180, 0, 170, 1);
   border-radius: 4px;
 }
 
@@ -53,10 +52,12 @@
 }
 
 .textLayer .highlight.selected {
-  background-color: rgb(0, 100, 0);
+  background-color: rgba(0, 100, 0, 1);
 }
 
-.textLayer ::selection { background: rgb(0,0,255); }
+.textLayer ::selection {
+  background: rgba(0, 0, 255, 1);
+}
 
 .textLayer .endOfContent {
   display: block;
diff --git a/web/viewer.css b/web/viewer.css
index c8b91b700..9452f51cf 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -466,7 +466,7 @@ html[dir='ltr'] .doorHangerRight:before {
 }
 
 #findInput.notFound {
-  background-color: rgb(255, 102, 102);
+  background-color: rgba(255, 102, 102, 1);
 }
 
 #toolbarViewerMiddle {
@@ -1511,7 +1511,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 }
 
 #viewer.textLayer-visible .canvasWrapper {
-  background-color: rgb(128,255,128);
+  background-color: rgba(128, 255, 128, 1);
 }
 
 #viewer.textLayer-visible .canvasWrapper canvas {

From 2c2fc36c54702b205715f4db12f555af9b48125b Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 25 Dec 2019 14:23:22 +0100
Subject: [PATCH 4/7] Normalize all RGBA colors

This is not only useful to have one format for consistency, but also to
be able to quickly search for colors for e.g., finding duplicates or
when tweaking the CSS for custom deployments.
---
 web/viewer.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index 9452f51cf..32be338fb 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -735,7 +735,7 @@ html[dir='rtl'] .dropdownToolbarButton {
 }
 
 #pageWidthOption {
-  border-bottom: 1px rgba(255, 255, 255, .5) solid;
+  border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
 }
 
 html[dir='ltr'] .splitToolbarButton:first-child,
@@ -1312,7 +1312,9 @@ html[dir='rtl'] .outlineItemToggler::before {
 /* 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 */
-::selection { background: rgba(0,0,255,0.3); }
+::selection {
+  background: rgba(0, 0, 255, 0.3);
+}
 
 #errorWrapper {
   background: none repeat scroll 0 0 #FF5555;
@@ -1531,7 +1533,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 }
 
 #viewer.textLayer-shadow .textLayer > span {
-  background-color: rgba(255,255,255, .6);
+  background-color: rgba(255, 255, 255, 0.6);
   color: black;
 }
 

From d00263740587511143e1fbc676e49d8a9bd11e9a Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 25 Dec 2019 14:44:05 +0100
Subject: [PATCH 5/7] Convert all named colors to RGBA colors

---
 examples/mobile-viewer/viewer.css |  8 ++---
 web/pdf_viewer.css                |  2 +-
 web/viewer.css                    | 49 +++++++++++++++----------------
 3 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
index bd0b7790c..3135c4c63 100644
--- a/examples/mobile-viewer/viewer.css
+++ b/examples/mobile-viewer/viewer.css
@@ -81,7 +81,7 @@ footer {
   border-width: 0;
   background-position: center center;
   background-repeat: no-repeat;
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0);
 }
 
 .toolbarButton.pageUp {
@@ -110,7 +110,7 @@ footer {
   left: 36%;
   text-align: center;
   border: 0;
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0);
   font-size: 1.2rem;
   color: #FFF;
   background-image: url(images/div_line_left.png), url(images/div_line_right.png);
@@ -230,7 +230,7 @@ canvas {
 
 #errorWrapper {
   background: none repeat scroll 0 0 #FF5555;
-  color: white;
+  color: rgba(255, 255, 255, 1);
   left: 0;
   position: absolute;
   right: 0;
@@ -250,7 +250,7 @@ canvas {
 
 #errorMoreInfo {
   background-color: #FFFFFF;
-  color: black;
+  color: rgba(0, 0, 0, 1);
   padding: 0.3rem;
   margin: 0.3rem;
   width: 98%;
diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
index 28f9f79a7..845c2683c 100644
--- a/web/pdf_viewer.css
+++ b/web/pdf_viewer.css
@@ -29,7 +29,7 @@
   border: 9px solid transparent;
   background-clip: content-box;
   border-image: url(images/shadow.png) 9 9 repeat;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 1);
 }
 
 .pdfViewer.removePageBorders .page {
diff --git a/web/viewer.css b/web/viewer.css
index 32be338fb..f344335aa 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -64,7 +64,7 @@ select {
 
 #viewerContainer.pdfPresentationMode:fullscreen {
   top: 0px;
-  border-top: 2px solid transparent;
+  border-top: 2px solid rgba(0, 0, 0, 0);
   background-color: #000;
   width: 100%;
   height: 100%;
@@ -408,7 +408,7 @@ html[dir='rtl'] .secondaryToolbar {
 .doorHanger:after, .doorHanger:before,
 .doorHangerRight:after, .doorHangerRight:before {
   bottom: 100%;
-  border: solid transparent;
+  border: solid rgba(0, 0, 0, 0);
   content: " ";
   height: 0;
   width: 0;
@@ -581,7 +581,7 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
   margin-right: -1px;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
-  border-right-color: transparent;
+  border-right-color: rgba(0, 0, 0, 0);
 }
 html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
 html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
@@ -590,7 +590,7 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
   margin-left: -1px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
-  border-left-color: transparent;
+  border-left-color: rgba(0, 0, 0, 0);
 }
 .splitToolbarButtonSeparator {
   padding: 8px 0;
@@ -623,7 +623,7 @@ html[dir='rtl'] .splitToolbarButtonSeparator {
 .overlayButton {
   min-width: 16px;
   padding: 2px 6px 0;
-  border: 1px solid transparent;
+  border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 2px;
   color: rgba(255, 255, 255, 0.8);
   font-size: 12px;
@@ -1083,7 +1083,7 @@ html[dir='rtl'] .verticalToolbarSeparator {
   min-width: 16px;
   padding: 3px 6px 3px 2px;
   margin: 4px 2px 4px 0;
-  border: 1px solid transparent;
+  border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 2px;
   color: rgba(217, 217, 217, 1);
   font-size: 12px;
@@ -1132,11 +1132,11 @@ html[dir='rtl'] .thumbnail {
 }
 
 .thumbnailImage {
-  border: 1px solid transparent;
+  border: 1px solid rgba(0, 0, 0, 0);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
   opacity: 0.8;
   z-index: 99;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 1);
   background-clip: content-box;
 }
 
@@ -1318,7 +1318,7 @@ html[dir='rtl'] .outlineItemToggler::before {
 
 #errorWrapper {
   background: none repeat scroll 0 0 #FF5555;
-  color: white;
+  color: rgba(255, 255, 255, 1);
   left: 0;
   position: absolute;
   right: 0;
@@ -1340,7 +1340,7 @@ html[dir='rtl'] .outlineItemToggler::before {
 
 #errorMoreInfo {
   background-color: #FFFFFF;
-  color: black;
+  color: rgba(0, 0, 0, 1);
   padding: 3px;
   margin: 3px;
   width: 98%;
@@ -1413,7 +1413,7 @@ html[dir='rtl'] .outlineItemToggler::before {
 }
 
 .dialog :link {
-  color: white;
+  color: rgba(255, 255, 255, 1);
 }
 
 #passwordOverlay > .dialog {
@@ -1452,8 +1452,8 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 }
 
 .fileInput {
-  background: white;
-  color: black;
+  background: rgba(255, 255, 255, 1);
+  color: rgba(0, 0, 0, 1);
   margin-top: 5px;
   visibility: hidden;
   position: fixed;
@@ -1462,7 +1462,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 }
 
 #PDFBug {
-  background: none repeat scroll 0 0 white;
+  background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
   border: 1px solid #666666;
   position: fixed;
   top: 32px;
@@ -1490,11 +1490,11 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   font-weight: bold;
 }
 .debuggerShowText {
-  background: none repeat scroll 0 0 yellow;
-  color: blue;
+  background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
+  color: rgba(0, 0, 255, 1);
 }
 .debuggerHideText:hover {
-  background: none repeat scroll 0 0 yellow;
+  background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
 }
 #PDFBug .stats {
   font-family: courier;
@@ -1522,19 +1522,19 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 
 #viewer.textLayer-visible .textLayer > span {
   background-color: rgba(255, 255, 0, 0.1);
-  color: black;
+  color: rgba(0, 0, 0, 1);
   border: solid 1px rgba(255, 0, 0, 0.5);
   box-sizing: border-box;
 }
 
 #viewer.textLayer-hover .textLayer > span:hover {
-  background-color: white;
-  color: black;
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(0, 0, 0, 1);
 }
 
 #viewer.textLayer-shadow .textLayer > span {
   background-color: rgba(255, 255, 255, 0.6);
-  color: black;
+  color: rgba(0, 0, 0, 1);
 }
 
 .grab-to-pan-grab {
@@ -1548,9 +1548,8 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 .grab-to-pan-grabbing {
   cursor: url("images/grabbing.cur"), move !important;
   cursor: grabbing !important;
-
   position: fixed;
-  background: transparent;
+  background: rgba(0, 0, 0, 0);
   display: block;
   top: 0;
   left: 0;
@@ -1771,7 +1770,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 @media print {
   /* General rules for printing. */
   body {
-    background: transparent none;
+    background: rgba(0, 0, 0, 0) none;
   }
 
   /* Rules for browsers that don't support mozPrintCallback. */
@@ -1794,7 +1793,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
     border: none;
     box-shadow: none;
     background-clip: content-box;
-    background-color: white;
+    background-color: rgba(255, 255, 255, 1);
   }
 
   .page[data-loaded] {

From 403a994556874fe7fd2fd4b6955f2b887526ff83 Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 25 Dec 2019 16:16:13 +0100
Subject: [PATCH 6/7] Convert all three-digit HEX colors to RGBA colors

---
 examples/mobile-viewer/viewer.css           | 19 +++++++++--------
 test/annotation_layer_builder_overrides.css |  4 ++--
 web/annotation_layer_builder.css            | 12 +++++------
 web/viewer.css                              | 23 +++++++++------------
 4 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
index 3135c4c63..317390a3f 100644
--- a/examples/mobile-viewer/viewer.css
+++ b/examples/mobile-viewer/viewer.css
@@ -44,7 +44,7 @@ header h1 {
 
 body {
   background: url(images/document_bg.png);
-  color: #fff;
+  color: rgba(255, 255, 255, 1);
   font-family: sans-serif;
   font-size: 10px;
   height: 100%;
@@ -112,7 +112,7 @@ footer {
   border: 0;
   background-color: rgba(0, 0, 0, 0);
   font-size: 1.2rem;
-  color: #FFF;
+  color: rgba(255, 255, 255, 1);
   background-image: url(images/div_line_left.png), url(images/div_line_right.png);
   background-repeat: no-repeat;
   background-position: left, right;
@@ -188,8 +188,8 @@ canvas {
 #loadingBar {
   position: relative;
   height: .6rem;
-  background-color: #333;
-  border-bottom: 1px solid #333;
+  background-color: rgba(51, 51, 51, 1);
+  border-bottom: 1px solid rgba(51, 51, 51, 1);
   margin-top: 5rem;
 }
 
@@ -198,7 +198,7 @@ canvas {
   left: 0;
   width: 0;
   height: 100%;
-  background-color: #ddd;
+  background-color: rgba(221, 221, 221, 1);
   overflow: hidden;
   transition: width 200ms;
 }
@@ -210,7 +210,7 @@ canvas {
 }
 
 #loadingBar .progress.indeterminate {
-  background-color: #999;
+  background-color: rgba(153, 153, 153, 1);
   transition: none;
 }
 
@@ -220,11 +220,12 @@ canvas {
   left: 0;
   height: 100%;
   width: 5rem;
-
-  background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
+  background-image: linear-gradient(to right,
+                                    rgba(153, 153, 153, 1) 0%,
+                                    rgba(255, 255, 255, 1) 50%,
+                                    rgba(153, 153, 153, 1) 100%);
   background-size: 100% 100%;
   background-repeat: no-repeat;
-
   animation: progressIndeterminate 2s linear infinite;
 }
 
diff --git a/test/annotation_layer_builder_overrides.css b/test/annotation_layer_builder_overrides.css
index b1ca12395..7bbff62cb 100644
--- a/test/annotation_layer_builder_overrides.css
+++ b/test/annotation_layer_builder_overrides.css
@@ -27,8 +27,8 @@
 .annotationLayer .linkAnnotation > a,
 .annotationLayer .buttonWidgetAnnotation.pushButton > a {
   opacity: 0.2;
-  background: #ff0;
-  box-shadow: 0px 2px 10px #ff0;
+  background: rgba(255, 255, 0, 1);
+  box-shadow: 0px 2px 10px rgba(255, 255, 0, 1);
 }
 
 .annotationLayer .popupAnnotation,
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index 7384f4115..80844e866 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -30,8 +30,8 @@
 .annotationLayer .linkAnnotation > a:hover,
 .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
   opacity: 0.2;
-  background: #ff0;
-  box-shadow: 0px 2px 10px #ff0;
+  background: rgba(255, 255, 0, 1);
+  box-shadow: 0px 2px 10px rgba(255, 255, 0, 1);
 }
 
 .annotationLayer .textAnnotation img {
@@ -84,7 +84,7 @@
 .annotationLayer .choiceWidgetAnnotation select:hover,
 .annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
 .annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
-  border: 1px solid #000;
+  border: 1px solid rgba(0, 0, 0, 1);
 }
 
 .annotationLayer .textWidgetAnnotation input:focus,
@@ -97,7 +97,7 @@
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
-  background-color: #000;
+  background-color: rgba(0, 0, 0, 1);
   content: '';
   display: block;
   position: absolute;
@@ -158,7 +158,7 @@
   z-index: 200;
   max-width: 20em;
   background-color: #FFFF99;
-  box-shadow: 0px 2px 5px #888;
+  box-shadow: 0px 2px 5px rgba(136, 136, 136, 1);
   border-radius: 2px;
   padding: 6px;
   margin-left: 5px;
@@ -182,7 +182,7 @@
 }
 
 .annotationLayer .popup p {
-  border-top: 1px solid #333;
+  border-top: 1px solid rgba(51, 51, 51, 1);
   margin-top: 2px;
   padding-top: 2px;
 }
diff --git a/web/viewer.css b/web/viewer.css
index f344335aa..536423154 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -59,13 +59,13 @@ select {
 }
 
 #viewerContainer.pdfPresentationMode:-ms-fullscreen::-ms-backdrop {
-  background-color: #000;
+  background-color: rgba(0, 0, 0, 1);
 }
 
 #viewerContainer.pdfPresentationMode:fullscreen {
   top: 0px;
   border-top: 2px solid rgba(0, 0, 0, 0);
-  background-color: #000;
+  background-color: rgba(0, 0, 0, 1);
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -101,8 +101,7 @@ select {
   width: var(--sidebar-width);
   visibility: hidden;
   z-index: 100;
-  border-top: 1px solid #333;
-
+  border-top: 1px solid rgba(51, 51, 51, 1);
   transition-duration: 200ms;
   transition-timing-function: ease;
 }
@@ -278,8 +277,8 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   position: relative;
   width: 100%;
   height: 4px;
-  background-color: #333;
-  border-bottom: 1px solid #333;
+  background-color: rgba(51, 51, 51, 1);
+  border-bottom: 1px solid rgba(51, 51, 51, 1);
 }
 
 #loadingBar .progress {
@@ -288,7 +287,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   left: 0;
   width: 0%;
   height: 100%;
-  background-color: #ddd;
+  background-color: rgba(221, 221, 221, 1);
   overflow: hidden;
   transition: width 200ms;
 }
@@ -299,7 +298,7 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
 }
 
 #loadingBar .progress.indeterminate {
-  background-color: #999;
+  background-color: rgba(153, 153, 153, 1);
   transition: none;
 }
 
@@ -309,12 +308,10 @@ html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
   left: 0;
   height: 100%;
   width: calc(100% + 150px);
-
   background: repeating-linear-gradient(135deg,
-                                        #bbb 0, #999 5px,
-                                        #999 45px, #ddd 55px,
-                                        #ddd 95px, #bbb 100px);
-
+                                        rgba(187, 187, 187, 1) 0, rgba(153, 153, 153, 1) 5px,
+                                        rgba(153, 153, 153, 1) 45px, rgba(221, 221, 221, 1) 55px,
+                                        rgba(221, 221, 221, 1) 95px, rgba(187, 187, 187, 1) 100px);
   animation: progressIndeterminate 950ms linear infinite;
 }
 

From e3c0181357b17af6e67b90668416afde75b657c9 Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 25 Dec 2019 16:19:14 +0100
Subject: [PATCH 7/7] Convert all six-digit HEX colors to RGBA colors

---
 examples/mobile-viewer/viewer.css | 10 +++++-----
 web/annotation_layer_builder.css  |  2 +-
 web/viewer.css                    | 24 ++++++++++++------------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
index 317390a3f..4ed9313a4 100644
--- a/examples/mobile-viewer/viewer.css
+++ b/examples/mobile-viewer/viewer.css
@@ -26,12 +26,12 @@ html {
 }
 
 header {
-  background-color: #f4f4f4;
+  background-color: rgba(244, 244, 244, 1);
 }
 
 header h1 {
-  border-bottom: 1px solid #d8d8d8;
-  color: #858585;
+  border-bottom: 1px solid rgba(216, 216, 216, 1);
+  color: rgba(133, 133, 133, 1);
   font-size: 23px;
   font-style: italic;
   font-weight: normal;
@@ -230,7 +230,7 @@ canvas {
 }
 
 #errorWrapper {
-  background: none repeat scroll 0 0 #FF5555;
+  background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
   color: rgba(255, 255, 255, 1);
   left: 0;
   position: absolute;
@@ -250,7 +250,7 @@ canvas {
 }
 
 #errorMoreInfo {
-  background-color: #FFFFFF;
+  background-color: rgba(255, 255, 255, 1);
   color: rgba(0, 0, 0, 1);
   padding: 0.3rem;
   margin: 0.3rem;
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index 80844e866..c62bdbc4e 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -157,7 +157,7 @@
   position: absolute;
   z-index: 200;
   max-width: 20em;
-  background-color: #FFFF99;
+  background-color: rgba(255, 255, 153, 1);
   box-shadow: 0px 2px 5px rgba(136, 136, 136, 1);
   border-radius: 2px;
   padding: 6px;
diff --git a/web/viewer.css b/web/viewer.css
index 536423154..3d9fa9fe3 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -34,7 +34,7 @@ html {
 body {
   height: 100%;
   width: 100%;
-  background-color: #404040;
+  background-color: rgba(64, 64, 64, 1);
   background-image: url(images/texture.png);
 }
 
@@ -217,7 +217,7 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio
 #toolbarSidebar {
   width: 100%;
   height: 32px;
-  background-color: #424242; /* fallback */
+  background-color: rgba(66, 66, 66, 1); /* fallback */
   background-image: url(images/texture.png),
                     linear-gradient(rgba(77, 77, 77, 0.99), rgba(64, 64, 64, 0.95));
 }
@@ -252,7 +252,7 @@ html[dir='rtl'] #sidebarResizer {
 #toolbarContainer, .findbar, .secondaryToolbar {
   position: relative;
   height: 32px;
-  background-color: #474747; /* fallback */
+  background-color: rgba(71, 71, 71, 1); /* fallback */
   background-image: url(images/texture.png),
                     linear-gradient(rgba(82, 82, 82, 0.99), rgba(69, 69, 69, 0.95));
 }
@@ -456,7 +456,7 @@ html[dir='ltr'] .doorHangerRight:before {
 
 #findMsg {
   font-style: italic;
-  color: #A6B7D0;
+  color: rgba(166, 183, 208, 1);
 }
 #findMsg:empty {
   display: none;
@@ -901,7 +901,7 @@ html[dir="rtl"] #viewOutline.toolbarButton::before {
   top: 1px;
   /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
   content: '';
-  background-color: #70DB55;
+  background-color: rgba(112, 219, 85, 1);
   height: 9px;
   width: 9px;
   border-radius: 50%;
@@ -1314,7 +1314,7 @@ html[dir='rtl'] .outlineItemToggler::before {
 }
 
 #errorWrapper {
-  background: none repeat scroll 0 0 #FF5555;
+  background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
   color: rgba(255, 255, 255, 1);
   left: 0;
   position: absolute;
@@ -1336,7 +1336,7 @@ html[dir='rtl'] .outlineItemToggler::before {
 }
 
 #errorMoreInfo {
-  background-color: #FFFFFF;
+  background-color: rgba(255, 255, 255, 1);
   color: rgba(0, 0, 0, 1);
   padding: 3px;
   margin: 3px;
@@ -1375,7 +1375,7 @@ html[dir='rtl'] .outlineItemToggler::before {
   color: rgba(217, 217, 217, 1);
   font-size: 12px;
   line-height: 14px;
-  background-color: #474747; /* fallback */
+  background-color: rgba(71, 71, 71, 1); /* fallback */
   background-image: url(images/texture.png),
                     linear-gradient(rgba(82, 82, 82,0.99), rgba(69, 69, 69, 0.95));
   border: 1px solid rgba(0, 0, 0, 0.5);
@@ -1460,7 +1460,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
 
 #PDFBug {
   background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
-  border: 1px solid #666666;
+  border: 1px solid rgba(102, 102, 102, 1);
   position: fixed;
   top: 32px;
   right: 0;
@@ -1470,9 +1470,9 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
   width: 300px;
 }
 #PDFBug .controls {
-    background:#EEEEEE;
-    border-bottom: 1px solid #666666;
-    padding: 3px;
+  background: rgba(238, 238, 238, 1);
+  border-bottom: 1px solid rgba(102, 102, 102, 1);
+  padding: 3px;
 }
 #PDFBug .panels {
   bottom: 0;