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
}
20
.ripple-pad {
22
background: #ffffff99;
23
position: absolute;
24
opacity: 1;
25
transform: scale(0);
26
animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards;
27
}
28
.button-flat .ripple-pad {
30
background: var(--color-primary-3);
31
}
32
@keyframes RippleEffect {
34
to {
35
transform: scale(1);
36
opacity: 0;
37
}
38
}
39
button, input, .button:not(.link-button), select, .navbar a, .navrail a {
41
position: relative;
42
overflow: hidden;
43
}
44
nav#desktop-navbar {
46
view-transition-name: navbar;
47
}
48
nav#mobile-navbar {
50
view-transition-name: navbar-mobile;
51
}
52
p {
54
color: var(--text-soft);
55
}
56
iconify-icon {
58
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
59
display: inline-block;
60
width: 1em;
61
height: 1em;
62
font-size: 1.5em;
63
}
64
:is(#shape-selector, #shape-options) > button > iconify-icon {
66
font-size: 2rem;
67
}
68
#annotation-zone, .annotation-zone {
70
position: relative;
71
user-select: none;
72
overflow: hidden;
73
}
74
#annotation-image, .annotation-image {
76
user-drag: none;
77
-webkit-user-drag: none;
78
image-rendering: pixelated;
79
}
80
#annotation-zone > svg, .annotation-zone > svg {
82
z-index: 1;
83
position: absolute;
84
top: 0;
85
left: 0;
86
width: 100%;
87
height: 100%;
88
}
89
.annotation-ruler {
91
z-index: 2;
92
position: absolute;
93
top: 0;
94
left: 0;
95
background: var(--color-accent);
96
display: none;
97
}
98
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
100
height: 1px;
101
width: 100%;
102
}
103
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
105
width: 1px;
106
height: 100%;
107
}
108
.shape {
110
stroke: var(--color-accent);
111
fill: var(--color-accent);
112
fill-opacity: 0.1;
113
stroke-width: 2px;
114
vector-effect: non-scaling-stroke;
115
pointer-events: auto;
116
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
117
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
118
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
119
stroke-linecap: square;
120
stroke-linejoin: miter;
121
}
122
.shape-polyline {
124
fill: none;
125
}
126
.shape-point {
128
stroke: var(--color-accent);
129
stroke-width: 2px;
130
fill-opacity: 1;
131
r: 2;
132
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
133
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
134
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
135
}
136
.shape.selected {
138
fill-opacity: 0.2;
139
stroke-width: 4px;
140
filter: drop-shadow(0 0 2px var(--text-soft));
141
}
142
.shape-point.selected {
144
fill-opacity: 1;
145
r: 6;
146
stroke-width: 6px;
147
}
148
.shape-container, .shape-container-viewonly {
150
pointer-events: none;
151
}
152
#annotation-helper-message {
154
min-height: 2lh;
155
}
156
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
158
fill: var(--color-info);
159
stroke: var(--color-info);
160
fill-opacity: 0;
161
stroke-opacity: 0;
162
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
163
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
164
}
165
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
167
fill: none;
168
}
169
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
171
stroke: var(--color-info);
172
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
173
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
174
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
175
}
176
.shape-label {
178
position: absolute;
179
font-weight: 500;
180
color: var(--color-shape-label-text) !important;
181
pointer-events: auto;
182
height: 28px;
183
padding-left: 8px;
184
padding-right: 8px;
185
display: flex;
186
align-items: center;
187
justify-content: center;
188
background: var(--color-shape-label);
189
width: max-content;
190
box-shadow: var(--shadow-button);
191
/* top-left corner is square to point to the shape */
192
border-radius: 0 16px 16px 16px;
193
opacity: 0;
194
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
195
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
196
transform: scale(0);
197
transform-origin: top left;
198
z-index: 3;
199
text-decoration: none;
200
}
201
.shape-label:hover {
203
text-decoration: underline;
204
}
205
/* Only show region parts when checkbox is checked */
207
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
208
opacity: 1;
209
transform: scale(1);
210
}
211
/* Hide points with a bubble */
213
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
214
r: 0;
215
border-width: 0;
216
}
217
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
219
fill-opacity: 0.1;
220
stroke-opacity: 1;
221
}
222
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
224
fill-opacity: 0.2;
225
stroke-opacity: 1;
226
}
227
@view-transition {
229
navigation: auto;
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
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
255
#annotation-zone {
256
view-transition-name: thumbnail;
257
}
258
@media (prefers-reduced-motion: no-preference) {
260
::view-transition-old(root),
261
::view-transition-new(root) {
262
transform-origin: top;
263
animation-duration: 0.5s;
264
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
265
}
266
::view-transition-old(root) {
268
animation-name: move-out;
269
}
270
::view-transition-new(root) {
272
animation-name: move-in;
273
}
274
::view-transition-group(thumbnail) {
276
animation-duration: 0.5s;
277
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
278
}
279
#annotation-zone::view-transition-old(thumbnail) {
281
animation-duration: 0s;
282
}
283
::view-transition-group(navbar) {
285
animation-duration: 0.5s;
286
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
287
}
288
}
289
.multi-select, .single-select {
291
display: flex;
292
flex-flow: column nowrap;
293
overflow-y: scroll;
294
box-shadow: var(--shadow-card-inset);
295
padding: 16px;
296
gap: 8px;
297
}
298
.licence-selection, .image-type-selection {
300
display: flex;
301
flex-flow: column nowrap;
302
}
303
.licence-selection-info, .image-type-selection-info {
305
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
306
/* Align with the checkbox above */
307
}
308
.licence-selection-info > p, .image-type-selection-info > p {
310
font-weight: 300;
311
}
312
.licence-logo {
314
width: 128px;
315
float: right;
316
margin-left: 1ch;
317
}
318
.licence-title, .image-type-title {
320
display: flex;
321
justify-content: space-between;
322
width: 100%;
323
}
324
.licence-title > .licence-name, .image-type-title > .image-type-name {
326
font: var(--h5-font);
327
font-weight: 400;
328
}
329
.icon-explainer {
331
display: grid;
332
gap: 4px 8px;
333
grid-template-columns: auto 1fr;
334
align-items: center;
335
}
336
.icon-explainer *:nth-child(even) {
338
font-weight: 300;
339
}
340
.required-asterisk::after {
342
content: "*";
343
color: var(--color-error);
344
}
345
small {
347
/* BIG :D */
348
font-size: 1em;
349
}
350
#pagination {
352
display: flex;
353
gap: 1em;
354
justify-content: center;
355
align-items: center;
356
font-size: 1.5em;
357
font-weight: 600;
358
flex: 1 0 auto;
359
}
360
#pagination > a {
362
text-decoration: none;
363
color: var(--color-accent-1);
364
}
365
#pagination-options > form {
367
align-items: center;
368
display: flex;
369
gap: 1em;
370
}
371
#pagination-options {
373
justify-content: center;
374
align-items: center;
375
gap: 1em;
376
width: 100%;
377
}
378
.thumbnail-list {
380
list-style: none;
381
margin: 0 !important;
382
display: grid;
383
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
384
gap: 16px;
385
}
386
.thumbnail-list > li {
388
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
389
box-shadow: var(--shadow-card);
390
background: var(--color-card);
391
}
392
.thumbnail-list > li > a, .thumbnail-list > li {
394
display: flex;
395
flex-direction: column;
396
justify-content: space-between;
397
height: 100%;
398
}
399
.thumbnail-list > li > .list-more {
401
display: flex;
402
justify-content: space-between;
403
align-items: center;
404
padding: 8px;
405
}
406
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
408
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
409
}
410
.thumbnail-list > li .annotation-zone {
412
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
413
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
414
}
415
.thumbnail-list > li .annotation-zone:hover {
417
position: relative;
418
transform: scale(2);
419
z-index: 1;
420
box-shadow: var(--shadow-textarea-active);
421
}
422
.thumbnail-list > li .list-detail {
424
padding: 8px;
425
display: block;
426
}
427
a.button {
429
text-decoration: none;
430
}
431
dt {
433
font-weight: 600;
434
}
435
dd {
437
margin-left: 40px;
438
}
439
#mobile-navbar {
441
display: none;
442
}
443
@media screen and (max-width: 576px) {
445
#mobile-navbar {
446
display: flex;
447
}
448
#desktop-navbar {
449
display: none;
450
}
451
}
452
#hamburger > nav {
454
display: flex;
455
flex-direction: column;
456
gap: 1em;
457
padding: var(--padding-card);
458
padding-top: var(--padding-card-top);
459
box-shadow: var(--shadow-card);
460
background: var(--color-card);
461
justify-content: space-between;
462
width: clamp(240px, calc(100vw - 56px), 448px);
463
}
464
#hamburger > nav > ul {
466
display: flex;
467
flex-direction: column;
468
gap: 1em;
469
margin: 0;
470
}
471
#hamburger > nav > ul > li {
473
display: flex;
474
gap: var(--gap-label-checkbox);
475
align-items: center;
476
margin: 0;
477
}
478
#hamburger > nav > ul > li > a {
480
text-decoration: none;
481
color: var(--color-card-text);
482
}
483
.star-rating-container {
485
display: flex;
486
flex-direction: row-reverse;
487
font-size: 1.25em;
488
align-items: center;
489
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
490
}
491
.star-rating-container > input {
493
width: 0 !important;
494
height: 0 !important;
495
visibility: hidden;
496
}
497
.star-rating-container > label {
499
cursor: pointer;
500
color: var(--text-softest);
501
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
502
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
503
}
504
.star-rating-container > label:hover,
506
.star-rating-container > label:hover ~ label {
507
color: var(--color-star);
508
filter: drop-shadow(0 0 3px #00000040);
509
}
510
.star-rating-container > input:checked ~ label {
512
color: var(--color-star);
513
}
514
.visually-hidden {
516
position: absolute;
517
width: 1px;
518
height: 1px;
519
box-sizing: content-box;
520
margin: -1px;
521
overflow: hidden;
522
clip-path: inset(50%);
523
border: 0;
524
}
525
.rating-list {
527
display: grid;
528
grid-auto-columns: 1fr;
529
gap: 0.5rem;
530
grid-template-columns: auto;
531
list-style: none;
532
margin: 0 !important;
533
padding: 0;
534
min-width: 50%;
535
}
536
.rating-list > li {
538
grid-column-start: 1;
539
height: 28px;
540
padding: 4px 8px;
541
display: flex;
542
align-items: center;
543
justify-content: space-between;
544
gap: 0.5rch;
545
border-radius: 0 4px 4px 0;
546
margin: 0;
547
}
548
.rating-bar {
550
display: flex;
551
align-items: center;
552
justify-content: flex-start;
553
gap: 0.5rch;
554
font-size: 1.25em;
555
width: 100%;
556
}
557
.rating-bar > .rating-bar-segment {
559
position: relative;
560
width: 1em;
561
height: 1em;
562
clip-path: url(#star-clip);
563
background: var(--text-softest);
564
}
565
.rating-bar > .rating-bar-segment > .rating-bar-filling {
567
background: var(--color-star);
568
height: 100%;
569
position: absolute;
570
top: 0;
571
left: 0;
572
}
573
#picture-view {
575
display: flex;
576
flex-direction: row;
577
gap: 1em;
578
align-items: flex-start;
579
justify-content: center;
580
width: fit-content;
581
margin: 0 auto;
582
}
583
#picture-actions {
585
--width: 256px;
586
position: sticky;
587
top: 0;
588
overflow: auto;
589
max-height: 100vh;
590
height: 100%;
591
background: var(--color-card);
592
padding: 1rem 0;
593
box-shadow: var(--shadow-card);
594
}
595
@media screen and (max-width: 768px) {
597
#picture-view {
598
flex-direction: column;
599
}
600
#picture-actions {
601
--width: 768px;
602
position: static;
603
padding: 1rem;
604
}
605
#picture-actions > ul {
606
width: 100%;
607
list-style: none;
608
margin: 0;
609
padding: 0;
610
}
611
#picture-actions > ul > li {
612
display: inline;
613
}
614
.action-list > li {
615
padding: 0 !important;
616
}
617
}
618
.action-list {
620
list-style: none;
621
margin: 0 !important;
622
padding: 0;
623
}
624
.action-list > li {
626
display: flex;
627
margin: 0;
628
width: 100%;
629
padding: 0.25rem 1rem;
630
}
631
.action-list > li > a {
633
text-decoration: none;
634
color: var(--color-card-text) !important;
635
display: flex;
636
align-items: center;
637
gap: 0.5rch;
638
font-weight: 400;
639
}
640
.action-list > li > details > summary {
642
color: var(--color-card-text) !important;
643
display: flex;
644
align-items: center;
645
gap: 0.5rch;
646
font-weight: 400;
647
}
648
#picture-buttons {
650
padding: 0 1rem;
651
}
652
@media print {
654
#picture-actions, #annotation-view-controls {
655
display: none;
656
}
657
.navbar {
658
display: none;
659
}
660
:root {
661
--color-background: #ffffff;
662
}
663
#annotation-zone, .thumbnail-list {
664
width: 100vw;
665
height: auto;
666
position: relative;
667
left: calc(-1 * (50vw - 50%));
668
}
669
}
670