ASCII text
1
@import "/static/efficient-ui/MASTER.css";
2
:root {
4
--gap-navbar: 1rem;
5
--width-navbar-button: 0;
6
--text-soft: #000000C0;
7
--text-softer: #0000009A;
8
--text-faint: #00000066;
9
}
10
p {
12
color: var(--text-soft);
13
}
14
iconify-icon {
16
display: inline-block;
17
width: 1em;
18
height: 1em;
19
}
20
:is(#shape-selector, #shape-options) > button > iconify-icon {
22
font-size: 2rem;
23
}
24
#annotation-zone {
26
position: relative;
27
user-select: none;
28
}
29
#annotation-image {
31
user-drag: none;
32
-webkit-user-drag: none;
33
}
34
#annotation-zone > svg {
36
z-index: 1;
37
position: absolute;
38
top: 0;
39
left: 0;
40
width: 100%;
41
height: 100%;
42
}
43
.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
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
54
height: 1px;
55
width: 100%;
56
}
57
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
59
width: 1px;
60
height: 100%;
61
}
62
.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
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
71
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
72
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
73
stroke-linecap: square;
74
stroke-linejoin: miter;
75
}
76
.shape-polyline {
78
fill: none;
79
}
80
.shape-point {
82
stroke: var(--color-accent);
83
stroke-width: 2px;
84
fill-opacity: 1;
85
r: 2;
86
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
87
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
88
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
89
}
90
.shape.selected {
92
fill-opacity: 0.2;
93
stroke-width: 4px;
94
filter: drop-shadow(0 0 2px var(--text-soft));
95
}
96
.shape-point.selected {
98
fill-opacity: 1;
99
r: 6;
100
stroke-width: 6px;
101
}
102
.shape-container {
104
pointer-events: none;
105
}
106
#annotation-helper-message {
108
min-height: 2lh;
109
}
110