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
@keyframes slide-in {
252
from {
253
transform: translateX(-1.5rem);
254
opacity: 0;
255
}
256
to {
257
transform: translateX(0);
258
opacity: 1;
259
}
260
}
261
@keyframes slide-out {
263
from {
264
transform: translateX(0);
265
opacity: 1;
266
}
267
to {
268
transform: translateX(-1.5rem);
269
opacity: 0;
270
}
271
}
272
@media (prefers-reduced-motion: no-preference) {
274
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
275
html:not(:has(.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone)) #annotation-zone {
276
view-transition-name: thumbnail;
277
}
278
::view-transition-old(root),
279
::view-transition-new(root) {
280
transform-origin: top;
281
animation-duration: 0.5s;
282
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
283
}
284
::view-transition-old(root) {
286
animation-name: move-out;
287
}
288
::view-transition-new(root) {
290
animation-name: move-in;
291
}
292
::view-transition-group(thumbnail) {
294
animation-duration: 0.5s;
295
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
296
}
297
#annotation-zone::view-transition-old(thumbnail) {
299
animation-duration: 0s;
300
}
301
::view-transition-group(navbar), ::view-transition-group(navbar-mobile) {
303
animation-duration: 0.5s;
304
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
305
}
306
}
307
.multi-select, .single-select {
309
display: flex;
310
flex-flow: column nowrap;
311
overflow-y: scroll;
312
box-shadow: var(--shadow-card-inset);
313
padding: 16px;
314
gap: 8px;
315
}
316
.licence-selection, .image-type-selection {
318
display: flex;
319
flex-flow: column nowrap;
320
}
321
.licence-selection-info, .image-type-selection-info {
323
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
324
/* Align with the checkbox above */
325
}
326
.licence-selection-info > p, .image-type-selection-info > p {
328
font-weight: 300;
329
}
330
.licence-logo {
332
width: 128px;
333
float: right;
334
margin-left: 1ch;
335
}
336
.licence-title, .image-type-title {
338
display: flex;
339
justify-content: space-between;
340
width: 100%;
341
}
342
.licence-title > .licence-name, .image-type-title > .image-type-name {
344
font: var(--h5-font);
345
font-weight: 400;
346
}
347
.icon-explainer {
349
display: grid;
350
gap: 4px 8px;
351
grid-template-columns: auto 1fr;
352
align-items: center;
353
}
354
.icon-explainer *:nth-child(even) {
356
font-weight: 300;
357
}
358
.required-asterisk::after {
360
content: "*";
361
color: var(--color-error);
362
}
363
small {
365
/* BIG :D */
366
font-size: 1em;
367
}
368
#pagination {
370
display: flex;
371
gap: 1em;
372
justify-content: center;
373
align-items: center;
374
font-size: 1.5em;
375
font-weight: 600;
376
flex: 1 0 auto;
377
}
378
#pagination > a {
380
text-decoration: none;
381
color: var(--color-accent-1);
382
}
383
#pagination-options > form {
385
align-items: center;
386
display: flex;
387
gap: 1em;
388
}
389
#pagination-options {
391
justify-content: center;
392
align-items: center;
393
gap: 1em;
394
width: 100%;
395
}
396
.thumbnail-list {
398
list-style: none;
399
margin: 0 !important;
400
display: grid;
401
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
402
gap: 16px;
403
}
404
.thumbnail-list > li {
406
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
407
box-shadow: var(--shadow-card);
408
background: var(--color-card);
409
}
410
.thumbnail-list > li > a, .thumbnail-list > li {
412
display: flex;
413
flex-direction: column;
414
justify-content: space-between;
415
height: 100%;
416
}
417
.thumbnail-list > li > .list-more {
419
display: flex;
420
justify-content: space-between;
421
align-items: center;
422
padding: 8px;
423
}
424
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
426
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
427
}
428
.thumbnail-list > li .annotation-zone {
430
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
431
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
432
}
433
.thumbnail-list > li .annotation-zone:hover {
435
position: relative;
436
transform: scale(2);
437
z-index: 1;
438
box-shadow: var(--shadow-textarea-active);
439
}
440
.thumbnail-list > li .list-detail {
442
padding: 8px;
443
display: block;
444
}
445
a.button {
447
text-decoration: none;
448
}
449
dt {
451
font-weight: 600;
452
}
453
dd {
455
margin-left: 40px;
456
}
457
#mobile-navbar, #mobile-navbar-spacer {
459
display: none;
460
}
461
@media screen and (max-width: 896px) {
463
#mobile-navbar {
464
display: flex;
465
}
466
header {
467
position: fixed;
468
top: 0;
469
left: 0;
470
width: 100%;
471
z-index: 3;
472
}
473
#mobile-navbar-spacer {
474
display: block;
475
height: var(--height-navbar);
476
}
477
#desktop-navbar {
478
display: none;
479
}
480
:root {
481
--reserved-height-top: var(--height-navbar);
482
}
483
}
484
#hamburger > nav {
486
display: flex;
487
flex-direction: column;
488
gap: 1em;
489
padding: var(--padding-card);
490
padding-top: var(--padding-card-top);
491
box-shadow: var(--shadow-card);
492
background: var(--color-card);
493
justify-content: space-between;
494
width: clamp(240px, calc(100vw - 56px), 448px);
495
}
496
#hamburger > nav > ul {
498
display: flex;
499
flex-direction: column;
500
gap: 1em;
501
margin: 0;
502
}
503
#hamburger > nav > ul > li {
505
display: flex;
506
gap: var(--gap-label-checkbox);
507
align-items: center;
508
margin: 0;
509
}
510
#hamburger > nav > ul > li > a {
512
display: contents;
513
text-decoration: none;
514
color: var(--color-card-text);
515
}
516
.star-rating-container {
518
display: flex;
519
flex-direction: row-reverse;
520
font-size: 1.25em;
521
align-items: center;
522
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
523
}
524
.star-rating-container > input {
526
width: 0 !important;
527
height: 0 !important;
528
visibility: hidden;
529
}
530
.star-rating-container > label {
532
cursor: pointer;
533
color: var(--text-softest);
534
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
535
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
536
}
537
.star-rating-container > label:hover,
539
.star-rating-container > label:hover ~ label {
540
color: var(--color-star);
541
filter: drop-shadow(0 0 3px #00000040);
542
}
543
.star-rating-container > input:checked ~ label {
545
color: var(--color-star);
546
}
547
.visually-hidden {
549
position: absolute;
550
width: 1px;
551
height: 1px;
552
box-sizing: content-box;
553
margin: -1px;
554
overflow: hidden;
555
clip-path: inset(50%);
556
border: 0;
557
}
558
.rating-list {
560
display: grid;
561
grid-auto-columns: 1fr;
562
gap: 0.5rem;
563
grid-template-columns: auto;
564
list-style: none;
565
margin: 0 !important;
566
padding: 0;
567
min-width: 50%;
568
}
569
.rating-list > li {
571
grid-column-start: 1;
572
height: 28px;
573
padding: 4px 8px;
574
display: flex;
575
align-items: center;
576
justify-content: space-between;
577
gap: 0.5rch;
578
border-radius: 0 4px 4px 0;
579
margin: 0;
580
}
581
.rating-bar {
583
display: flex;
584
align-items: center;
585
justify-content: flex-start;
586
gap: 0.5rch;
587
font-size: 1.25em;
588
width: 100%;
589
}
590
.rating-bar > .rating-bar-segment {
592
position: relative;
593
width: 1em;
594
height: 1em;
595
clip-path: url(#star-clip);
596
background: var(--text-softest);
597
}
598
.rating-bar > .rating-bar-segment > .rating-bar-filling {
600
background: var(--color-star);
601
height: 100%;
602
position: absolute;
603
top: 0;
604
left: 0;
605
}
606
#picture-view {
608
display: flex;
609
flex-direction: row;
610
gap: 1em;
611
align-items: flex-start;
612
justify-content: center;
613
width: fit-content;
614
margin: 0 auto;
615
}
616
#picture-view > x-frame {
618
flex: 1 1 var(--width);
619
margin: 0;
620
}
621
#picture-actions {
623
--width: 256px;
624
position: sticky;
625
top: var(--reserved-height-top);
626
overflow: auto;
627
max-height: 100vh;
628
height: 100%;
629
background: var(--color-card);
630
padding: 1rem 0;
631
box-shadow: var(--shadow-card);
632
}
633
@media screen and (max-width: 768px) {
635
#picture-view {
636
flex-direction: column;
637
}
638
#picture-view > x-frame {
639
flex: 1 1 auto;
640
margin: 0;
641
}
642
#picture-actions {
643
--width: 768px;
644
position: static;
645
padding: 1rem;
646
}
647
#picture-actions > ul {
648
width: 100%;
649
list-style: none;
650
margin: 0;
651
padding: 0;
652
}
653
#picture-actions > ul > li {
654
display: inline;
655
}
656
.action-list > li {
657
padding: 0 !important;
658
}
659
}
660
.action-list {
662
list-style: none;
663
margin: 0 !important;
664
padding: 0;
665
}
666
.action-list > li {
668
display: flex;
669
margin: 0;
670
width: 100%;
671
padding: 0.25rem 1rem;
672
}
673
.action-list > li > a {
675
text-decoration: none;
676
color: var(--color-card-text) !important;
677
display: flex;
678
align-items: center;
679
gap: 0.5rch;
680
font-weight: 400;
681
}
682
.action-list > li > details > summary {
684
color: var(--color-card-text) !important;
685
display: flex;
686
align-items: center;
687
gap: 0.5rch;
688
font-weight: 400;
689
}
690
#picture-buttons {
692
padding: 0 1rem;
693
}
694
@media print {
696
#picture-actions, #annotation-view-controls {
697
display: none;
698
}
699
.navbar {
700
display: none;
701
}
702
:root {
703
--color-background: #ffffff;
704
}
705
#annotation-zone, .thumbnail-list {
706
width: 100vw;
707
height: auto;
708
position: relative;
709
left: calc(-1 * (50vw - 50%));
710
}
711
}
712
.navbar > ul {
714
max-width: 100%;
715
}
716
#desktop-navbar > ul:first-child { /* list containing title */
718
flex: 0 1 auto;
719
min-width: 0;
720
}
721
#desktop-navbar > ul:last-child { /* list containing navigation */
723
flex: 1 0 auto;
724
justify-content: end;
725
}
726
#mobile-navbar-title, #desktop-navbar-title {
728
font: var(--h5-font);
729
font-weight: 700;
730
white-space: nowrap;
731
overflow: hidden;
732
text-overflow: ellipsis;
733
flex: 0 1 auto;
734
min-width: 0;
735
}
736
nav .button-flat {
738
--color-flat-button-hover: transparent;
739
--color-flat-button-active: transparent;
740
}
741
nav .button-flat .ripple-pad {
743
background: #ffffff99;
744
}
745
.warning {
747
background: var(--color-alert);
748
color: var(--color-alert-text);
749
padding: 1rem;
750
margin: 1rem 0;
751
border-radius: var(--radius-card);
752
box-shadow: var(--shadow-card);
753
--color-link-text: #000000;
754
--color-link-hover-text: #000000;
755
--color-link-visited-text: #000000;
756
--color-link-visited-hover-text: #000000;
757
--color-link-active-text: #000000;
758
}
759
.warning h2 {
761
font: var(--h3-font);
762
}
763
#annotation-zone {
765
box-shadow: var(--shadow-card);
766
}
767
#hamburger-site-name {
769
font: var(--h4-font);
770
text-transform: uppercase;
771
color: var(--color-accent);
772
}
773
#object-types {
775
z-index: 3;
776
background: var(--color-card);
777
box-shadow: var(--shadow-card);
778
padding: 1rem;
779
border-radius: var(--radius-card);
780
position: absolute;
781
display: none;
782
}
783