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
#annotation-zone, .annotation-zone {
67
position: relative;
68
user-select: none;
69
overflow: hidden;
70
transform-origin: 50% 50%;
71
}
72
#annotation-zoom-container > #annotation-zone {
74
overflow: visible;
75
}
76
#annotation-image, .annotation-image {
78
user-drag: none;
79
-webkit-user-drag: none;
80
image-rendering: pixelated;
81
}
82
#annotation-zone > svg, .annotation-zone > svg {
84
z-index: 1;
85
position: absolute;
86
top: 0;
87
left: 0;
88
width: 100%;
89
height: 100%;
90
}
91
.annotation-ruler {
93
z-index: 2;
94
position: absolute;
95
top: 0;
96
left: 0;
97
background: var(--color-accent);
98
display: none;
99
}
100
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
102
height: 1px;
103
width: 100%;
104
}
105
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
107
width: 1px;
108
height: 100%;
109
}
110
.shape {
112
stroke: var(--color-accent);
113
fill: var(--color-accent);
114
fill-opacity: 0.1;
115
stroke-width: 2px;
116
--shape-stroke-width: 2px;
117
vector-effect: non-scaling-stroke;
118
pointer-events: auto;
119
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
120
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
121
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
122
stroke-linecap: square;
123
stroke-linejoin: miter;
124
}
125
.shape-polyline {
127
fill: none;
128
}
129
.shape-point {
131
stroke: var(--color-accent);
132
stroke-width: 2px;
133
--shape-radius: 2px;
134
fill-opacity: 1;
135
r: 2;
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.selected {
142
fill-opacity: 0.2;
143
stroke-width: 4px;
144
--shape-stroke-width: 4px;
145
filter: drop-shadow(0 0 2px var(--text-soft));
146
}
147
.shape-point.selected {
149
fill-opacity: 1;
150
r: 6;
151
--shape-radius: 6px;
152
stroke-width: 6px;
153
}
154
.shape-container, .shape-container-viewonly {
156
pointer-events: none;
157
}
158
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
160
fill: var(--color-info);
161
stroke: var(--color-info);
162
fill-opacity: 0;
163
stroke-opacity: 0;
164
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
165
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
166
}
167
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
169
fill: none;
170
}
171
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
173
stroke: var(--color-info);
174
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
175
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
176
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
177
}
178
.shape-label {
180
position: absolute;
181
font-weight: 500;
182
color: var(--color-shape-label-text) !important;
183
pointer-events: auto;
184
height: 28px;
185
padding-left: 8px;
186
padding-right: 8px;
187
display: flex;
188
align-items: center;
189
justify-content: center;
190
background: var(--color-shape-label);
191
width: max-content;
192
box-shadow: var(--shadow-button);
193
/* top-left corner is square to point to the shape */
194
border-radius: 0 16px 16px 16px;
195
opacity: 0;
196
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
197
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
198
transform: scale(0);
199
transform-origin: top left;
200
z-index: 3;
201
text-decoration: none;
202
}
203
.shape-label:hover {
205
text-decoration: underline;
206
}
207
/* Only show region parts when checkbox is checked */
209
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
210
opacity: 1;
211
transform: scale(1);
212
}
213
/* Hide points with a bubble */
215
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
216
r: 0;
217
border-width: 0;
218
}
219
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
221
fill-opacity: 0.1;
222
stroke-opacity: 1;
223
}
224
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
226
fill-opacity: 0.2;
227
stroke-opacity: 1;
228
}
229
@keyframes move-out {
231
from {
232
transform: scale(1);
233
opacity: 1;
234
}
235
to {
236
transform: scale(0.5);
237
opacity: 0;
238
}
239
}
240
@keyframes move-in {
242
from {
243
transform: scale(0.5);
244
opacity: 0;
245
}
246
to {
247
transform: scale(1);
248
opacity: 1;
249
}
250
}
251
@keyframes slide-in {
253
from {
254
transform: translateX(-1.5rem);
255
opacity: 0;
256
}
257
to {
258
transform: translateX(0);
259
opacity: 1;
260
}
261
}
262
@keyframes slide-out {
264
from {
265
transform: translateX(0);
266
opacity: 1;
267
}
268
to {
269
transform: translateX(-1.5rem);
270
opacity: 0;
271
}
272
}
273
@media (prefers-reduced-motion: no-preference) {
275
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
276
html:not(:has(.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone)) #annotation-zone {
277
view-transition-name: thumbnail;
278
}
279
::view-transition-old(root),
280
::view-transition-new(root) {
281
transform-origin: top;
282
animation-duration: 0.5s;
283
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
284
}
285
::view-transition-old(root) {
287
animation-name: move-out;
288
}
289
::view-transition-new(root) {
291
animation-name: move-in;
292
}
293
::view-transition-group(thumbnail) {
295
animation-duration: 0.5s;
296
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
297
}
298
#annotation-zone::view-transition-old(thumbnail) {
300
animation-duration: 0s;
301
}
302
::view-transition-group(navbar), ::view-transition-group(navbar-mobile) {
304
animation-duration: 0.5s;
305
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
306
}
307
}
308
.multi-select, .single-select {
310
display: flex;
311
flex-flow: column nowrap;
312
overflow-y: scroll;
313
box-shadow: var(--shadow-card-inset);
314
padding: 16px;
315
gap: 8px;
316
}
317
.licence-selection, .image-type-selection {
319
display: flex;
320
flex-flow: column nowrap;
321
}
322
.licence-selection-info, .image-type-selection-info {
324
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
325
/* Align with the checkbox above */
326
}
327
.licence-selection-info > p, .image-type-selection-info > p {
329
font-weight: 300;
330
}
331
.licence-logo {
333
width: 128px;
334
float: right;
335
margin-left: 1ch;
336
}
337
.licence-title, .image-type-title {
339
display: flex;
340
justify-content: space-between;
341
width: 100%;
342
}
343
.licence-title > .licence-name, .image-type-title > .image-type-name {
345
font: var(--h5-font);
346
font-weight: 400;
347
}
348
.icon-explainer {
350
display: grid;
351
gap: 4px 8px;
352
grid-template-columns: auto 1fr;
353
align-items: center;
354
}
355
.icon-explainer *:nth-child(even) {
357
font-weight: 300;
358
}
359
.required-asterisk::after {
361
content: "*";
362
color: var(--color-error);
363
}
364
small {
366
/* BIG :D */
367
font-size: 1em;
368
}
369
#pagination {
371
display: flex;
372
gap: 1em;
373
justify-content: center;
374
align-items: center;
375
font-size: 1.5em;
376
font-weight: 600;
377
flex: 1 0 auto;
378
}
379
#pagination > a {
381
text-decoration: none;
382
color: var(--color-accent-1);
383
}
384
#pagination-options > form {
386
align-items: center;
387
display: flex;
388
gap: 1em;
389
}
390
#pagination-options {
392
justify-content: center;
393
align-items: center;
394
gap: 1em;
395
width: 100%;
396
}
397
.thumbnail-list {
399
list-style: none;
400
margin: 0 !important;
401
display: grid;
402
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
403
gap: 16px;
404
}
405
.thumbnail-list > li {
407
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
408
box-shadow: var(--shadow-card);
409
background: var(--color-card);
410
}
411
.thumbnail-list > li > a, .thumbnail-list > li {
413
display: flex;
414
flex-direction: column;
415
justify-content: space-between;
416
height: 100%;
417
}
418
.thumbnail-list > li > .list-more {
420
display: flex;
421
justify-content: space-between;
422
align-items: center;
423
padding: 8px;
424
}
425
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
427
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
428
}
429
.thumbnail-list > li .annotation-zone {
431
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
432
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
433
}
434
.thumbnail-list > li .annotation-zone:hover {
436
position: relative;
437
transform: scale(2);
438
z-index: 1;
439
box-shadow: var(--shadow-textarea-active);
440
}
441
.thumbnail-list > li .list-detail {
443
padding: 8px;
444
display: block;
445
}
446
a.button {
448
text-decoration: none;
449
}
450
dt {
452
font-weight: 600;
453
}
454
dd {
456
margin-left: 40px;
457
}
458
#mobile-navbar, #mobile-navbar-spacer {
460
display: none;
461
}
462
@media screen and (max-width: 896px) {
464
#mobile-navbar {
465
display: flex;
466
}
467
header {
468
position: fixed;
469
top: 0;
470
left: 0;
471
width: 100%;
472
z-index: 3;
473
}
474
#mobile-navbar-spacer {
475
display: block;
476
height: var(--height-navbar);
477
}
478
#desktop-navbar {
479
display: none;
480
}
481
:root {
482
--reserved-height-top: var(--height-navbar);
483
}
484
}
485
#hamburger > nav {
487
display: flex;
488
flex-direction: column;
489
gap: 1em;
490
padding: var(--padding-card);
491
padding-top: var(--padding-card-top);
492
box-shadow: var(--shadow-card);
493
background: var(--color-card);
494
justify-content: space-between;
495
width: clamp(240px, calc(100vw - 56px), 448px);
496
}
497
#hamburger > nav > ul {
499
display: flex;
500
flex-direction: column;
501
gap: 1em;
502
margin: 0;
503
}
504
#hamburger > nav > ul > li {
506
display: flex;
507
gap: var(--gap-label-checkbox);
508
align-items: center;
509
margin: 0;
510
}
511
#hamburger > nav > ul > li > a {
513
display: contents;
514
text-decoration: none;
515
color: var(--color-card-text);
516
}
517
.star-rating-container {
519
display: flex;
520
flex-direction: row-reverse;
521
font-size: 1.25em;
522
align-items: center;
523
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
524
}
525
.star-rating-container > input {
527
width: 0 !important;
528
height: 0 !important;
529
visibility: hidden;
530
}
531
.star-rating-container > label {
533
cursor: pointer;
534
color: var(--text-softest);
535
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
536
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
537
}
538
.star-rating-container > label:hover,
540
.star-rating-container > label:hover ~ label {
541
color: var(--color-star);
542
filter: drop-shadow(0 0 3px #00000040);
543
}
544
.star-rating-container > input:checked ~ label {
546
color: var(--color-star);
547
}
548
.visually-hidden {
550
position: absolute;
551
width: 1px;
552
height: 1px;
553
box-sizing: content-box;
554
margin: -1px;
555
overflow: hidden;
556
clip-path: inset(50%);
557
border: 0;
558
}
559
.rating-list {
561
display: grid;
562
grid-auto-columns: 1fr;
563
gap: 0.5rem;
564
grid-template-columns: auto;
565
list-style: none;
566
margin: 0 !important;
567
padding: 0;
568
min-width: 50%;
569
}
570
.rating-list > li {
572
grid-column-start: 1;
573
height: 28px;
574
padding: 4px 8px;
575
display: flex;
576
align-items: center;
577
justify-content: space-between;
578
gap: 0.5rch;
579
border-radius: 0 4px 4px 0;
580
margin: 0;
581
}
582
.rating-bar {
584
display: flex;
585
align-items: center;
586
justify-content: flex-start;
587
gap: 0.5rch;
588
font-size: 1.25em;
589
width: 100%;
590
}
591
.rating-bar > .rating-bar-segment {
593
position: relative;
594
width: 1em;
595
height: 1em;
596
clip-path: url(#star-clip);
597
background: var(--text-softest);
598
}
599
.rating-bar > .rating-bar-segment > .rating-bar-filling {
601
background: var(--color-star);
602
height: 100%;
603
position: absolute;
604
top: 0;
605
left: 0;
606
}
607
#picture-view {
609
display: flex;
610
flex-direction: row;
611
gap: 1em;
612
align-items: flex-start;
613
justify-content: center;
614
width: fit-content;
615
margin: 0 auto;
616
}
617
#picture-view > x-frame {
619
flex: 1 1 var(--width);
620
margin: 0;
621
}
622
#picture-actions {
624
--width: 256px;
625
position: sticky;
626
top: var(--reserved-height-top);
627
overflow: auto;
628
max-height: 100vh;
629
height: 100%;
630
background: var(--color-card);
631
padding: 1rem 0;
632
box-shadow: var(--shadow-card);
633
}
634
@media screen and (max-width: 768px) {
636
#picture-view {
637
flex-direction: column;
638
}
639
#picture-view > x-frame {
640
flex: 1 1 auto;
641
margin: 0;
642
}
643
#picture-actions {
644
--width: 768px;
645
position: static;
646
padding: 1rem;
647
}
648
#picture-actions > ul {
649
width: 100%;
650
list-style: none;
651
margin: 0;
652
padding: 0;
653
}
654
#picture-actions > ul > li {
655
display: inline;
656
}
657
.action-list > li {
658
padding: 0 !important;
659
}
660
}
661
.action-list {
663
list-style: none;
664
margin: 0 !important;
665
padding: 0;
666
}
667
.action-list > li {
669
display: flex;
670
margin: 0;
671
width: 100%;
672
padding: 0.25rem 1rem;
673
}
674
.action-list > li > a {
676
text-decoration: none;
677
color: var(--color-card-text) !important;
678
display: flex;
679
align-items: center;
680
gap: 0.5rch;
681
font-weight: 400;
682
}
683
.action-list > li > details > summary {
685
color: var(--color-card-text) !important;
686
display: flex;
687
align-items: center;
688
gap: 0.5rch;
689
font-weight: 400;
690
}
691
#picture-buttons {
693
padding: 0 1rem;
694
}
695
@media print {
697
#picture-actions, #annotation-view-controls {
698
display: none;
699
}
700
.navbar {
701
display: none;
702
}
703
:root {
704
--color-background: #ffffff;
705
}
706
#annotation-zone, .thumbnail-list {
707
width: 100vw;
708
height: auto;
709
position: relative;
710
left: calc(-1 * (50vw - 50%));
711
}
712
}
713
.navbar > ul {
715
max-width: 100%;
716
}
717
#desktop-navbar > ul:first-child { /* list containing title */
719
flex: 0 1 auto;
720
min-width: 0;
721
}
722
#desktop-navbar > ul:last-child { /* list containing navigation */
724
flex: 1 0 auto;
725
justify-content: end;
726
}
727
#mobile-navbar-title, #desktop-navbar-title {
729
font: var(--h5-font);
730
font-weight: 700;
731
white-space: nowrap;
732
overflow: hidden;
733
text-overflow: ellipsis;
734
flex: 0 1 auto;
735
min-width: 0;
736
}
737
nav .button-flat {
739
--color-flat-button-hover: transparent;
740
--color-flat-button-active: transparent;
741
}
742
nav .button-flat .ripple-pad {
744
background: #ffffff99;
745
}
746
.warning {
748
background: var(--color-alert);
749
color: var(--color-alert-text);
750
padding: 1rem;
751
margin: 1rem 0;
752
border-radius: var(--radius-card);
753
box-shadow: var(--shadow-card);
754
--color-link-text: #000000;
755
--color-link-hover-text: #000000;
756
--color-link-visited-text: #000000;
757
--color-link-visited-hover-text: #000000;
758
--color-link-active-text: #000000;
759
}
760
.warning h2 {
762
font: var(--h3-font);
763
}
764
#annotation-zone {
766
box-shadow: var(--shadow-card);
767
}
768
#hamburger-site-name {
770
font: var(--h4-font);
771
text-transform: uppercase;
772
color: var(--color-accent);
773
}
774
#object-types {
776
z-index: 3;
777
background: var(--color-callout);
778
color: var(--color-callout-text);
779
--color-background-text: var(--color-callout-text);
780
--color-label-text: var(--color-callout-text);
781
box-shadow: var(--shadow-card);
782
border-radius: var(--radius-input);
783
position: absolute;
784
display: none;
785
overflow: auto;
786
}
787
#object-types-content {
789
padding: 1rem;
790
}
791
#annotation-controls {
793
display: flex;
794
justify-content: space-between;
795
gap: 1rem;
796
padding: 0.5rem;
797
align-items: stretch;
798
}
799
#annotation-controls > x-buttonbox {
801
align-items: center;
802
}
803
#annotation-controls > x-buttonbox button:has(iconify-icon) {
805
aspect-ratio: 1;
806
}
807
#annotation-controls > x-buttonbox button > iconify-icon {
809
font-size: 1.5rem;
810
}
811
#annotation-helper-message {
813
padding: 0.75rem;
814
text-align: center;
815
flex: 1 0 auto;
816
}
817
#annotation-zoom-container {
819
flex: 0 1 auto;
820
overflow: scroll;
821
align-self: stretch;
822
width: 100%;
823
display: flex;
824
justify-content: center;
825
align-items: center;
826
}
827
#annotation-zoom-container > #annotation-zone {
829
transform: scale(1);
830
transition: transform 0.125s cubic-bezier(0.28, 0.5, 0.31, 0.92);
831
max-width: 100%;
832
max-height: 100% !important;
833
}
834
#annotation-zoom-container > #annotation-zone > #annotation-image {
836
object-fit: contain;
837
width: 100%;
838
height: 100%;
839
}
840
#annotation-main-area {
842
display: flex;
843
flex-direction: column;
844
flex: 1 1 auto;
845
overflow: auto;
846
width: 100%;
847
}
848
body.fixed-content-area {
850
max-width: 100vw;
851
max-height: 100vh;
852
display: flex;
853
flex-direction: column;
854
}
855
body.fixed-content-area > main {
857
flex: 0 1 auto;
858
overflow: auto;
859
display: flex;
860
flex-direction: column;
861
}
862
#annotation-zoom-controls {
864
display: flex;
865
gap: 0.5rem;
866
justify-content: center;
867
align-items: center;
868
}
869
#zoom-indicator {
871
width: 7ch;
872
text-align: right;
873
}
874
#annotation-zoom-container {
876
cursor: grab;
877
}
878
#object-types {
880
cursor: auto;
881
}
882