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
/*view-transition-name: root;*/
11
}
12
nav {
14
/*view-transition-name: nav;*/
15
}
16
p {
18
color: var(--text-soft);
19
}
20
iconify-icon {
22
display: inline-block;
23
width: 1em;
24
height: 1em;
25
}
26
:is(#shape-selector, #shape-options) > button > iconify-icon {
28
font-size: 2rem;
29
}
30
#annotation-zone {
32
position: relative;
33
user-select: none;
34
}
35
#annotation-image {
37
user-drag: none;
38
-webkit-user-drag: none;
39
image-rendering: pixelated;
40
}
41
#annotation-zone > svg {
43
z-index: 1;
44
position: absolute;
45
top: 0;
46
left: 0;
47
width: 100%;
48
height: 100%;
49
}
50
.annotation-ruler {
52
z-index: 2;
53
position: absolute;
54
top: 0;
55
left: 0;
56
background: var(--color-accent);
57
display: none;
58
}
59
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
61
height: 1px;
62
width: 100%;
63
}
64
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
66
width: 1px;
67
height: 100%;
68
}
69
.shape {
71
stroke: var(--color-accent);
72
fill: var(--color-accent);
73
fill-opacity: 0.1;
74
stroke-width: 2px;
75
vector-effect: non-scaling-stroke;
76
pointer-events: auto;
77
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
78
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
79
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
80
stroke-linecap: square;
81
stroke-linejoin: miter;
82
}
83
.shape-polyline {
85
fill: none;
86
}
87
.shape-point {
89
stroke: var(--color-accent);
90
stroke-width: 2px;
91
fill-opacity: 1;
92
r: 2;
93
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
94
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
95
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
96
}
97
.shape.selected {
99
fill-opacity: 0.2;
100
stroke-width: 4px;
101
filter: drop-shadow(0 0 2px var(--text-soft));
102
}
103
.shape-point.selected {
105
fill-opacity: 1;
106
r: 6;
107
stroke-width: 6px;
108
}
109
.shape-container, .shape-container-viewonly {
111
pointer-events: none;
112
}
113
#annotation-helper-message {
115
min-height: 2lh;
116
}
117
.shape-container-viewonly > .shape {
119
fill: var(--color-info);
120
stroke: var(--color-info);
121
fill-opacity: 0;
122
stroke-opacity: 0;
123
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
124
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
125
}
126
.shape-container-viewonly > .shape-polyline {
128
fill: none;
129
}
130
.shape-container-viewonly > .shape-point {
132
stroke: var(--color-info);
133
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
134
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
135
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
136
}
137
.shape-label {
139
font-size: 1.5rem;
140
font-weight: 500;
141
color: var(--color-shape-label-text);
142
pointer-events: none;
143
height: 32px;
144
padding-left: 8px;
145
padding-right: 8px;
146
display: flex;
147
align-items: center;
148
justify-content: center;
149
background: var(--color-shape-label);
150
width: max-content;
151
box-shadow: var(--shadow-button);
152
/* top-left corner is square to point to the shape */
153
border-radius: 0 16px 16px 16px;
154
opacity: 0;
155
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
156
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
157
transform: scale(0);
158
transform-origin: top left;
159
z-index: 3;
160
}
161
/* Only show region parts when checkbox is checked */
163
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > foreignObject > .shape-label {
164
opacity: 1;
165
transform: scale(1);
166
}
167
/* Hide points with a bubble */
169
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
170
r: 0;
171
border-width: 0;
172
}
173
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
175
fill-opacity: 0.1;
176
stroke-opacity: 1;
177
}
178
/* Disabled for now, until there is more navigation that would benefit from transitions */
180
/*
181
@view-transition {
182
navigation: auto;
183
}
184
@keyframes move-out {
186
from {
187
transform: translateX(0%);
188
}
189
to {
190
transform: translateX(-100%);
191
}
192
}
193
@keyframes move-in {
195
from {
196
transform: translateX(100%);
197
}
198
to {
199
transform: translateX(0%);
200
}
201
}
202
@media (prefers-reduced-motion: no-preference) {
204
::view-transition-old(root),
205
::view-transition-new(root) {
206
animation-duration: 0.25s;
207
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
208
}
209
::view-transition-old(root) {
211
animation-name: move-out;
212
}
213
::view-transition-new(root) {
215
animation-name: move-in;
216
}
217
}
218
*/
219