Tweak the pageNumber CSS to better support RTL locales

This effectively implements some of the changes from https://phabricator.services.mozilla.com/D170496, but in such a way that the loading-icon won't overlay the page-number in RTL locales.

web/viewer.css

@@ -1115,7 +1115,7 @@ a.secondaryToolbarButton[href="#"] {
 
 #pageNumber {
   -moz-appearance: textfield; /* hides the spinner in moz */
-  text-align: right;
+  text-align: end;
   width: 40px;
   background-size: 0 0;
   transition-property: none;
@@ -1123,7 +1123,7 @@ a.secondaryToolbarButton[href="#"] {
 #pageNumber.visiblePageIsLoading {
   background-image: var(--loading-icon);
   background-repeat: no-repeat;
-  background-position: 3px;
+  background-position: calc(50% - 42% * var(--dir-factor));
   background-size: 16px 16px;
   /* Using a delay with background-image doesn't work,
      consequently we use background-size. */