aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/pdf/PDFViewer.scss
blob: cfe07f6cbbe57005072528e267e3803e35906154 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
.pdfViewer-content {
    height: 100%;
    width: 100%;
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
}

.pdfViewerDash,
.pdfViewerDash-interactive {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    transform-origin: top left;

    // .canvasWrapper {
    //     transform: scale(0.75);
    //     transform-origin: top left;
    // }
    .textLayer {
        opacity: unset;
        mix-blend-mode: multiply; // bcz: makes text fuzzy!
    }
    .textLayer ::selection {
        background: #accef76a;
    }

    // should match the backgroundColor in createAnnotation()
    .textLayer .highlight {
        background-color: yellow;
    }

    .textLayer .highlight.selected {
        background-color: orange;
    }

    .page {
        position: relative;
        border: unset;
    }

    .pdfViewerDash-text-selected {
        // position: relative;  // bcz: this breaks auto-scrolling using the inline search box
        z-index: -1;

        .textLayer {
            pointer-events: all;
            user-select: text;
        }
    }

    .pdfViewerDash-text {
        transform-origin: top left;

        .textLayer {
            will-change: transform;
        }
    }

    .pdfViewerDash-overlay {
        transform-origin: left top;
        position: absolute;
        top: 0px;
        left: 0px;
        display: inline-block;
        width: 100%;
    }

    .pdfViewerDash-overlayAnno {
        top: -17px;
        pointer-events: none;
        width: max-content;
        height: 20px;
        position: absolute;
        background: #b8b8b8;
        border-radius: 5px;
        display: block;
    }

    .pdfViewerDash-annotationLayer {
        position: absolute;
        transform-origin: left top;
        top: 0;
        width: 100%;
        pointer-events: none;
        mix-blend-mode: multiply; // bcz: makes text fuzzy!
    }

    .pdfViewerDash-waiting {
        width: 70%;
        height: 70%;
        margin: 15%;
        transition: 0.4s opacity ease;
        opacity: 0.7;
        position: absolute;
        z-index: 10;
    }
}

.pdfViewerDash-interactive {
    pointer-events: all;
}