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
--color-checkerboard-dark: #CFD8DC;
21
--color-checkerboard-light: #FFFFFF;
22
}
23
.ripple-pad {
25
background: #ffffff99;
26
position: absolute;
27
opacity: 1;
28
transform: scale(0);
29
animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards;
30
}
31
.button-flat .ripple-pad {
33
background: var(--color-primary-3);
34
}
35
@keyframes RippleEffect {
37
to {
38
transform: scale(1);
39
opacity: 0;
40
}
41
}
42
button, input, .button:not(.link-button), select, .navbar a, .navrail a {
44
position: relative;
45
overflow: hidden;
46
}
47
nav#desktop-navbar {
49
view-transition-name: navbar;
50
}
51
nav#mobile-navbar {
53
view-transition-name: navbar-mobile;
54
}
55
p {
57
color: var(--text-soft);
58
}
59
iconify-icon {
61
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
62
display: inline-block;
63
width: 1em;
64
height: 1em;
65
font-size: 1.5em;
66
}
67
#annotation-zone, .annotation-zone {
69
position: relative;
70
user-select: none;
71
overflow: hidden;
72
transform-origin: 50% 50%;
73
background-image: conic-gradient(var(--color-checkerboard-dark) 90deg, var(--color-checkerboard-light) 0 180deg, var(--color-checkerboard-dark) 0 270deg, var(--color-checkerboard-light) 0 360deg);
74
background-size: 1rem 1rem;
75
background-position: 0 0;
76
}
77
#annotation-zoom-container > #annotation-zone {
79
overflow: visible;
80
}
81
#annotation-image, .annotation-image {
83
user-drag: none;
84
-webkit-user-drag: none;
85
image-rendering: pixelated;
86
}
87
:not(#annotation-zoom-container) > #annotation-zone > svg, .annotation-zone > svg {
89
width: 100%;
90
height: 100%;
91
}
92
#annotation-zone > svg, .annotation-zone > svg {
94
z-index: 1;
95
position: absolute;
96
top: 0;
97
left: 0;
98
}
99
.annotation-ruler {
101
z-index: 2;
102
position: absolute;
103
top: 0;
104
left: 0;
105
background: var(--color-accent);
106
display: none;
107
}
108
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
110
height: 1px;
111
width: 100%;
112
}
113
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
115
width: 1px;
116
height: 100%;
117
}
118
.shape {
120
stroke: var(--color-accent);
121
fill: var(--color-accent);
122
fill-opacity: 0.1;
123
stroke-width: 2px;
124
--shape-stroke-width: 2px;
125
vector-effect: non-scaling-stroke;
126
pointer-events: auto;
127
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
128
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
129
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
130
stroke-linecap: square;
131
stroke-linejoin: miter;
132
}
133
.shape-polyline {
135
fill: none;
136
}
137
.shape-point {
139
stroke: var(--color-accent);
140
stroke-width: 2px;
141
--shape-radius: 2px;
142
fill-opacity: 1;
143
r: 2;
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.selected {
150
fill-opacity: 0.2;
151
stroke-width: 4px;
152
--shape-stroke-width: 4px;
153
filter: drop-shadow(0 0 2px var(--text-soft));
154
}
155
.shape-point.selected {
157
fill-opacity: 1;
158
r: 6;
159
--shape-radius: 6px;
160
stroke-width: 6px;
161
}
162
.shape-container, .shape-container-viewonly {
164
pointer-events: none;
165
}
166
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
168
fill: var(--color-info);
169
stroke: var(--color-info);
170
fill-opacity: 0;
171
stroke-opacity: 0;
172
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
173
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
174
}
175
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
177
fill: none;
178
}
179
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
181
stroke: var(--color-info);
182
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
183
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
184
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
185
}
186
.shape-label {
188
position: absolute;
189
font-weight: 500;
190
color: var(--color-shape-label-text) !important;
191
pointer-events: auto;
192
height: 28px;
193
padding-left: 8px;
194
padding-right: 8px;
195
display: flex;
196
align-items: center;
197
justify-content: center;
198
background: var(--color-shape-label);
199
width: max-content;
200
box-shadow: var(--shadow-button);
201
/* top-left corner is square to point to the shape */
202
border-radius: 0 16px 16px 16px;
203
opacity: 0;
204
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
205
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
206
transform: scale(0);
207
transform-origin: top left;
208
z-index: 3;
209
text-decoration: none;
210
}
211
.shape-label:hover {
213
text-decoration: underline;
214
}
215
/* Only show region parts when checkbox is checked */
217
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
218
opacity: 1;
219
transform: scale(1);
220
}
221
/* Hide points with a bubble */
223
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
224
r: 0;
225
border-width: 0;
226
}
227
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
229
fill-opacity: 0.1;
230
stroke-opacity: 1;
231
}
232
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
234
fill-opacity: 0.2;
235
stroke-opacity: 1;
236
}
237
@keyframes move-out {
239
from {
240
transform: scale(1);
241
opacity: 1;
242
}
243
to {
244
transform: scale(0.5);
245
opacity: 0;
246
}
247
}
248
@keyframes move-in {
250
from {
251
transform: scale(0.5);
252
opacity: 0;
253
}
254
to {
255
transform: scale(1);
256
opacity: 1;
257
}
258
}
259
@keyframes slide-in {
261
from {
262
transform: translateX(-1.5rem);
263
opacity: 0;
264
}
265
to {
266
transform: translateX(0);
267
opacity: 1;
268
}
269
}
270
@keyframes slide-out {
272
from {
273
transform: translateX(0);
274
opacity: 1;
275
}
276
to {
277
transform: translateX(-1.5rem);
278
opacity: 0;
279
}
280
}
281
@media (prefers-reduced-motion: no-preference) {
283
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
284
html:not(:has(.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone)) #annotation-zone {
285
view-transition-name: thumbnail;
286
}
287
::view-transition-old(root),
288
::view-transition-new(root) {
289
transform-origin: top;
290
animation-duration: 0.5s;
291
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
292
}
293
::view-transition-old(root) {
295
animation-name: move-out;
296
}
297
::view-transition-new(root) {
299
animation-name: move-in;
300
}
301
::view-transition-group(thumbnail) {
303
animation-duration: 0.5s;
304
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
305
}
306
#annotation-zone::view-transition-old(thumbnail) {
308
animation-duration: 0s;
309
}
310
::view-transition-group(navbar), ::view-transition-group(navbar-mobile) {
312
animation-duration: 0.5s;
313
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
314
}
315
}
316
.multi-select, .single-select {
318
display: flex;
319
flex-flow: column nowrap;
320
overflow-y: scroll;
321
box-shadow: var(--shadow-card-inset);
322
padding: 16px;
323
gap: 8px;
324
}
325
.licence-selection, .image-type-selection {
327
display: flex;
328
flex-flow: column nowrap;
329
}
330
.licence-selection-info, .image-type-selection-info {
332
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
333
/* Align with the checkbox above */
334
}
335
.licence-selection-info > p, .image-type-selection-info > p {
337
font-weight: 300;
338
}
339
.licence-logo {
341
width: 128px;
342
float: right;
343
margin-left: 1ch;
344
}
345
.licence-title, .image-type-title {
347
display: flex;
348
justify-content: space-between;
349
width: 100%;
350
}
351
.licence-title > .licence-name, .image-type-title > .image-type-name {
353
font: var(--h5-font);
354
font-weight: 400;
355
}
356
.icon-explainer {
358
display: grid;
359
gap: 4px 8px;
360
grid-template-columns: auto 1fr;
361
align-items: center;
362
}
363
.icon-explainer *:nth-child(even) {
365
font-weight: 300;
366
}
367
.required-asterisk::after {
369
content: "*";
370
color: var(--color-error);
371
}
372
small {
374
/* BIG :D */
375
font-size: 1em;
376
}
377
#pagination {
379
display: flex;
380
gap: 1em;
381
justify-content: center;
382
align-items: center;
383
font-size: 1.5em;
384
font-weight: 600;
385
flex: 1 0 auto;
386
}
387
#pagination > a {
389
text-decoration: none;
390
color: var(--color-accent-1);
391
}
392
#pagination-options > form {
394
align-items: center;
395
display: flex;
396
gap: 1em;
397
}
398
#pagination-options {
400
justify-content: center;
401
align-items: center;
402
gap: 1em;
403
width: 100%;
404
}
405
.thumbnail-list {
407
list-style: none;
408
margin: 0 !important;
409
display: grid;
410
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
411
gap: 16px;
412
}
413
.thumbnail-list > li {
415
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
416
box-shadow: var(--shadow-card);
417
background: var(--color-card);
418
}
419
.thumbnail-list > li > a, .thumbnail-list > li {
421
display: flex;
422
flex-direction: column;
423
justify-content: space-between;
424
height: 100%;
425
}
426
.thumbnail-list > li > .list-more {
428
display: flex;
429
justify-content: space-between;
430
align-items: center;
431
padding: 8px;
432
}
433
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
435
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
436
}
437
.thumbnail-list > li .annotation-zone {
439
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
440
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
441
}
442
.thumbnail-list > li .annotation-zone:hover {
444
position: relative;
445
transform: scale(2);
446
z-index: 1;
447
box-shadow: var(--shadow-textarea-active);
448
}
449
.thumbnail-list > li .list-detail {
451
padding: 8px;
452
display: block;
453
}
454
a.button {
456
text-decoration: none;
457
}
458
dt {
460
font-weight: 600;
461
}
462
dd {
464
margin-left: 40px;
465
}
466
#mobile-navbar, #mobile-navbar-spacer {
468
display: none;
469
}
470
@media screen and (max-width: 896px) {
472
#mobile-navbar {
473
display: flex;
474
}
475
header {
476
position: fixed;
477
top: 0;
478
left: 0;
479
width: 100%;
480
z-index: 3;
481
}
482
#mobile-navbar-spacer {
483
display: block;
484
height: var(--height-navbar);
485
}
486
#desktop-navbar {
487
display: none;
488
}
489
:root {
490
--reserved-height-top: var(--height-navbar);
491
}
492
}
493
#hamburger > nav {
495
display: flex;
496
flex-direction: column;
497
gap: 1em;
498
padding: var(--padding-card);
499
padding-top: var(--padding-card-top);
500
box-shadow: var(--shadow-card);
501
background: var(--color-card);
502
justify-content: space-between;
503
width: clamp(240px, calc(100vw - 56px), 448px);
504
}
505
#hamburger > nav > ul {
507
display: flex;
508
flex-direction: column;
509
gap: 1em;
510
margin: 0;
511
}
512
#hamburger > nav > ul > li {
514
display: flex;
515
gap: var(--gap-label-checkbox);
516
align-items: center;
517
margin: 0;
518
}
519
#hamburger > nav > ul > li > a {
521
display: contents;
522
text-decoration: none;
523
color: var(--color-card-text);
524
}
525
.star-rating-container {
527
display: flex;
528
flex-direction: row-reverse;
529
font-size: 1.25em;
530
align-items: center;
531
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
532
}
533
.star-rating-container > input {
535
width: 0 !important;
536
height: 0 !important;
537
visibility: hidden;
538
}
539
.star-rating-container > label {
541
cursor: pointer;
542
color: var(--text-softest);
543
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
544
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
545
}
546
.star-rating-container > label:hover,
548
.star-rating-container > label:hover ~ label {
549
color: var(--color-star);
550
filter: drop-shadow(0 0 3px #00000040);
551
}
552
.star-rating-container > input:checked ~ label {
554
color: var(--color-star);
555
}
556
.visually-hidden {
558
position: absolute;
559
width: 1px;
560
height: 1px;
561
box-sizing: content-box;
562
margin: -1px;
563
overflow: hidden;
564
clip-path: inset(50%);
565
border: 0;
566
}
567
.rating-list {
569
display: grid;
570
grid-auto-columns: 1fr;
571
gap: 0.5rem;
572
grid-template-columns: auto;
573
list-style: none;
574
margin: 0 !important;
575
padding: 0;
576
min-width: 50%;
577
}
578
.rating-list > li {
580
grid-column-start: 1;
581
height: 28px;
582
padding: 4px 8px;
583
display: flex;
584
align-items: center;
585
justify-content: space-between;
586
gap: 0.5rch;
587
border-radius: 0 4px 4px 0;
588
margin: 0;
589
}
590
.rating-bar {
592
display: flex;
593
align-items: center;
594
justify-content: flex-start;
595
gap: 0.5rch;
596
font-size: 1.25em;
597
width: 100%;
598
}
599
.rating-bar > .rating-bar-segment {
601
position: relative;
602
width: 1em;
603
height: 1em;
604
clip-path: url(#star-clip);
605
background: var(--text-softest);
606
}
607
.rating-bar > .rating-bar-segment > .rating-bar-filling {
609
background: var(--color-star);
610
height: 100%;
611
position: absolute;
612
top: 0;
613
left: 0;
614
}
615
#picture-view {
617
display: flex;
618
flex-direction: row;
619
gap: 1em;
620
align-items: flex-start;
621
justify-content: center;
622
width: fit-content;
623
margin: 0 auto;
624
}
625
#picture-view > x-frame {
627
flex: 1 1 var(--width);
628
margin: 0;
629
}
630
#picture-actions {
632
--width: 256px;
633
position: sticky;
634
top: var(--reserved-height-top);
635
overflow: auto;
636
max-height: 100vh;
637
height: 100%;
638
background: var(--color-card);
639
padding: 1rem 0;
640
box-shadow: var(--shadow-card);
641
}
642
@media screen and (max-width: 768px) {
644
#picture-view {
645
flex-direction: column;
646
}
647
#picture-view > x-frame {
648
flex: 1 1 auto;
649
margin: 0;
650
}
651
#picture-actions {
652
--width: 768px;
653
position: static;
654
padding: 1rem;
655
}
656
#picture-actions > ul {
657
width: 100%;
658
list-style: none;
659
margin: 0;
660
padding: 0;
661
}
662
#picture-actions > ul > li {
663
display: inline;
664
}
665
.action-list > li {
666
padding: 0 !important;
667
}
668
}
669
.action-list {
671
list-style: none;
672
margin: 0 !important;
673
padding: 0;
674
}
675
.action-list > li {
677
display: flex;
678
margin: 0;
679
width: 100%;
680
padding: 0.25rem 1rem;
681
}
682
.action-list > li > a {
684
text-decoration: none;
685
color: var(--color-card-text) !important;
686
display: flex;
687
align-items: center;
688
gap: 0.5rch;
689
font-weight: 400;
690
}
691
.action-list > li > details > summary {
693
color: var(--color-card-text) !important;
694
display: flex;
695
align-items: center;
696
gap: 0.5rch;
697
font-weight: 400;
698
}
699
#picture-buttons {
701
padding: 0 1rem;
702
}
703
@media print {
705
#picture-actions, #annotation-view-controls {
706
display: none;
707
}
708
.navbar {
709
display: none;
710
}
711
:root {
712
--color-background: #ffffff;
713
}
714
#annotation-zone, .thumbnail-list {
715
width: 100vw;
716
height: auto;
717
position: relative;
718
left: calc(-1 * (50vw - 50%));
719
}
720
}
721
.navbar > ul {
723
max-width: 100%;
724
}
725
#desktop-navbar > ul:first-child { /* list containing title */
727
flex: 0 1 auto;
728
min-width: 0;
729
}
730
#desktop-navbar > ul:last-child { /* list containing navigation */
732
flex: 1 0 auto;
733
justify-content: end;
734
}
735
#mobile-navbar-title, #desktop-navbar-title {
737
font: var(--h5-font);
738
font-weight: 700;
739
white-space: nowrap;
740
overflow: hidden;
741
text-overflow: ellipsis;
742
flex: 0 1 auto;
743
min-width: 0;
744
}
745
nav .button-flat {
747
--color-flat-button-hover: transparent;
748
--color-flat-button-active: transparent;
749
}
750
nav .button-flat .ripple-pad {
752
background: #ffffff99;
753
}
754
.warning {
756
background: var(--color-alert);
757
color: var(--color-alert-text);
758
padding: 1rem;
759
margin: 1rem 0;
760
border-radius: var(--radius-card);
761
box-shadow: var(--shadow-card);
762
--color-link-text: #000000;
763
--color-link-hover-text: #000000;
764
--color-link-visited-text: #000000;
765
--color-link-visited-hover-text: #000000;
766
--color-link-active-text: #000000;
767
}
768
.warning h2 {
770
font: var(--h3-font);
771
}
772
#annotation-zone {
774
box-shadow: var(--shadow-card);
775
}
776
#hamburger-site-name {
778
font: var(--h4-font);
779
text-transform: uppercase;
780
color: var(--color-accent);
781
}
782
#object-types {
784
z-index: 3;
785
background: var(--color-callout);
786
color: var(--color-callout-text);
787
--color-background-text: var(--color-callout-text);
788
--color-label-text: var(--color-callout-text);
789
box-shadow: var(--shadow-card);
790
border-radius: var(--radius-input);
791
position: absolute;
792
display: none;
793
overflow: auto;
794
}
795
#object-types-content {
797
padding: 1rem;
798
}
799
#annotation-controls {
801
display: flex;
802
justify-content: space-between;
803
gap: 1rem;
804
padding: 0.5rem;
805
align-items: stretch;
806
}
807
#annotation-controls > x-buttonbox {
809
align-items: center;
810
}
811
#annotation-controls > x-buttonbox button:has(iconify-icon) {
813
aspect-ratio: 1;
814
}
815
#annotation-controls > x-buttonbox button > iconify-icon {
817
font-size: 1.5rem;
818
}
819
#annotation-helper-message {
821
padding: 0.75rem;
822
text-align: center;
823
flex: 0 0 auto;
824
}
825
#annotation-zoom-container {
827
flex: 1 1 auto;
828
overflow: scroll;
829
align-self: stretch;
830
width: 100%;
831
display: flex;
832
justify-content: center;
833
align-items: center;
834
}
835
#annotation-zoom-container > #annotation-zone {
837
transform: scale(1);
838
transition: transform 0.125s cubic-bezier(0.28, 0.5, 0.31, 0.92);
839
max-width: 100%;
840
max-height: 100% !important;
841
box-shadow: none;
842
}
843
#annotation-zoom-container > #annotation-zone > #annotation-image {
845
object-fit: contain;
846
width: 100%;
847
height: 100%;
848
}
849
#annotation-main-area {
851
display: flex;
852
flex-direction: column;
853
flex: 1 1 auto;
854
overflow: auto;
855
width: 100%;
856
}
857
body.fixed-content-area {
859
max-width: 100vw;
860
max-height: 100vh;
861
display: flex;
862
flex-direction: column;
863
}
864
body.fixed-content-area > main {
866
flex: 1 1 auto;
867
overflow: auto;
868
display: flex;
869
flex-direction: column;
870
}
871
#annotation-zoom-controls {
873
display: flex;
874
gap: 0.5rem;
875
justify-content: center;
876
align-items: center;
877
}
878
#zoom-indicator {
880
width: 7ch;
881
text-align: right;
882
}
883
#annotation-zoom-container {
885
cursor: grab;
886
}
887
#object-types {
889
cursor: auto;
890
}
891