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
--shadow-card-inset: inset 0 3px 6px -4px rgba(0, 0, 0, 0.12), inset 0 3px 6px 0 rgba(0, 0, 0, 0.24), inset 0 1px 4px 0 rgba(0, 0, 0, 0.12);
11
/*view-transition-name: root;*/
12
}
13
nav {
15
/*view-transition-name: nav;*/
16
}
17
p {
19
color: var(--text-soft);
20
}
21
iconify-icon {
23
display: inline-block;
24
width: 1em;
25
height: 1em;
26
}
27
:is(#shape-selector, #shape-options) > button > iconify-icon {
29
font-size: 2rem;
30
}
31
#annotation-zone, .annotation-zone {
33
position: relative;
34
user-select: none;
35
}
36
#annotation-image, .annotation-image {
38
user-drag: none;
39
-webkit-user-drag: none;
40
image-rendering: pixelated;
41
}
42
#annotation-zone > svg, .annotation-zone > svg {
44
z-index: 1;
45
position: absolute;
46
top: 0;
47
left: 0;
48
width: 100%;
49
height: 100%;
50
}
51
.annotation-ruler {
53
z-index: 2;
54
position: absolute;
55
top: 0;
56
left: 0;
57
background: var(--color-accent);
58
display: none;
59
}
60
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
62
height: 1px;
63
width: 100%;
64
}
65
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
67
width: 1px;
68
height: 100%;
69
}
70
.shape {
72
stroke: var(--color-accent);
73
fill: var(--color-accent);
74
fill-opacity: 0.1;
75
stroke-width: 2px;
76
vector-effect: non-scaling-stroke;
77
pointer-events: auto;
78
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
79
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
80
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
81
stroke-linecap: square;
82
stroke-linejoin: miter;
83
}
84
.shape-polyline {
86
fill: none;
87
}
88
.shape-point {
90
stroke: var(--color-accent);
91
stroke-width: 2px;
92
fill-opacity: 1;
93
r: 2;
94
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
95
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
96
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
97
}
98
.shape.selected {
100
fill-opacity: 0.2;
101
stroke-width: 4px;
102
filter: drop-shadow(0 0 2px var(--text-soft));
103
}
104
.shape-point.selected {
106
fill-opacity: 1;
107
r: 6;
108
stroke-width: 6px;
109
}
110
.shape-container, .shape-container-viewonly {
112
pointer-events: none;
113
}
114
#annotation-helper-message {
116
min-height: 2lh;
117
}
118
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
120
fill: var(--color-info);
121
stroke: var(--color-info);
122
fill-opacity: 0;
123
stroke-opacity: 0;
124
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
125
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
126
}
127
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
129
fill: none;
130
}
131
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
133
stroke: var(--color-info);
134
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
135
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
136
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
137
}
138
.shape-label {
140
position: absolute;
141
font-weight: 500;
142
color: var(--color-shape-label-text);
143
pointer-events: auto;
144
height: 28px;
145
padding-left: 8px;
146
padding-right: 8px;
147
display: flex;
148
align-items: center;
149
justify-content: center;
150
background: var(--color-shape-label);
151
width: max-content;
152
box-shadow: var(--shadow-button);
153
/* top-left corner is square to point to the shape */
154
border-radius: 0 16px 16px 16px;
155
opacity: 0;
156
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
157
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
158
transform: scale(0);
159
transform-origin: top left;
160
z-index: 3;
161
}
162
/* Only show region parts when checkbox is checked */
164
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
165
opacity: 1;
166
transform: scale(1);
167
}
168
/* Hide points with a bubble */
170
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
171
r: 0;
172
border-width: 0;
173
}
174
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
176
fill-opacity: 0.1;
177
stroke-opacity: 1;
178
}
179
.thumbnail-list > li:hover .shape {
181
fill-opacity: 0.2;
182
stroke-opacity: 1;
183
}
184
/* Disabled for now, until there is more navigation that would benefit from transitions */
186
/*
187
@view-transition {
188
navigation: auto;
189
}
190
@keyframes move-out {
192
from {
193
transform: translateX(0%);
194
}
195
to {
196
transform: translateX(-100%);
197
}
198
}
199
@keyframes move-in {
201
from {
202
transform: translateX(100%);
203
}
204
to {
205
transform: translateX(0%);
206
}
207
}
208
@media (prefers-reduced-motion: no-preference) {
210
::view-transition-old(root),
211
::view-transition-new(root) {
212
animation-duration: 0.25s;
213
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
214
}
215
::view-transition-old(root) {
217
animation-name: move-out;
218
}
219
::view-transition-new(root) {
221
animation-name: move-in;
222
}
223
}
224
*/
225
.multi-select, .single-select {
227
display: flex;
228
flex-flow: column nowrap;
229
overflow-y: scroll;
230
box-shadow: var(--shadow-card-inset);
231
padding: 16px;
232
gap: 8px;
233
}
234
.licence-selection, .image-type-selection {
236
display: flex;
237
flex-flow: column nowrap;
238
}
239
.licence-selection-info, .image-type-selection-info {
241
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
242
/* Align with the checkbox above */
243
}
244
.licence-selection-info > p, .image-type-selection-info > p {
246
font-weight: 300;
247
}
248
.licence-logo {
250
width: 128px;
251
float: right;
252
margin-left: 1ch;
253
}
254
.licence-title, .image-type-title {
256
display: flex;
257
justify-content: space-between;
258
width: 100%;
259
}
260
.licence-title > .licence-name, .image-type-title > .image-type-name {
262
font: var(--h5-font);
263
font-weight: 400;
264
}
265
.icon-explainer {
267
display: grid;
268
gap: 4px 8px;
269
grid-template-columns: auto 1fr;
270
align-items: center;
271
}
272
.icon-explainer *:nth-child(even) {
274
font-weight: 300;
275
}
276
.required-asterisk::after {
278
content: "*";
279
color: var(--color-error);
280
}
281
small {
283
/* BIG :D */
284
font-size: 1em;
285
}
286
#pagination {
288
display: flex;
289
gap: 1em;
290
justify-content: center;
291
align-items: center;
292
font-size: 1.5em;
293
font-weight: 600;
294
flex: 1 0 auto;
295
}
296
#pagination > a {
298
text-decoration: none;
299
color: var(--color-accent-1);
300
}
301
#pagination-options > form {
303
align-items: center;
304
display: flex;
305
gap: 1em;
306
}
307
#pagination-options {
309
justify-content: center;
310
align-items: center;
311
gap: 1em;
312
width: 100%;
313
}
314
.thumbnail-list {
316
list-style: none;
317
margin: 0 !important;
318
display: grid;
319
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
320
gap: 16px;
321
}
322
.thumbnail-list > li {
324
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
325
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
326
box-shadow: var(--shadow-card);
327
background: var(--color-card);
328
}
329
.thumbnail-list > li:hover {
331
position: relative;
332
transform: scale(1.5);
333
z-index: 1;
334
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
335
}
336