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
--reserved-height-top: 0;
20
}
21
.ripple-pad {
23
background: #ffffff99;
24
position: absolute;
25
opacity: 1;
26
transform: scale(0);
27
animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards;
28
}
29
.button-flat .ripple-pad {
31
background: var(--color-primary-3);
32
}
33
@keyframes RippleEffect {
35
to {
36
transform: scale(1);
37
opacity: 0;
38
}
39
}
40
button, input, .button:not(.link-button), select, .navbar a, .navrail a {
42
position: relative;
43
overflow: hidden;
44
}
45
nav#desktop-navbar {
47
view-transition-name: navbar;
48
}
49
nav#mobile-navbar {
51
view-transition-name: navbar-mobile;
52
}
53
p {
55
color: var(--text-soft);
56
}
57
iconify-icon {
59
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
60
display: inline-block;
61
width: 1em;
62
height: 1em;
63
font-size: 1.5em;
64
}
65
:is(#shape-selector, #shape-options) > button > iconify-icon {
67
font-size: 2rem;
68
}
69
#annotation-zone, .annotation-zone {
71
position: relative;
72
user-select: none;
73
overflow: hidden;
74
}
75
#annotation-image, .annotation-image {
77
user-drag: none;
78
-webkit-user-drag: none;
79
image-rendering: pixelated;
80
}
81
#annotation-zone > svg, .annotation-zone > svg {
83
z-index: 1;
84
position: absolute;
85
top: 0;
86
left: 0;
87
width: 100%;
88
height: 100%;
89
}
90
.annotation-ruler {
92
z-index: 2;
93
position: absolute;
94
top: 0;
95
left: 0;
96
background: var(--color-accent);
97
display: none;
98
}
99
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
101
height: 1px;
102
width: 100%;
103
}
104
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
106
width: 1px;
107
height: 100%;
108
}
109
.shape {
111
stroke: var(--color-accent);
112
fill: var(--color-accent);
113
fill-opacity: 0.1;
114
stroke-width: 2px;
115
vector-effect: non-scaling-stroke;
116
pointer-events: auto;
117
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
118
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
119
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
120
stroke-linecap: square;
121
stroke-linejoin: miter;
122
}
123
.shape-polyline {
125
fill: none;
126
}
127
.shape-point {
129
stroke: var(--color-accent);
130
stroke-width: 2px;
131
fill-opacity: 1;
132
r: 2;
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.selected {
139
fill-opacity: 0.2;
140
stroke-width: 4px;
141
filter: drop-shadow(0 0 2px var(--text-soft));
142
}
143
.shape-point.selected {
145
fill-opacity: 1;
146
r: 6;
147
stroke-width: 6px;
148
}
149
.shape-container, .shape-container-viewonly {
151
pointer-events: none;
152
}
153
#annotation-helper-message {
155
min-height: 2lh;
156
}
157
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
159
fill: var(--color-info);
160
stroke: var(--color-info);
161
fill-opacity: 0;
162
stroke-opacity: 0;
163
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
164
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
165
}
166
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
168
fill: none;
169
}
170
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
172
stroke: var(--color-info);
173
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
174
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
175
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
176
}
177
.shape-label {
179
position: absolute;
180
font-weight: 500;
181
color: var(--color-shape-label-text) !important;
182
pointer-events: auto;
183
height: 28px;
184
padding-left: 8px;
185
padding-right: 8px;
186
display: flex;
187
align-items: center;
188
justify-content: center;
189
background: var(--color-shape-label);
190
width: max-content;
191
box-shadow: var(--shadow-button);
192
/* top-left corner is square to point to the shape */
193
border-radius: 0 16px 16px 16px;
194
opacity: 0;
195
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
196
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
197
transform: scale(0);
198
transform-origin: top left;
199
z-index: 3;
200
text-decoration: none;
201
}
202
.shape-label:hover {
204
text-decoration: underline;
205
}
206
/* Only show region parts when checkbox is checked */
208
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
209
opacity: 1;
210
transform: scale(1);
211
}
212
/* Hide points with a bubble */
214
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
215
r: 0;
216
border-width: 0;
217
}
218
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
220
fill-opacity: 0.1;
221
stroke-opacity: 1;
222
}
223
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
225
fill-opacity: 0.2;
226
stroke-opacity: 1;
227
}
228
@keyframes move-out {
230
from {
231
transform: scale(1);
232
opacity: 1;
233
}
234
to {
235
transform: scale(0.5);
236
opacity: 0;
237
}
238
}
239
@keyframes move-in {
241
from {
242
transform: scale(0.5);
243
opacity: 0;
244
}
245
to {
246
transform: scale(1);
247
opacity: 1;
248
}
249
}
250
@media (prefers-reduced-motion: no-preference) {
252
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
253
#annotation-zone {
254
view-transition-name: thumbnail;
255
}
256
::view-transition-old(root),
258
::view-transition-new(root) {
259
transform-origin: top;
260
animation-duration: 0.5s;
261
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
262
}
263
::view-transition-old(root) {
265
animation-name: move-out;
266
}
267
::view-transition-new(root) {
269
animation-name: move-in;
270
}
271
::view-transition-group(thumbnail) {
273
animation-duration: 0.5s;
274
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
275
}
276
#annotation-zone::view-transition-old(thumbnail) {
278
animation-duration: 0s;
279
}
280
::view-transition-group(navbar), ::view-transition-group(navbar-mobile) {
282
animation-duration: 0.5s;
283
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
284
}
285
}
286
.multi-select, .single-select {
288
display: flex;
289
flex-flow: column nowrap;
290
overflow-y: scroll;
291
box-shadow: var(--shadow-card-inset);
292
padding: 16px;
293
gap: 8px;
294
}
295
.licence-selection, .image-type-selection {
297
display: flex;
298
flex-flow: column nowrap;
299
}
300
.licence-selection-info, .image-type-selection-info {
302
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
303
/* Align with the checkbox above */
304
}
305
.licence-selection-info > p, .image-type-selection-info > p {
307
font-weight: 300;
308
}
309
.licence-logo {
311
width: 128px;
312
float: right;
313
margin-left: 1ch;
314
}
315
.licence-title, .image-type-title {
317
display: flex;
318
justify-content: space-between;
319
width: 100%;
320
}
321
.licence-title > .licence-name, .image-type-title > .image-type-name {
323
font: var(--h5-font);
324
font-weight: 400;
325
}
326
.icon-explainer {
328
display: grid;
329
gap: 4px 8px;
330
grid-template-columns: auto 1fr;
331
align-items: center;
332
}
333
.icon-explainer *:nth-child(even) {
335
font-weight: 300;
336
}
337
.required-asterisk::after {
339
content: "*";
340
color: var(--color-error);
341
}
342
small {
344
/* BIG :D */
345
font-size: 1em;
346
}
347
#pagination {
349
display: flex;
350
gap: 1em;
351
justify-content: center;
352
align-items: center;
353
font-size: 1.5em;
354
font-weight: 600;
355
flex: 1 0 auto;
356
}
357
#pagination > a {
359
text-decoration: none;
360
color: var(--color-accent-1);
361
}
362
#pagination-options > form {
364
align-items: center;
365
display: flex;
366
gap: 1em;
367
}
368
#pagination-options {
370
justify-content: center;
371
align-items: center;
372
gap: 1em;
373
width: 100%;
374
}
375
.thumbnail-list {
377
list-style: none;
378
margin: 0 !important;
379
display: grid;
380
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
381
gap: 16px;
382
}
383
.thumbnail-list > li {
385
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
386
box-shadow: var(--shadow-card);
387
background: var(--color-card);
388
}
389
.thumbnail-list > li > a, .thumbnail-list > li {
391
display: flex;
392
flex-direction: column;
393
justify-content: space-between;
394
height: 100%;
395
}
396
.thumbnail-list > li > .list-more {
398
display: flex;
399
justify-content: space-between;
400
align-items: center;
401
padding: 8px;
402
}
403
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
405
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
406
}
407
.thumbnail-list > li .annotation-zone {
409
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
410
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
411
}
412
.thumbnail-list > li .annotation-zone:hover {
414
position: relative;
415
transform: scale(2);
416
z-index: 1;
417
box-shadow: var(--shadow-textarea-active);
418
}
419
.thumbnail-list > li .list-detail {
421
padding: 8px;
422
display: block;
423
}
424
a.button {
426
text-decoration: none;
427
}
428
dt {
430
font-weight: 600;
431
}
432
dd {
434
margin-left: 40px;
435
}
436
#mobile-navbar, #mobile-navbar-spacer {
438
display: none;
439
}
440
@media screen and (max-width: 896px) {
442
#mobile-navbar {
443
display: flex;
444
}
445
header {
446
position: fixed;
447
top: 0;
448
left: 0;
449
width: 100%;
450
z-index: 3;
451
}
452
#mobile-navbar-spacer {
453
display: block;
454
height: var(--height-navbar);
455
}
456
#desktop-navbar {
457
display: none;
458
}
459
:root {
460
--reserved-height-top: var(--height-navbar);
461
}
462
}
463
#hamburger > nav {
465
display: flex;
466
flex-direction: column;
467
gap: 1em;
468
padding: var(--padding-card);
469
padding-top: var(--padding-card-top);
470
box-shadow: var(--shadow-card);
471
background: var(--color-card);
472
justify-content: space-between;
473
width: clamp(240px, calc(100vw - 56px), 448px);
474
}
475
#hamburger > nav > ul {
477
display: flex;
478
flex-direction: column;
479
gap: 1em;
480
margin: 0;
481
}
482
#hamburger > nav > ul > li {
484
display: flex;
485
gap: var(--gap-label-checkbox);
486
align-items: center;
487
margin: 0;
488
}
489
#hamburger > nav > ul > li > a {
491
text-decoration: none;
492
color: var(--color-card-text);
493
}
494
.star-rating-container {
496
display: flex;
497
flex-direction: row-reverse;
498
font-size: 1.25em;
499
align-items: center;
500
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
501
}
502
.star-rating-container > input {
504
width: 0 !important;
505
height: 0 !important;
506
visibility: hidden;
507
}
508
.star-rating-container > label {
510
cursor: pointer;
511
color: var(--text-softest);
512
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
513
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
514
}
515
.star-rating-container > label:hover,
517
.star-rating-container > label:hover ~ label {
518
color: var(--color-star);
519
filter: drop-shadow(0 0 3px #00000040);
520
}
521
.star-rating-container > input:checked ~ label {
523
color: var(--color-star);
524
}
525
.visually-hidden {
527
position: absolute;
528
width: 1px;
529
height: 1px;
530
box-sizing: content-box;
531
margin: -1px;
532
overflow: hidden;
533
clip-path: inset(50%);
534
border: 0;
535
}
536
.rating-list {
538
display: grid;
539
grid-auto-columns: 1fr;
540
gap: 0.5rem;
541
grid-template-columns: auto;
542
list-style: none;
543
margin: 0 !important;
544
padding: 0;
545
min-width: 50%;
546
}
547
.rating-list > li {
549
grid-column-start: 1;
550
height: 28px;
551
padding: 4px 8px;
552
display: flex;
553
align-items: center;
554
justify-content: space-between;
555
gap: 0.5rch;
556
border-radius: 0 4px 4px 0;
557
margin: 0;
558
}
559
.rating-bar {
561
display: flex;
562
align-items: center;
563
justify-content: flex-start;
564
gap: 0.5rch;
565
font-size: 1.25em;
566
width: 100%;
567
}
568
.rating-bar > .rating-bar-segment {
570
position: relative;
571
width: 1em;
572
height: 1em;
573
clip-path: url(#star-clip);
574
background: var(--text-softest);
575
}
576
.rating-bar > .rating-bar-segment > .rating-bar-filling {
578
background: var(--color-star);
579
height: 100%;
580
position: absolute;
581
top: 0;
582
left: 0;
583
}
584
#picture-view {
586
display: flex;
587
flex-direction: row;
588
gap: 1em;
589
align-items: flex-start;
590
justify-content: center;
591
width: fit-content;
592
margin: 0 auto;
593
}
594
#picture-actions {
596
--width: 256px;
597
position: sticky;
598
top: var(--reserved-height-top);
599
overflow: auto;
600
max-height: 100vh;
601
height: 100%;
602
background: var(--color-card);
603
padding: 1rem 0;
604
box-shadow: var(--shadow-card);
605
}
606
@media screen and (max-width: 768px) {
608
#picture-view {
609
flex-direction: column;
610
}
611
#picture-actions {
612
--width: 768px;
613
position: static;
614
padding: 1rem;
615
}
616
#picture-actions > ul {
617
width: 100%;
618
list-style: none;
619
margin: 0;
620
padding: 0;
621
}
622
#picture-actions > ul > li {
623
display: inline;
624
}
625
.action-list > li {
626
padding: 0 !important;
627
}
628
}
629
.action-list {
631
list-style: none;
632
margin: 0 !important;
633
padding: 0;
634
}
635
.action-list > li {
637
display: flex;
638
margin: 0;
639
width: 100%;
640
padding: 0.25rem 1rem;
641
}
642
.action-list > li > a {
644
text-decoration: none;
645
color: var(--color-card-text) !important;
646
display: flex;
647
align-items: center;
648
gap: 0.5rch;
649
font-weight: 400;
650
}
651
.action-list > li > details > summary {
653
color: var(--color-card-text) !important;
654
display: flex;
655
align-items: center;
656
gap: 0.5rch;
657
font-weight: 400;
658
}
659
#picture-buttons {
661
padding: 0 1rem;
662
}
663
@media print {
665
#picture-actions, #annotation-view-controls {
666
display: none;
667
}
668
.navbar {
669
display: none;
670
}
671
:root {
672
--color-background: #ffffff;
673
}
674
#annotation-zone, .thumbnail-list {
675
width: 100vw;
676
height: auto;
677
position: relative;
678
left: calc(-1 * (50vw - 50%));
679
}
680
}
681
.navbar > ul {
683
max-width: 100%;
684
}
685
#desktop-navbar > ul:first-child { /* list containing title */
687
flex: 0 1 auto;
688
min-width: 0;
689
}
690
#desktop-navbar > ul:last-child { /* list containing navigation */
692
flex: 1 0 auto;
693
justify-content: end;
694
}
695
#mobile-navbar-title, #desktop-navbar-title {
697
font: var(--h5-font);
698
font-weight: 700;
699
white-space: nowrap;
700
overflow: hidden;
701
text-overflow: ellipsis;
702
flex: 0 1 auto;
703
min-width: 0;
704
}
705
nav .button-flat {
707
--color-flat-button-hover: transparent;
708
--color-flat-button-active: transparent;
709
}
710
nav .button-flat .ripple-pad {
712
background: #ffffff99;
713
}
714