style/pdf viewer: several tweaks

packages/pdfjs-viewer/src/custom.css

@@ -3,7 +3,7 @@
 :root {    
     --main-color: var(--tn-main-text-color);
     --body-bg-color: transparent;
-    --outline-color: var(--tn-input-focus-outline-color);
+    --outline-color: gray;
     --focus-ring-color: var(--tn-input-focus-outline-color);
     --toolbar-border-color: var(--tn-main-border-color);
     --toolbar-icon-bg-color: var(--tn-main-text-color);
@@ -28,7 +28,7 @@
 :root #toolbarContainer #toolbarViewer input,
 :root #editorUndoBar,
 :root .dialogButton {
-    font-family: "Inter";
+    font-family: Inter, sans-serif;
 }
 
 #secondaryToolbar,
@@ -73,14 +73,15 @@
 }
 
 /* Text boxes */
-input {
+input:not([type]),
+input[type="number"] {
     --field-border-color: transparent;
     --field-bg-color: var(--tn-input-background-color);
     --field-color: var(--tn-input-text-color);
     --input-horizontal-padding: 8px;
 
     border-radius: 4px !important;
-    font-size: .8rem !important;
+    font-size: .85rem !important;
 
     &:hover {
         --field-bg-color: var(--tn-input-hover-background);
@@ -104,6 +105,22 @@ input {
     }
 }
 
+input[type="color"] {
+    border: 0;
+    outline: 0;
+    background: transparent;
+    border-radius: 4px;
+
+    &:hover {
+        opacity: .75;
+    }
+
+    &:focus {
+        outline: 2px solid var(--tn-input-focus-outline-color);
+        outline-offset: 2px;
+    }
+}
+
 /* #endregion */
 
 /* #region Toolbar */
@@ -192,17 +209,27 @@ input {
     /* Not found message */
     #findMsg[data-status="notFound"] {
         color: var(--tn-dropdown-item-icon-destructive-color);
+        opacity: 1;
     }
 }
 
+#toolbarContainer #toolbarViewer #pageNumber {
+    font-size: 12px;
+    font-weight: 600;
+}
+
 #scaleSelectContainer {
     --dropdown-btn-bg-color: transparent;
-    --button-hover-color: var(--tn-hover-item-background-color);
+    --button-hover-color: transparent;
     border-radius: 6px;
 
     select:focus {
         background: var(--tn-main-background-color);
     }
+
+    &:hover {
+        background-color: var(--tn-hover-item-background-color);
+    }
 }
 
 /* Toolbar editor dropdowns */
@@ -237,7 +264,8 @@ input {
     .toolbarButton.labeled {
         color: var(--tn-menu-text-color);
         padding-inline-end: 12px;
-        font-size: 13px;
+        padding-block: 6px;
+        font-size: .9em;
     }
 }