src/client/views/InkingCanvas.scss


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

@import "globalCssVariables";

.inkingCanvas {
    opacity: 0.99;

    .jsx-parser {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1; // allows annotations to appear on videos when screen is full-size & ... 
    }
}

.inkingCanvas-paths-ink,
.inkingCanvas-paths-markers,
.inkingCanvas-noSelect,
.inkingCanvas-canSelect {
    position: absolute;
    top: 0;
    left: 0;
    width: 8192px;
    height: 8192px;
    cursor: "crosshair";
    pointer-events: auto;

}

.inkingCanvas-canSelect,
.inkingCanvas-noSelect {
    top: -50000px;
    left: -50000px;
    width: 100000px;
    height: 100000px;
}

.inkingCanvas-noSelect {
    pointer-events: none;
    cursor: "arrow";
}

.inkingCanvas-paths-ink,
.inkingCanvas-paths-markers {
    pointer-events: none;
    z-index: 10000; // overlays ink on top of everything 
    cursor: "arrow";
}

.inkingCanvas-paths-markers {
    mix-blend-mode: multiply;
}