Web platform for sharing free data for ML and research

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 style.css

View raw Download
text/plain • 13.3 kiB
ASCII text
        
            
1
@import "/static/efficient-ui/MASTER.css";
2
3
: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
21
.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
29
.button-flat .ripple-pad {
30
background: var(--color-primary-3);
31
}
32
33
@keyframes RippleEffect {
34
to {
35
transform: scale(1);
36
opacity: 0;
37
}
38
}
39
40
button, input, .button:not(.link-button), select, .navbar a, .navrail a {
41
position: relative;
42
overflow: hidden;
43
}
44
45
nav {
46
/*view-transition-name: nav;*/
47
}
48
49
p {
50
color: var(--text-soft);
51
}
52
53
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
61
:is(#shape-selector, #shape-options) > button > iconify-icon {
62
font-size: 2rem;
63
}
64
65
#annotation-zone, .annotation-zone {
66
position: relative;
67
user-select: none;
68
overflow: hidden;
69
}
70
71
#annotation-image, .annotation-image {
72
user-drag: none;
73
-webkit-user-drag: none;
74
image-rendering: pixelated;
75
}
76
77
#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
86
.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
95
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
96
height: 1px;
97
width: 100%;
98
}
99
100
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
101
width: 1px;
102
height: 100%;
103
}
104
105
.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
119
.shape-polyline {
120
fill: none;
121
}
122
123
.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
133
.shape.selected {
134
fill-opacity: 0.2;
135
stroke-width: 4px;
136
filter: drop-shadow(0 0 2px var(--text-soft));
137
}
138
139
.shape-point.selected {
140
fill-opacity: 1;
141
r: 6;
142
stroke-width: 6px;
143
}
144
145
.shape-container, .shape-container-viewonly {
146
pointer-events: none;
147
}
148
149
#annotation-helper-message {
150
min-height: 2lh;
151
}
152
153
.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
162
.shape-container-viewonly > .shape-polyline, .thumbnail-list > li .shape-polyline {
163
fill: none;
164
}
165
166
.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
173
.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
198
.shape-label:hover {
199
text-decoration: underline;
200
}
201
202
/* 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
208
/* 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
214
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
215
fill-opacity: 0.1;
216
stroke-opacity: 1;
217
}
218
219
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
220
fill-opacity: 0.2;
221
stroke-opacity: 1;
222
}
223
224
/* Disabled for now, until there is more navigation that would benefit from transitions */
225
/*
226
@view-transition {
227
navigation: auto;
228
}
229
230
@keyframes move-out {
231
from {
232
transform: translateX(0%);
233
}
234
to {
235
transform: translateX(-100%);
236
}
237
}
238
239
@keyframes move-in {
240
from {
241
transform: translateX(100%);
242
}
243
to {
244
transform: translateX(0%);
245
}
246
}
247
248
@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
255
::view-transition-old(root) {
256
animation-name: move-out;
257
}
258
259
::view-transition-new(root) {
260
animation-name: move-in;
261
}
262
}
263
*/
264
265
.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
274
.licence-selection, .image-type-selection {
275
display: flex;
276
flex-flow: column nowrap;
277
}
278
279
.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
284
.licence-selection-info > p, .image-type-selection-info > p {
285
font-weight: 300;
286
}
287
288
.licence-logo {
289
width: 128px;
290
float: right;
291
margin-left: 1ch;
292
}
293
294
.licence-title, .image-type-title {
295
display: flex;
296
justify-content: space-between;
297
width: 100%;
298
}
299
300
.licence-title > .licence-name, .image-type-title > .image-type-name {
301
font: var(--h5-font);
302
font-weight: 400;
303
}
304
305
.icon-explainer {
306
display: grid;
307
gap: 4px 8px;
308
grid-template-columns: auto 1fr;
309
align-items: center;
310
}
311
312
.icon-explainer *:nth-child(even) {
313
font-weight: 300;
314
}
315
316
.required-asterisk::after {
317
content: "*";
318
color: var(--color-error);
319
}
320
321
small {
322
/* BIG :D */
323
font-size: 1em;
324
}
325
326
#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
336
#pagination > a {
337
text-decoration: none;
338
color: var(--color-accent-1);
339
}
340
341
#pagination-options > form {
342
align-items: center;
343
display: flex;
344
gap: 1em;
345
}
346
347
#pagination-options {
348
justify-content: center;
349
align-items: center;
350
gap: 1em;
351
width: 100%;
352
}
353
354
.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
362
.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
368
.thumbnail-list > li > a, .thumbnail-list > li {
369
display: flex;
370
flex-direction: column;
371
justify-content: space-between;
372
height: 100%;
373
}
374
375
.thumbnail-list > li > .list-more {
376
display: flex;
377
justify-content: space-between;
378
align-items: center;
379
padding: 8px;
380
}
381
382
.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
386
.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
391
.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
398
.thumbnail-list > li .list-detail {
399
padding: 8px;
400
display: block;
401
}
402
403
a.button {
404
text-decoration: none;
405
}
406
407
dt {
408
font-weight: 600;
409
}
410
411
dd {
412
margin-left: 40px;
413
}
414
415
#mobile-navbar {
416
display: none;
417
}
418
419
@media screen and (max-width: 576px) {
420
#mobile-navbar {
421
display: flex;
422
}
423
#desktop-navbar {
424
display: none;
425
}
426
}
427
428
#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
440
#hamburger > nav > ul {
441
display: flex;
442
flex-direction: column;
443
gap: 1em;
444
margin: 0;
445
}
446
447
#hamburger > nav > ul > li {
448
display: flex;
449
gap: var(--gap-label-checkbox);
450
align-items: center;
451
margin: 0;
452
}
453
454
#hamburger > nav > ul > li > a {
455
text-decoration: none;
456
color: var(--color-card-text);
457
}
458
459
.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
467
.star-rating-container > input {
468
width: 0 !important;
469
height: 0 !important;
470
visibility: hidden;
471
}
472
473
.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
480
.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
486
.star-rating-container > input:checked ~ label {
487
color: var(--color-star);
488
}
489
490
.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
501
.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
512
.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
524
.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
533
.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
541
.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
549
#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
559
#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
571
@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
.action-list > li {
590
padding: 0 !important;
591
}
592
}
593
594
.action-list {
595
list-style: none;
596
margin: 0 !important;
597
padding: 0;
598
}
599
600
.action-list > li {
601
display: flex;
602
margin: 0;
603
width: 100%;
604
padding: 0.25rem 1rem;
605
}
606
607
.action-list > li > a {
608
text-decoration: none;
609
color: var(--color-card-text) !important;
610
display: flex;
611
align-items: center;
612
gap: 0.5rch;
613
font-weight: 400;
614
}
615
616
.action-list > li > details > summary {
617
color: var(--color-card-text) !important;
618
display: flex;
619
align-items: center;
620
gap: 0.5rch;
621
font-weight: 400;
622
}
623
624
#picture-buttons {
625
padding: 0 1rem;
626
}
627
628
@media print {
629
#picture-actions, #annotation-view-controls {
630
display: none;
631
}
632
.navbar {
633
display: none;
634
}
635
:root {
636
--color-background: #ffffff;
637
}
638
#annotation-zone, .thumbnail-list {
639
width: 100vw;
640
height: auto;
641
position: relative;
642
left: calc(-1 * (50vw - 50%));
643
}
644
}
645