svelte-pdf-view 0.3.1 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* PDF Renderer Styles - Shadow DOM Isolated
|
|
3
3
|
* This is a derivative work based on PDF.js text_layer_builder.css
|
|
4
4
|
*/
|
|
5
|
-
export declare const rendererStyles = "\n/* CSS Custom Properties with defaults */\n.pdf-renderer-container {\n\t--pdf-background-color: #e8e8e8;\n\t--pdf-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);\n\t--pdf-scrollbar-track-color: #f1f1f1;\n\t--pdf-scrollbar-thumb-color: #c1c1c1;\n\t--pdf-scrollbar-thumb-hover-color: #a1a1a1;\n\t--pdf-scrollbar-width: 10px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: var(--pdf-background-color);\n\toverflow: hidden;\n}\n\n/* Scroll container */\n.pdf-scroll-container {\n\tflex: 1;\n\toverflow: auto;\n\tposition: relative;\n\tbackground-color: var(--pdf-background-color);\n}\n\n/* Custom scrollbar styling */\n.pdf-scroll-container::-webkit-scrollbar {\n\twidth: var(--pdf-scrollbar-width);\n\theight: var(--pdf-scrollbar-width);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-track {\n\tbackground: var(--pdf-scrollbar-track-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb {\n\tbackground: var(--pdf-scrollbar-thumb-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--pdf-scrollbar-thumb-hover-color);\n}\n\n/* Firefox scrollbar */\n.pdf-scroll-container {\n\tscrollbar-width: thin;\n\tscrollbar-color: var(--pdf-scrollbar-thumb-color) var(--pdf-scrollbar-track-color);\n}\n\n/* Viewer - dynamically created */\n.pdfViewer {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tpadding: 20px;\n\tgap: 16px;\n}\n\n/* Page - dynamically created with CSS variables for text layer */\n.page {\n\t--user-unit: 1;\n\t--total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));\n\t--scale-round-x: 1px;\n\t--scale-round-y: 1px;\n\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: var(--pdf-page-shadow);\n\tborder-radius: 2px;\n\tmargin: 0;\n\tdirection: ltr;\n}\n\n.page .loadingIcon {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tcolor: #666;\n\tfont-size: 14px;\n}\n\n.page .canvasWrapper {\n\tposition: absolute;\n\tinset: 0;\n\toverflow: hidden;\n\tz-index: 0;\n}\n\n.page .pdf-canvas {\n\tdisplay: block;\n}\n\n/* Text layer - essential styles from PDF.js */\n.textLayer {\n\tposition: absolute;\n\ttext-align: initial;\n\tinset: 0;\n\toverflow: clip;\n\topacity: 1;\n\tline-height: 1;\n\t-webkit-text-size-adjust: none;\n\t-moz-text-size-adjust: none;\n\ttext-size-adjust: none;\n\tforced-color-adjust: none;\n\ttransform-origin: 0 0;\n\tcaret-color: CanvasText;\n\tz-index: 2;\n}\n\n/* Text layer rotation transforms */\n.textLayer[data-main-rotation='90'] {\n\ttransform: rotate(90deg) translateY(-100%);\n}\n\n.textLayer[data-main-rotation='180'] {\n\ttransform: rotate(180deg) translate(-100%, -100%);\n}\n\n.textLayer[data-main-rotation='270'] {\n\ttransform: rotate(270deg) translateX(-100%);\n}\n\n.textLayer :is(span, br) {\n\tcolor: transparent;\n\tposition: absolute;\n\twhite-space: pre;\n\tcursor: text;\n\ttransform-origin: 0% 0%;\n}\n\n.textLayer > :not(.markedContent),\n.textLayer .markedContent span:not(.markedContent) {\n\tz-index: 1;\n}\n\n.textLayer span.markedContent {\n\ttop: 0;\n\theight: 0;\n}\n\n.textLayer ::-moz-selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer ::selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer br::-moz-selection,\n.textLayer br::selection {\n\tbackground: transparent;\n}\n\n/* Search highlights */\n.textLayer .highlight {\n\tmargin: -1px;\n\tpadding: 1px;\n\tbackground-color: rgba(255, 255, 0, 0.4);\n\tborder-radius: 4px;\n}\n\n.textLayer .highlight.appended {\n\tposition: initial;\n}\n\n.textLayer .highlight.selected {\n\tbackground-color: rgba(255, 128, 0, 0.6);\n}\n\n.textLayer .highlight.begin {\n\tborder-radius: 4px 0 0 4px;\n}\n\n.textLayer .highlight.end {\n\tborder-radius: 0 4px 4px 0;\n}\n\n.textLayer .highlight.middle {\n\tborder-radius: 0;\n}\n\n/* Annotation Layer - for links, form widgets, popups */\n.annotationLayer {\n\t--annotation-unfocused-field-background: url(\"data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>\");\n\t--input-focus-border-color: Highlight;\n\t--input-focus-outline: 1px solid Canvas;\n\t--input-unfocused-border-color: transparent;\n\t--input-disabled-border-color: transparent;\n\t--input-hover-border-color: black;\n\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tpointer-events: none;\n\ttransform-origin: 0 0;\n\tz-index: 3;\n}\n\n.annotationLayer[data-main-rotation='90'] .norotate {\n\ttransform: rotate(270deg) translateX(-100%);\n}\n.annotationLayer[data-main-rotation='180'] .norotate {\n\ttransform: rotate(180deg) translate(-100%, -100%);\n}\n.annotationLayer[data-main-rotation='270'] .norotate {\n\ttransform: rotate(90deg) translateY(-100%);\n}\n\n.annotationLayer section {\n\tposition: absolute;\n\ttext-align: initial;\n\tpointer-events: auto;\n\tbox-sizing: border-box;\n\ttransform-origin: 0 0;\n\tuser-select: none;\n}\n\n/* Link annotations */\n.annotationLayer .linkAnnotation > a,\n.annotationLayer .buttonWidgetAnnotation.pushButton > a {\n\tposition: absolute;\n\tfont-size: 1em;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.annotationLayer .linkAnnotation > a:hover,\n.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {\n\topacity: 0.2;\n\tbackground-color: rgb(255 255 0);\n\tbox-shadow: 0 2px 10px rgb(255 255 0);\n}\n\n.annotationLayer .linkAnnotation.hasBorder:hover {\n\tbackground-color: rgb(255 255 0 / 0.2);\n}\n\n/* Text annotations (comments/notes) */\n.annotationLayer .textAnnotation img {\n\tposition: absolute;\n\tcursor: pointer;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0;\n\tleft: 0;\n}\n\n/* Form widgets */\n.annotationLayer .textWidgetAnnotation input,\n.annotationLayer .textWidgetAnnotation textarea,\n.annotationLayer .choiceWidgetAnnotation select,\n.annotationLayer .buttonWidgetAnnotation.checkBox input,\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tbackground-image: var(--annotation-unfocused-field-background);\n\tborder: 2px solid var(--input-unfocused-border-color);\n\tbox-sizing: border-box;\n\tfont: calc(9px * var(--total-scale-factor)) sans-serif;\n\theight: 100%;\n\tmargin: 0;\n\tvertical-align: top;\n\twidth: 100%;\n}\n\n.annotationLayer .textWidgetAnnotation input:hover,\n.annotationLayer .textWidgetAnnotation textarea:hover,\n.annotationLayer .choiceWidgetAnnotation select:hover,\n.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,\n.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {\n\tborder: 2px solid var(--input-hover-border-color);\n}\n\n.annotationLayer .textWidgetAnnotation input:focus,\n.annotationLayer .textWidgetAnnotation textarea:focus,\n.annotationLayer .choiceWidgetAnnotation select:focus {\n\tbackground: none;\n\tborder: 2px solid var(--input-focus-border-color);\n\tborder-radius: 2px;\n\toutline: var(--input-focus-outline);\n}\n\n.annotationLayer .textWidgetAnnotation textarea {\n\tresize: none;\n}\n\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tborder-radius: 50%;\n}\n\n.annotationLayer .buttonWidgetAnnotation.checkBox input,\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tappearance: none;\n}\n\n/* Popup annotations */\n.annotationLayer .popupAnnotation {\n\tposition: absolute;\n\tfont-size: calc(9px * var(--total-scale-factor));\n\tpointer-events: none;\n\twidth: max-content;\n\tmax-width: 45%;\n\theight: auto;\n}\n\n.annotationLayer .popup {\n\tbackground-color: rgb(255 255 153);\n\tbox-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136);\n\tborder-radius: calc(2px * var(--total-scale-factor));\n\toutline: 1.5px solid rgb(255 255 74);\n\tpadding: calc(6px * var(--total-scale-factor));\n\tcursor: pointer;\n\tfont: message-box;\n\twhite-space: normal;\n\tword-wrap: break-word;\n\tpointer-events: auto;\n}\n\n.annotationLayer .popup > .header {\n\tdisplay: inline-block;\n}\n\n.annotationLayer .popup > .header > .title {\n\tfont-weight: bold;\n}\n\n.annotationLayer .popupContent {\n\tborder-top: 1px solid rgb(51 51 51);\n\tmargin-top: calc(2px * var(--total-scale-factor));\n\tpadding-top: calc(2px * var(--total-scale-factor));\n}\n\n.annotationLayer .popupTriggerArea {\n\tcursor: pointer;\n}\n";
|
|
5
|
+
export declare const rendererStyles = "\n/* CSS Custom Properties with defaults */\n.pdf-renderer-container {\n\t--pdf-background-color: #e8e8e8;\n\t--pdf-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);\n\t--pdf-scrollbar-track-color: #f1f1f1;\n\t--pdf-scrollbar-thumb-color: #c1c1c1;\n\t--pdf-scrollbar-thumb-hover-color: #a1a1a1;\n\t--pdf-scrollbar-width: 10px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: var(--pdf-background-color);\n\toverflow: hidden;\n}\n\n/* Scroll container */\n.pdf-scroll-container {\n\tflex: 1;\n\toverflow: auto;\n\tposition: relative;\n\tbackground-color: var(--pdf-background-color);\n}\n\n/* Custom scrollbar styling */\n.pdf-scroll-container::-webkit-scrollbar {\n\twidth: var(--pdf-scrollbar-width);\n\theight: var(--pdf-scrollbar-width);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-track {\n\tbackground: var(--pdf-scrollbar-track-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb {\n\tbackground: var(--pdf-scrollbar-thumb-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--pdf-scrollbar-thumb-hover-color);\n}\n\n/* Firefox scrollbar */\n.pdf-scroll-container {\n\tscrollbar-width: thin;\n\tscrollbar-color: var(--pdf-scrollbar-thumb-color) var(--pdf-scrollbar-track-color);\n}\n\n/* Viewer - dynamically created */\n.pdfViewer {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tpadding: 20px;\n\tgap: 16px;\n\tmin-width: fit-content;\n}\n\n/* Page - dynamically created with CSS variables for text layer */\n.page {\n\t--user-unit: 1;\n\t--total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));\n\t--scale-round-x: 1px;\n\t--scale-round-y: 1px;\n\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: var(--pdf-page-shadow);\n\tborder-radius: 2px;\n\tmargin: 0;\n\tdirection: ltr;\n}\n\n.page .loadingIcon {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tcolor: #666;\n\tfont-size: 14px;\n}\n\n.page .canvasWrapper {\n\tposition: absolute;\n\tinset: 0;\n\toverflow: hidden;\n\tz-index: 0;\n}\n\n.page .pdf-canvas {\n\tdisplay: block;\n}\n\n/* Text layer - essential styles from PDF.js */\n.textLayer {\n\tposition: absolute;\n\ttext-align: initial;\n\tinset: 0;\n\toverflow: clip;\n\topacity: 1;\n\tline-height: 1;\n\t-webkit-text-size-adjust: none;\n\t-moz-text-size-adjust: none;\n\ttext-size-adjust: none;\n\tforced-color-adjust: none;\n\ttransform-origin: 0 0;\n\tcaret-color: CanvasText;\n\tz-index: 2;\n}\n\n/* Text layer rotation transforms */\n.textLayer[data-main-rotation='90'] {\n\ttransform: rotate(90deg) translateY(-100%);\n}\n\n.textLayer[data-main-rotation='180'] {\n\ttransform: rotate(180deg) translate(-100%, -100%);\n}\n\n.textLayer[data-main-rotation='270'] {\n\ttransform: rotate(270deg) translateX(-100%);\n}\n\n.textLayer :is(span, br) {\n\tcolor: transparent;\n\tposition: absolute;\n\twhite-space: pre;\n\tcursor: text;\n\ttransform-origin: 0% 0%;\n}\n\n.textLayer > :not(.markedContent),\n.textLayer .markedContent span:not(.markedContent) {\n\tz-index: 1;\n}\n\n.textLayer span.markedContent {\n\ttop: 0;\n\theight: 0;\n}\n\n.textLayer ::-moz-selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer ::selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer br::-moz-selection,\n.textLayer br::selection {\n\tbackground: transparent;\n}\n\n/* Search highlights */\n.textLayer .highlight {\n\tmargin: -1px;\n\tpadding: 1px;\n\tbackground-color: rgba(255, 255, 0, 0.4);\n\tborder-radius: 4px;\n}\n\n.textLayer .highlight.appended {\n\tposition: initial;\n}\n\n.textLayer .highlight.selected {\n\tbackground-color: rgba(255, 128, 0, 0.6);\n}\n\n.textLayer .highlight.begin {\n\tborder-radius: 4px 0 0 4px;\n}\n\n.textLayer .highlight.end {\n\tborder-radius: 0 4px 4px 0;\n}\n\n.textLayer .highlight.middle {\n\tborder-radius: 0;\n}\n\n/* Annotation Layer - for links, form widgets, popups */\n.annotationLayer {\n\t--annotation-unfocused-field-background: url(\"data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>\");\n\t--input-focus-border-color: Highlight;\n\t--input-focus-outline: 1px solid Canvas;\n\t--input-unfocused-border-color: transparent;\n\t--input-disabled-border-color: transparent;\n\t--input-hover-border-color: black;\n\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tpointer-events: none;\n\ttransform-origin: 0 0;\n\tz-index: 3;\n}\n\n.annotationLayer[data-main-rotation='90'] .norotate {\n\ttransform: rotate(270deg) translateX(-100%);\n}\n.annotationLayer[data-main-rotation='180'] .norotate {\n\ttransform: rotate(180deg) translate(-100%, -100%);\n}\n.annotationLayer[data-main-rotation='270'] .norotate {\n\ttransform: rotate(90deg) translateY(-100%);\n}\n\n.annotationLayer section {\n\tposition: absolute;\n\ttext-align: initial;\n\tpointer-events: auto;\n\tbox-sizing: border-box;\n\ttransform-origin: 0 0;\n\tuser-select: none;\n}\n\n/* Link annotations */\n.annotationLayer .linkAnnotation > a,\n.annotationLayer .buttonWidgetAnnotation.pushButton > a {\n\tposition: absolute;\n\tfont-size: 1em;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.annotationLayer .linkAnnotation > a:hover,\n.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {\n\topacity: 0.2;\n\tbackground-color: rgb(255 255 0);\n\tbox-shadow: 0 2px 10px rgb(255 255 0);\n}\n\n.annotationLayer .linkAnnotation.hasBorder:hover {\n\tbackground-color: rgb(255 255 0 / 0.2);\n}\n\n/* Text annotations (comments/notes) */\n.annotationLayer .textAnnotation img {\n\tposition: absolute;\n\tcursor: pointer;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0;\n\tleft: 0;\n}\n\n/* Form widgets */\n.annotationLayer .textWidgetAnnotation input,\n.annotationLayer .textWidgetAnnotation textarea,\n.annotationLayer .choiceWidgetAnnotation select,\n.annotationLayer .buttonWidgetAnnotation.checkBox input,\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tbackground-image: var(--annotation-unfocused-field-background);\n\tborder: 2px solid var(--input-unfocused-border-color);\n\tbox-sizing: border-box;\n\tfont: calc(9px * var(--total-scale-factor)) sans-serif;\n\theight: 100%;\n\tmargin: 0;\n\tvertical-align: top;\n\twidth: 100%;\n}\n\n.annotationLayer .textWidgetAnnotation input:hover,\n.annotationLayer .textWidgetAnnotation textarea:hover,\n.annotationLayer .choiceWidgetAnnotation select:hover,\n.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,\n.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {\n\tborder: 2px solid var(--input-hover-border-color);\n}\n\n.annotationLayer .textWidgetAnnotation input:focus,\n.annotationLayer .textWidgetAnnotation textarea:focus,\n.annotationLayer .choiceWidgetAnnotation select:focus {\n\tbackground: none;\n\tborder: 2px solid var(--input-focus-border-color);\n\tborder-radius: 2px;\n\toutline: var(--input-focus-outline);\n}\n\n.annotationLayer .textWidgetAnnotation textarea {\n\tresize: none;\n}\n\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tborder-radius: 50%;\n}\n\n.annotationLayer .buttonWidgetAnnotation.checkBox input,\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tappearance: none;\n}\n\n/* Popup annotations */\n.annotationLayer .popupAnnotation {\n\tposition: absolute;\n\tfont-size: calc(9px * var(--total-scale-factor));\n\tpointer-events: none;\n\twidth: max-content;\n\tmax-width: 45%;\n\theight: auto;\n}\n\n.annotationLayer .popup {\n\tbackground-color: rgb(255 255 153);\n\tbox-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136);\n\tborder-radius: calc(2px * var(--total-scale-factor));\n\toutline: 1.5px solid rgb(255 255 74);\n\tpadding: calc(6px * var(--total-scale-factor));\n\tcursor: pointer;\n\tfont: message-box;\n\twhite-space: normal;\n\tword-wrap: break-word;\n\tpointer-events: auto;\n}\n\n.annotationLayer .popup > .header {\n\tdisplay: inline-block;\n}\n\n.annotationLayer .popup > .header > .title {\n\tfont-weight: bold;\n}\n\n.annotationLayer .popupContent {\n\tborder-top: 1px solid rgb(51 51 51);\n\tmargin-top: calc(2px * var(--total-scale-factor));\n\tpadding-top: calc(2px * var(--total-scale-factor));\n}\n\n.annotationLayer .popupTriggerArea {\n\tcursor: pointer;\n}\n";
|