fork from https://github.com/mozilla/pdf.js.git
This commit is contained in:
244
web/pdf_viewer.css
Normal file
244
web/pdf_viewer.css
Normal file
@@ -0,0 +1,244 @@
|
||||
/* Copyright 2014 Mozilla Foundation
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
@import url(message_bar.css);
|
||||
@import url(dialog.css);
|
||||
@import url(text_layer_builder.css);
|
||||
@import url(annotation_layer_builder.css);
|
||||
@import url(xfa_layer_builder.css);
|
||||
/* Ignored in GECKOVIEW: begin */
|
||||
@import url(annotation_editor_layer_builder.css);
|
||||
@import url(menu.css);
|
||||
@import url(tree.css);
|
||||
@import url(views_manager.css);
|
||||
@import url(sidebar.css);
|
||||
/* Ignored in GECKOVIEW: end */
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--viewer-container-height: 0;
|
||||
--pdfViewer-padding-bottom: 0;
|
||||
--page-margin: 1px auto -8px;
|
||||
--page-border: 9px solid transparent;
|
||||
--spreadHorizontalWrapped-margin-LR: -3.5px;
|
||||
--loading-icon-delay: 400ms;
|
||||
--focus-ring-color: light-dark(#0060df, #0df);
|
||||
--focus-ring-outline: 2px solid var(--focus-ring-color);
|
||||
--new-badge-bg: light-dark(#070, #37b847);
|
||||
--new-badge-color: light-dark(#fff, #15141a);
|
||||
--new-badge-border-color: light-dark(#fbfbfe / 40%, #15141a / 40%);
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
--pdfViewer-padding-bottom: 9px;
|
||||
--page-margin: 8px auto -1px;
|
||||
--page-border: 1px solid CanvasText;
|
||||
--spreadHorizontalWrapped-margin-LR: 3.5px;
|
||||
--focus-ring-color: CanvasText;
|
||||
--new-badge-bg: AccentColor;
|
||||
--new-badge-color: ButtonFace;
|
||||
--new-badge-border-color: CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
.newBadge {
|
||||
background-color: var(--new-badge-bg);
|
||||
color: var(--new-badge-color);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--new-badge-border-color);
|
||||
padding-inline: 4px;
|
||||
margin-inline: 4px;
|
||||
font: menu;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
flex: 0 0 fit-content;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
[data-main-rotation="90"] {
|
||||
transform: rotate(90deg) translateY(-100%);
|
||||
}
|
||||
[data-main-rotation="180"] {
|
||||
transform: rotate(180deg) translate(-100%, -100%);
|
||||
}
|
||||
[data-main-rotation="270"] {
|
||||
transform: rotate(270deg) translateX(-100%);
|
||||
}
|
||||
|
||||
.pdfViewer {
|
||||
/* Define this variable here and not in :root to avoid to reflow all the UI
|
||||
when scaling (see #15929). */
|
||||
--scale-factor: 1;
|
||||
--page-bg-color: unset;
|
||||
|
||||
padding-bottom: var(--pdfViewer-padding-bottom);
|
||||
|
||||
--hcm-highlight-filter: none;
|
||||
--hcm-highlight-selected-filter: none;
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
--hcm-highlight-filter: invert(100%);
|
||||
}
|
||||
|
||||
&.copyAll {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.canvasWrapper {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
contain: content;
|
||||
|
||||
.structTree {
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
&.detailView {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pdfViewer .page {
|
||||
--user-unit: 1;
|
||||
--total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
|
||||
--scale-round-x: 1px;
|
||||
--scale-round-y: 1px;
|
||||
|
||||
direction: ltr;
|
||||
width: 816px;
|
||||
height: 1056px;
|
||||
margin: var(--page-margin);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
border: var(--page-border);
|
||||
background-clip: content-box;
|
||||
background-color: var(--page-bg-color, rgb(255 255 255));
|
||||
}
|
||||
|
||||
.pdfViewer .dummyPage {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: var(--viewer-container-height);
|
||||
}
|
||||
|
||||
.pdfViewer.noUserSelect {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*#if GENERIC*/
|
||||
.pdfViewer.removePageBorders .page {
|
||||
margin: 0 auto 10px;
|
||||
border: none;
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
/*#if COMPONENTS*/
|
||||
.pdfViewer.singlePageView {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pdfViewer.singlePageView .page {
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
.pdfViewer:is(.scrollHorizontal, .scrollWrapped),
|
||||
.spread {
|
||||
margin-inline: 3.5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pdfViewer.scrollHorizontal,
|
||||
.spread {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*#if GENERIC*/
|
||||
.pdfViewer.removePageBorders,
|
||||
/*#endif*/
|
||||
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.spread :is(.page, .dummyPage),
|
||||
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.spread .page,
|
||||
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page {
|
||||
margin-inline: var(--spreadHorizontalWrapped-margin-LR);
|
||||
}
|
||||
|
||||
/*#if GENERIC*/
|
||||
.pdfViewer.removePageBorders .spread .page,
|
||||
.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page {
|
||||
margin-inline: 5px;
|
||||
}
|
||||
/*#endif*/
|
||||
|
||||
.pdfViewer .page.loadingIcon::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("images/loading-icon.gif") center no-repeat;
|
||||
display: none;
|
||||
/* Using a delay with background-image doesn't work,
|
||||
consequently we use the display. */
|
||||
transition-property: display;
|
||||
transition-delay: var(--loading-icon-delay);
|
||||
z-index: 5;
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
.pdfViewer .page.loading::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pdfViewer .page:not(.loading)::after {
|
||||
transition-property: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pdfPresentationMode .pdfViewer {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pdfPresentationMode .spread {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pdfPresentationMode .pdfViewer .page {
|
||||
margin: 0 auto;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user