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
}
70
.annotation-zone {
72
overflow: hidden;
73
}
74
#annotation-zone {
76
overflow: hidden;
77
}
78
#annotation-image, .annotation-image {
80
user-drag: none;
81
-webkit-user-drag: none;
82
image-rendering: pixelated;
83
}
84
#annotation-zone > svg, .annotation-zone > svg {
86
z-index: 1;
87
position: absolute;
88
top: 0;
89
left: 0;
90
width: 100%;
91
height: 100%;
92
}
93
.annotation-ruler {
95
z-index: 2;
96
position: absolute;
97
top: 0;
98
left: 0;
99
background: var(--color-accent);
100
display: none;
101
}
102
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
104
height: 1px;
105
width: 100%;
106
}
107
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
109
width: 1px;
110
height: 100%;
111
}
112
.shape {
114
stroke: var(--color-accent);
115
fill: var(--color-accent);
116
fill-opacity: 0.1;
117
stroke-width: 2px;
118
vector-effect: non-scaling-stroke;
119
pointer-events: auto;
120
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
121
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
122
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
123
stroke-linecap: square;
124
stroke-linejoin: miter;
125
}
126
.shape-polyline {
128
fill: none;
129
}
130
.shape-point {
132
stroke: var(--color-accent);
133
stroke-width: 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
filter: drop-shadow(0 0 2px var(--text-soft));
145
}
146
.shape-point.selected {
148
fill-opacity: 1;
149
r: 6;
150
stroke-width: 6px;
151
}
152
.shape-container, .shape-container-viewonly {
154
pointer-events: none;
155
}
156
#annotation-helper-message {
158
min-height: 2lh;
159
}
160
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
162
fill: var(--color-info);
163
stroke: var(--color-info);
164
fill-opacity: 0;
165
stroke-opacity: 0;
166
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
167
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
168
}
169
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
171
fill: none;
172
}
173
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
175
stroke: var(--color-info);
176
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
177
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
178
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
179
}
180
.shape-label {
182
position: absolute;
183
font-weight: 500;
184
color: var(--color-shape-label-text) !important;
185
pointer-events: auto;
186
height: 28px;
187
padding-left: 8px;
188
padding-right: 8px;
189
display: flex;
190
align-items: center;
191
justify-content: center;
192
background: var(--color-shape-label);
193
width: max-content;
194
box-shadow: var(--shadow-button);
195
/* top-left corner is square to point to the shape */
196
border-radius: 0 16px 16px 16px;
197
opacity: 0;
198
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
199
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
200
transform: scale(0);
201
transform-origin: top left;
202
z-index: 3;
203
text-decoration: none;
204
}
205
.shape-label:hover {
207
text-decoration: underline;
208
}
209
/* Only show region parts when checkbox is checked */
211
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
212
opacity: 1;
213
transform: scale(1);
214
}
215
/* Hide points with a bubble */
217
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
218
r: 0;
219
border-width: 0;
220
}
221
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
223
fill-opacity: 0.1;
224
stroke-opacity: 1;
225
}
226
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
228
fill-opacity: 0.2;
229
stroke-opacity: 1;
230
}
231
@keyframes move-out {
233
from {
234
transform: scale(1);
235
opacity: 1;
236
}
237
to {
238
transform: scale(0.5);
239
opacity: 0;
240
}
241
}
242
@keyframes move-in {
244
from {
245
transform: scale(0.5);
246
opacity: 0;
247
}
248
to {
249
transform: scale(1);
250
opacity: 1;
251
}
252
}
253
@keyframes slide-in {
255
from {
256
transform: translateX(-1.5rem);
257
opacity: 0;
258
}
259
to {
260
transform: translateX(0);
261
opacity: 1;
262
}
263
}
264
@keyframes slide-out {
266
from {
267
transform: translateX(0);
268
opacity: 1;
269
}
270
to {
271
transform: translateX(-1.5rem);
272
opacity: 0;
273
}
274
}
275
@media (prefers-reduced-motion: no-preference) {
277
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
278
html:not(:has(.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone)) #annotation-zone {
279
view-transition-name: thumbnail;
280
}
281
::view-transition-old(root),
282
::view-transition-new(root) {
283
transform-origin: top;
284
animation-duration: 0.5s;
285
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
286
}
287
::view-transition-old(root) {
289
animation-name: move-out;
290
}
291
::view-transition-new(root) {
293
animation-name: move-in;
294
}
295
::view-transition-group(thumbnail) {
297
animation-duration: 0.5s;
298
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
299
}
300
#annotation-zone::view-transition-old(thumbnail) {
302
animation-duration: 0s;
303
}
304
::view-transition-group(navbar), ::view-transition-group(navbar-mobile) {
306
animation-duration: 0.5s;
307
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
308
}
309
}
310
.multi-select, .single-select {
312
display: flex;
313
flex-flow: column nowrap;
314
overflow-y: scroll;
315
box-shadow: var(--shadow-card-inset);
316
padding: 16px;
317
gap: 8px;
318
}
319
.licence-selection, .image-type-selection {
321
display: flex;
322
flex-flow: column nowrap;
323
}
324
.licence-selection-info, .image-type-selection-info {
326
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
327
/* Align with the checkbox above */
328
}
329
.licence-selection-info > p, .image-type-selection-info > p {
331
font-weight: 300;
332
}
333
.licence-logo {
335
width: 128px;
336
float: right;
337
margin-left: 1ch;
338
}
339
.licence-title, .image-type-title {
341
display: flex;
342
justify-content: space-between;
343
width: 100%;
344
}
345
.licence-title > .licence-name, .image-type-title > .image-type-name {
347
font: var(--h5-font);
348
font-weight: 400;
349
}
350
.icon-explainer {
352
display: grid;
353
gap: 4px 8px;
354
grid-template-columns: auto 1fr;
355
align-items: center;
356
}
357
.icon-explainer *:nth-child(even) {
359
font-weight: 300;
360
}
361
.required-asterisk::after {
363
content: "*";
364
color: var(--color-error);
365
}
366
small {
368
/* BIG :D */
369
font-size: 1em;
370
}
371
#pagination {
373
display: flex;
374
gap: 1em;
375
justify-content: center;
376
align-items: center;
377
font-size: 1.5em;
378
font-weight: 600;
379
flex: 1 0 auto;
380
}
381
#pagination > a {
383
text-decoration: none;
384
color: var(--color-accent-1);
385
}
386
#pagination-options > form {
388
align-items: center;
389
display: flex;
390
gap: 1em;
391
}
392
#pagination-options {
394
justify-content: center;
395
align-items: center;
396
gap: 1em;
397
width: 100%;
398
}
399
.thumbnail-list {
401
list-style: none;
402
margin: 0 !important;
403
display: grid;
404
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
405
gap: 16px;
406
}
407
.thumbnail-list > li {
409
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
410
box-shadow: var(--shadow-card);
411
background: var(--color-card);
412
}
413
.thumbnail-list > li > a, .thumbnail-list > li {
415
display: flex;
416
flex-direction: column;
417
justify-content: space-between;
418
height: 100%;
419
}
420
.thumbnail-list > li > .list-more {
422
display: flex;
423
justify-content: space-between;
424
align-items: center;
425
padding: 8px;
426
}
427
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
429
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
430
}
431
.thumbnail-list > li .annotation-zone {
433
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
434
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
435
}
436
.thumbnail-list > li .annotation-zone:hover {
438
position: relative;
439
transform: scale(2);
440
z-index: 1;
441
box-shadow: var(--shadow-textarea-active);
442
}
443
.thumbnail-list > li .list-detail {
445
padding: 8px;
446
display: block;
447
}
448
a.button {
450
text-decoration: none;
451
}
452
dt {
454
font-weight: 600;
455
}
456
dd {
458
margin-left: 40px;
459
}
460
#mobile-navbar, #mobile-navbar-spacer {
462
display: none;
463
}
464
@media screen and (max-width: 896px) {
466
#mobile-navbar {
467
display: flex;
468
}
469
header {
470
position: fixed;
471
top: 0;
472
left: 0;
473
width: 100%;
474
z-index: 3;
475
}
476
#mobile-navbar-spacer {
477
display: block;
478
height: var(--height-navbar);
479
}
480
#desktop-navbar {
481
display: none;
482
}
483
:root {
484
--reserved-height-top: var(--height-navbar);
485
}
486
}
487
#hamburger > nav {
489
display: flex;
490
flex-direction: column;
491
gap: 1em;
492
padding: var(--padding-card);
493
padding-top: var(--padding-card-top);
494
box-shadow: var(--shadow-card);
495
background: var(--color-card);
496
justify-content: space-between;
497
width: clamp(240px, calc(100vw - 56px), 448px);
498
}
499
#hamburger > nav > ul {
501
display: flex;
502
flex-direction: column;
503
gap: 1em;
504
margin: 0;
505
}
506
#hamburger > nav > ul > li {
508
display: flex;
509
gap: var(--gap-label-checkbox);
510
align-items: center;
511
margin: 0;
512
}
513
#hamburger > nav > ul > li > a {
515
display: contents;
516
text-decoration: none;
517
color: var(--color-card-text);
518
}
519
.star-rating-container {
521
display: flex;
522
flex-direction: row-reverse;
523
font-size: 1.25em;
524
align-items: center;
525
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
526
}
527
.star-rating-container > input {
529
width: 0 !important;
530
height: 0 !important;
531
visibility: hidden;
532
}
533
.star-rating-container > label {
535
cursor: pointer;
536
color: var(--text-softest);
537
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
538
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
539
}
540
.star-rating-container > label:hover,
542
.star-rating-container > label:hover ~ label {
543
color: var(--color-star);
544
filter: drop-shadow(0 0 3px #00000040);
545
}
546
.star-rating-container > input:checked ~ label {
548
color: var(--color-star);
549
}
550
.visually-hidden {
552
position: absolute;
553
width: 1px;
554
height: 1px;
555
box-sizing: content-box;
556
margin: -1px;
557
overflow: hidden;
558
clip-path: inset(50%);
559
border: 0;
560
}
561
.rating-list {
563
display: grid;
564
grid-auto-columns: 1fr;
565
gap: 0.5rem;
566
grid-template-columns: auto;
567
list-style: none;
568
margin: 0 !important;
569
padding: 0;
570
min-width: 50%;
571
}
572
.rating-list > li {
574
grid-column-start: 1;
575
height: 28px;
576
padding: 4px 8px;
577
display: flex;
578
align-items: center;
579
justify-content: space-between;
580
gap: 0.5rch;
581
border-radius: 0 4px 4px 0;
582
margin: 0;
583
}
584
.rating-bar {
586
display: flex;
587
align-items: center;
588
justify-content: flex-start;
589
gap: 0.5rch;
590
font-size: 1.25em;
591
width: 100%;
592
}
593
.rating-bar > .rating-bar-segment {
595
position: relative;
596
width: 1em;
597
height: 1em;
598
clip-path: url(#star-clip);
599
background: var(--text-softest);
600
}
601
.rating-bar > .rating-bar-segment > .rating-bar-filling {
603
background: var(--color-star);
604
height: 100%;
605
position: absolute;
606
top: 0;
607
left: 0;
608
}
609
#picture-view {
611
display: flex;
612
flex-direction: row;
613
gap: 1em;
614
align-items: flex-start;
615
justify-content: center;
616
width: fit-content;
617
margin: 0 auto;
618
}
619
#picture-view > x-frame {
621
flex: 1 1 var(--width);
622
margin: 0;
623
}
624
#picture-actions {
626
--width: 256px;
627
position: sticky;
628
top: var(--reserved-height-top);
629
overflow: auto;
630
max-height: 100vh;
631
height: 100%;
632
background: var(--color-card);
633
padding: 1rem 0;
634
box-shadow: var(--shadow-card);
635
}
636
@media screen and (max-width: 768px) {
638
#picture-view {
639
flex-direction: column;
640
}
641
#picture-view > x-frame {
642
flex: 1 1 auto;
643
margin: 0;
644
}
645
#picture-actions {
646
--width: 768px;
647
position: static;
648
padding: 1rem;
649
}
650
#picture-actions > ul {
651
width: 100%;
652
list-style: none;
653
margin: 0;
654
padding: 0;
655
}
656
#picture-actions > ul > li {
657
display: inline;
658
}
659
.action-list > li {
660
padding: 0 !important;
661
}
662
}
663
.action-list {
665
list-style: none;
666
margin: 0 !important;
667
padding: 0;
668
}
669
.action-list > li {
671
display: flex;
672
margin: 0;
673
width: 100%;
674
padding: 0.25rem 1rem;
675
}
676
.action-list > li > a {
678
text-decoration: none;
679
color: var(--color-card-text) !important;
680
display: flex;
681
align-items: center;
682
gap: 0.5rch;
683
font-weight: 400;
684
}
685
.action-list > li > details > summary {
687
color: var(--color-card-text) !important;
688
display: flex;
689
align-items: center;
690
gap: 0.5rch;
691
font-weight: 400;
692
}
693
#picture-buttons {
695
padding: 0 1rem;
696
}
697
@media print {
699
#picture-actions, #annotation-view-controls {
700
display: none;
701
}
702
.navbar {
703
display: none;
704
}
705
:root {
706
--color-background: #ffffff;
707
}
708
#annotation-zone, .thumbnail-list {
709
width: 100vw;
710
height: auto;
711
position: relative;
712
left: calc(-1 * (50vw - 50%));
713
}
714
}
715
.navbar > ul {
717
max-width: 100%;
718
}
719
#desktop-navbar > ul:first-child { /* list containing title */
721
flex: 0 1 auto;
722
min-width: 0;
723
}
724
#desktop-navbar > ul:last-child { /* list containing navigation */
726
flex: 1 0 auto;
727
justify-content: end;
728
}
729
#mobile-navbar-title, #desktop-navbar-title {
731
font: var(--h5-font);
732
font-weight: 700;
733
white-space: nowrap;
734
overflow: hidden;
735
text-overflow: ellipsis;
736
flex: 0 1 auto;
737
min-width: 0;
738
}
739
nav .button-flat {
741
--color-flat-button-hover: transparent;
742
--color-flat-button-active: transparent;
743
}
744
nav .button-flat .ripple-pad {
746
background: #ffffff99;
747
}
748
.warning {
750
background: var(--color-alert);
751
color: var(--color-alert-text);
752
padding: 1rem;
753
margin: 1rem 0;
754
border-radius: var(--radius-card);
755
box-shadow: var(--shadow-card);
756
--color-link-text: #000000;
757
--color-link-hover-text: #000000;
758
--color-link-visited-text: #000000;
759
--color-link-visited-hover-text: #000000;
760
--color-link-active-text: #000000;
761
}
762
.warning h2 {
764
font: var(--h3-font);
765
}
766
#annotation-zone {
768
box-shadow: var(--shadow-card);
769
}
770
#hamburger-site-name {
772
font: var(--h4-font);
773
text-transform: uppercase;
774
color: var(--color-accent);
775
}
776
#object-types {
778
z-index: 3;
779
background: var(--color-callout);
780
color: var(--color-callout-text);
781
--color-background-text: var(--color-callout-text);
782
--color-label-text: var(--color-callout-text);
783
box-shadow: var(--shadow-card);
784
padding: 1rem;
785
border-radius: var(--radius-card);
786
position: absolute;
787
display: none;
788
overflow: auto;
789
}
790
#annotation-controls {
792
display: flex;
793
justify-content: space-between;
794
gap: 1rem;
795
padding: 0.5rem;
796
align-items: stretch;
797
}
798
#annotation-controls > x-buttonbox {
800
align-items: center;
801
}
802
#annotation-controls > x-buttonbox > button:has(iconify-icon) {
804
aspect-ratio: 1;
805
}
806
#annotation-controls > x-buttonbox > button > iconify-icon {
808
font-size: 1.5rem;
809
}
810
#annotation-helper-message {
812
padding: 1rem;
813
text-align: center;
814
}
815