Skip to content

肖文锋 / pdfPreview

Go to a project
Commit c2f108d0 by 肖文锋
Options

Merge branch 'dev' into 'master' 

Dev

See merge request !1
parents 2fa56d6c 231d2d0d
Inline Side-by-side
Showing with 2767 additions and 264 deletions
package.json
......@@ -13,8 +13,7 @@
"pdfjs-dist": "^2.3.200",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
......
public/index.html
<!DOCTYPE html>
<html lang="en">
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
......
src/App.vue
<template>
<div id="app">
<div id="toolbar">
<button @click="zoomin">+</button>
<img
src="./assets/loading-icon.gif"
class="loadingIcon"
v-show="isLoading"
alt="loading"
/>
<div class="pageControll">
<i
:class="['jiantou', 'jiantou-left']"
v-show="pageIndex === 1 ? false : true"
title="上一页"
@click="previous"
>&#xe633;</i
>
<i
:class="['jiantou', 'jiantou-right']"
v-show="pageIndex === pageLength ? false : true"
title="下一页"
@click="next"
>&#xe633;</i
>
</div>
<div class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerLeft">
<div class="splitToolbarButton hiddenSmallView">
<button
:class="[
'toolbarButton',
'pageUp',
pageIndex === 1 ? 'taoolbarCantUse' : ''
]"
title="上一页"
id="previous"
tabindex="13"
data-l10n-id="previous"
@click="previous"
>
<span data-l10n-id="previous_label">上一页</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button
:class="[
'toolbarButton',
'pageDown',
pageIndex === pageLength ? 'taoolbarCantUse' : ''
]"
title="下一页"
id="next"
tabindex="14"
data-l10n-id="next"
@click="next"
>
<span data-l10n-id="next_label">下一页</span>
</button>
</div>
<input
type="number"
id="pageNumber"
class="toolbarField pageNumber"
title="页码"
v-model="pageIndex"
size="4"
min="1"
tabindex="15"
data-l10n-id="page"
autocomplete="off"
disabled="disabled"
/>
<span id="numPages" class="toolbarLabel">/ {{ pageLength }}</span>
<button
id="draggrad"
title="抓手工具"
:class="[
'toolbarButton',
'draggrad',
draggradActive ? 'draggradActive' : ''
]"
tabindex="12"
data-l10n-id="findbar"
@click="draggradHandle"
>
<span data-l10n-id="findbar_label">抓手</span>
</button>
</div>
<div id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button
id="zoomOut"
:class="[
'toolbarButton',
'zoomOut',
this.pageSize <= 0.5 ? 'taoolbarCantUse' : ''
]"
title="缩小"
tabindex="21"
data-l10n-id="zoom_out"
@click="zoomOut(null)"
>
<span data-l10n-id="zoom_out_label">放大</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button
id="zoomIn"
:class="[
'toolbarButton',
'zoomIn',
this.pageSize >= 4 ? 'taoolbarCantUse' : ''
]"
title="放大"
tabindex="22"
data-l10n-id="zoom_in"
@click="zoomIn(null)"
>
<span data-l10n-id="zoom_in_label">缩小</span>
</button>
</div>
<span id="scaleSelectContainer" class="dropdownToolbarButton">
<select
id="scaleSelect"
title="缩放选择"
tabindex="23"
data-l10n-id="zoom"
v-model="selected"
@change="changeSelected(selected)"
>
<option
v-for="(item, index) in zoomList"
:key="index"
:value="index"
:disabled="Object.keys(item)[0] === 'custom' ? true : false"
v-show="
Object.keys(item)[0] === 'custom'
? isFirefox
? true
: false
: true
"
>{{ item[Object.keys(item)[0]].page_scale_percent }}</option
>
</select>
</span>
</div>
</div>
</div>
</div>
<div id="page">
<div id="viewerContainer">
<div
id="viewerContainerBox"
@mousedown="drag($event)"
:style="{ cursor: draggradActive ? 'grab' : 'auto' }"
>
<div class="canvasWrapper"></div>
<div id="textLayerDiv" class="textLayer"></div>
</div>
......@@ -19,85 +167,134 @@ import $ from "jquery";
export default {
data() {
return {
pageIndex: 2, // pdf页码
pageIndex: 1, // pdf页码
pageLength: null, // 总页码
startTime: null,
scale: 2, // 缩放比例
borderSize: 9, // viewerContainer容器border大小
pageSize: 1
pageSize: 1,
selected: 2,
pdfUrl: "",
pdf: null,
zoomList: [
{ "0.5": { page_scale_percent: "50%", value: 0.5 } },
{ "0.75": { page_scale_percent: "75%", value: 0.75 } },
{ "1": { page_scale_percent: "100%", value: 1 } },
{ "1.25": { page_scale_percent: "125%", value: 1.25 } },
{ "1.5": { page_scale_percent: "150%", value: 1.5 } },
{ "1.75": { page_scale_percent: "175%", value: 1.75 } },
{ "2": { page_scale_percent: "200%", value: 2 } },
{ "3": { page_scale_percent: "300%", value: 3 } },
{ "4": { page_scale_percent: "400%", value: 4 } },
{ custom: { page_scale_percent: "", value: 1 } }
],
draggradActive: false,
isFirefox: false,
playInitializationData: null,
isLoading: false
};
},
mounted() {
this.isFirefox = navigator.userAgent.indexOf("Firefox") > 1;
this.playInitializationData = window.parent.playInitializationData;
this.LMSPlayInitialize();
this.LMSTrackingInitialize();
// this.LMSCatalogUrl();
this.LMSGetLocationPoint();
this.LMSGetLessonStatus();
this.startTime = new Date().getTime();
pdfJs.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker");
this.preview();
},
methods: {
preview() {
pdfJs
.getDocument(
// "https://qida-videos.oss-cn-shenzhen.aliyuncs.com/compressed.tracemonkey-pldi-09.pdf"
// "https://qida-videos.oss-cn-shenzhen.aliyuncs.com/product/20200415/0e8d1766-6b2a-4e1c-bd8e-be53c1f2cf4c/out.pdf"
"http://b2b-flv.qida.com/product/20191105/23386fd7-5551-4fa2-81cc-025945a75eeb/out.pdf"
)
.then(pdf => {
pdf.getPage(this.pageIndex).then(page => {
async preview() {
if (this.pdf === null) {
let pdf = await pdfJs.getDocument(
this.pdfUrl === ""
? "http://b2b-flv.qida.com/product/20191105/23386fd7-5551-4fa2-81cc-025945a75eeb/out.pdf"
: this.pdfUrl
);
console.log("获取PDF", pdf);
this.pdf = pdf;
}
this.pageLength = this.pdf._pdfInfo.numPages;
let page = await this.pdf.getPage(this.pageIndex);
const devicePixelRatio = window.devicePixelRatio;
const scale = this.pageSize * this.scale * devicePixelRatio;
const viewport = page.getViewport({ scale: scale });
let { canvas, textLayerDiv, bodyHeight } = this.initPage(
let { bufferCanvas, textLayerDiv, bodyHeight } = this.initPage(
page,
viewport
);
this.renderCanvas(canvas, viewport, page);
page.getTextContent().then(res => {
this.renderCanvas(bufferCanvas, viewport, page);
let textContent = await page.getTextContent();
this.renderHtml(
textLayerDiv,
page,
scale,
viewport,
bodyHeight,
res
textContent
);
});
});
});
},
zoomin() {
$("#textLayerDiv").html("");
this.pageSize = this.pageSize + 0.05;
this.preview();
},
initPage(page, viewport) {
$("#page").css("height", $("body").height() - $("#toolbar").height());
$("#page").css("height", $("body").height() - $(".toolbar").height());
let pers = viewport.width / viewport.height;
let canvasWrapper = $(".canvasWrapper");
let viewerContainer = $("#viewerContainer");
let viewerContainer = $("#viewerContainerBox");
let textLayerDiv = $("#textLayerDiv");
let bodyHeight = $("#page").height() - this.borderSize * 2;
let pdfHeight = this.pageSize * bodyHeight;
let pdfWidth = this.pageSize * pers * bodyHeight;
let canvas = document.createElement("canvas");
canvas.height = viewport.height;
canvas.width = viewport.width;
viewerContainer.css("border", this.borderSize + "px solid transparent");
viewerContainer.css("height", pdfHeight);
viewerContainer.css("width", pdfWidth);
canvasWrapper.css("height", pdfHeight);
canvasWrapper.css("width", pdfWidth);
$(canvas).css("height", pdfHeight);
$(canvas).css("width", pdfWidth);
textLayerDiv.css("height", pdfHeight);
textLayerDiv.css("width", pdfWidth);
return { canvas, textLayerDiv: textLayerDiv[0], bodyHeight };
},
renderCanvas(canvas, viewport, page) {
let context = canvas.getContext("2d");
let bufferCanvas = document.createElement("canvas");
bufferCanvas.height = viewport.height;
bufferCanvas.width = viewport.width;
viewerContainer.attr("style", "");
viewerContainer.css({
border: this.borderSize + "px solid transparent",
height: pdfHeight,
width: pdfWidth
});
canvasWrapper.css({
height: pdfHeight,
width: pdfWidth
});
$(bufferCanvas).css({
height: pdfHeight,
width: pdfWidth
});
textLayerDiv.css({
height: pdfHeight,
width: pdfWidth
});
return { bufferCanvas, textLayerDiv: textLayerDiv[0], bodyHeight };
},
async renderCanvas(bufferCanvas, viewport, page) {
let bufferContext = bufferCanvas.getContext("2d");
let renderContext = {
canvasContext: context,
canvasContext: bufferContext,
viewport: viewport
};
page.render(renderContext);
$(".canvasWrapper").html(canvas);
await page.render(renderContext);
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
context.height = bufferCanvas.height;
context.width = bufferCanvas.width;
context.drawImage(
bufferCanvas,
0,
0,
canvas.widgth,
canvas.height,
0,
0,
canvas.width,
canvas.height
);
$(".canvasWrapper").html(bufferCanvas);
},
renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, res) {
renderHtml(textLayerDiv, page, scale, viewport, bodyHeight, textContent) {
$("#textLayerDiv").html("");
const textLayer = new TextLayerBuilder({
textLayerDiv: textLayerDiv,
pageIndex: this.pageIndex,
......@@ -105,47 +302,393 @@ export default {
scale: (scale * (this.pageSize * bodyHeight)) / viewport.height
})
});
textLayer.setTextContent(res);
textLayer.setTextContent(textContent);
textLayer.render();
},
alert(title, msg, boxWidth, autoClose) {
window.parent.$.alert({
title: title,
content: msg,
useBootstrap: false,
boxWidth: boxWidth,
autoClose: autoClose ? "ok|2000" : false,
type: "blue",
// typeAnimated: true,
animation: "top",
closeAnimation: "bottom",
buttons: {
ok: {
text: "ok",
btnClass: "btn-blue"
}
}
});
},
zoomIn(pageSize) {
let result = Number((this.pageSize + 0.05).toFixed(10));
console.log("result:", result);
let currentSize = pageSize ? pageSize : result;
if (currentSize > 4) {
return;
}
this.pageSize = pageSize ? pageSize : result;
this.customPercent();
this.preview();
},
zoomOut(pageSize) {
let result = Number((this.pageSize - 0.05).toFixed(10));
let currentSize = pageSize ? pageSize : result;
if (currentSize < 0.5) {
return;
}
this.pageSize = pageSize ? pageSize : result;
this.customPercent();
this.preview();
},
customPercent() {
let index = this.zoomList.length - 1;
this.selected = index;
let item = this.zoomList[index];
let key = Object.keys(item)[0];
let result = Number((this.pageSize * 100).toFixed(10));
this.zoomList[index][key].page_scale_percent = result + "%";
},
previous() {
if (this.pageIndex === 1) {
return;
}
if (this.isLoading) {
return;
}
this.pageIndex = this.pageIndex - 1;
this.LMSSetLocationPoint();
this.LMSSetLessProgress();
this.LMSSetSessionTime();
this.LMSCommit();
this.preview();
},
next() {
if (this.pageIndex === this.pageLength) {
return;
}
if (this.isLoading) {
return;
}
this.pageIndex = this.pageIndex + 1;
this.LMSSetLocationPoint();
this.LMSSetLessProgress();
this.LMSSetSessionTime();
if (this.pageIndex === this.pageLength) {
this.LMSSetLessonStatus("completed");
}
this.LMSCommit();
this.preview();
},
changeSelected(index) {
let item = this.zoomList[index];
let value = item[Object.keys(item)[0]].value;
if (value > this.pageSize) {
this.zoomOut(value);
} else if (value < this.pageSize) {
this.zoomIn(value);
}
},
draggradHandle() {
this.draggradActive = !this.draggradActive;
},
drag(event) {
if (!this.draggradActive) {
return;
}
let target = event.currentTarget;
let x = $(target).offset().left;
let y = $(target).offset().top;
let e = event || window.event;
let left = e.pageX - x;
let top = e.pageY - y;
$(target).css({
position: "absolute",
left: x,
top: y,
cursor: "grab"
});
document.onmousemove = function(e) {
let x = e.pageX - left;
let y = e.pageY - top;
$(target).css({
left: x,
top: y
});
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue == false;
}
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
},
LMSPlayInitialize() {
$.ajax({
type: "post",
url: "/play/initialize.do",
data: this.playInitializationData,
dataType: "json",
async: false,
success: data => {
if (data.executeStatus !== 0) {
this.alert(
"提示！",
data.errorMsg + "\n错误代码：" + data.errorCode,
"30%"
);
}
this.pdfUrl = data.values.itemUrl;
}
});
},
LMSTrackingInitialize() {
$.ajax({
type: "post",
url: "/play/tracking/initialize.do",
data: this.playInitializationData,
dataType: "json",
async: false,
success: data => {
if (data.executeStatus !== 0) {
this.alert(
"提示！",
data.errorMsg + "\n错误代码：" + data.errorCode,
"30%"
);
}
if (data.values != undefined) {
this.playInitializationData.attempId = data.values.attempId;
}
}
});
},
LMSGetValueUrl(fn) {
$.ajax({
type: "post",
url: "/play/tracking/element/get.do",
data: this.playInitializationData,
dataType: "json",
async: false,
success: data => {
if (data.executeStatus !== 0) {
this.alert(
"提示！",
data.errorMsg + "\n错误代码：" + data.errorCode,
"30%"
);
}
if (!!fn && typeof fn == "function") {
fn(data);
}
}
});
},
LMSSetValueUrl(fn) {
this.isLoading = true;
$.ajax({
type: "post",
url: "/play/tracking/element/set.do",
data: this.playInitializationData,
dataType: "json",
async: false,
success: data => {
if (data.executeStatus !== 0) {
this.alert(
"提示！",
data.errorMsg + "\n错误代码：" + data.errorCode,
"30%"
);
}
if (!!fn && typeof fn == "function") {
fn(data);
}
},
complete: () => {
setTimeout(() => {
this.isLoading = false;
}, 1500);
}
});
},
LMSCatalogUrl(fn) {
$.ajax({
type: "post",
url: "/play/crs/catalog/get.do",
data: this.playInitializationData,
dataType: "json",
async: false,
success: data => {
if (data.executeStatus !== 0) {
this.alert(
"提示！",
data.errorMsg + "\n错误代码：" + data.errorCode,
"30%"
);
}
if (!!fn && typeof fn == "function") {
fn(data);
}
}
});
},
LMSGetLocationPoint() {
this.playInitializationData.element = "qida.core.lesson_location_point";
this.LMSGetValueUrl(data => {
if (data.values != undefined) {
this.pageIndex = parseInt(
data.values.result === "" || data.values.result === "0"
? 1
: data.values.result
);
}
});
},
LMSSetLocationPoint() {
this.playInitializationData.element = "qida.core.lesson_location_point";
this.playInitializationData.value = this.pageIndex;
this.LMSSetValueUrl();
},
LMSSetLessProgress() {
this.playInitializationData.element = "cmi.core.lesson_progress";
this.playInitializationData.value = parseInt(
(this.pageIndex / this.pageLength) * 100
);
this.LMSSetValueUrl();
},
LMSSetSessionTime() {
this.playInitializationData.element = "cmi.core.session_time";
let currentTime = new Date().getTime();
this.playInitializationData.value = this.timeToFormat(
(currentTime - this.startTime) / 1000
);
this.LMSSetValueUrl();
},
LMSSetLessonStatus(status) {
this.playInitializationData.element = "cmi.core.lesson_status";
this.playInitializationData.value = status;
this.LMSSetValueUrl();
},
LMSGetLessonStatus() {
this.playInitializationData.element = "cmi.core.lesson_status";
this.LMSGetValueUrl();
},
LMSCommit(fn) {
$.ajax({
type: "post",
url: "/play/tracking/commit.do",
data: this.playInitializationData,
dataType: "json",
async: false,
success: data => {
if (data.executeStatus !== 0) {
this.alert(
"提示！",
data.errorMsg + "\n错误代码：" + data.errorCode,
"30%"
);
}
if (!!fn && typeof fn == "function") {
fn(data);
}
}
});
},
timeToFormat(times) {
var result = "00:00:00";
var hour, minute, second;
if (times > 0) {
hour = Math.floor(times / 3600);
if (hour < 10) {
hour = "0" + hour;
}
minute = Math.floor((times - 3600 * hour) / 60);
if (minute < 10) {
minute = "0" + minute;
}
second = Math.floor((times - 3600 * hour - 60 * minute) % 60);
if (second < 10) {
second = "0" + second;
}
result = hour + ":" + minute + ":" + second;
}
return result;
}
}
};
</script>
<style lang="scss">
@import "../node_modules/pdfjs-dist/web/pdf_viewer.css";
@import url("./css/viewer.css");
$jiantouPst: 30px;
* {
padding: 0;
margin: 0;
}
body {
background-color: #3c3c3c;
width: 100vw;
height: 100vh;
scrollbar-width: none;
}
#app {
width: 100%;
height: 100%;
position: relative;
}
#page {
width: 100%;
top: 32px;
position: relative;
overflow: auto;
}
#viewerContainer {
#viewerContainerBox {
margin: auto;
position: relative;
scrollbar-width: none;
}
#toolbar {
width: 100vw;
height: 32px;
.taoolbarCantUse {
opacity: 0.5;
}
.draggradActive {
background-color: rgba(255, 255, 255, 0.4) !important;
}
::-webkit-scrollbar {
display: none;
}
.loadingIcon {
position: absolute;
left: 0;
top: 0;
background-color: rgba(71, 71, 71, 1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.1);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.pageControll {
width: 100%;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
z-index: 99;
box-sizing: border-box;
}
.jiantou-right {
position: absolute;
right: $jiantouPst;
transform: rotateY(180deg);
cursor: pointer;
opacity: 0.5;
}
.jiantou-left {
position: absolute;
left: $jiantouPst;
cursor: pointer;
opacity: 0.5;
}
.jiantou:hover {
color: #fff;
border: 1px solid #fff;
padding: 0 30px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 5px;
opacity: 1;
}
</style>
src/assets/annotation-check.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40">
<path
d="M 1.5006714,23.536225 6.8925879,18.994244 14.585721,26.037937 34.019683,4.5410479 38.499329,9.2235032 14.585721,35.458952 z"
id="path4"
style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:1.25402856;stroke-opacity:1" />
</svg>
src/assets/annotation-comment.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
height="40"
width="40"
viewBox="0 0 40 40">
<rect
style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
width="33.76017"
height="33.76017"
x="3.119915"
y="3.119915" />
<path
d="m 20.677967,8.54499 c -7.342801,0 -13.295293,4.954293 -13.295293,11.065751 0,2.088793 0.3647173,3.484376 1.575539,5.150563 L 6.0267418,31.45501 13.560595,29.011117 c 2.221262,1.387962 4.125932,1.665377 7.117372,1.665377 7.3428,0 13.295291,-4.954295 13.295291,-11.065753 0,-6.111458 -5.952491,-11.065751 -13.295291,-11.065751 z"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.93031836;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
</svg>
src/assets/annotation-help.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40">
<g
transform="translate(0,-60)"
id="layer1">
<rect
width="36.460953"
height="34.805603"
x="1.7695236"
y="62.597198"
style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.30826771;stroke-opacity:1" />
<g
transform="matrix(0.88763677,0,0,0.88763677,2.2472646,8.9890584)">
<path
d="M 20,64.526342 C 11.454135,64.526342 4.5263421,71.454135 4.5263421,80 4.5263421,88.545865 11.454135,95.473658 20,95.473658 28.545865,95.473658 35.473658,88.545865 35.473658,80 35.473658,71.454135 28.545865,64.526342 20,64.526342 z m -0.408738,9.488564 c 3.527079,0 6.393832,2.84061 6.393832,6.335441 0,3.494831 -2.866753,6.335441 -6.393832,6.335441 -3.527079,0 -6.393832,-2.84061 -6.393832,-6.335441 0,-3.494831 2.866753,-6.335441 6.393832,-6.335441 z"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.02768445;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 7.2335209,71.819938 4.9702591,4.161823 c -1.679956,2.581606 -1.443939,6.069592 0.159325,8.677725 l -5.1263071,3.424463 c 0.67516,1.231452 3.0166401,3.547686 4.2331971,4.194757 l 3.907728,-4.567277 c 2.541952,1.45975 5.730694,1.392161 8.438683,-0.12614 l 3.469517,6.108336 c 1.129779,-0.44367 4.742234,-3.449633 5.416358,-5.003859 l -5.46204,-4.415541 c 1.44319,-2.424098 1.651175,-5.267515 0.557303,-7.748623 l 5.903195,-3.833951 C 33.14257,71.704996 30.616217,69.018606 29.02952,67.99296 l -4.118813,4.981678 C 22.411934,71.205099 18.900853,70.937534 16.041319,72.32916 l -3.595408,-5.322091 c -1.345962,0.579488 -4.1293881,2.921233 -5.2123901,4.812869 z m 8.1010311,3.426672 c 2.75284,-2.446266 6.769149,-2.144694 9.048998,0.420874 2.279848,2.56557 2.113919,6.596919 -0.638924,9.043185 -2.752841,2.446267 -6.775754,2.13726 -9.055604,-0.428308 -2.279851,-2.565568 -2.107313,-6.589485 0.64553,-9.035751 z"
style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
</g>
</svg>
src/assets/annotation-insert.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64">
<path
d="M 32.003143,1.4044602 57.432701,62.632577 6.5672991,62.627924 z"
style="fill:#ffff00;fill-opacity:0.94117647;fill-rule:nonzero;stroke:#000000;stroke-width:1.00493038;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</svg>
src/assets/annotation-key.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64">
<path
d="M 25.470843,9.4933766 C 25.30219,12.141818 30.139101,14.445969 34.704831,13.529144 40.62635,12.541995 41.398833,7.3856498 35.97505,5.777863 31.400921,4.1549155 25.157674,6.5445892 25.470843,9.4933766 z M 4.5246282,17.652051 C 4.068249,11.832873 9.2742983,5.9270407 18.437379,3.0977088 29.751911,-0.87185184 45.495663,1.4008022 53.603953,7.1104009 c 9.275765,6.1889221 7.158128,16.2079421 -3.171076,21.5939521 -1.784316,1.635815 -6.380222,1.21421 -7.068351,3.186186 -1.04003,0.972427 -1.288046,2.050158 -1.232864,3.168203 1.015111,2.000108 -3.831548,1.633216 -3.270553,3.759574 0.589477,5.264544 -0.179276,10.53738 -0.362842,15.806257 -0.492006,2.184998 1.163456,4.574232 -0.734888,6.610642 -2.482919,2.325184 -7.30604,2.189143 -9.193497,-0.274767 -2.733688,-1.740626 -8.254447,-3.615254 -6.104247,-6.339626 3.468112,-1.708686 -2.116197,-3.449897 0.431242,-5.080274 5.058402,-1.39256 -2.393215,-2.304318 -0.146889,-4.334645 3.069198,-0.977415 2.056986,-2.518352 -0.219121,-3.540397 1.876567,-1.807151 1.484149,-4.868919 -2.565455,-5.942205 0.150866,-1.805474 2.905737,-4.136876 -1.679967,-5.20493 C 10.260902,27.882167 4.6872697,22.95045 4.5245945,17.652051 z"
id="path604"
style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:1.72665179;stroke-opacity:1" />
</svg>
src/assets/annotation-newparagraph.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
viewBox="0 0 64 64">
<path
d="M 32.003143,10.913072 57.432701,53.086929 6.567299,53.083723 z"
id="path2985"
style="fill:#ffff00;fill-opacity:0.94117647;fill-rule:nonzero;stroke:#000000;stroke-width:0.83403099;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</svg>
src/assets/annotation-noicon.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40">
</svg>
src/assets/annotation-note.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40">
<rect
width="36.075428"
height="31.096582"
x="1.962286"
y="4.4517088"
id="rect4"
style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.23004246;stroke-opacity:1" />
<rect
width="27.96859"
height="1.5012145"
x="6.0157046"
y="10.285"
id="rect6"
style="fill:#000000;fill-opacity:1;stroke:none" />
<rect
width="27.96859"
height="0.85783684"
x="6.0157056"
y="23.21689"
id="rect8"
style="fill:#000000;fill-opacity:1;stroke:none" />
<rect
width="27.96859"
height="0.85783684"
x="5.8130345"
y="28.964394"
id="rect10"
style="fill:#000000;fill-opacity:1;stroke:none" />
<rect
width="27.96859"
height="0.85783684"
x="6.0157046"
y="17.426493"
id="rect12"
style="fill:#000000;fill-opacity:1;stroke:none" />
</svg>
src/assets/annotation-paragraph.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 40 40">
<rect
width="33.76017"
height="33.76017"
x="3.119915"
y="3.119915"
style="fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 17.692678,34.50206 0,-16.182224 c -1.930515,-0.103225 -3.455824,-0.730383 -4.57593,-1.881473 -1.12011,-1.151067 -1.680164,-2.619596 -1.680164,-4.405591 0,-1.992435 0.621995,-3.5796849 1.865988,-4.7617553 1.243989,-1.1820288 3.06352,-1.7730536 5.458598,-1.7730764 l 9.802246,0 0,2.6789711 -2.229895,0 0,26.3251486 -2.632515,0 0,-26.3251486 -3.45324,0 0,26.3251486 z"
style="font-size:29.42051125px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.07795751;stroke-opacity:1;font-family:Arial;-inkscape-font-specification:Arial" />
</svg>
src/assets/iconfog/iconfont.svg 0 → 100644
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="tianchongxing-" unicode="&#58931;" d="M893.4 568.9h-0.5v0.1h-54.1v0.1H504.4c-10.6 2.3-18.8 10.9-20.4 21.7V725.6c0 0.7 0 1.3-0.1 2 0 0.3 0 0.6-0.1 1 0 0.3 0 0.7-0.1 1 0 0.4-0.1 0.8-0.1 1.2 0 0.3-0.1 0.5-0.1 0.8-0.1 0.4-0.1 0.9-0.2 1.3 0 0.2-0.1 0.4-0.1 0.7-0.1 0.4-0.2 0.9-0.3 1.3 0 0.2-0.1 0.4-0.1 0.6l-0.3 1.2c-0.1 0.2-0.1 0.5-0.2 0.7-0.1 0.4-0.2 0.8-0.4 1.1-0.1 0.3-0.2 0.5-0.3 0.8-0.1 0.3-0.3 0.7-0.4 1l-0.3 0.9c-0.1 0.3-0.3 0.6-0.4 0.9-0.1 0.3-0.3 0.7-0.4 1-0.1 0.2-0.2 0.5-0.4 0.7-0.2 0.4-0.4 0.7-0.5 1.1-0.1 0.2-0.2 0.4-0.4 0.6-0.2 0.4-0.4 0.7-0.6 1.1-0.1 0.2-0.2 0.4-0.4 0.6-0.2 0.4-0.5 0.7-0.7 1.1-0.1 0.2-0.3 0.4-0.4 0.6-0.2 0.4-0.5 0.7-0.8 1.1-0.2 0.2-0.3 0.4-0.5 0.6-0.2 0.3-0.5 0.6-0.7 0.9-0.2 0.3-0.5 0.5-0.7 0.8-0.2 0.2-0.4 0.5-0.6 0.7-0.5 0.5-0.9 1-1.4 1.5-0.5 0.5-1 0.9-1.5 1.4-0.2 0.2-0.5 0.4-0.7 0.6-0.3 0.2-0.5 0.5-0.8 0.7-0.3 0.3-0.6 0.5-0.9 0.7-0.2 0.2-0.4 0.3-0.6 0.5-0.4 0.3-0.7 0.5-1.1 0.8-0.2 0.1-0.4 0.3-0.6 0.4-0.4 0.2-0.7 0.5-1.1 0.7-0.2 0.1-0.4 0.2-0.6 0.4-0.4 0.2-0.7 0.4-1.1 0.6-0.2 0.1-0.4 0.2-0.6 0.4-0.4 0.2-0.7 0.4-1.1 0.5-0.2 0.1-0.5 0.2-0.7 0.4-0.3 0.2-0.7 0.3-1 0.4-0.3 0.1-0.6 0.3-0.9 0.4l-0.9 0.3c-0.3 0.1-0.7 0.3-1 0.4-0.3 0.1-0.5 0.2-0.8 0.3-0.4 0.1-0.8 0.3-1.1 0.4-0.2 0.1-0.5 0.1-0.7 0.2l-1.2 0.3c-0.2 0.1-0.4 0.1-0.7 0.2-0.4 0.1-0.9 0.2-1.3 0.3-0.2 0-0.4 0.1-0.7 0.1-0.4 0.1-0.9 0.2-1.3 0.2-0.3 0-0.5 0.1-0.8 0.1-0.4 0.1-0.8 0.1-1.2 0.1-0.3 0-0.7 0.1-1 0.1-0.3 0-0.6 0.1-0.9 0.1-1.3 0.1-2.7 0.1-4.1 0-0.3 0-0.6 0-0.9-0.1-0.3 0-0.7 0-1-0.1-0.4 0-0.8-0.1-1.2-0.1-0.3 0-0.5-0.1-0.8-0.1-0.4-0.1-0.9-0.1-1.3-0.2-0.2 0-0.4-0.1-0.7-0.1-0.4-0.1-0.9-0.2-1.3-0.3-0.2-0.1-0.4-0.1-0.7-0.2l-1.2-0.3c-0.2-0.1-0.5-0.1-0.7-0.2-0.4-0.1-0.8-0.2-1.1-0.4-0.3-0.1-0.5-0.2-0.8-0.3-0.3-0.1-0.7-0.3-1-0.4-0.3-0.1-0.6-0.2-0.9-0.4-0.3-0.1-0.6-0.3-0.9-0.4-0.3-0.1-0.7-0.3-1-0.4-0.2-0.1-0.5-0.2-0.7-0.4-0.4-0.2-0.7-0.4-1.1-0.6-0.2-0.1-0.4-0.2-0.6-0.4-0.4-0.2-0.8-0.4-1.1-0.6-0.2-0.1-0.4-0.2-0.6-0.4-0.4-0.2-0.8-0.5-1.1-0.7-0.2-0.1-0.4-0.3-0.6-0.4-0.4-0.2-0.7-0.5-1.1-0.8-0.2-0.2-0.4-0.3-0.6-0.5-0.3-0.2-0.6-0.5-1-0.7-0.3-0.2-0.5-0.4-0.8-0.7-0.2-0.2-0.5-0.4-0.7-0.6-0.5-0.4-1-0.9-1.4-1.4L55.3 395.7l-0.9-0.9c-8-8-12-18.5-12-29s4-21 12-29l0.9-0.9 358.8-358.8c8.1-8.1 18.8-12.1 29.4-12h0.4c22.6 0 41 18.3 41 41V166.2h422.7c27.8 5.7 49.5 28.5 53.6 56.8V507.8c-3.6 34.3-32.6 61.1-67.8 61.1z" horiz-adv-x="1024" />
</font>
</defs></svg>
src/components/HelloWorld.vue deleted 100644 → 0
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
target="_blank"
rel="noopener"
>pwa</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
rel="noopener"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank"
rel="noopener"
>vuex</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/css/viewer.css 0 → 100644
/* 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("./../../node_modules/pdfjs-dist/web/pdf_viewer.css");
:root {
--sidebar-width: 200px;
--sidebar-transition-duration: 200ms;
--sidebar-transition-timing-function: ease;
}
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
width: 100%;
/* Font size is needed to make the activity bar the correct size. */
font-size: 10px;
}
body {
height: 100%;
width: 100%;
background-color: rgba(64, 64, 64, 1);
background-image: url(../assets/texture.png);
}
body,
input,
button,
select {
font: message-box;
outline: none;
}
.hidden {
display: none !important;
}
[hidden] {
display: none !important;
}
.pdfViewer.enablePermissions .textLayer > span {
user-select: none !important;
cursor: not-allowed;
}
#viewerContainer.pdfPresentationMode:-ms-fullscreen {
top: 0px !important;
overflow: hidden !important;
}
#viewerContainer.pdfPresentationMode:-ms-fullscreen::-ms-backdrop {
background-color: rgba(0, 0, 0, 1);
}
#viewerContainer.pdfPresentationMode:fullscreen {
top: 0px;
border-top: 2px solid rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 1);
width: 100%;
height: 100%;
overflow: hidden;
cursor: none;
user-select: none;
}
.pdfPresentationMode:fullscreen a:not(.internalLink) {
display: none;
}
.pdfPresentationMode:fullscreen .textLayer > span {
cursor: none;
}
.pdfPresentationMode.pdfPresentationModeControls > *,
.pdfPresentationMode.pdfPresentationModeControls .textLayer > span {
cursor: default;
}
#outerContainer {
width: 100%;
height: 100%;
position: relative;
}
#sidebarContainer {
position: absolute;
top: 32px;
bottom: 0;
width: var(--sidebar-width);
visibility: hidden;
z-index: 100;
border-top: 1px solid rgba(51, 51, 51, 1);
transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function);
}
html[dir='ltr'] #sidebarContainer {
transition-property: left;
left: calc(0px - var(--sidebar-width));
}
html[dir='rtl'] #sidebarContainer {
transition-property: right;
right: calc(0px - var(--sidebar-width));
}
.loadingInProgress #sidebarContainer {
top: 36px;
}
#outerContainer.sidebarResizing #sidebarContainer {
/* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
transition-duration: 0s;
/* Prevent e.g. the thumbnails being selected when the sidebar is resized. */
user-select: none;
}
#outerContainer.sidebarMoving #sidebarContainer,
#outerContainer.sidebarOpen #sidebarContainer {
visibility: visible;
}
html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer {
left: 0px;
}
html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
right: 0px;
}
#mainContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 320px;
}
#sidebarContent {
top: 32px;
bottom: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
html[dir='ltr'] #sidebarContent {
left: 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}
html[dir='rtl'] #sidebarContent {
right: 0;
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25);
}
#viewerContainer {
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
/* top: 32px; */
right: 0;
bottom: 0;
left: 0;
outline: none;
}
#viewerContainer:not(.pdfPresentationMode) {
transition-duration: var(--sidebar-transition-duration);
transition-timing-function: var(--sidebar-transition-timing-function);
}
html[dir='ltr'] #viewerContainer {
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
}
html[dir='rtl'] #viewerContainer {
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}
#outerContainer.sidebarResizing #viewerContainer {
/* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
transition-duration: 0s;
}
html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
transition-property: left;
left: var(--sidebar-width);
}
html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
transition-property: right;
right: var(--sidebar-width);
}
.toolbar {
position: relative;
left: 0;
right: 0;
z-index: 9999;
cursor: default;
}
#toolbarContainer {
width: 100%;
}
#toolbarSidebar {
width: 100%;
height: 32px;
background-color: rgba(66, 66, 66, 1); /* fallback */
background-image: url(../assets/texture.png),
linear-gradient(rgba(77, 77, 77, 0.99), rgba(64, 64, 64, 0.95));
}
html[dir='ltr'] #toolbarSidebar {
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1);
}
html[dir='rtl'] #toolbarSidebar {
box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.1);
}
#sidebarResizer {
position: absolute;
top: 0;
bottom: 0;
width: 6px;
z-index: 200;
cursor: ew-resize;
}
html[dir='ltr'] #sidebarResizer {
right: -6px;
}
html[dir='rtl'] #sidebarResizer {
left: -6px;
}
#toolbarContainer, .findbar, .secondaryToolbar {
position: relative;
height: 32px;
background-color: rgba(71, 71, 71, 1); /* fallback */
background-image: url(../assets/texture.png),
linear-gradient(rgba(82, 82, 82, 0.99), rgba(69, 69, 69, 0.95));
}
html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.1);
}
html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.15),
0 1px 1px rgba(0, 0, 0, 0.1);
}
#toolbarViewer {
height: 32px;
}
#loadingBar {
position: relative;
width: 100%;
height: 4px;
background-color: rgba(51, 51, 51, 1);
border-bottom: 1px solid rgba(51, 51, 51, 1);
}
#loadingBar .progress {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(221, 221, 221, 1);
overflow: hidden;
transition: width 200ms;
}
@keyframes progressIndeterminate {
0% { left: -142px; }
100% { left: 0; }
}
#loadingBar .progress.indeterminate {
background-color: rgba(153, 153, 153, 1);
transition: none;
}
#loadingBar .progress.indeterminate .glimmer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(100% + 150px);
background: repeating-linear-gradient(135deg,
rgba(187, 187, 187, 1) 0, rgba(153, 153, 153, 1) 5px,
rgba(153, 153, 153, 1) 45px, rgba(221, 221, 221, 1) 55px,
rgba(221, 221, 221, 1) 95px, rgba(187, 187, 187, 1) 100px);
animation: progressIndeterminate 950ms linear infinite;
}
.findbar, .secondaryToolbar {
top: 32px;
position: absolute;
z-index: 10000;
height: auto;
min-width: 16px;
padding: 0px 6px 0px 6px;
margin: 4px 2px 4px 2px;
color: rgba(217, 217, 217, 1);
font-size: 12px;
line-height: 14px;
text-align: left;
cursor: default;
}
.findbar {
min-width: 300px;
}
.findbar > div {
height: 32px;
}
.findbar.wrapContainers > div {
clear: both;
}
.findbar.wrapContainers > div#findbarMessageContainer {
height: auto;
}
html[dir='ltr'] .findbar {
left: 68px;
}
html[dir='rtl'] .findbar {
right: 68px;
}
.findbar label {
user-select: none;
}
#findInput {
width: 200px;
}
#findInput::-webkit-input-placeholder {
color: rgba(191, 191, 191, 1);
}
#findInput::placeholder {
font-style: italic;
}
#findInput[data-status="pending"] {
background-image: url(../assets/loading-small.png);
background-repeat: no-repeat;
background-position: right;
}
html[dir='rtl'] #findInput[data-status="pending"] {
background-position: left;
}
.secondaryToolbar {
padding: 6px;
height: auto;
z-index: 30000;
}
html[dir='ltr'] .secondaryToolbar {
right: 4px;
}
html[dir='rtl'] .secondaryToolbar {
left: 4px;
}
#secondaryToolbarButtonContainer {
max-width: 200px;
max-height: 400px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: -4px;
}
#secondaryToolbarButtonContainer.hiddenScrollModeButtons > .scrollModeButtons,
#secondaryToolbarButtonContainer.hiddenSpreadModeButtons > .spreadModeButtons {
display: none !important;
}
.doorHanger,
.doorHangerRight {
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.doorHanger:after, .doorHanger:before,
.doorHangerRight:after, .doorHangerRight:before {
bottom: 100%;
border: solid rgba(0, 0, 0, 0);
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.doorHanger:after,
.doorHangerRight:after {
border-bottom-color: rgba(82, 82, 82, 0.99);
border-width: 8px;
}
.doorHanger:before,
.doorHangerRight:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-width: 9px;
}
html[dir='ltr'] .doorHanger:after,
html[dir='rtl'] .doorHangerRight:after {
left: 13px;
margin-left: -8px;
}
html[dir='ltr'] .doorHanger:before,
html[dir='rtl'] .doorHangerRight:before {
left: 13px;
margin-left: -9px;
}
html[dir='rtl'] .doorHanger:after,
html[dir='ltr'] .doorHangerRight:after {
right: 13px;
margin-right: -8px;
}
html[dir='rtl'] .doorHanger:before,
html[dir='ltr'] .doorHangerRight:before {
right: 13px;
margin-right: -9px;
}
#findResultsCount {
background-color: rgba(217, 217, 217, 1);
color: rgba(82, 82, 82, 1);
text-align: center;
padding: 3px 4px;
}
#findMsg {
font-style: italic;
color: rgba(166, 183, 208, 1);
}
#findMsg:empty {
display: none;
}
#findInput.notFound {
background-color: rgba(255, 102, 102, 1);
}
#toolbarViewerMiddle {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
html[dir='ltr'] #toolbarViewerLeft,
html[dir='rtl'] #toolbarViewerRight {
float: left;
}
html[dir='ltr'] #toolbarViewerRight,
html[dir='rtl'] #toolbarViewerLeft {
float: right;
}
html[dir='ltr'] #toolbarViewerLeft > *,
html[dir='ltr'] #toolbarViewerMiddle > *,
html[dir='ltr'] #toolbarViewerRight > *,
html[dir='ltr'] .findbar * {
position: relative;
float: left;
}
html[dir='rtl'] #toolbarViewerLeft > *,
html[dir='rtl'] #toolbarViewerMiddle > *,
html[dir='rtl'] #toolbarViewerRight > *,
html[dir='rtl'] .findbar * {
position: relative;
float: right;
}
html[dir='ltr'] .splitToolbarButton {
margin: 3px 2px 4px 0;
display: inline-block;
}
html[dir='rtl'] .splitToolbarButton {
margin: 3px 0 4px 2px;
display: inline-block;
}
html[dir='ltr'] .splitToolbarButton > .toolbarButton {
border-radius: 0;
float: left;
}
html[dir='rtl'] .splitToolbarButton > .toolbarButton {
border-radius: 0;
float: right;
}
.toolbarButton,
.secondaryToolbarButton,
.overlayButton {
border: 0 none;
background: none;
width: 32px;
height: 25px;
}
.toolbarButton > span {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
}
.toolbarButton[disabled],
.secondaryToolbarButton[disabled],
.overlayButton[disabled] {
opacity: .5;
}
.splitToolbarButton.toggled .toolbarButton {
margin: 0;
}
.splitToolbarButton:hover > .toolbarButton,
.splitToolbarButton:focus > .toolbarButton,
.splitToolbarButton.toggled > .toolbarButton,
.toolbarButton.textButton {
background-color: rgba(0, 0, 0, 0.12);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.35);
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.15) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
}
.splitToolbarButton > .toolbarButton:hover,
.splitToolbarButton > .toolbarButton:focus,
.dropdownToolbarButton:hover,
.overlayButton:hover,
.overlayButton:focus,
.toolbarButton.textButton:hover,
.toolbarButton.textButton:focus {
background-color: rgba(0,0,0,0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.15) inset,
0 0 1px rgba(0, 0, 0, 0.05);
z-index: 199;
}
.dropdownToolbarButton:hover {
background-color: rgba(0, 0, 0, 0.26);
}
.splitToolbarButton > .toolbarButton {
position: relative;
}
html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
position: relative;
margin: 0;
margin-right: -1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-right-color: rgba(0, 0, 0, 0);
}
html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
position: relative;
margin: 0;
margin-left: -1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-left-color: rgba(0, 0, 0, 0);
}
.splitToolbarButtonSeparator {
padding: 8px 0;
width: 1px;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
display: inline-block;
margin: 5px 0;
}
html[dir='ltr'] .splitToolbarButtonSeparator {
float: left;
}
html[dir='rtl'] .splitToolbarButtonSeparator {
float: right;
}
.splitToolbarButton:hover > .splitToolbarButtonSeparator,
.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
padding: 12px 0;
margin: 1px 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
.overlayButton {
min-width: 16px;
padding: 2px 6px 0;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 2px;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
line-height: 14px;
user-select: none;
/* Opera does not support user-select, use <... unselectable="on"> instead */
cursor: default;
}
html[dir='ltr'] .toolbarButton,
html[dir='ltr'] .overlayButton,
html[dir='ltr'] .dropdownToolbarButton {
margin: 3px 2px 4px 0;
}
html[dir='rtl'] .toolbarButton,
html[dir='rtl'] .overlayButton,
html[dir='rtl'] .dropdownToolbarButton {
margin: 3px 0 4px 2px;
}
.toolbarButton:hover,
.toolbarButton:focus,
.dropdownToolbarButton,
.overlayButton,
.secondaryToolbarButton:hover,
.secondaryToolbarButton:focus {
background-color: rgba(0, 0, 0, 0.12);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.35);
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.15) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
}
.toolbarButton:hover:active,
.overlayButton:hover:active,
.dropdownToolbarButton:hover:active,
.secondaryToolbarButton:hover:active {
background-color: rgba(0, 0, 0, 0.2);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
}
.toolbarButton.toggled,
.splitToolbarButton.toggled > .toolbarButton.toggled,
.secondaryToolbarButton.toggled {
background-color: rgba(0, 0, 0, 0.3);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
}
.toolbarButton.toggled:hover:active,
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
.secondaryToolbarButton.toggled:hover:active {
background-color: rgba(0, 0, 0, 0.4);
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.55);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.3) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
}
.dropdownToolbarButton {
width: 140px;
padding: 0;
overflow: hidden;
}
.dropdownToolbarButton::after {
position: absolute;
display: inline-block;
top: 4px;
content: url(../assets/toolbarButton-menuArrows.png);
}
html[dir='ltr'] .dropdownToolbarButton::after {
right: 8px;
}
html[dir='rtl'] .dropdownToolbarButton::after {
left: 8px;
}
.dropdownToolbarButton > select {
width: 162px;
height: 23px;
font-size: 12px;
color: rgba(242, 242, 242, 1);
margin: 0;
padding: 3px 2px 2px;
border: none;
background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
}
.dropdownToolbarButton > select > option {
background: rgba(61, 61, 61, 1);
}
#customScaleOption {
display: none;
}
#pageWidthOption {
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
}
html[dir='ltr'] .splitToolbarButton:first-child,
html[dir='ltr'] .toolbarButton:first-child,
html[dir='rtl'] .splitToolbarButton:last-child,
html[dir='rtl'] .toolbarButton:last-child {
margin-left: 4px;
}
html[dir='ltr'] .splitToolbarButton:last-child,
html[dir='ltr'] .toolbarButton:last-child,
html[dir='rtl'] .splitToolbarButton:first-child,
html[dir='rtl'] .toolbarButton:first-child {
margin-right: 4px;
}
.toolbarButtonSpacer {
width: 30px;
display: inline-block;
height: 1px;
}
html[dir='ltr'] #findPrevious {
margin-left: 3px;
}
html[dir='ltr'] #findNext {
margin-right: 3px;
}
html[dir='rtl'] #findPrevious {
margin-right: 3px;
}
html[dir='rtl'] #findNext {
margin-left: 3px;
}
.toolbarButton::before,
.secondaryToolbarButton::before {
/* All matching ../assets have a size of 16x16
* All relevant containers have a size of 32x25 */
position: absolute;
display: inline-block;
top: 4px;
left: 7px;
}
html[dir="ltr"] .secondaryToolbarButton::before {
left: 4px;
}
html[dir="rtl"] .secondaryToolbarButton::before {
right: 4px;
}
.toolbarButton#sidebarToggle::before {
content: url(../assets/toolbarButton-sidebarToggle.png);
}
html[dir='rtl'] .toolbarButton#sidebarToggle::before {
transform: scaleX(-1);
}
.toolbarButton#secondaryToolbarToggle::before {
content: url(../assets/toolbarButton-secondaryToolbarToggle.png);
}
html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
transform: scaleX(-1);
}
.toolbarButton.findPrevious::before {
content: url(../assets/findbarButton-previous.png);
}
html[dir='rtl'] .toolbarButton.findPrevious::before {
transform: scaleX(-1);
}
.toolbarButton.findNext::before {
content: url(../assets/findbarButton-next.png);
}
html[dir='rtl'] .toolbarButton.findNext::before {
transform: scaleX(-1);
}
.toolbarButton.pageUp::before {
content: url(../assets/toolbarButton-pageUp.png);
}
html[dir='rtl'] .toolbarButton.pageUp::before {
transform: scaleX(-1);
}
.toolbarButton.draggrad::before {
content: url(../assets/secondaryToolbarButton-handTool.png);
}
html[dir='rtl'] .toolbarButton.draggrad::before {
transform: scaleX(-1);
}
.toolbarButton.pageDown::before {
content: url(../assets/toolbarButton-pageDown.png);
}
html[dir='rtl'] .toolbarButton.pageDown::before {
transform: scaleX(-1);
}
.toolbarButton.zoomOut::before {
content: url(../assets/toolbarButton-zoomOut.png);
}
.toolbarButton.zoomIn::before {
content: url(../assets/toolbarButton-zoomIn.png);
}
.toolbarButton.presentationMode::before,
.secondaryToolbarButton.presentationMode::before {
content: url(../assets/toolbarButton-presentationMode.png);
}
.toolbarButton.print::before,
.secondaryToolbarButton.print::before {
content: url(../assets/toolbarButton-print.png);
}
.toolbarButton.openFile::before,
.secondaryToolbarButton.openFile::before {
content: url(../assets/toolbarButton-openFile.png);
}
.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
content: url(../assets/toolbarButton-download.png);
}
.toolbarButton.bookmark,
.secondaryToolbarButton.bookmark {
box-sizing: border-box;
outline: none;
padding-top: 4px;
text-decoration: none;
}
.secondaryToolbarButton.bookmark {
padding-top: 5px;
}
.bookmark[href='#'] {
opacity: .5;
pointer-events: none;
}
.toolbarButton.bookmark::before,
.secondaryToolbarButton.bookmark::before {
content: url(../assets/toolbarButton-bookmark.png);
}
#viewThumbnail.toolbarButton::before {
content: url(../assets/toolbarButton-viewThumbnail.png);
}
#viewOutline.toolbarButton::before {
content: url(../assets/toolbarButton-viewOutline.png);
}
html[dir="rtl"] #viewOutline.toolbarButton::before {
transform: scaleX(-1);
}
#viewAttachments.toolbarButton::before {
content: url(../assets/toolbarButton-viewAttachments.png);
}
#viewFind.toolbarButton::before {
content: url(../assets/toolbarButton-search.png);
}
.toolbarButton.pdfSidebarNotification::after {
position: absolute;
display: inline-block;
top: 1px;
/* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
content: '';
background-color: rgba(112, 219, 85, 1);
height: 9px;
width: 9px;
border-radius: 50%;
}
html[dir='ltr'] .toolbarButton.pdfSidebarNotification::after {
left: 17px;
}
html[dir='rtl'] .toolbarButton.pdfSidebarNotification::after {
right: 17px;
}
.secondaryToolbarButton {
position: relative;
margin: 0 0 4px 0;
padding: 3px 0 1px 0;
height: auto;
min-height: 25px;
width: auto;
min-width: 100%;
white-space: normal;
}
html[dir="ltr"] .secondaryToolbarButton {
padding-left: 24px;
text-align: left;
}
html[dir="rtl"] .secondaryToolbarButton {
padding-right: 24px;
text-align: right;
}
html[dir="ltr"] .secondaryToolbarButton.bookmark {
padding-left: 27px;
}
html[dir="rtl"] .secondaryToolbarButton.bookmark {
padding-right: 27px;
}
html[dir="ltr"] .secondaryToolbarButton > span {
padding-right: 4px;
}
html[dir="rtl"] .secondaryToolbarButton > span {
padding-left: 4px;
}
.secondaryToolbarButton.firstPage::before {
content: url(../assets/secondaryToolbarButton-firstPage.png);
}
.secondaryToolbarButton.lastPage::before {
content: url(../assets/secondaryToolbarButton-lastPage.png);
}
.secondaryToolbarButton.rotateCcw::before {
content: url(../assets/secondaryToolbarButton-rotateCcw.png);
}
.secondaryToolbarButton.rotateCw::before {
content: url(../assets/secondaryToolbarButton-rotateCw.png);
}
.secondaryToolbarButton.selectTool::before {
content: url(../assets/secondaryToolbarButton-selectTool.png);
}
.secondaryToolbarButton.handTool::before {
content: url(../assets/secondaryToolbarButton-handTool.png);
}
.secondaryToolbarButton.scrollVertical::before {
content: url(../assets/secondaryToolbarButton-scrollVertical.png);
}
.secondaryToolbarButton.scrollHorizontal::before {
content: url(../assets/secondaryToolbarButton-scrollHorizontal.png);
}
.secondaryToolbarButton.scrollWrapped::before {
content: url(../assets/secondaryToolbarButton-scrollWrapped.png);
}
.secondaryToolbarButton.spreadNone::before {
content: url(../assets/secondaryToolbarButton-spreadNone.png);
}
.secondaryToolbarButton.spreadOdd::before {
content: url(../assets/secondaryToolbarButton-spreadOdd.png);
}
.secondaryToolbarButton.spreadEven::before {
content: url(../assets/secondaryToolbarButton-spreadEven.png);
}
.secondaryToolbarButton.documentProperties::before {
content: url(../assets/secondaryToolbarButton-documentProperties.png);
}
.verticalToolbarSeparator {
display: block;
padding: 8px 0;
margin: 8px 4px;
width: 1px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html[dir='ltr'] .verticalToolbarSeparator {
margin-left: 2px;
}
html[dir='rtl'] .verticalToolbarSeparator {
margin-right: 2px;
}
.horizontalToolbarSeparator {
display: block;
margin: 0 0 4px 0;
height: 1px;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.toolbarField {
padding: 3px 6px;
margin: 4px 0 4px 0;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.09);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
background-clip: padding-box;
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.42);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.05);
color: rgba(242, 242, 242, 1);
font-size: 12px;
line-height: 14px;
outline-style: none;
}
.toolbarField[type=checkbox] {
display: inline-block;
margin: 8px 0px;
}
.toolbarField.pageNumber {
-moz-appearance: textfield; /* hides the spinner in moz */
min-width: 16px;
text-align: right;
width: 40px;
}
.toolbarField.pageNumber.visiblePageIsLoading {
background-image: url(../assets/loading-small.png);
background-repeat: no-repeat;
background-position: 1px;
}
.toolbarField.pageNumber::-webkit-inner-spin-button,
.toolbarField.pageNumber::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.toolbarField:hover {
background-color: rgba(255, 255, 255, 0.11);
border-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.43) rgba(0, 0, 0, 0.45);
}
.toolbarField:focus {
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(77, 184, 255, 0.8) rgba(77, 184, 255, 0.85) rgba(77, 184, 255, 0.9);
}
.toolbarLabel {
min-width: 16px;
padding: 3px 6px 3px 2px;
margin: 4px 2px 4px 0;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 2px;
color: rgba(217, 217, 217, 1);
font-size: 12px;
line-height: 14px;
text-align: left;
user-select: none;
cursor: default;
}
#thumbnailView {
position: absolute;
width: calc(100% - 60px);
top: 0;
bottom: 0;
padding: 10px 30px 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#thumbnailView > a:active,
#thumbnailView > a:focus {
outline: 0;
}
.thumbnail {
margin: 0 10px 5px 10px;
}
html[dir='ltr'] .thumbnail {
float: left;
}
html[dir='rtl'] .thumbnail {
float: right;
}
#thumbnailView > a:last-of-type > .thumbnail {
margin-bottom: 10px;
}
#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
margin-bottom: 9px;
}
.thumbnail:not([data-loaded]) {
border: 1px dashed rgba(255, 255, 255, 0.5);
margin: -1px 9px 4px 9px;
}
.thumbnailImage {
border: 1px solid rgba(0, 0, 0, 0);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
opacity: 0.8;
z-index: 99;
background-color: rgba(255, 255, 255, 1);
background-clip: content-box;
}
.thumbnailSelectionRing {
border-radius: 2px;
padding: 7px;
}
a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
opacity: .9;
}
a:focus > .thumbnail > .thumbnailSelectionRing,
.thumbnail:hover > .thumbnailSelectionRing {
background-color: rgba(255, 255, 255, 0.15);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
background-clip: padding-box;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.9);
}
.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
opacity: 1;
}
.thumbnail.selected > .thumbnailSelectionRing {
background-color: rgba(255, 255, 255, 0.3);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
background-clip: padding-box;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255,1);
}
#outlineView,
#attachmentsView {
position: absolute;
width: calc(100% - 8px);
top: 0;
bottom: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
user-select: none;
}
#outlineView {
padding: 4px 4px 0;
}
#attachmentsView {
padding: 3px 4px 0;
}
html[dir='ltr'] .outlineWithDeepNesting > .outlineItem,
html[dir='ltr'] .outlineItem > .outlineItems {
margin-left: 20px;
}
html[dir='rtl'] .outlineWithDeepNesting > .outlineItem,
html[dir='rtl'] .outlineItem > .outlineItems {
margin-right: 20px;
}
.outlineItem > a,
.attachmentsItem > button {
text-decoration: none;
display: inline-block;
min-width: 95%;
min-width: calc(100% - 4px); /* Subtract the right padding (left, in RTL mode)
of the container. */
height: auto;
margin-bottom: 1px;
border-radius: 2px;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
line-height: 15px;
user-select: none;
white-space: normal;
}
.attachmentsItem > button {
border: 0 none;
background: none;
cursor: pointer;
width: 100%;
}
html[dir='ltr'] .outlineItem > a {
padding: 2px 0 5px 4px;
}
html[dir='ltr'] .attachmentsItem > button {
padding: 2px 0 3px 7px;
text-align: left;
}
html[dir='rtl'] .outlineItem > a {
padding: 2px 4px 5px 0;
}
html[dir='rtl'] .attachmentsItem > button {
padding: 2px 7px 3px 0;
text-align: right;
}
.outlineItemToggler {
position: relative;
height: 0;
width: 0;
color: rgba(255, 255, 255, 0.5);
}
.outlineItemToggler::before {
content: url(../assets/treeitem-expanded.png);
display: inline-block;
position: absolute;
}
.outlineItemToggler.outlineItemsHidden::before {
content: url(../assets/treeitem-collapsed.png);
}
html[dir='rtl'] .outlineItemToggler.outlineItemsHidden::before {
transform: scaleX(-1);
}
.outlineItemToggler.outlineItemsHidden ~ .outlineItems {
display: none;
}
html[dir='ltr'] .outlineItemToggler {
float: left;
}
html[dir='rtl'] .outlineItemToggler {
float: right;
}
html[dir='ltr'] .outlineItemToggler::before {
right: 4px;
}
html[dir='rtl'] .outlineItemToggler::before {
left: 4px;
}
.outlineItemToggler:hover,
.outlineItemToggler:hover + a,
.outlineItemToggler:hover ~ .outlineItems,
.outlineItem > a:hover,
.attachmentsItem > button:hover {
background-color: rgba(255, 255, 255, 0.02);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
background-clip: padding-box;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.2) inset,
0 0 1px rgba(0, 0, 0, 0.2);
border-radius: 2px;
color: rgba(255, 255, 255, 0.9);
}
.outlineItem.selected {
background-color: rgba(255, 255, 255, 0.08);
background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
background-clip: padding-box;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 1px rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 1);
}
.noResults {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
font-style: italic;
cursor: default;
}
/* TODO: file FF bug to support ::-moz-selection:window-inactive
so we can override the opaque grey background when the window is inactive;
see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
::selection {
background: rgba(0, 0, 255, 0.3);
}
#errorWrapper {
background: none repeat scroll 0 0 rgba(255, 85, 85, 1);
color: rgba(255, 255, 255, 1);
left: 0;
position: absolute;
right: 0;
z-index: 1000;
padding: 3px;
font-size: 0.8em;
}
.loadingInProgress #errorWrapper {
top: 37px;
}
#errorMessageLeft {
float: left;
}
#errorMessageRight {
float: right;
}
#errorMoreInfo {
background-color: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
padding: 3px;
margin: 3px;
width: 98%;
}
.overlayButton {
width: auto;
margin: 3px 4px 2px 4px !important;
padding: 2px 6px 3px 6px;
}
#overlayContainer {
display: table;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 40000;
}
#overlayContainer > * {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#overlayContainer > .container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#overlayContainer > .container > .dialog {
display: inline-block;
padding: 15px;
border-spacing: 4px;
color: rgba(217, 217, 217, 1);
font-size: 12px;
line-height: 14px;
background-color: rgba(71, 71, 71, 1); /* fallback */
background-image: url(../assets/texture.png),
linear-gradient(rgba(82, 82, 82,0.99), rgba(69, 69, 69, 0.95));
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dialog > .row {
display: table-row;
}
.dialog > .row > * {
display: table-cell;
}
.dialog .toolbarField {
margin: 5px 0;
}
.dialog .separator {
display: block;
margin: 4px 0 4px 0;
height: 1px;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dialog .buttonRow {
text-align: center;
vertical-align: middle;
}
.dialog :link {
color: rgba(255, 255, 255, 1);
}
#passwordOverlay > .dialog {
text-align: center;
}
#passwordOverlay .toolbarField {
width: 200px;
}
#documentPropertiesOverlay > .dialog {
text-align: left;
}
#documentPropertiesOverlay .row > * {
min-width: 100px;
}
html[dir='ltr'] #documentPropertiesOverlay .row > * {
text-align: left;
}
html[dir='rtl'] #documentPropertiesOverlay .row > * {
text-align: right;
}
#documentPropertiesOverlay .row > span {
width: 125px;
word-wrap: break-word;
}
#documentPropertiesOverlay .row > p {
max-width: 225px;
word-wrap: break-word;
}
#documentPropertiesOverlay .buttonRow {
margin-top: 10px;
}
.clearBoth {
clear: both;
}
.fileInput {
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
margin-top: 5px;
visibility: hidden;
position: fixed;
right: 0;
top: 0;
}
#PDFBug {
background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
border: 1px solid rgba(102, 102, 102, 1);
position: fixed;
top: 32px;
right: 0;
bottom: 0;
font-size: 10px;
padding: 0;
width: 300px;
}
#PDFBug .controls {
background: rgba(238, 238, 238, 1);
border-bottom: 1px solid rgba(102, 102, 102, 1);
padding: 3px;
}
#PDFBug .panels {
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
right: 0;
top: 27px;
}
#PDFBug .panels > div {
padding: 5px;
}
#PDFBug button.active {
font-weight: bold;
}
.debuggerShowText {
background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
color: rgba(0, 0, 255, 1);
}
.debuggerHideText:hover {
background: none repeat scroll 0 0 rgba(255, 255, 0, 1);
}
#PDFBug .stats {
font-family: courier;
font-size: 10px;
white-space: pre;
}
#PDFBug .stats .title {
font-weight: bold;
}
#PDFBug table {
font-size: 10px;
}
#viewer.textLayer-visible .textLayer {
opacity: 1.0;
}
#viewer.textLayer-visible .canvasWrapper {
background-color: rgba(128, 255, 128, 1);
}
#viewer.textLayer-visible .canvasWrapper canvas {
mix-blend-mode: screen;
}
#viewer.textLayer-visible .textLayer > span {
background-color: rgba(255, 255, 0, 0.1);
color: rgba(0, 0, 0, 1);
border: solid 1px rgba(255, 0, 0, 0.5);
box-sizing: border-box;
}
#viewer.textLayer-hover .textLayer > span:hover {
background-color: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
}
#viewer.textLayer-shadow .textLayer > span {
background-color: rgba(255, 255, 255, 0.6);
color: rgba(0, 0, 0, 1);
}
/* .grab-to-pan-grab {
cursor: url("../assets/grab.cur"), move !important;
cursor: grab !important;
}
.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
cursor: inherit !important;
}
.grab-to-pan-grab:active,
.grab-to-pan-grabbing {
cursor: url("../assets/grabbing.cur"), move !important;
cursor: grabbing !important;
position: fixed;
background: rgba(0, 0, 0, 0);
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 50000;
} */
/* should be higher than anything else in PDF.js! */
@page {
margin: 0;
}
#printContainer {
display: none;
}
@media screen and (min-resolution: 1.1dppx) {
/* Rules for Retina screens */
.toolbarButton::before {
transform: scale(0.5);
top: -5px;
}
.secondaryToolbarButton::before {
transform: scale(0.5);
top: -4px;
}
html[dir='ltr'] .toolbarButton::before,
html[dir='rtl'] .toolbarButton::before {
left: -1px;
}
html[dir='ltr'] .secondaryToolbarButton::before {
left: -2px;
}
html[dir='rtl'] .secondaryToolbarButton::before {
left: 186px;
}
.toolbarField.pageNumber.visiblePageIsLoading,
#findInput[data-status="pending"] {
background-image: url(../assets/loading-small@2x.png);
background-size: 16px 17px;
}
.dropdownToolbarButton::after {
transform: scale(0.5);
top: -5px;
content: url(../assets/toolbarButton-menuArrows@2x.png);
}
html[dir='ltr'] .dropdownToolbarButton::after {
right: 4px;
}
html[dir='rtl'] .dropdownToolbarButton::after {
left: 4px;
}
.toolbarButton#sidebarToggle::before {
content: url(../assets/toolbarButton-sidebarToggle@2x.png);
}
html[dir='rtl'] .toolbarButton#sidebarToggle::before {
transform: scale(-0.5, 0.5);
}
.toolbarButton#secondaryToolbarToggle::before {
content: url(../assets/toolbarButton-secondaryToolbarToggle@2x.png);
}
html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
transform: scale(-0.5, 0.5);
}
.toolbarButton.findPrevious::before {
content: url(../assets/findbarButton-previous@2x.png);
}
html[dir='rtl'] .toolbarButton.findPrevious::before {
transform: scale(-0.5, 0.5);
}
.toolbarButton.findNext::before {
content: url(../assets/findbarButton-next@2x.png);
}
html[dir='rtl'] .toolbarButton.findNext::before {
transform: scale(-0.5, 0.5);
}
.toolbarButton.pageUp::before {
content: url(../assets/toolbarButton-pageUp@2x.png);
}
html[dir='rtl'] .toolbarButton.pageUp::before {
transform: scale(-0.5, 0.5);
}
.toolbarButton.pageDown::before {
content: url(../assets/toolbarButton-pageDown@2x.png);
}
html[dir='rtl'] .toolbarButton.pageDown::before {
transform: scale(-0.5, 0.5);
}
.toolbarButton.draggrad::before {
content: url(../assets/secondaryToolbarButton-handTool@2x.png);
}
html[dir='rtl'] .toolbarButton.draggrad::before {
transform: scale(-0.5, 0.5);
}
.toolbarButton.zoomIn::before {
content: url(../assets/toolbarButton-zoomIn@2x.png);
}
.toolbarButton.zoomOut::before {
content: url(../assets/toolbarButton-zoomOut@2x.png);
}
.toolbarButton.presentationMode::before,
.secondaryToolbarButton.presentationMode::before {
content: url(../assets/toolbarButton-presentationMode@2x.png);
}
.toolbarButton.print::before,
.secondaryToolbarButton.print::before {
content: url(../assets/toolbarButton-print@2x.png);
}
.toolbarButton.openFile::before,
.secondaryToolbarButton.openFile::before {
content: url(../assets/toolbarButton-openFile@2x.png);
}
.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
content: url(../assets/toolbarButton-download@2x.png);
}
.toolbarButton.bookmark::before,
.secondaryToolbarButton.bookmark::before {
content: url(../assets/toolbarButton-bookmark@2x.png);
}
#viewThumbnail.toolbarButton::before {
content: url(../assets/toolbarButton-viewThumbnail@2x.png);
}
#viewOutline.toolbarButton::before {
content: url(../assets/toolbarButton-viewOutline@2x.png);
}
html[dir="rtl"] #viewOutline.toolbarButton::before {
transform: scale(-0.5, 0.5);
}
#viewAttachments.toolbarButton::before {
content: url(../assets/toolbarButton-viewAttachments@2x.png);
}
#viewFind.toolbarButton::before {
content: url(../assets/toolbarButton-search@2x.png);
}
.secondaryToolbarButton.firstPage::before {
content: url(../assets/secondaryToolbarButton-firstPage@2x.png);
}
.secondaryToolbarButton.lastPage::before {
content: url(../assets/secondaryToolbarButton-lastPage@2x.png);
}
.secondaryToolbarButton.rotateCcw::before {
content: url(../assets/secondaryToolbarButton-rotateCcw@2x.png);
}
.secondaryToolbarButton.rotateCw::before {
content: url(../assets/secondaryToolbarButton-rotateCw@2x.png);
}
.secondaryToolbarButton.selectTool::before {
content: url(../assets/secondaryToolbarButton-selectTool@2x.png);
}
.secondaryToolbarButton.handTool::before {
content: url(../assets/secondaryToolbarButton-handTool@2x.png);
}
.secondaryToolbarButton.scrollVertical::before {
content: url(../assets/secondaryToolbarButton-scrollVertical@2x.png);
}
.secondaryToolbarButton.scrollHorizontal::before {
content: url(../assets/secondaryToolbarButton-scrollHorizontal@2x.png);
}
.secondaryToolbarButton.scrollWrapped::before {
content: url(../assets/secondaryToolbarButton-scrollWrapped@2x.png);
}
.secondaryToolbarButton.spreadNone::before {
content: url(../assets/secondaryToolbarButton-spreadNone@2x.png);
}
.secondaryToolbarButton.spreadOdd::before {
content: url(../assets/secondaryToolbarButton-spreadOdd@2x.png);
}
.secondaryToolbarButton.spreadEven::before {
content: url(../assets/secondaryToolbarButton-spreadEven@2x.png);
}
.secondaryToolbarButton.documentProperties::before {
content: url(../assets/secondaryToolbarButton-documentProperties@2x.png);
}
.outlineItemToggler::before {
transform: scale(0.5);
top: -1px;
content: url(../assets/treeitem-expanded@2x.png);
}
.outlineItemToggler.outlineItemsHidden::before {
content: url(../assets/treeitem-collapsed@2x.png);
}
html[dir='rtl'] .outlineItemToggler.outlineItemsHidden::before {
transform: scale(-0.5, 0.5);
}
html[dir='ltr'] .outlineItemToggler::before {
right: 0;
}
html[dir='rtl'] .outlineItemToggler::before {
left: 0;
}
}
@media print {
/* General rules for printing. */
body {
background: rgba(0, 0, 0, 0) none;
}
/* Rules for browsers that don't support mozPrintCallback. */
#sidebarContainer, #secondaryToolbar, .toolbar, #loadingBox, #errorWrapper, .textLayer {
display: none;
}
#viewerContainer {
overflow: visible;
}
#mainContainer, #viewerContainer, .page, .page canvas {
position: static;
padding: 0;
margin: 0;
}
.page {
float: left;
display: none;
border: none;
box-shadow: none;
background-clip: content-box;
background-color: rgba(255, 255, 255, 1);
}
.page[data-loaded] {
display: block;
}
.fileInput {
display: none;
}
/* Rules for browsers that support PDF.js printing */
body[data-pdfjsprinting] #outerContainer {
display: none;
}
body[data-pdfjsprinting] #printContainer {
display: block;
}
#printContainer {
height: 100%;
}
/* wrapper around (scaled) print canvas elements */
#printContainer > div {
position: relative;
top: 0;
left: 0;
width: 1px;
height: 1px;
overflow: visible;
page-break-after: always;
page-break-inside: avoid;
}
#printContainer canvas,
#printContainer img {
display: block;
}
}
.visibleLargeView,
.visibleMediumView,
.visibleSmallView {
display: none;
}
@media all and (max-width: 900px) {
#toolbarViewerMiddle {
display: table;
margin: auto;
left: auto;
position: inherit;
transform: none;
}
}
@media all and (max-width: 840px) {
#sidebarContent {
background-color: rgba(0, 0, 0, 0.7);
}
html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer {
left: 0px !important;
}
html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer {
right: 0px !important;
}
#outerContainer .hiddenLargeView,
#outerContainer .hiddenMediumView {
display: inherit;
}
#outerContainer .visibleLargeView,
#outerContainer .visibleMediumView {
display: none;
}
}
@media all and (max-width: 770px) {
#outerContainer .hiddenLargeView {
display: none;
}
#outerContainer .visibleLargeView {
display: inherit;
}
}
@media all and (max-width: 700px) {
#outerContainer .hiddenMediumView {
display: none;
}
#outerContainer .visibleMediumView {
display: inherit;
}
}
@media all and (max-width: 640px) {
.hiddenSmallView, .hiddenSmallView * {
display: none;
}
.visibleSmallView {
display: inherit;
}
.toolbarButtonSpacer {
width: 0;
}
html[dir='ltr'] .findbar {
left: 38px;
}
html[dir='rtl'] .findbar {
right: 38px;
}
}
@media all and (max-width: 535px) {
#scaleSelectContainer {
display: none;
}
}
@font-face {
font-family: 'iconfont';
src: url('../assets/iconfog/iconfont.eot');
src: url('../assets/iconfog/iconfont.eot?#iefix') format('embedded-opentype'),
url('../assets/iconfog/iconfont.woff2') format('woff2'),
url('../assets/iconfog/iconfont.woff') format('woff'),
url('../assets/iconfog/iconfont.ttf') format('truetype'),
url('../assets/iconfog/iconfont.svg#iconfont') format('svg');
}
.jiantou {
font-family: "iconfont" !important;
font-size: 40px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
\ No newline at end of file
src/main.js
......@@ -2,12 +2,10 @@ import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
src/router/dist/index.dev.js 0 → 100644
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _vue = _interopRequireDefault(require("vue"));
var _vueRouter = _interopRequireDefault(require("vue-router"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
_vue["default"].use(_vueRouter["default"]);
var routes = [];
var router = new _vueRouter["default"]({
routes: routes,
mode: "history"
});
var _default = router;
exports["default"] = _default;
\ No newline at end of file
src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
];
const routes = [];
const router = new VueRouter({
routes
routes,
mode: "history"
});
export default router;
src/store/index.js deleted 100644 → 0
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});
src/views/About.vue deleted 100644 → 0
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue deleted 100644 → 0
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld
}
};
</script>
vue.config.js 0 → 100644
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
assetsDir: "static",
outputDir: "previewPDF"
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment