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
--text-softest: #00000033;
10
--color-star: #FFC107;
11
--color-shape-label: #0097A7; --color-shape-label-text: #ffffff;
12
--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);
13
--1-star: #FF8079;
14
--2-star: #FF8A65;
15
--3-star: #FFAC1B;
16
--4-star: #FBC02D;
17
--5-star: #CDDC39;
18
/*view-transition-name: root;*/
19
}
20
nav {
22
/*view-transition-name: nav;*/
23
}
24
p {
26
color: var(--text-soft);
27
}
28
iconify-icon {
30
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
31
display: inline-block;
32
width: 1em;
33
height: 1em;
34
font-size: 1.5em;
35
}
36
:is(#shape-selector, #shape-options) > button > iconify-icon {
38
font-size: 2rem;
39
}
40
#annotation-zone, .annotation-zone {
42
position: relative;
43
user-select: none;
44
overflow: hidden;
45
}
46
#annotation-image, .annotation-image {
48
user-drag: none;
49
-webkit-user-drag: none;
50
image-rendering: pixelated;
51
}
52
#annotation-zone > svg, .annotation-zone > svg {
54
z-index: 1;
55
position: absolute;
56
top: 0;
57
left: 0;
58
width: 100%;
59
height: 100%;
60
}
61
.annotation-ruler {
63
z-index: 2;
64
position: absolute;
65
top: 0;
66
left: 0;
67
background: var(--color-accent);
68
display: none;
69
}
70
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
72
height: 1px;
73
width: 100%;
74
}
75
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
77
width: 1px;
78
height: 100%;
79
}
80
.shape {
82
stroke: var(--color-accent);
83
fill: var(--color-accent);
84
fill-opacity: 0.1;
85
stroke-width: 2px;
86
vector-effect: non-scaling-stroke;
87
pointer-events: auto;
88
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
89
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
90
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
91
stroke-linecap: square;
92
stroke-linejoin: miter;
93
}
94
.shape-polyline {
96
fill: none;
97
}
98
.shape-point {
100
stroke: var(--color-accent);
101
stroke-width: 2px;
102
fill-opacity: 1;
103
r: 2;
104
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
105
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
106
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
107
}
108
.shape.selected {
110
fill-opacity: 0.2;
111
stroke-width: 4px;
112
filter: drop-shadow(0 0 2px var(--text-soft));
113
}
114
.shape-point.selected {
116
fill-opacity: 1;
117
r: 6;
118
stroke-width: 6px;
119
}
120
.shape-container, .shape-container-viewonly {
122
pointer-events: none;
123
}
124
#annotation-helper-message {
126
min-height: 2lh;
127
}
128
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
130
fill: var(--color-info);
131
stroke: var(--color-info);
132
fill-opacity: 0;
133
stroke-opacity: 0;
134
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
135
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
136
}
137
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
139
fill: none;
140
}
141
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
143
stroke: var(--color-info);
144
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
145
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
146
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
147
}
148
.shape-label {
150
position: absolute;
151
font-weight: 500;
152
color: var(--color-shape-label-text) !important;
153
pointer-events: auto;
154
height: 28px;
155
padding-left: 8px;
156
padding-right: 8px;
157
display: flex;
158
align-items: center;
159
justify-content: center;
160
background: var(--color-shape-label);
161
width: max-content;
162
box-shadow: var(--shadow-button);
163
/* top-left corner is square to point to the shape */
164
border-radius: 0 16px 16px 16px;
165
opacity: 0;
166
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
167
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
168
transform: scale(0);
169
transform-origin: top left;
170
z-index: 3;
171
text-decoration: none;
172
}
173
.shape-label:hover {
175
text-decoration: underline;
176
}
177
/* Only show region parts when checkbox is checked */
179
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
180
opacity: 1;
181
transform: scale(1);
182
}
183
/* Hide points with a bubble */
185
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
186
r: 0;
187
border-width: 0;
188
}
189
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
191
fill-opacity: 0.1;
192
stroke-opacity: 1;
193
}
194
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
196
fill-opacity: 0.2;
197
stroke-opacity: 1;
198
}
199
/* Disabled for now, until there is more navigation that would benefit from transitions */
201
/*
202
@view-transition {
203
navigation: auto;
204
}
205
@keyframes move-out {
207
from {
208
transform: translateX(0%);
209
}
210
to {
211
transform: translateX(-100%);
212
}
213
}
214
@keyframes move-in {
216
from {
217
transform: translateX(100%);
218
}
219
to {
220
transform: translateX(0%);
221
}
222
}
223
@media (prefers-reduced-motion: no-preference) {
225
::view-transition-old(root),
226
::view-transition-new(root) {
227
animation-duration: 0.25s;
228
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
229
}
230
::view-transition-old(root) {
232
animation-name: move-out;
233
}
234
::view-transition-new(root) {
236
animation-name: move-in;
237
}
238
}
239
*/
240
.multi-select, .single-select {
242
display: flex;
243
flex-flow: column nowrap;
244
overflow-y: scroll;
245
box-shadow: var(--shadow-card-inset);
246
padding: 16px;
247
gap: 8px;
248
}
249
.licence-selection, .image-type-selection {
251
display: flex;
252
flex-flow: column nowrap;
253
}
254
.licence-selection-info, .image-type-selection-info {
256
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
257
/* Align with the checkbox above */
258
}
259
.licence-selection-info > p, .image-type-selection-info > p {
261
font-weight: 300;
262
}
263
.licence-logo {
265
width: 128px;
266
float: right;
267
margin-left: 1ch;
268
}
269
.licence-title, .image-type-title {
271
display: flex;
272
justify-content: space-between;
273
width: 100%;
274
}
275
.licence-title > .licence-name, .image-type-title > .image-type-name {
277
font: var(--h5-font);
278
font-weight: 400;
279
}
280
.icon-explainer {
282
display: grid;
283
gap: 4px 8px;
284
grid-template-columns: auto 1fr;
285
align-items: center;
286
}
287
.icon-explainer *:nth-child(even) {
289
font-weight: 300;
290
}
291
.required-asterisk::after {
293
content: "*";
294
color: var(--color-error);
295
}
296
small {
298
/* BIG :D */
299
font-size: 1em;
300
}
301
#pagination {
303
display: flex;
304
gap: 1em;
305
justify-content: center;
306
align-items: center;
307
font-size: 1.5em;
308
font-weight: 600;
309
flex: 1 0 auto;
310
}
311
#pagination > a {
313
text-decoration: none;
314
color: var(--color-accent-1);
315
}
316
#pagination-options > form {
318
align-items: center;
319
display: flex;
320
gap: 1em;
321
}
322
#pagination-options {
324
justify-content: center;
325
align-items: center;
326
gap: 1em;
327
width: 100%;
328
}
329
.thumbnail-list {
331
list-style: none;
332
margin: 0 !important;
333
display: grid;
334
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
335
gap: 16px;
336
}
337
.thumbnail-list > li {
339
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
340
box-shadow: var(--shadow-card);
341
background: var(--color-card);
342
}
343
.thumbnail-list > li > a, .thumbnail-list > li {
345
display: flex;
346
flex-direction: column;
347
justify-content: space-between;
348
height: 100%;
349
}
350
.thumbnail-list > li > .list-more {
352
display: flex;
353
justify-content: space-between;
354
align-items: center;
355
padding: 8px;
356
}
357
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
359
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
360
}
361
.thumbnail-list > li .annotation-zone {
363
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
364
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
365
}
366
.thumbnail-list > li .annotation-zone:hover {
368
position: relative;
369
transform: scale(2);
370
z-index: 1;
371
box-shadow: var(--shadow-textarea-active);
372
}
373
.thumbnail-list > li .list-detail {
375
padding: 8px;
376
display: block;
377
}
378
a.button {
380
text-decoration: none;
381
}
382
dt {
384
font-weight: 600;
385
}
386
dd {
388
margin-left: 40px;
389
}
390
#mobile-navbar {
392
display: none;
393
}
394
@media screen and (max-width: 576px) {
396
#mobile-navbar {
397
display: flex;
398
}
399
#desktop-navbar {
400
display: none;
401
}
402
}
403
#hamburger > nav {
405
display: flex;
406
flex-direction: column;
407
gap: 1em;
408
padding: var(--padding-card);
409
padding-top: var(--padding-card-top);
410
box-shadow: var(--shadow-card);
411
background: var(--color-card);
412
justify-content: space-between;
413
width: clamp(240px, calc(100vw - 56px), 448px);
414
}
415
#hamburger > nav > ul {
417
display: flex;
418
flex-direction: column;
419
gap: 1em;
420
margin: 0;
421
}
422
#hamburger > nav > ul > li {
424
display: flex;
425
gap: var(--gap-label-checkbox);
426
align-items: center;
427
margin: 0;
428
}
429
#hamburger > nav > ul > li > a {
431
text-decoration: none;
432
color: var(--color-card-text);
433
}
434
.star-rating-container {
436
display: flex;
437
flex-direction: row-reverse;
438
font-size: 1.25em;
439
align-items: center;
440
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
441
}
442
.star-rating-container > input {
444
width: 0 !important;
445
height: 0 !important;
446
visibility: hidden;
447
}
448
.star-rating-container > label {
450
cursor: pointer;
451
color: var(--text-softest);
452
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
453
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
454
}
455
.star-rating-container > label:hover,
457
.star-rating-container > label:hover ~ label {
458
color: var(--color-star);
459
filter: drop-shadow(0 0 3px #00000040);
460
}
461
.star-rating-container > input:checked ~ label {
463
color: var(--color-star);
464
}
465
.visually-hidden {
467
position: absolute;
468
width: 1px;
469
height: 1px;
470
box-sizing: content-box;
471
margin: -1px;
472
overflow: hidden;
473
clip-path: inset(50%);
474
border: 0;
475
}
476
.rating-list {
478
display: grid;
479
grid-auto-columns: 1fr;
480
gap: 0.5rem;
481
grid-template-columns: auto;
482
list-style: none;
483
margin: 0 !important;
484
padding: 0;
485
min-width: 50%;
486
}
487
.rating-list > li {
489
grid-column-start: 1;
490
height: 28px;
491
padding: 4px 8px;
492
display: flex;
493
align-items: center;
494
justify-content: space-between;
495
gap: 0.5rch;
496
border-radius: 0 4px 4px 0;
497
margin: 0;
498
}
499
.rating-bar {
501
display: flex;
502
align-items: center;
503
justify-content: flex-start;
504
gap: 0.5rch;
505
font-size: 1.25em;
506
width: 100%;
507
}
508
.rating-bar > .rating-bar-segment {
510
position: relative;
511
width: 1em;
512
height: 1em;
513
clip-path: url(#star-clip);
514
background: var(--text-softest);
515
}
516
.rating-bar > .rating-bar-segment > .rating-bar-filling {
518
background: var(--color-star);
519
height: 100%;
520
position: absolute;
521
top: 0;
522
left: 0;
523
}
524
#picture-view {
526
display: flex;
527
flex-direction: row;
528
gap: 1em;
529
align-items: flex-start;
530
justify-content: center;
531
width: fit-content;
532
margin: 0 auto;
533
}
534
#picture-actions {
536
--width: 256px;
537
position: sticky;
538
top: 0;
539
overflow: auto;
540
max-height: 100vh;
541
height: 100%;
542
background: var(--color-card);
543
padding: 1rem 0;
544
box-shadow: var(--shadow-card);
545
}
546
@media screen and (max-width: 768px) {
548
#picture-view {
549
flex-direction: column;
550
}
551
#picture-actions {
552
--width: 768px;
553
position: static;
554
padding: 1rem;
555
}
556
#picture-actions > ul {
557
width: 100%;
558
list-style: none;
559
margin: 0;
560
padding: 0;
561
}
562
#picture-actions > ul > li {
563
display: inline;
564
}
565
#picture-actions > ul > li:not(:last-child)::after {
566
content: " | ";
567
}
568
.action-list > li {
569
padding: 0 !important;
570
}
571
}
572
.action-list {
574
list-style: none;
575
margin: 0 !important;
576
padding: 0;
577
}
578
.action-list > li {
580
display: flex;
581
margin: 0;
582
width: 100%;
583
padding: 0.25rem 1rem;
584
}
585
.action-list > li > a {
587
text-decoration: none;
588
color: var(--color-card-text) !important;
589
display: flex;
590
align-items: center;
591
gap: 0.5rch;
592
font-weight: 400;
593
}
594
.action-list > li > details > summary {
596
color: var(--color-card-text) !important;
597
display: flex;
598
align-items: center;
599
gap: 0.5rch;
600
font-weight: 400;
601
}
602