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