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
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
24
display: inline-block;
25
width: 1em;
26
height: 1em;
27
font-size: 1.5em;
28
}
29
:is(#shape-selector, #shape-options) > button > iconify-icon {
31
font-size: 2rem;
32
}
33
#annotation-zone, .annotation-zone {
35
position: relative;
36
user-select: none;
37
}
38
#annotation-image, .annotation-image {
40
user-drag: none;
41
-webkit-user-drag: none;
42
image-rendering: pixelated;
43
}
44
#annotation-zone > svg, .annotation-zone > svg {
46
z-index: 1;
47
position: absolute;
48
top: 0;
49
left: 0;
50
width: 100%;
51
height: 100%;
52
}
53
.annotation-ruler {
55
z-index: 2;
56
position: absolute;
57
top: 0;
58
left: 0;
59
background: var(--color-accent);
60
display: none;
61
}
62
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
64
height: 1px;
65
width: 100%;
66
}
67
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
69
width: 1px;
70
height: 100%;
71
}
72
.shape {
74
stroke: var(--color-accent);
75
fill: var(--color-accent);
76
fill-opacity: 0.1;
77
stroke-width: 2px;
78
vector-effect: non-scaling-stroke;
79
pointer-events: auto;
80
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
81
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
82
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
83
stroke-linecap: square;
84
stroke-linejoin: miter;
85
}
86
.shape-polyline {
88
fill: none;
89
}
90
.shape-point {
92
stroke: var(--color-accent);
93
stroke-width: 2px;
94
fill-opacity: 1;
95
r: 2;
96
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
97
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
98
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
99
}
100
.shape.selected {
102
fill-opacity: 0.2;
103
stroke-width: 4px;
104
filter: drop-shadow(0 0 2px var(--text-soft));
105
}
106
.shape-point.selected {
108
fill-opacity: 1;
109
r: 6;
110
stroke-width: 6px;
111
}
112
.shape-container, .shape-container-viewonly {
114
pointer-events: none;
115
}
116
#annotation-helper-message {
118
min-height: 2lh;
119
}
120
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
122
fill: var(--color-info);
123
stroke: var(--color-info);
124
fill-opacity: 0;
125
stroke-opacity: 0;
126
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
127
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
128
}
129
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
131
fill: none;
132
}
133
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
135
stroke: var(--color-info);
136
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
137
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
138
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
139
}
140
.shape-label {
142
position: absolute;
143
font-weight: 500;
144
color: var(--color-shape-label-text) !important;
145
pointer-events: auto;
146
height: 28px;
147
padding-left: 8px;
148
padding-right: 8px;
149
display: flex;
150
align-items: center;
151
justify-content: center;
152
background: var(--color-shape-label);
153
width: max-content;
154
box-shadow: var(--shadow-button);
155
/* top-left corner is square to point to the shape */
156
border-radius: 0 16px 16px 16px;
157
opacity: 0;
158
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
159
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
160
transform: scale(0);
161
transform-origin: top left;
162
z-index: 3;
163
text-decoration: none;
164
}
165
.shape-label:hover {
167
text-decoration: underline;
168
}
169
/* Only show region parts when checkbox is checked */
171
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
172
opacity: 1;
173
transform: scale(1);
174
}
175
/* Hide points with a bubble */
177
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
178
r: 0;
179
border-width: 0;
180
}
181
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
183
fill-opacity: 0.1;
184
stroke-opacity: 1;
185
}
186
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
188
fill-opacity: 0.2;
189
stroke-opacity: 1;
190
}
191
/* Disabled for now, until there is more navigation that would benefit from transitions */
193
/*
194
@view-transition {
195
navigation: auto;
196
}
197
@keyframes move-out {
199
from {
200
transform: translateX(0%);
201
}
202
to {
203
transform: translateX(-100%);
204
}
205
}
206
@keyframes move-in {
208
from {
209
transform: translateX(100%);
210
}
211
to {
212
transform: translateX(0%);
213
}
214
}
215
@media (prefers-reduced-motion: no-preference) {
217
::view-transition-old(root),
218
::view-transition-new(root) {
219
animation-duration: 0.25s;
220
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
221
}
222
::view-transition-old(root) {
224
animation-name: move-out;
225
}
226
::view-transition-new(root) {
228
animation-name: move-in;
229
}
230
}
231
*/
232
.multi-select, .single-select {
234
display: flex;
235
flex-flow: column nowrap;
236
overflow-y: scroll;
237
box-shadow: var(--shadow-card-inset);
238
padding: 16px;
239
gap: 8px;
240
}
241
.licence-selection, .image-type-selection {
243
display: flex;
244
flex-flow: column nowrap;
245
}
246
.licence-selection-info, .image-type-selection-info {
248
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
249
/* Align with the checkbox above */
250
}
251
.licence-selection-info > p, .image-type-selection-info > p {
253
font-weight: 300;
254
}
255
.licence-logo {
257
width: 128px;
258
float: right;
259
margin-left: 1ch;
260
}
261
.licence-title, .image-type-title {
263
display: flex;
264
justify-content: space-between;
265
width: 100%;
266
}
267
.licence-title > .licence-name, .image-type-title > .image-type-name {
269
font: var(--h5-font);
270
font-weight: 400;
271
}
272
.icon-explainer {
274
display: grid;
275
gap: 4px 8px;
276
grid-template-columns: auto 1fr;
277
align-items: center;
278
}
279
.icon-explainer *:nth-child(even) {
281
font-weight: 300;
282
}
283
.required-asterisk::after {
285
content: "*";
286
color: var(--color-error);
287
}
288
small {
290
/* BIG :D */
291
font-size: 1em;
292
}
293
#pagination {
295
display: flex;
296
gap: 1em;
297
justify-content: center;
298
align-items: center;
299
font-size: 1.5em;
300
font-weight: 600;
301
flex: 1 0 auto;
302
}
303
#pagination > a {
305
text-decoration: none;
306
color: var(--color-accent-1);
307
}
308
#pagination-options > form {
310
align-items: center;
311
display: flex;
312
gap: 1em;
313
}
314
#pagination-options {
316
justify-content: center;
317
align-items: center;
318
gap: 1em;
319
width: 100%;
320
}
321
.thumbnail-list {
323
list-style: none;
324
margin: 0 !important;
325
display: grid;
326
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
327
gap: 16px;
328
}
329
.thumbnail-list > li {
331
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
332
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
333
box-shadow: var(--shadow-card);
334
background: var(--color-card);
335
}
336
.thumbnail-list > li > a, .thumbnail-list > li {
338
display: flex;
339
flex-direction: column;
340
justify-content: space-between;
341
height: 100%;
342
}
343
.thumbnail-list > li > .list-more {
345
display: flex;
346
justify-content: space-between;
347
align-items: center;
348
padding: 8px;
349
}
350
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
352
position: relative;
353
transform: scale(1.5);
354
z-index: 1;
355
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
356
}
357
.thumbnail-list > li .list-detail {
359
padding: 8px;
360
display: block;
361
}
362
a.button {
364
text-decoration: none;
365
}
366
dt {
368
font-weight: 600;
369
}
370
dd {
372
margin-left: 40px;
373
}
374
#mobile-navbar {
376
display: none;
377
}
378
@media screen and (max-width: 576px) {
380
#mobile-navbar {
381
display: flex;
382
}
383
#desktop-navbar {
384
display: none;
385
}
386
}
387
#hamburger > nav {
389
display: flex;
390
flex-direction: column;
391
gap: 1em;
392
padding: var(--padding-card);
393
padding-top: var(--padding-card-top);
394
box-shadow: var(--shadow-card);
395
background: var(--color-card);
396
justify-content: space-between;
397
width: clamp(240px, calc(100vw - 56px), 448px);
398
}
399
#hamburger > nav > ul {
401
display: flex;
402
flex-direction: column;
403
gap: 1em;
404
margin: 0;
405
}
406
#hamburger > nav > ul > li {
408
display: flex;
409
gap: var(--gap-label-checkbox);
410
align-items: center;
411
margin: 0;
412
}
413
#hamburger > nav > ul > li > a {
415
text-decoration: none;
416
color: var(--color-card-text);
417
}
418