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, select {
41
position: relative;
42
overflow: hidden;
43
}
44
nav {
46
/*view-transition-name: nav;*/
47
}
48
p {
50
color: var(--text-soft);
51
}
52
iconify-icon {
54
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
55
display: inline-block;
56
width: 1em;
57
height: 1em;
58
font-size: 1.5em;
59
}
60
:is(#shape-selector, #shape-options) > button > iconify-icon {
62
font-size: 2rem;
63
}
64
#annotation-zone, .annotation-zone {
66
position: relative;
67
user-select: none;
68
overflow: hidden;
69
}
70
#annotation-image, .annotation-image {
72
user-drag: none;
73
-webkit-user-drag: none;
74
image-rendering: pixelated;
75
}
76
#annotation-zone > svg, .annotation-zone > svg {
78
z-index: 1;
79
position: absolute;
80
top: 0;
81
left: 0;
82
width: 100%;
83
height: 100%;
84
}
85
.annotation-ruler {
87
z-index: 2;
88
position: absolute;
89
top: 0;
90
left: 0;
91
background: var(--color-accent);
92
display: none;
93
}
94
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
96
height: 1px;
97
width: 100%;
98
}
99
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
101
width: 1px;
102
height: 100%;
103
}
104
.shape {
106
stroke: var(--color-accent);
107
fill: var(--color-accent);
108
fill-opacity: 0.1;
109
stroke-width: 2px;
110
vector-effect: non-scaling-stroke;
111
pointer-events: auto;
112
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
113
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
114
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
115
stroke-linecap: square;
116
stroke-linejoin: miter;
117
}
118
.shape-polyline {
120
fill: none;
121
}
122
.shape-point {
124
stroke: var(--color-accent);
125
stroke-width: 2px;
126
fill-opacity: 1;
127
r: 2;
128
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
129
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
130
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
131
}
132
.shape.selected {
134
fill-opacity: 0.2;
135
stroke-width: 4px;
136
filter: drop-shadow(0 0 2px var(--text-soft));
137
}
138
.shape-point.selected {
140
fill-opacity: 1;
141
r: 6;
142
stroke-width: 6px;
143
}
144
.shape-container, .shape-container-viewonly {
146
pointer-events: none;
147
}
148
#annotation-helper-message {
150
min-height: 2lh;
151
}
152
.shape-container-viewonly > .shape, .thumbnail-list > li .shape {
154
fill: var(--color-info);
155
stroke: var(--color-info);
156
fill-opacity: 0;
157
stroke-opacity: 0;
158
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
159
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
160
}
161
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
163
fill: none;
164
}
165
.shape-container-viewonly > .shape-point, .thumbnail-list > li .shape-point {
167
stroke: var(--color-info);
168
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
169
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
170
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
171
}
172
.shape-label {
174
position: absolute;
175
font-weight: 500;
176
color: var(--color-shape-label-text) !important;
177
pointer-events: auto;
178
height: 28px;
179
padding-left: 8px;
180
padding-right: 8px;
181
display: flex;
182
align-items: center;
183
justify-content: center;
184
background: var(--color-shape-label);
185
width: max-content;
186
box-shadow: var(--shadow-button);
187
/* top-left corner is square to point to the shape */
188
border-radius: 0 16px 16px 16px;
189
opacity: 0;
190
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
191
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
192
transform: scale(0);
193
transform-origin: top left;
194
z-index: 3;
195
text-decoration: none;
196
}
197
.shape-label:hover {
199
text-decoration: underline;
200
}
201
/* Only show region parts when checkbox is checked */
203
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
204
opacity: 1;
205
transform: scale(1);
206
}
207
/* Hide points with a bubble */
209
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
210
r: 0;
211
border-width: 0;
212
}
213
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
215
fill-opacity: 0.1;
216
stroke-opacity: 1;
217
}
218
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
220
fill-opacity: 0.2;
221
stroke-opacity: 1;
222
}
223
/* Disabled for now, until there is more navigation that would benefit from transitions */
225
/*
226
@view-transition {
227
navigation: auto;
228
}
229
@keyframes move-out {
231
from {
232
transform: translateX(0%);
233
}
234
to {
235
transform: translateX(-100%);
236
}
237
}
238
@keyframes move-in {
240
from {
241
transform: translateX(100%);
242
}
243
to {
244
transform: translateX(0%);
245
}
246
}
247
@media (prefers-reduced-motion: no-preference) {
249
::view-transition-old(root),
250
::view-transition-new(root) {
251
animation-duration: 0.25s;
252
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
253
}
254
::view-transition-old(root) {
256
animation-name: move-out;
257
}
258
::view-transition-new(root) {
260
animation-name: move-in;
261
}
262
}
263
*/
264
.multi-select, .single-select {
266
display: flex;
267
flex-flow: column nowrap;
268
overflow-y: scroll;
269
box-shadow: var(--shadow-card-inset);
270
padding: 16px;
271
gap: 8px;
272
}
273
.licence-selection, .image-type-selection {
275
display: flex;
276
flex-flow: column nowrap;
277
}
278
.licence-selection-info, .image-type-selection-info {
280
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
281
/* Align with the checkbox above */
282
}
283
.licence-selection-info > p, .image-type-selection-info > p {
285
font-weight: 300;
286
}
287
.licence-logo {
289
width: 128px;
290
float: right;
291
margin-left: 1ch;
292
}
293
.licence-title, .image-type-title {
295
display: flex;
296
justify-content: space-between;
297
width: 100%;
298
}
299
.licence-title > .licence-name, .image-type-title > .image-type-name {
301
font: var(--h5-font);
302
font-weight: 400;
303
}
304
.icon-explainer {
306
display: grid;
307
gap: 4px 8px;
308
grid-template-columns: auto 1fr;
309
align-items: center;
310
}
311
.icon-explainer *:nth-child(even) {
313
font-weight: 300;
314
}
315
.required-asterisk::after {
317
content: "*";
318
color: var(--color-error);
319
}
320
small {
322
/* BIG :D */
323
font-size: 1em;
324
}
325
#pagination {
327
display: flex;
328
gap: 1em;
329
justify-content: center;
330
align-items: center;
331
font-size: 1.5em;
332
font-weight: 600;
333
flex: 1 0 auto;
334
}
335
#pagination > a {
337
text-decoration: none;
338
color: var(--color-accent-1);
339
}
340
#pagination-options > form {
342
align-items: center;
343
display: flex;
344
gap: 1em;
345
}
346
#pagination-options {
348
justify-content: center;
349
align-items: center;
350
gap: 1em;
351
width: 100%;
352
}
353
.thumbnail-list {
355
list-style: none;
356
margin: 0 !important;
357
display: grid;
358
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
359
gap: 16px;
360
}
361
.thumbnail-list > li {
363
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
364
box-shadow: var(--shadow-card);
365
background: var(--color-card);
366
}
367
.thumbnail-list > li > a, .thumbnail-list > li {
369
display: flex;
370
flex-direction: column;
371
justify-content: space-between;
372
height: 100%;
373
}
374
.thumbnail-list > li > .list-more {
376
display: flex;
377
justify-content: space-between;
378
align-items: center;
379
padding: 8px;
380
}
381
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) {
383
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
384
}
385
.thumbnail-list > li .annotation-zone {
387
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
388
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
389
}
390
.thumbnail-list > li .annotation-zone:hover {
392
position: relative;
393
transform: scale(2);
394
z-index: 1;
395
box-shadow: var(--shadow-textarea-active);
396
}
397
.thumbnail-list > li .list-detail {
399
padding: 8px;
400
display: block;
401
}
402
a.button {
404
text-decoration: none;
405
}
406
dt {
408
font-weight: 600;
409
}
410
dd {
412
margin-left: 40px;
413
}
414
#mobile-navbar {
416
display: none;
417
}
418
@media screen and (max-width: 576px) {
420
#mobile-navbar {
421
display: flex;
422
}
423
#desktop-navbar {
424
display: none;
425
}
426
}
427
#hamburger > nav {
429
display: flex;
430
flex-direction: column;
431
gap: 1em;
432
padding: var(--padding-card);
433
padding-top: var(--padding-card-top);
434
box-shadow: var(--shadow-card);
435
background: var(--color-card);
436
justify-content: space-between;
437
width: clamp(240px, calc(100vw - 56px), 448px);
438
}
439
#hamburger > nav > ul {
441
display: flex;
442
flex-direction: column;
443
gap: 1em;
444
margin: 0;
445
}
446
#hamburger > nav > ul > li {
448
display: flex;
449
gap: var(--gap-label-checkbox);
450
align-items: center;
451
margin: 0;
452
}
453
#hamburger > nav > ul > li > a {
455
text-decoration: none;
456
color: var(--color-card-text);
457
}
458
.star-rating-container {
460
display: flex;
461
flex-direction: row-reverse;
462
font-size: 1.25em;
463
align-items: center;
464
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
465
}
466
.star-rating-container > input {
468
width: 0 !important;
469
height: 0 !important;
470
visibility: hidden;
471
}
472
.star-rating-container > label {
474
cursor: pointer;
475
color: var(--text-softest);
476
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
477
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
478
}
479
.star-rating-container > label:hover,
481
.star-rating-container > label:hover ~ label {
482
color: var(--color-star);
483
filter: drop-shadow(0 0 3px #00000040);
484
}
485
.star-rating-container > input:checked ~ label {
487
color: var(--color-star);
488
}
489
.visually-hidden {
491
position: absolute;
492
width: 1px;
493
height: 1px;
494
box-sizing: content-box;
495
margin: -1px;
496
overflow: hidden;
497
clip-path: inset(50%);
498
border: 0;
499
}
500
.rating-list {
502
display: grid;
503
grid-auto-columns: 1fr;
504
gap: 0.5rem;
505
grid-template-columns: auto;
506
list-style: none;
507
margin: 0 !important;
508
padding: 0;
509
min-width: 50%;
510
}
511
.rating-list > li {
513
grid-column-start: 1;
514
height: 28px;
515
padding: 4px 8px;
516
display: flex;
517
align-items: center;
518
justify-content: space-between;
519
gap: 0.5rch;
520
border-radius: 0 4px 4px 0;
521
margin: 0;
522
}
523
.rating-bar {
525
display: flex;
526
align-items: center;
527
justify-content: flex-start;
528
gap: 0.5rch;
529
font-size: 1.25em;
530
width: 100%;
531
}
532
.rating-bar > .rating-bar-segment {
534
position: relative;
535
width: 1em;
536
height: 1em;
537
clip-path: url(#star-clip);
538
background: var(--text-softest);
539
}
540
.rating-bar > .rating-bar-segment > .rating-bar-filling {
542
background: var(--color-star);
543
height: 100%;
544
position: absolute;
545
top: 0;
546
left: 0;
547
}
548
#picture-view {
550
display: flex;
551
flex-direction: row;
552
gap: 1em;
553
align-items: flex-start;
554
justify-content: center;
555
width: fit-content;
556
margin: 0 auto;
557
}
558
#picture-actions {
560
--width: 256px;
561
position: sticky;
562
top: 0;
563
overflow: auto;
564
max-height: 100vh;
565
height: 100%;
566
background: var(--color-card);
567
padding: 1rem 0;
568
box-shadow: var(--shadow-card);
569
}
570
@media screen and (max-width: 768px) {
572
#picture-view {
573
flex-direction: column;
574
}
575
#picture-actions {
576
--width: 768px;
577
position: static;
578
padding: 1rem;
579
}
580
#picture-actions > ul {
581
width: 100%;
582
list-style: none;
583
margin: 0;
584
padding: 0;
585
}
586
#picture-actions > ul > li {
587
display: inline;
588
}
589
#picture-actions > ul > li:not(:last-child)::after {
590
content: " | ";
591
}
592
.action-list > li {
593
padding: 0 !important;
594
}
595
}
596
.action-list {
598
list-style: none;
599
margin: 0 !important;
600
padding: 0;
601
}
602
.action-list > li {
604
display: flex;
605
margin: 0;
606
width: 100%;
607
padding: 0.25rem 1rem;
608
}
609
.action-list > li > a {
611
text-decoration: none;
612
color: var(--color-card-text) !important;
613
display: flex;
614
align-items: center;
615
gap: 0.5rch;
616
font-weight: 400;
617
}
618
.action-list > li > details > summary {
620
color: var(--color-card-text) !important;
621
display: flex;
622
align-items: center;
623
gap: 0.5rch;
624
font-weight: 400;
625
}
626
#picture-buttons {
628
padding: 0 1rem;
629
}
630