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
overflow: hidden;
74
}
75
#annotation-image, .annotation-image {
77
user-drag: none;
78
-webkit-user-drag: none;
79
image-rendering: pixelated;
80
}
81
#annotation-zone > svg, .annotation-zone > svg {
83
z-index: 1;
84
position: absolute;
85
top: 0;
86
left: 0;
87
width: 100%;
88
height: 100%;
89
}
90
.annotation-ruler {
92
z-index: 2;
93
position: absolute;
94
top: 0;
95
left: 0;
96
background: var(--color-accent);
97
display: none;
98
}
99
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
101
height: 1px;
102
width: 100%;
103
}
104
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
106
width: 1px;
107
height: 100%;
108
}
109
.shape {
111
stroke: var(--color-accent);
112
fill: var(--color-accent);
113
fill-opacity: 0.1;
114
stroke-width: 2px;
115
vector-effect: non-scaling-stroke;
116
pointer-events: auto;
117
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
118
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
119
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
120
stroke-linecap: square;
121
stroke-linejoin: miter;
122
}
123
.shape-polyline {
125
fill: none;
126
}
127
.shape-point {
129
stroke: var(--color-accent);
130
stroke-width: 2px;
131
fill-opacity: 1;
132
r: 2;
133
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
134
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
135
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
136
}
137
.shape.selected {
139
fill-opacity: 0.2;
140
stroke-width: 4px;
141
filter: drop-shadow(0 0 2px var(--text-soft));
142
}
143
.shape-point.selected {
145
fill-opacity: 1;
146
r: 6;
147
stroke-width: 6px;
148
}
149
.shape-container, .shape-container-viewonly {
151
pointer-events: none;
152
}
153
#annotation-helper-message {
155
min-height: 2lh;
156
}
157
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
159
fill: var(--color-info);
160
stroke: var(--color-info);
161
fill-opacity: 0;
162
stroke-opacity: 0;
163
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
164
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
165
}
166
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
168
fill: none;
169
}
170
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
172
stroke: var(--color-info);
173
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
174
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
175
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
176
}
177
.shape-label {
179
position: absolute;
180
font-weight: 500;
181
color: var(--color-shape-label-text) !important;
182
pointer-events: auto;
183
height: 28px;
184
padding-left: 8px;
185
padding-right: 8px;
186
display: flex;
187
align-items: center;
188
justify-content: center;
189
background: var(--color-shape-label);
190
width: max-content;
191
box-shadow: var(--shadow-button);
192
/* top-left corner is square to point to the shape */
193
border-radius: 0 16px 16px 16px;
194
opacity: 0;
195
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
196
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
197
transform: scale(0);
198
transform-origin: top left;
199
z-index: 3;
200
text-decoration: none;
201
}
202
.shape-label:hover {
204
text-decoration: underline;
205
}
206
/* Only show region parts when checkbox is checked */
208
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
209
opacity: 1;
210
transform: scale(1);
211
}
212
/* Hide points with a bubble */
214
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
215
r: 0;
216
border-width: 0;
217
}
218
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
220
fill-opacity: 0.1;
221
stroke-opacity: 1;
222
}
223
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
225
fill-opacity: 0.2;
226
stroke-opacity: 1;
227
}
228
@keyframes move-out {
230
from {
231
transform: scale(1);
232
opacity: 1;
233
}
234
to {
235
transform: scale(0.5);
236
opacity: 0;
237
}
238
}
239
@keyframes move-in {
241
from {
242
transform: scale(0.5);
243
opacity: 0;
244
}
245
to {
246
transform: scale(1);
247
opacity: 1;
248
}
249
}
250
@keyframes slide-in {
252
from {
253
transform: translateX(-1.5rem);
254
opacity: 0;
255
}
256
to {
257
transform: translateX(0);
258
opacity: 1;
259
}
260
}
261
@keyframes slide-out {
263
from {
264
transform: translateX(0);
265
opacity: 1;
266
}
267
to {
268
transform: translateX(-1.5rem);
269
opacity: 0;
270
}
271
}
272
@media (prefers-reduced-motion: no-preference) {
274
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
275
#annotation-zone {
276
view-transition-name: thumbnail;
277
}
278
::view-transition-old(root),
279
::view-transition-new(root) {
280
transform-origin: top;
281
animation-duration: 0.5s;
282
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
283
}
284
::view-transition-old(root) {
286
animation-name: move-out;
287
}
288
::view-transition-new(root) {
290
animation-name: move-in;
291
}
292
::view-transition-group(thumbnail) {
294
animation-duration: 0.5s;
295
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
296
}
297
#annotation-zone::view-transition-old(thumbnail) {
299
animation-duration: 0s;
300
}
301
::view-transition-group(navbar), ::view-transition-group(navbar-mobile) {
303
animation-duration: 0.5s;
304
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
305
}
306
}
307
.multi-select, .single-select {
309
display: flex;
310
flex-flow: column nowrap;
311
overflow-y: scroll;
312
box-shadow: var(--shadow-card-inset);
313
padding: 16px;
314
gap: 8px;
315
}
316
.licence-selection, .image-type-selection {
318
display: flex;
319
flex-flow: column nowrap;
320
}
321
.licence-selection-info, .image-type-selection-info {
323
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
324
/* Align with the checkbox above */
325
}
326
.licence-selection-info > p, .image-type-selection-info > p {
328
font-weight: 300;
329
}
330
.licence-logo {
332
width: 128px;
333
float: right;
334
margin-left: 1ch;
335
}
336
.licence-title, .image-type-title {
338
display: flex;
339
justify-content: space-between;
340
width: 100%;
341
}
342
.licence-title > .licence-name, .image-type-title > .image-type-name {
344
font: var(--h5-font);
345
font-weight: 400;
346
}
347
.icon-explainer {
349
display: grid;
350
gap: 4px 8px;
351
grid-template-columns: auto 1fr;
352
align-items: center;
353
}
354
.icon-explainer *:nth-child(even) {
356
font-weight: 300;
357
}
358
.required-asterisk::after {
360
content: "*";
361
color: var(--color-error);
362
}
363
small {
365
/* BIG :D */
366
font-size: 1em;
367
}
368
#pagination {
370
display: flex;
371
gap: 1em;
372
justify-content: center;
373
align-items: center;
374
font-size: 1.5em;
375
font-weight: 600;
376
flex: 1 0 auto;
377
}
378
#pagination > a {
380
text-decoration: none;
381
color: var(--color-accent-1);
382
}
383
#pagination-options > form {
385
align-items: center;
386
display: flex;
387
gap: 1em;
388
}
389
#pagination-options {
391
justify-content: center;
392
align-items: center;
393
gap: 1em;
394
width: 100%;
395
}
396
.thumbnail-list {
398
list-style: none;
399
margin: 0 !important;
400
display: grid;
401
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
402
gap: 16px;
403
}
404
.thumbnail-list > li {
406
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
407
box-shadow: var(--shadow-card);
408
background: var(--color-card);
409
}
410
.thumbnail-list > li > a, .thumbnail-list > li {
412
display: flex;
413
flex-direction: column;
414
justify-content: space-between;
415
height: 100%;
416
}
417
.thumbnail-list > li > .list-more {
419
display: flex;
420
justify-content: space-between;
421
align-items: center;
422
padding: 8px;
423
}
424
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
426
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
427
}
428
.thumbnail-list > li .annotation-zone {
430
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
431
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
432
}
433
.thumbnail-list > li .annotation-zone:hover {
435
position: relative;
436
transform: scale(2);
437
z-index: 1;
438
box-shadow: var(--shadow-textarea-active);
439
}
440
.thumbnail-list > li .list-detail {
442
padding: 8px;
443
display: block;
444
}
445
a.button {
447
text-decoration: none;
448
}
449
dt {
451
font-weight: 600;
452
}
453
dd {
455
margin-left: 40px;
456
}
457
#mobile-navbar, #mobile-navbar-spacer {
459
display: none;
460
}
461
@media screen and (max-width: 896px) {
463
#mobile-navbar {
464
display: flex;
465
}
466
header {
467
position: fixed;
468
top: 0;
469
left: 0;
470
width: 100%;
471
z-index: 3;
472
}
473
#mobile-navbar-spacer {
474
display: block;
475
height: var(--height-navbar);
476
}
477
#desktop-navbar {
478
display: none;
479
}
480
:root {
481
--reserved-height-top: var(--height-navbar);
482
}
483
}
484
#hamburger > nav {
486
display: flex;
487
flex-direction: column;
488
gap: 1em;
489
padding: var(--padding-card);
490
padding-top: var(--padding-card-top);
491
box-shadow: var(--shadow-card);
492
background: var(--color-card);
493
justify-content: space-between;
494
width: clamp(240px, calc(100vw - 56px), 448px);
495
}
496
#hamburger > nav > ul {
498
display: flex;
499
flex-direction: column;
500
gap: 1em;
501
margin: 0;
502
}
503
#hamburger > nav > ul > li {
505
display: flex;
506
gap: var(--gap-label-checkbox);
507
align-items: center;
508
margin: 0;
509
}
510
#hamburger > nav > ul > li > a {
512
text-decoration: none;
513
color: var(--color-card-text);
514
}
515
.star-rating-container {
517
display: flex;
518
flex-direction: row-reverse;
519
font-size: 1.25em;
520
align-items: center;
521
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
522
}
523
.star-rating-container > input {
525
width: 0 !important;
526
height: 0 !important;
527
visibility: hidden;
528
}
529
.star-rating-container > label {
531
cursor: pointer;
532
color: var(--text-softest);
533
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
534
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
535
}
536
.star-rating-container > label:hover,
538
.star-rating-container > label:hover ~ label {
539
color: var(--color-star);
540
filter: drop-shadow(0 0 3px #00000040);
541
}
542
.star-rating-container > input:checked ~ label {
544
color: var(--color-star);
545
}
546
.visually-hidden {
548
position: absolute;
549
width: 1px;
550
height: 1px;
551
box-sizing: content-box;
552
margin: -1px;
553
overflow: hidden;
554
clip-path: inset(50%);
555
border: 0;
556
}
557
.rating-list {
559
display: grid;
560
grid-auto-columns: 1fr;
561
gap: 0.5rem;
562
grid-template-columns: auto;
563
list-style: none;
564
margin: 0 !important;
565
padding: 0;
566
min-width: 50%;
567
}
568
.rating-list > li {
570
grid-column-start: 1;
571
height: 28px;
572
padding: 4px 8px;
573
display: flex;
574
align-items: center;
575
justify-content: space-between;
576
gap: 0.5rch;
577
border-radius: 0 4px 4px 0;
578
margin: 0;
579
}
580
.rating-bar {
582
display: flex;
583
align-items: center;
584
justify-content: flex-start;
585
gap: 0.5rch;
586
font-size: 1.25em;
587
width: 100%;
588
}
589
.rating-bar > .rating-bar-segment {
591
position: relative;
592
width: 1em;
593
height: 1em;
594
clip-path: url(#star-clip);
595
background: var(--text-softest);
596
}
597
.rating-bar > .rating-bar-segment > .rating-bar-filling {
599
background: var(--color-star);
600
height: 100%;
601
position: absolute;
602
top: 0;
603
left: 0;
604
}
605
#picture-view {
607
display: flex;
608
flex-direction: row;
609
gap: 1em;
610
align-items: flex-start;
611
justify-content: center;
612
width: fit-content;
613
margin: 0 auto;
614
}
615
#picture-view > x-frame {
617
flex: 1 1 var(--width);
618
margin: 0;
619
}
620
#picture-actions {
622
--width: 256px;
623
position: sticky;
624
top: var(--reserved-height-top);
625
overflow: auto;
626
max-height: 100vh;
627
height: 100%;
628
background: var(--color-card);
629
padding: 1rem 0;
630
box-shadow: var(--shadow-card);
631
}
632
@media screen and (max-width: 768px) {
634
#picture-view {
635
flex-direction: column;
636
}
637
#picture-actions {
638
--width: 768px;
639
position: static;
640
padding: 1rem;
641
}
642
#picture-actions > ul {
643
width: 100%;
644
list-style: none;
645
margin: 0;
646
padding: 0;
647
}
648
#picture-actions > ul > li {
649
display: inline;
650
}
651
.action-list > li {
652
padding: 0 !important;
653
}
654
}
655
.action-list {
657
list-style: none;
658
margin: 0 !important;
659
padding: 0;
660
}
661
.action-list > li {
663
display: flex;
664
margin: 0;
665
width: 100%;
666
padding: 0.25rem 1rem;
667
}
668
.action-list > li > a {
670
text-decoration: none;
671
color: var(--color-card-text) !important;
672
display: flex;
673
align-items: center;
674
gap: 0.5rch;
675
font-weight: 400;
676
}
677
.action-list > li > details > summary {
679
color: var(--color-card-text) !important;
680
display: flex;
681
align-items: center;
682
gap: 0.5rch;
683
font-weight: 400;
684
}
685
#picture-buttons {
687
padding: 0 1rem;
688
}
689
@media print {
691
#picture-actions, #annotation-view-controls {
692
display: none;
693
}
694
.navbar {
695
display: none;
696
}
697
:root {
698
--color-background: #ffffff;
699
}
700
#annotation-zone, .thumbnail-list {
701
width: 100vw;
702
height: auto;
703
position: relative;
704
left: calc(-1 * (50vw - 50%));
705
}
706
}
707
.navbar > ul {
709
max-width: 100%;
710
}
711
#desktop-navbar > ul:first-child { /* list containing title */
713
flex: 0 1 auto;
714
min-width: 0;
715
}
716
#desktop-navbar > ul:last-child { /* list containing navigation */
718
flex: 1 0 auto;
719
justify-content: end;
720
}
721
#mobile-navbar-title, #desktop-navbar-title {
723
font: var(--h5-font);
724
font-weight: 700;
725
white-space: nowrap;
726
overflow: hidden;
727
text-overflow: ellipsis;
728
flex: 0 1 auto;
729
min-width: 0;
730
}
731
nav .button-flat {
733
--color-flat-button-hover: transparent;
734
--color-flat-button-active: transparent;
735
}
736
nav .button-flat .ripple-pad {
738
background: #ffffff99;
739
}
740