style.css
ASCII text
1
@import "/static/efficient-ui/MASTER.css";
2
3
:root {
4
--gap-navbar: 1rem;
5
--width-navbar-button: 0;
6
--text-soft: #000000C0;
7
--text-softer: #0000009A;
8
--text-faint: #00000066;
9
}
10
11
p {
12
color: var(--text-soft);
13
}
14
15
iconify-icon {
16
display: inline-block;
17
width: 1em;
18
height: 1em;
19
}
20
21
:is(#shape-selector, #shape-options) > button > iconify-icon {
22
font-size: 2rem;
23
}
24
25
#annotation-zone {
26
position: relative;
27
user-select: none;
28
}
29
30
#annotation-image {
31
user-drag: none;
32
-webkit-user-drag: none;
33
}
34
35
#annotation-zone > svg {
36
z-index: 1;
37
position: absolute;
38
top: 0;
39
left: 0;
40
width: 100%;
41
height: 100%;
42
}
43
44
.annotation-ruler {
45
z-index: 2;
46
position: absolute;
47
top: 0;
48
left: 0;
49
background: var(--color-accent);
50
display: none;
51
}
52
53
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
54
height: 1px;
55
width: 100%;
56
}
57
58
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
59
width: 1px;
60
height: 100%;
61
}
62
63
.shape {
64
stroke: var(--color-accent);
65
fill: var(--color-accent);
66
fill-opacity: 0.1;
67
stroke-width: 2px;
68
vector-effect: non-scaling-stroke;
69
pointer-events: auto;
70
}
71
72
.shape-polyline {
73
fill: none;
74
}
75
76
.shape-point {
77
stroke: var(--color-accent);
78
stroke-width: 32px;
79
r: 0.1;
80
}
81
82
.shape.selected {
83
fill-opacity: 0.2;
84
stroke-width: 4px;
85
filter: drop-shadow(0 0 2px var(--text-soft));
86
}
87
88
.shape-point.selected {
89
fill-opacity: 1;
90
r: 4px;
91
}
92
93
.shape-container {
94
pointer-events: none;
95
}
96
97
#annotation-helper-message {
98
min-height: 2lh;
99
}
100