pdf.js

web/styles.css

@@ -3,7 +3,7 @@
 }
 body {
   margin: 0;
-  font: 14px system-ui,sans-serif;
+  font: 14px system-ui, sans-serif;
   color: #202124;
 }
 header {
@@ -29,7 +29,7 @@ header span {
 main {
   height: calc(100vh - 52px);
   display: grid;
-  grid-template-columns: 330px 430px minmax(500px,1fr);
+  grid-template-columns: 330px 430px minmax(500px, 1fr);
 }
 aside,
 .details {
@@ -77,12 +77,14 @@ aside,
 .viewer {
   position: relative;
   background: #555;
+  overflow: hidden;
 }
-.viewer iframe {
+.viewer #pdfViewer {
   width: 100%;
   height: 100%;
-  border: 0;
-  background: white;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: #525659;
 }
 .viewer #pdfMessage {
   position: absolute;
@@ -91,12 +93,13 @@ aside,
   place-items: center;
   color: white;
   pointer-events: none;
+  z-index: 2;
 }
 .viewer.loaded #pdfMessage {
   display: none;
 }
 dialog {
-  width: min(720px,90vw);
+  width: min(720px, 90vw);
 }
 dialog label {
   display: block;
@@ -185,3 +188,39 @@ hr.field-sep {
   width: auto;
   margin-top: 0;
 }
+
+/* PDF.js viewer */
+.pdf-v-loading {
+  padding: 40px 20px;
+  color: #aaa;
+  text-align: center;
+  font-size: 15px;
+}
+.pdf-v-error {
+  padding: 30px 20px;
+  color: #f88;
+  text-align: center;
+  white-space: pre-wrap;
+}
+.pdf-v-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+}
+.pdf-v-page {
+  background: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  flex-shrink: 0;
+}
+.pdf-v-placeholder {
+  background: rgba(255, 255, 255, 0.05);
+  flex-shrink: 0;
+}
+.pdf-v-page canvas,
+.pdf-v-placeholder canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}