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
}
284
.multi-select, .single-select {
286
display: flex;
287
flex-flow: column nowrap;
288
overflow-y: scroll;
289
box-shadow: var(--shadow-card-inset);
290
padding: 16px;
291
gap: 8px;
292
}
293
.licence-selection, .image-type-selection {
295
display: flex;
296
flex-flow: column nowrap;
297
}
298
.licence-selection-info, .image-type-selection-info {
300
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
301
/* Align with the checkbox above */
302
}
303
.licence-selection-info > p, .image-type-selection-info > p {
305
font-weight: 300;
306
}
307
.licence-logo {
309
width: 128px;
310
float: right;
311
margin-left: 1ch;
312
}
313
.licence-title, .image-type-title {
315
display: flex;
316
justify-content: space-between;
317
width: 100%;
318
}
319
.licence-title > .licence-name, .image-type-title > .image-type-name {
321
font: var(--h5-font);
322
font-weight: 400;
323
}
324
.icon-explainer {
326
display: grid;
327
gap: 4px 8px;
328
grid-template-columns: auto 1fr;
329
align-items: center;
330
}
331
.icon-explainer *:nth-child(even) {
333
font-weight: 300;
334
}
335
.required-asterisk::after {
337
content: "*";
338
color: var(--color-error);
339
}
340
small {
342
/* BIG :D */
343
font-size: 1em;
344
}
345
#pagination {
347
display: flex;
348
gap: 1em;
349
justify-content: center;
350
align-items: center;
351
font-size: 1.5em;
352
font-weight: 600;
353
flex: 1 0 auto;
354
}
355
#pagination > a {
357
text-decoration: none;
358
color: var(--color-accent-1);
359
}
360
#pagination-options > form {
362
align-items: center;
363
display: flex;
364
gap: 1em;
365
}
366
#pagination-options {
368
justify-content: center;
369
align-items: center;
370
gap: 1em;
371
width: 100%;
372
}
373
.thumbnail-list {
375
list-style: none;
376
margin: 0 !important;
377
display: grid;
378
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
379
gap: 16px;
380
}
381
.thumbnail-list > li {
383
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
384
box-shadow: var(--shadow-card);
385
background: var(--color-card);
386
}
387
.thumbnail-list > li > a, .thumbnail-list > li {
389
display: flex;
390
flex-direction: column;
391
justify-content: space-between;
392
height: 100%;
393
}
394
.thumbnail-list > li > .list-more {
396
display: flex;
397
justify-content: space-between;
398
align-items: center;
399
padding: 8px;
400
}
401
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
403
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
404
}
405
.thumbnail-list > li .annotation-zone {
407
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
408
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
409
}
410
.thumbnail-list > li .annotation-zone:hover {
412
position: relative;
413
transform: scale(2);
414
z-index: 1;
415
box-shadow: var(--shadow-textarea-active);
416
}
417
.thumbnail-list > li .list-detail {
419
padding: 8px;
420
display: block;
421
}
422
a.button {
424
text-decoration: none;
425
}
426
dt {
428
font-weight: 600;
429
}
430
dd {
432
margin-left: 40px;
433
}
434
#mobile-navbar {
436
display: none;
437
}
438
@media screen and (max-width: 576px) {
440
#mobile-navbar {
441
display: flex;
442
}
443
#desktop-navbar {
444
display: none;
445
}
446
}
447
#hamburger > nav {
449
display: flex;
450
flex-direction: column;
451
gap: 1em;
452
padding: var(--padding-card);
453
padding-top: var(--padding-card-top);
454
box-shadow: var(--shadow-card);
455
background: var(--color-card);
456
justify-content: space-between;
457
width: clamp(240px, calc(100vw - 56px), 448px);
458
}
459
#hamburger > nav > ul {
461
display: flex;
462
flex-direction: column;
463
gap: 1em;
464
margin: 0;
465
}
466
#hamburger > nav > ul > li {
468
display: flex;
469
gap: var(--gap-label-checkbox);
470
align-items: center;
471
margin: 0;
472
}
473
#hamburger > nav > ul > li > a {
475
text-decoration: none;
476
color: var(--color-card-text);
477
}
478
.star-rating-container {
480
display: flex;
481
flex-direction: row-reverse;
482
font-size: 1.25em;
483
align-items: center;
484
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
485
}
486
.star-rating-container > input {
488
width: 0 !important;
489
height: 0 !important;
490
visibility: hidden;
491
}
492
.star-rating-container > label {
494
cursor: pointer;
495
color: var(--text-softest);
496
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
497
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
498
}
499
.star-rating-container > label:hover,
501
.star-rating-container > label:hover ~ label {
502
color: var(--color-star);
503
filter: drop-shadow(0 0 3px #00000040);
504
}
505
.star-rating-container > input:checked ~ label {
507
color: var(--color-star);
508
}
509
.visually-hidden {
511
position: absolute;
512
width: 1px;
513
height: 1px;
514
box-sizing: content-box;
515
margin: -1px;
516
overflow: hidden;
517
clip-path: inset(50%);
518
border: 0;
519
}
520
.rating-list {
522
display: grid;
523
grid-auto-columns: 1fr;
524
gap: 0.5rem;
525
grid-template-columns: auto;
526
list-style: none;
527
margin: 0 !important;
528
padding: 0;
529
min-width: 50%;
530
}
531
.rating-list > li {
533
grid-column-start: 1;
534
height: 28px;
535
padding: 4px 8px;
536
display: flex;
537
align-items: center;
538
justify-content: space-between;
539
gap: 0.5rch;
540
border-radius: 0 4px 4px 0;
541
margin: 0;
542
}
543
.rating-bar {
545
display: flex;
546
align-items: center;
547
justify-content: flex-start;
548
gap: 0.5rch;
549
font-size: 1.25em;
550
width: 100%;
551
}
552
.rating-bar > .rating-bar-segment {
554
position: relative;
555
width: 1em;
556
height: 1em;
557
clip-path: url(#star-clip);
558
background: var(--text-softest);
559
}
560
.rating-bar > .rating-bar-segment > .rating-bar-filling {
562
background: var(--color-star);
563
height: 100%;
564
position: absolute;
565
top: 0;
566
left: 0;
567
}
568
#picture-view {
570
display: flex;
571
flex-direction: row;
572
gap: 1em;
573
align-items: flex-start;
574
justify-content: center;
575
width: fit-content;
576
margin: 0 auto;
577
}
578
#picture-actions {
580
--width: 256px;
581
position: sticky;
582
top: 0;
583
overflow: auto;
584
max-height: 100vh;
585
height: 100%;
586
background: var(--color-card);
587
padding: 1rem 0;
588
box-shadow: var(--shadow-card);
589
}
590
@media screen and (max-width: 768px) {
592
#picture-view {
593
flex-direction: column;
594
}
595
#picture-actions {
596
--width: 768px;
597
position: static;
598
padding: 1rem;
599
}
600
#picture-actions > ul {
601
width: 100%;
602
list-style: none;
603
margin: 0;
604
padding: 0;
605
}
606
#picture-actions > ul > li {
607
display: inline;
608
}
609
.action-list > li {
610
padding: 0 !important;
611
}
612
}
613
.action-list {
615
list-style: none;
616
margin: 0 !important;
617
padding: 0;
618
}
619
.action-list > li {
621
display: flex;
622
margin: 0;
623
width: 100%;
624
padding: 0.25rem 1rem;
625
}
626
.action-list > li > a {
628
text-decoration: none;
629
color: var(--color-card-text) !important;
630
display: flex;
631
align-items: center;
632
gap: 0.5rch;
633
font-weight: 400;
634
}
635
.action-list > li > details > summary {
637
color: var(--color-card-text) !important;
638
display: flex;
639
align-items: center;
640
gap: 0.5rch;
641
font-weight: 400;
642
}
643
#picture-buttons {
645
padding: 0 1rem;
646
}
647
@media print {
649
#picture-actions, #annotation-view-controls {
650
display: none;
651
}
652
.navbar {
653
display: none;
654
}
655
:root {
656
--color-background: #ffffff;
657
}
658
#annotation-zone, .thumbnail-list {
659
width: 100vw;
660
height: auto;
661
position: relative;
662
left: calc(-1 * (50vw - 50%));
663
}
664
}
665