Variable VivliostyleViewportCssConst
VivliostyleViewportCss: "\n[data-vivliostyle-layout-box] {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n z-index: -1;\n transform-origin: left top;\n}\n\n[data-vivliostyle-debug] [data-vivliostyle-layout-box] {\n right: auto;\n bottom: auto;\n overflow: visible;\n z-index: auto;\n}\n\n[data-vivliostyle-spread-container] {\n transform: scale(var(--viv-outputScale,1));\n transform-origin: left top;\n}\n\n/* Emulate high pixel ratio using zoom & transform:scale() */\n@supports (zoom: 8) {\n [data-vivliostyle-layout-box] {\n zoom: calc(var(--viv-outputPixelRatio,1) / var(--viv-devicePixelRatio,1));\n transform: scale(calc(var(--viv-devicePixelRatio,1) / var(--viv-outputPixelRatio,1)));\n }\n [data-vivliostyle-spread-container] {\n zoom: calc(var(--viv-outputPixelRatio,1) / var(--viv-devicePixelRatio,1));\n transform: scale(calc(var(--viv-outputScale,1) * var(--viv-devicePixelRatio,1) / var(--viv-outputPixelRatio,1)));\n }\n /* Workaround for Chromium's default border etc. widths not zoomed but scaled down */\n [data-vivliostyle-spread-container] :where([style*=border],[style*=outline],[style*=rule]) {\n border-width: medium;\n outline-width: medium;\n column-rule-width: medium;\n }\n [data-vivliostyle-spread-container] ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n [data-vivliostyle-spread-container] ::-webkit-scrollbar-track {\n background-color: #f4f4f4;\n }\n [data-vivliostyle-spread-container] ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background: #c7c7c7;\n }\n [data-vivliostyle-spread-container] ::-webkit-scrollbar-thumb:hover {\n background: #7d7d7d;\n }\n}\n\n[data-vivliostyle-page-container] {\n position: relative;\n}\n\n[data-vivliostyle-bleed-box] {\n position: absolute;\n overflow: hidden;\n background-origin: content-box !important;\n}\n\n[data-vivliostyle-page-box] ~ [data-vivliostyle-page-box] {\n display: none;\n}\n\n[data-vivliostyle-toc-box] {\n position: absolute;\n left: 3px;\n top: 3px;\n overflow: scroll;\n overflow-x: hidden;\n background: rgba(248, 248, 248, 0.9);\n border-radius: 2px;\n box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);\n}\n\n@media print {\n [data-vivliostyle-toc-box] {\n display: none;\n }\n\n [data-vivliostyle-outer-zoom-box],\n [data-vivliostyle-spread-container] {\n width: 100% !important;\n height: 100% !important;\n }\n\n [data-vivliostyle-spread-container] {\n --viv-outputScale: 1 !important;\n --viv-devicePixelRatio: 1 !important;\n zoom: normal !important;\n transform: none !important;\n print-color-adjust: exact;\n }\n\n @supports (zoom: 8) {\n [data-vivliostyle-spread-container] [data-vivliostyle-page-container] {\n zoom: var(--viv-outputPixelRatio,1);\n /* transform: scale(calc(1 / var(--viv-outputPixelRatio,1))); */\n /* Use matrix instead of scale (Workaround for issue #1555) */\n transform: matrix(calc(1 / var(--viv-outputPixelRatio,1)), 0, 5e-324, calc(1 / var(--viv-outputPixelRatio,1)), 0, 0);\n transform-origin: left top;\n }\n }\n\n [data-vivliostyle-spread-container] [data-vivliostyle-page-container] {\n display: block !important;\n max-height: 100vh;\n }\n\n [data-vivliostyle-spread-container] [data-vivliostyle-page-container]:not(:last-child) {\n break-after: page;\n }\n\n /* Gecko-only hack, see https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c17 */\n @-moz-document url-prefix() {\n [data-vivliostyle-spread-container] [data-vivliostyle-page-container]:nth-last-child(n + 2) {\n top: -1px;\n margin-top: 1px;\n margin-bottom: -1px;\n }\n /* Workaround Gecko problem on page break */\n [data-vivliostyle-spread-container] [data-vivliostyle-page-container] {\n break-after: auto !important;\n height: 100% !important;\n }\n }\n}\n" = ...
vivliostyle-viewport.css