fork from https://github.com/mozilla/pdf.js.git
This commit is contained in:
242
examples/mobile-viewer/viewer.css
Normal file
242
examples/mobile-viewer/viewer.css
Normal file
@@ -0,0 +1,242 @@
|
||||
/* Copyright 2016 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.
|
||||
*/
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: rgb(244 244 244 / 1);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-bottom: 1px solid rgb(216 216 216 / 1);
|
||||
color: rgb(133 133 133 / 1);
|
||||
font-size: 23px;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(images/document_bg.png);
|
||||
color: rgb(255 255 255 / 1);
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-image: url(images/toolbar_background.png);
|
||||
height: 4rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
box-shadow: 0 -0.2rem 0.5rem rgb(50 50 50 / 0.75);
|
||||
}
|
||||
|
||||
.toolbarButton {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgb(0 0 0 / 0);
|
||||
}
|
||||
|
||||
.toolbarButton.pageUp {
|
||||
position: absolute;
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
background-image: url(images/icon_previous_page.png);
|
||||
background-size: 2rem;
|
||||
}
|
||||
|
||||
.toolbarButton.pageDown {
|
||||
position: absolute;
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
left: 18%;
|
||||
background-image: url(images/icon_next_page.png);
|
||||
background-size: 2rem;
|
||||
}
|
||||
|
||||
#pageNumber {
|
||||
-moz-appearance: textfield; /* hides the spinner in moz */
|
||||
position: absolute;
|
||||
width: 28%;
|
||||
height: 100%;
|
||||
left: 36%;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
background-color: rgb(0 0 0 / 0);
|
||||
font-size: 1.2rem;
|
||||
color: rgb(255 255 255 / 1);
|
||||
background-image:
|
||||
url(images/div_line_left.png), url(images/div_line_right.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left, right;
|
||||
background-size: 0.2rem, 0.2rem;
|
||||
}
|
||||
|
||||
.toolbarButton.zoomOut {
|
||||
position: absolute;
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
left: 64%;
|
||||
background-image: url(images/icon_zoom_out.png);
|
||||
background-size: 2.4rem;
|
||||
}
|
||||
|
||||
.toolbarButton.zoomIn {
|
||||
position: absolute;
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
left: 82%;
|
||||
background-image: url(images/icon_zoom_in.png);
|
||||
background-size: 2.4rem;
|
||||
}
|
||||
|
||||
.toolbarButton[disabled] {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#viewerContainer {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
inset: 5rem 0 4rem;
|
||||
}
|
||||
|
||||
canvas {
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pdfViewer .page .loadingIcon {
|
||||
width: 2.9rem;
|
||||
height: 2.9rem;
|
||||
background: url("images/spinner.png") no-repeat left top / 38rem;
|
||||
border: medium none;
|
||||
animation: 1s steps(10, end) 0s normal none infinite moveDefault;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc((100% - 2.9rem) / 2);
|
||||
left: calc((100% - 2.9rem) / 2);
|
||||
}
|
||||
|
||||
@keyframes moveDefault {
|
||||
from {
|
||||
background-position: 0 top;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: -39rem top;
|
||||
}
|
||||
}
|
||||
|
||||
#loadingBar {
|
||||
/* Define this variable here, and not in :root, to avoid reflowing the
|
||||
entire viewer when updating progress (see issue 15958). */
|
||||
--progressBar-percent: 0%;
|
||||
|
||||
position: relative;
|
||||
height: 0.6rem;
|
||||
background-color: rgb(51 51 51 / 1);
|
||||
border-bottom: 1px solid rgb(51 51 51 / 1);
|
||||
}
|
||||
|
||||
#loadingBar .progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transform: scaleX(var(--progressBar-percent));
|
||||
transform-origin: 0 0;
|
||||
height: 100%;
|
||||
background-color: rgb(221 221 221 / 1);
|
||||
overflow: hidden;
|
||||
transition: transform 200ms;
|
||||
}
|
||||
|
||||
@keyframes progressIndeterminate {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
#loadingBar.indeterminate .progress {
|
||||
transform: none;
|
||||
background-color: rgb(153 153 153 / 1);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
#loadingBar.indeterminate .progress .glimmer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 5rem;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgb(153 153 153 / 1) 0%,
|
||||
rgb(255 255 255 / 1) 50%,
|
||||
rgb(153 153 153 / 1) 100%
|
||||
);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
animation: progressIndeterminate 2s linear infinite;
|
||||
}
|
||||
Reference in New Issue
Block a user