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
--color-shape-label: #0097A7; --color-shape-label-text: #ffffff;
10
}
11
p {
13
color: var(--text-soft);
14
}
15
iconify-icon {
17
display: inline-block;
18
width: 1em;
19
height: 1em;
20
}
21
:is(#shape-selector, #shape-options) > button > iconify-icon {
23
font-size: 2rem;
24
}
25
#annotation-zone {
27
position: relative;
28
user-select: none;
29
}
30
#annotation-image {
32
user-drag: none;
33
-webkit-user-drag: none;
34
image-rendering: pixelated;
35
}
36
#annotation-zone > svg {
38
z-index: 1;
39
position: absolute;
40
top: 0;
41
left: 0;
42
width: 100%;
43
height: 100%;
44
}
45
.annotation-ruler {
47
z-index: 2;
48
position: absolute;
49
top: 0;
50
left: 0;
51
background: var(--color-accent);
52
display: none;
53
}
54
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
56
height: 1px;
57
width: 100%;
58
}
59
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
61
width: 1px;
62
height: 100%;
63
}
64
.shape {
66
stroke: var(--color-accent);
67
fill: var(--color-accent);
68
fill-opacity: 0.1;
69
stroke-width: 2px;
70
vector-effect: non-scaling-stroke;
71
pointer-events: auto;
72
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
73
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
74
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
75
stroke-linecap: square;
76
stroke-linejoin: miter;
77
}
78
.shape-polyline {
80
fill: none;
81
}
82
.shape-point {
84
stroke: var(--color-accent);
85
stroke-width: 2px;
86
fill-opacity: 1;
87
r: 2;
88
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
89
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
90
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
91
}
92
.shape.selected {
94
fill-opacity: 0.2;
95
stroke-width: 4px;
96
filter: drop-shadow(0 0 2px var(--text-soft));
97
}
98
.shape-point.selected {
100
fill-opacity: 1;
101
r: 6;
102
stroke-width: 6px;
103
}
104
.shape-container, .shape-container-viewonly {
106
pointer-events: none;
107
}
108
#annotation-helper-message {
110
min-height: 2lh;
111
}
112
.shape-container-viewonly > .shape {
114
fill: var(--color-info);
115
stroke: var(--color-info);
116
fill-opacity: 0;
117
stroke-opacity: 0;
118
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
119
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
120
}
121
.shape-container-viewonly > .shape-polyline {
123
fill: none;
124
}
125
.shape-container-viewonly > .shape-point {
127
stroke: var(--color-info);
128
}
129
.shape-label {
131
font-size: 1.5rem;
132
font-weight: 500;
133
color: var(--color-shape-label-text);
134
pointer-events: none;
135
height: 32px;
136
padding-left: 8px;
137
padding-right: 8px;
138
display: flex;
139
align-items: center;
140
justify-content: center;
141
background: var(--color-shape-label);
142
width: max-content;
143
box-shadow: var(--shadow-button);
144
/* top-left corner is square to point to the shape */
145
border-radius: 0 16px 16px 16px;
146
opacity: 0;
147
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
148
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
149
transform: scale(0);
150
transform-origin: top left;
151
z-index: 3;
152
}
153
/* Only show region parts when checkbox is checked */
155
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > foreignObject > .shape-label {
156
opacity: 1;
157
transform: scale(1);
158
}
159
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
161
fill-opacity: 0.1;
162
stroke-opacity: 1;
163
}
164