PDF Viewer Update: Apply thumbnail styling on hover

Make thumbnails opaque in their default states. Remove opacity on the
thumbnail of the active page.

Decrease opacity when hovering over thumbnails of inactive pages.
Increase opacity against a white background when hovering over
thumbnails of active pages.

Bug: 652400
Change-Id: I58c39dfdba8bd606ce202c69c6e11e2e21beac82
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2434886
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812212}

chrome/browser/resources/pdf/elements/viewer-thumbnail.html

@@ -9,9 +9,6 @@
   }
 
   #thumbnail {
-    /** TODO(crbug.com/652400): Change inactive background color. */
-    --inactive-background-color: black;
-    background-color: var(--inactive-background-color);
     display: inline-block;
     margin-bottom: 12px;
     margin-inline-end: auto;
@@ -29,6 +26,17 @@
 
   canvas {
     display: block;
+    opacity: 0.5;
+    transition: opacity 100ms ease-out;
+  }
+
+  :host([is-active]) canvas {
+    opacity: 1;
+  }
+
+  :host([is-active]) canvas:hover,
+  canvas:hover {
+    opacity: 0.7;
   }
 
   #pageNumber {