627a566c2f
This improves maintainability: 1. no need to hardcode each script file in Android code 2. no need to symlink pdf.js and pdf.worker.js 3. adds sourcemaps in debug builds to help debug some pdf.js related issues
112 lines
1.8 KiB
CSS
112 lines
1.8 KiB
CSS
:root {
|
|
--text-layer-opacity: 0.2;
|
|
--text-layer-foreground: transparent;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body, canvas {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: #c0c0c0;
|
|
}
|
|
|
|
#container {
|
|
--scale-factor: 1;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
#container canvas, #container .textLayer {
|
|
/* overlay child elements on top of each other */
|
|
grid-row-start: 1;
|
|
grid-column-start: 1;
|
|
}
|
|
|
|
canvas {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.textLayer {
|
|
text-align: initial;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
opacity: var(--text-layer-opacity);
|
|
line-height: 1;
|
|
}
|
|
|
|
.textLayer span,
|
|
.textLayer br {
|
|
color: var(--text-layer-foreground);
|
|
position: absolute;
|
|
white-space: pre;
|
|
cursor: text;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.textLayer .highlight {
|
|
margin: -1px;
|
|
padding: 1px;
|
|
background-color: rgba(180, 0, 170, 1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.textLayer .highlight.appended {
|
|
position: initial;
|
|
}
|
|
|
|
.textLayer .highlight.begin {
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
|
|
.textLayer .highlight.end {
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
.textLayer .highlight.middle {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.textLayer .highlight.selected {
|
|
background-color: rgba(0, 100, 0, 1);
|
|
}
|
|
|
|
.textLayer ::selection {
|
|
background: rgba(0, 0, 255, 1);
|
|
}
|
|
|
|
.textLayer .endOfContent {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 100%;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
|
|
.textLayer .endOfContent.active {
|
|
top: 0;
|
|
}
|
|
|
|
[data-main-rotation="90"] {
|
|
transform: rotate(90deg);
|
|
}
|
|
[data-main-rotation="180"] {
|
|
transform: rotate(180deg);
|
|
}
|
|
[data-main-rotation="270"] {
|
|
transform: rotate(270deg);
|
|
}
|