@pdfslick/react 2.1.1 → 2.1.4-next.0

package/dist/pdf_viewer.css

@@ -3272,14 +3272,14 @@
   margin:0 auto;
   border:2px solid transparent;
 }
-:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor),.textLayer) .editToolbar) .buttons) .delete)::before {
+:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), .textLayer) .editToolbar) .buttons) .delete)::before {
     display: block !important;
 }
 
 .pdfSlickViewer *,
 .pdfSlickViewer *::before,
 .pdfSlickViewer *::after {
-  box-sizing: initial !important;
+    box-sizing: initial !important;
 }
 
 .pdfSlick {
@@ -3310,4 +3310,112 @@
     background-color: rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: inset 1px 1px 0px rgb(0 0 0 / 10%),
         inset 0px -1px 0px rgb(0 0 0 / 7%);
+}
+
+/** dialog style source: https://github.com/mozilla/pdf.js/blob/v4.10.38/web/viewer.css */
+
+:root {
+    --main-color: rgb(12 12 13);
+    --progressBar-color: rgb(10 132 255);
+    --progressBar-bg-color: rgb(221 221 222);
+    --progressBar-blend-color: rgb(116 177 239);
+    --button-hover-color: color-mix(in srgb, currentColor 17%, transparent);
+    --doorhanger-bg-color: rgb(255 255 255);
+    --dialog-button-border: none;
+    --dialog-button-bg-color: rgb(12 12 13 / 0.1);
+    --dialog-button-hover-bg-color: rgb(12 12 13 / 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --main-color: rgb(249 249 250);
+        --doorhanger-bg-color: #42414d;
+        --dialog-button-bg-color: rgb(92 92 97);
+        --dialog-button-hover-bg-color: rgb(115 115 115);
+    }
+}
+
+@media screen and (forced-colors: active) {
+    :root {
+        --dialog-button-border: 1px solid Highlight;
+        --dialog-button-hover-bg-color: Highlight;
+        --dialog-button-hover-color: ButtonFace;
+        --main-color: CanvasText;
+    }
+}
+
+.pdfSlick-dialog {
+    margin: auto;
+    padding: 15px;
+    border-spacing: 4px;
+    color: var(--main-color);
+    font: message-box;
+    font-size: 12px;
+    line-height: 14px;
+    background-color: var(--doorhanger-bg-color);
+    border: 1px solid rgb(0 0 0 / 0.5);
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
+}
+
+.pdfSlick-dialog::backdrop {
+    background-color: rgb(0 0 0 / 0.2);
+}
+
+.pdfSlick-dialog>.row {
+    display: table-row;
+}
+
+.pdfSlick-dialog>.row>* {
+    display: table-cell;
+}
+
+.pdfSlick-dialog :link {
+    color: rgb(255 255 255);
+}
+
+.pdfSlick-dialog .buttonRow {
+    text-align: center;
+    vertical-align: middle;
+}
+
+.pdfSlick-dialog .dialogButton {
+    border: none;
+    background: none;
+    width: 28px;
+    height: 28px;
+    outline: none;
+}
+
+.pdfSlick-dialog .dialogButton:is(:hover, :focus-visible) {
+    background-color: var(--dialog-button-hover-bg-color);
+}
+
+.pdfSlick-dialog .dialogButton:is(:hover, :focus-visible)>span {
+    color: var(--dialog-button-hover-color);
+}
+
+.pdfSlick-dialog .dialogButton {
+    min-width: 16px;
+    margin: 2px 1px;
+    padding: 2px 6px 0;
+    border: none;
+    border-radius: 2px;
+    color: var(--main-color);
+    font-size: 12px;
+    line-height: 14px;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: default;
+    box-sizing: border-box;
+}
+
+.pdfSlick-dialog .dialogButton {
+    width: auto;
+    margin: 3px 4px 2px !important;
+    padding: 2px 11px;
+    color: var(--main-color);
+    background-color: var(--dialog-button-bg-color);
+    border: var(--dialog-button-border) !important;
 }