/
index.html
52 lines (45 loc) · 1.42 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mirador Annotorious Plugin</title>
<style>
html, body {
padding:0;
margin:0;
}
/** Hides the outer shapes - for this style we only need one **/
svg.a9s-annotationlayer .a9s-selection .a9s-outer,
svg.a9s-annotationlayer .a9s-annotation .a9s-outer {
display:none;
}
svg.a9s-annotationlayer .a9s-handle .a9s-handle-outer {
display:none;
}
/** New style for the annotation outlines **/
svg.a9s-annotationlayer .a9s-selection .a9s-inner,
svg.a9s-annotationlayer .a9s-annotation .a9s-inner,
svg.a9s-annotationlayer .a9s-annotation.selected .a9s-inner {
stroke-width:4;
stroke:red;
}
/** Disable the hover effect from the default stylesheet **/
svg.a9s-annotationlayer .a9s-annotation.editable:hover .a9s-inner {
fill:transparent;
}
/** Corner handles **/
svg.a9s-annotationlayer .a9s-handle .a9s-handle-inner {
fill:rgb(255, 94, 94);
stroke:red;
}
/** Enable the dim mask, black with 60% transparency **/
svg.a9s-annotationlayer .a9s-selection-mask {
fill:rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<div id="mirador" style="height: 100vh; position: relative"></div>
<script type="module" src="./src/index.js"></script>
</body>
</html>