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