Web platform for sharing free image data for ML and research

Homepage: https://datasets.roundabout-host.com

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 • 19.9 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
--reserved-height-top: 0;
20
--color-checkerboard-dark: #CFD8DC;
21
--color-checkerboard-light: #FFFFFF;
22
}
23
24
.ripple-pad {
25
background: #ffffff99;
26
position: absolute;
27
opacity: 1;
28
transform: scale(0);
29
animation: RippleEffect 375ms cubic-bezier(0, 0.55, 0.45, 1) forwards;
30
}
31
32
.button-flat .ripple-pad {
33
background: var(--color-primary-3);
34
}
35
36
@keyframes RippleEffect {
37
to {
38
transform: scale(1);
39
opacity: 0;
40
}
41
}
42
43
button, input, .button:not(.link-button), select, .navbar a, .navrail a {
44
position: relative;
45
overflow: hidden;
46
}
47
48
nav#desktop-navbar {
49
view-transition-name: navbar;
50
}
51
52
nav#mobile-navbar {
53
view-transition-name: navbar-mobile;
54
}
55
56
p {
57
color: var(--text-soft);
58
}
59
60
iconify-icon {
61
/* Material design icons are done in 24px, so we scale them to 1.5 as the default font size is 16px */
62
display: inline-block;
63
width: 1em;
64
height: 1em;
65
font-size: 1.5em;
66
}
67
68
#annotation-zone, .annotation-zone {
69
position: relative;
70
user-select: none;
71
overflow: hidden;
72
transform-origin: 50% 50%;
73
background-image: conic-gradient(var(--color-checkerboard-dark) 90deg, var(--color-checkerboard-light) 0 180deg, var(--color-checkerboard-dark) 0 270deg, var(--color-checkerboard-light) 0 360deg);
74
background-size: 1rem 1rem;
75
background-position: 0 0;
76
}
77
78
#annotation-zoom-container > #annotation-zone {
79
overflow: visible;
80
}
81
82
#annotation-image, .annotation-image {
83
user-drag: none;
84
-webkit-user-drag: none;
85
image-rendering: pixelated;
86
}
87
88
:not(#annotation-zoom-container) > #annotation-zone > svg, .annotation-zone > svg {
89
width: 100%;
90
height: 100%;
91
}
92
93
#annotation-zone > svg, .annotation-zone > svg {
94
z-index: 1;
95
position: absolute;
96
top: 0;
97
left: 0;
98
}
99
100
.annotation-ruler {
101
z-index: 2;
102
position: absolute;
103
top: 0;
104
left: 0;
105
background: var(--color-accent);
106
display: none;
107
}
108
109
#annotation-ruler-horizontal, #annotation-ruler-horizontal-secondary {
110
height: 1px;
111
width: 100%;
112
}
113
114
#annotation-ruler-vertical, #annotation-ruler-vertical-secondary {
115
width: 1px;
116
height: 100%;
117
}
118
119
.shape {
120
stroke: var(--color-accent);
121
fill: var(--color-accent);
122
fill-opacity: 0.1;
123
stroke-width: 2px;
124
--shape-stroke-width: 2px;
125
vector-effect: non-scaling-stroke;
126
pointer-events: auto;
127
transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
128
fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
129
stroke-width 0.25s cubic-bezier(0.61, 1, 0.88, 1);
130
stroke-linecap: square;
131
stroke-linejoin: miter;
132
}
133
134
.shape-polyline {
135
fill: none;
136
}
137
138
.shape-point {
139
stroke: var(--color-accent);
140
stroke-width: 2px;
141
--shape-radius: 2px;
142
fill-opacity: 1;
143
r: 0.001;
144
vector-effect: non-scaling-stroke non-scaling-size;
145
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
146
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
147
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
148
}
149
150
.shape.selected {
151
fill-opacity: 0.2;
152
stroke-width: 4px;
153
--shape-stroke-width: 4px;
154
filter: drop-shadow(0 0 2px var(--text-soft));
155
}
156
157
.shape-point.selected {
158
fill-opacity: 1;
159
r: 0.001;
160
--shape-radius: 0.001;
161
stroke-width: 6px;
162
}
163
164
.shape-container, .shape-container-viewonly {
165
pointer-events: none;
166
}
167
168
.shape-container-viewonly > .shape, :is(.thumbnail-list > li, .thumbnail-card) .shape {
169
fill: var(--color-info);
170
stroke: var(--color-info);
171
fill-opacity: 0;
172
stroke-opacity: 0;
173
transition: fill-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
174
stroke-opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1);
175
}
176
177
.shape-container-viewonly > .shape-polyline, :is(.thumbnail-list > li, .thumbnail-card) .shape-polyline {
178
fill: none;
179
}
180
181
.shape-container-viewonly > .shape-point, :is(.thumbnail-list > li, .thumbnail-card) .shape-point {
182
stroke: var(--color-info);
183
transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
184
stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
185
filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
186
}
187
188
.shape-label {
189
position: absolute;
190
font-weight: 500;
191
color: var(--color-shape-label-text) !important;
192
pointer-events: auto;
193
height: 28px;
194
padding-left: 8px;
195
padding-right: 8px;
196
display: flex;
197
align-items: center;
198
justify-content: center;
199
background: var(--color-shape-label);
200
width: max-content;
201
box-shadow: var(--shadow-button);
202
/* top-left corner is square to point to the shape */
203
border-radius: 0 16px 16px 16px;
204
opacity: 0;
205
transition: opacity 0.25s cubic-bezier(0.61, 1, 0.88, 1),
206
transform 0.375s cubic-bezier(0.16, 1, 0.3, 1);
207
transform: scale(0);
208
transform-origin: top left;
209
z-index: 3;
210
text-decoration: none;
211
}
212
213
.shape-label:hover {
214
text-decoration: underline;
215
}
216
217
/* Only show region parts when checkbox is checked */
218
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-label {
219
opacity: 1;
220
transform: scale(1);
221
}
222
223
/* Hide points with a bubble */
224
#annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
225
r: 0;
226
border-width: 0;
227
}
228
229
#annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
230
fill-opacity: 0.1;
231
stroke-opacity: 1;
232
}
233
234
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) .shape {
235
fill-opacity: 0.2;
236
stroke-opacity: 1;
237
}
238
239
@keyframes move-out {
240
from {
241
transform: scale(1);
242
opacity: 1;
243
}
244
to {
245
transform: scale(0.5);
246
opacity: 0;
247
}
248
}
249
250
@keyframes move-in {
251
from {
252
transform: scale(0.5);
253
opacity: 0;
254
}
255
to {
256
transform: scale(1);
257
opacity: 1;
258
}
259
}
260
261
@keyframes slide-in {
262
from {
263
transform: translateX(-1.5rem);
264
opacity: 0;
265
}
266
to {
267
transform: translateX(0);
268
opacity: 1;
269
}
270
}
271
272
@keyframes slide-out {
273
from {
274
transform: translateX(0);
275
opacity: 1;
276
}
277
to {
278
transform: translateX(-1.5rem);
279
opacity: 0;
280
}
281
}
282
283
@media (prefers-reduced-motion: no-preference) {
284
.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone,
285
html:not(:has(.thumbnail-list > li:is(:hover, :focus, :has(:focus)) > a > .annotation-zone)) #annotation-zone {
286
view-transition-name: thumbnail;
287
}
288
::view-transition-old(root),
289
::view-transition-new(root) {
290
transform-origin: top;
291
animation-duration: 0.5s;
292
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
293
}
294
295
::view-transition-old(root) {
296
animation-name: move-out;
297
}
298
299
::view-transition-new(root) {
300
animation-name: move-in;
301
}
302
303
::view-transition-group(thumbnail) {
304
animation-duration: 0.5s;
305
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
306
}
307
308
#annotation-zone::view-transition-old(thumbnail) {
309
animation-duration: 0s;
310
}
311
312
::view-transition-group(navbar), ::view-transition-group(navbar-mobile) {
313
animation-duration: 0.5s;
314
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
315
}
316
}
317
318
.multi-select, .single-select {
319
display: flex;
320
flex-flow: column nowrap;
321
overflow-y: scroll;
322
box-shadow: var(--shadow-card-inset);
323
padding: 16px;
324
gap: 8px;
325
}
326
327
.licence-selection, .image-type-selection {
328
display: flex;
329
flex-flow: column nowrap;
330
}
331
332
.licence-selection-info, .image-type-selection-info {
333
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
334
/* Align with the checkbox above */
335
}
336
337
.licence-selection-info > p, .image-type-selection-info > p {
338
font-weight: 300;
339
}
340
341
.licence-logo {
342
width: 128px;
343
float: right;
344
margin-left: 1ch;
345
}
346
347
.licence-title, .image-type-title {
348
display: flex;
349
justify-content: space-between;
350
width: 100%;
351
}
352
353
.licence-title > .licence-name, .image-type-title > .image-type-name {
354
font: var(--h5-font);
355
font-weight: 400;
356
}
357
358
.icon-explainer {
359
display: grid;
360
gap: 4px 8px;
361
grid-template-columns: auto 1fr;
362
align-items: center;
363
}
364
365
.icon-explainer *:nth-child(even) {
366
font-weight: 300;
367
}
368
369
.required-asterisk::after {
370
content: "*";
371
color: var(--color-error);
372
}
373
374
small {
375
/* BIG :D */
376
font-size: 1em;
377
}
378
379
#pagination {
380
display: flex;
381
gap: 1em;
382
justify-content: center;
383
align-items: center;
384
font-size: 1.5em;
385
font-weight: 600;
386
flex: 1 0 auto;
387
}
388
389
#pagination > a {
390
text-decoration: none;
391
color: var(--color-accent-1);
392
}
393
394
#pagination-options > form {
395
align-items: center;
396
display: flex;
397
gap: 1em;
398
}
399
400
#pagination-options {
401
justify-content: center;
402
align-items: center;
403
gap: 1em;
404
width: 100%;
405
}
406
407
.thumbnail-list {
408
list-style: none;
409
margin: 0 !important;
410
display: grid;
411
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
412
gap: 16px;
413
}
414
415
.thumbnail-list > li, .thumbnail-card {
416
transition: box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
417
box-shadow: var(--shadow-card);
418
background: var(--color-card);
419
}
420
421
:is(.thumbnail-list > li, .thumbnail-card) > a, :is(.thumbnail-list > li, .thumbnail-card) {
422
display: flex;
423
flex-direction: column;
424
justify-content: space-between;
425
height: 100%;
426
}
427
428
:is(.thumbnail-list > li, .thumbnail-card) > .list-more {
429
display: flex;
430
flex-flow: row wrap;
431
justify-content: space-between;
432
align-items: center;
433
padding: 8px;
434
}
435
436
:is(.thumbnail-list > li, .thumbnail-card):is(:hover, :focus, :has(:focus)) {
437
box-shadow: var(--shadow-card), 0 4px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
438
}
439
440
:is(.thumbnail-list > li, .thumbnail-card) .annotation-zone {
441
transition: transform 0.25s cubic-bezier(0.61, 1, 0.88, 1),
442
box-shadow 0.25s cubic-bezier(0.61, 1, 0.88, 1);
443
}
444
445
:is(.thumbnail-list > li, .thumbnail-card):not(.thumbnail-card-no-zoom) .annotation-zone:hover {
446
position: relative;
447
transform: scale(2);
448
z-index: 1;
449
box-shadow: var(--shadow-textarea-active);
450
}
451
452
:is(.thumbnail-list > li, .thumbnail-card) .list-detail {
453
padding: 8px;
454
display: block;
455
}
456
457
a.button {
458
text-decoration: none;
459
}
460
461
dt {
462
font-weight: 600;
463
}
464
465
dd {
466
margin-left: 40px;
467
}
468
469
#mobile-navbar, #mobile-navbar-spacer {
470
display: none;
471
}
472
473
@media screen and (max-width: 896px) {
474
#mobile-navbar {
475
display: flex;
476
}
477
header {
478
position: fixed;
479
top: 0;
480
left: 0;
481
width: 100%;
482
z-index: 3;
483
}
484
#mobile-navbar-spacer {
485
display: block;
486
height: var(--height-navbar);
487
}
488
#desktop-navbar {
489
display: none;
490
}
491
:root {
492
--reserved-height-top: var(--height-navbar);
493
}
494
}
495
496
#hamburger > nav {
497
display: flex;
498
flex-direction: column;
499
gap: 1em;
500
padding: var(--padding-card);
501
padding-top: var(--padding-card-top);
502
box-shadow: var(--shadow-card);
503
background: var(--color-card);
504
justify-content: space-between;
505
width: clamp(240px, calc(100vw - 56px), 448px);
506
}
507
508
#hamburger > nav > ul {
509
display: flex;
510
flex-direction: column;
511
gap: 1em;
512
margin: 0;
513
}
514
515
#hamburger > nav > ul > li {
516
display: flex;
517
gap: var(--gap-label-checkbox);
518
align-items: center;
519
margin: 0;
520
}
521
522
#hamburger > nav > ul > li > a {
523
display: contents;
524
text-decoration: none;
525
color: var(--color-card-text);
526
}
527
528
.star-rating-container {
529
display: flex;
530
flex-direction: row-reverse;
531
font-size: 1.25em;
532
align-items: center;
533
justify-content: flex-end; /* In this case, it means LEFT, not right, because of the row-reverse */
534
}
535
536
.star-rating-container > input {
537
width: 0 !important;
538
height: 0 !important;
539
visibility: hidden;
540
}
541
542
.star-rating-container > label {
543
cursor: pointer;
544
color: var(--text-softest);
545
transition: color 0.25s cubic-bezier(0.37, 0, 0.63, 1),
546
filter 0.25s cubic-bezier(0.37, 0, 0.63, 1);
547
}
548
549
.star-rating-container > label:hover,
550
.star-rating-container > label:hover ~ label {
551
color: var(--color-star);
552
filter: drop-shadow(0 0 3px #00000040);
553
}
554
555
.star-rating-container > input:checked ~ label {
556
color: var(--color-star);
557
}
558
559
.visually-hidden {
560
position: absolute;
561
width: 1px;
562
height: 1px;
563
box-sizing: content-box;
564
margin: -1px;
565
overflow: hidden;
566
clip-path: inset(50%);
567
border: 0;
568
}
569
570
.rating-list {
571
display: grid;
572
grid-auto-columns: 1fr;
573
gap: 0.5rem;
574
grid-template-columns: auto;
575
list-style: none;
576
margin: 0 !important;
577
padding: 0;
578
min-width: 50%;
579
}
580
581
.rating-list > li {
582
grid-column-start: 1;
583
height: 28px;
584
padding: 4px 8px;
585
display: flex;
586
align-items: center;
587
justify-content: space-between;
588
gap: 0.5rch;
589
border-radius: 0 4px 4px 0;
590
margin: 0;
591
}
592
593
@media screen and (max-width: 768px) {
594
.rating-box {
595
flex-direction: column;
596
margin: 1rem;
597
}
598
}
599
600
.rating-bar {
601
display: flex;
602
align-items: center;
603
justify-content: flex-start;
604
gap: 0.5rch;
605
font-size: 1.25em;
606
width: 100%;
607
}
608
609
.rating-bar > .rating-bar-segment {
610
position: relative;
611
width: 1em;
612
height: 1em;
613
clip-path: url(#star-clip);
614
background: var(--text-softest);
615
}
616
617
.rating-bar > .rating-bar-segment > .rating-bar-filling {
618
background: var(--color-star);
619
height: 100%;
620
position: absolute;
621
top: 0;
622
left: 0;
623
}
624
625
#picture-view {
626
display: flex;
627
flex-direction: row;
628
gap: 1em;
629
align-items: flex-start;
630
justify-content: center;
631
width: fit-content;
632
margin: 0 auto;
633
}
634
635
#picture-view > x-frame {
636
flex: 1 1 var(--width);
637
margin: 0;
638
}
639
640
#picture-actions {
641
--width: 256px;
642
position: sticky;
643
top: var(--reserved-height-top);
644
overflow: auto;
645
max-height: 100vh;
646
height: 100%;
647
background: var(--color-card);
648
padding: 1rem 0;
649
box-shadow: var(--shadow-card);
650
}
651
652
@media screen and (max-width: 768px) {
653
#picture-view {
654
flex-direction: column;
655
}
656
#picture-view > x-frame {
657
flex: 1 1 auto;
658
margin: 0;
659
}
660
#picture-actions {
661
--width: 768px;
662
position: static;
663
padding: 1rem;
664
}
665
#picture-actions > ul {
666
width: 100%;
667
list-style: none;
668
margin: 0;
669
padding: 0;
670
}
671
#picture-actions > ul > li {
672
display: inline;
673
}
674
.action-list > li {
675
padding: 0 !important;
676
}
677
}
678
679
.action-list {
680
list-style: none;
681
margin: 0 !important;
682
padding: 0;
683
}
684
685
.action-list > li {
686
display: flex;
687
margin: 0;
688
width: 100%;
689
padding: 0.25rem 1rem;
690
}
691
692
.action-list > li > a {
693
text-decoration: none;
694
color: var(--color-card-text) !important;
695
display: flex;
696
align-items: center;
697
gap: 0.5rch;
698
font-weight: 400;
699
}
700
701
.action-list > li > details > summary {
702
color: var(--color-card-text) !important;
703
display: flex;
704
align-items: center;
705
gap: 0.5rch;
706
font-weight: 400;
707
}
708
709
#picture-buttons {
710
padding: 0 1rem;
711
}
712
713
@media print {
714
#picture-actions, #annotation-view-controls {
715
display: none;
716
}
717
.navbar {
718
display: none;
719
}
720
:root {
721
--color-background: #ffffff;
722
}
723
#annotation-zone, .thumbnail-list {
724
width: 100vw;
725
height: auto;
726
position: relative;
727
left: calc(-1 * (50vw - 50%));
728
}
729
}
730
731
.navbar > ul {
732
max-width: 100%;
733
}
734
735
#desktop-navbar > ul:first-child { /* list containing title */
736
flex: 0 1 auto;
737
min-width: 0;
738
}
739
740
#desktop-navbar > ul:last-child { /* list containing navigation */
741
flex: 1 0 auto;
742
justify-content: end;
743
}
744
745
#mobile-navbar-title, #desktop-navbar-title {
746
font: var(--h5-font);
747
font-weight: 700;
748
white-space: nowrap;
749
overflow: hidden;
750
text-overflow: ellipsis;
751
flex: 0 1 auto;
752
min-width: 0;
753
}
754
755
nav .button-flat {
756
--color-flat-button-hover: transparent;
757
--color-flat-button-active: transparent;
758
}
759
760
nav .button-flat .ripple-pad {
761
background: #ffffff99;
762
}
763
764
.warning {
765
background: var(--color-alert);
766
color: var(--color-alert-text);
767
padding: 1rem;
768
margin: 1rem 0;
769
border-radius: var(--radius-card);
770
box-shadow: var(--shadow-card);
771
--color-link-text: #000000;
772
--color-link-hover-text: #000000;
773
--color-link-visited-text: #000000;
774
--color-link-visited-hover-text: #000000;
775
--color-link-active-text: #000000;
776
}
777
778
.warning h2 {
779
font: var(--h3-font);
780
}
781
782
#annotation-zone {
783
box-shadow: var(--shadow-card);
784
}
785
786
#hamburger-site-name {
787
font: var(--h4-font);
788
text-transform: uppercase;
789
color: var(--color-accent);
790
}
791
792
#object-types {
793
z-index: 3;
794
background: var(--color-callout);
795
color: var(--color-callout-text);
796
--color-background-text: var(--color-callout-text);
797
--color-label-text: var(--color-callout-text);
798
box-shadow: var(--shadow-card);
799
border-radius: var(--radius-input);
800
position: absolute;
801
display: none;
802
overflow: auto;
803
}
804
805
#object-types-content {
806
padding: 1rem;
807
}
808
809
#annotation-controls {
810
display: flex;
811
justify-content: space-between;
812
gap: 1rem;
813
padding: 0.5rem;
814
align-items: stretch;
815
}
816
817
#annotation-controls > x-buttonbox {
818
align-items: center;
819
}
820
821
#annotation-controls > x-buttonbox button:has(iconify-icon) {
822
aspect-ratio: 1;
823
}
824
825
#annotation-controls > x-buttonbox button > iconify-icon {
826
font-size: 1.5rem;
827
}
828
829
#annotation-helper-message {
830
padding: 0.75rem;
831
text-align: center;
832
flex: 0 0 auto;
833
}
834
835
#annotation-zoom-container {
836
flex: 1 1 auto;
837
overflow: hidden;
838
align-self: stretch;
839
width: 100%;
840
display: flex;
841
justify-content: center;
842
align-items: center;
843
touch-action: none;
844
}
845
846
#annotation-zoom-container > #annotation-zone {
847
transform: scale(1);
848
transition: transform 0.125s cubic-bezier(0.28, 0.5, 0.31, 0.92);
849
max-width: 100%;
850
max-height: 100% !important;
851
box-shadow: none;
852
}
853
854
#annotation-zoom-container > #annotation-zone > #annotation-image {
855
object-fit: contain;
856
width: 100%;
857
height: 100%;
858
}
859
860
#annotation-main-area {
861
display: flex;
862
flex-direction: column;
863
flex: 1 1 auto;
864
overflow: auto;
865
width: 100%;
866
}
867
868
body.fixed-content-area {
869
max-width: 100vw;
870
max-height: 100vh;
871
display: flex;
872
flex-direction: column;
873
}
874
875
body.fixed-content-area > main {
876
flex: 1 1 auto;
877
overflow: auto;
878
display: flex;
879
flex-direction: column;
880
}
881
882
#annotation-zoom-controls {
883
display: flex;
884
gap: 0.5rem;
885
justify-content: center;
886
align-items: center;
887
}
888
889
#zoom-indicator {
890
width: 7ch;
891
text-align: right;
892
}
893
894
#annotation-zoom-container {
895
cursor: grab;
896
}
897
898
#object-types {
899
cursor: auto;
900
}
901
902
.thumbnail-list-scroll {
903
display: flex;
904
flex-direction: row;
905
overflow-x: auto;
906
overflow-y: hidden;
907
align-items: stretch;
908
padding: 16px;
909
}
910
911
.thumbnail-list-scroll > li {
912
flex: 0 0 192px;
913
}
914
915
.thumbnail-list-scroll > li > a .annotation-zone:hover {
916
transform: none;
917
}
918
919
summary {
920
cursor: pointer;
921
}
922
923
button, .button, input, select, textarea {
924
box-sizing: border-box;
925
}
926
927
.button-danger {
928
--color-button: var(--color-error);
929
--color-button-hover: var(--color-error);
930
--color-button-active: var(--color-error);
931
}
932
933
input[type="file"] {
934
padding: 0.5rem;
935
display: flex;
936
font-style: italic;
937
}
938
939
.thumbnail-card-small > a > .annotation-zone {
940
flex: 0 0 auto;
941
max-width: 384px;
942
}
943
944
.thumbnail-card-small, .thumbnail-card-small > a {
945
align-items: center;
946
}
947
948
.thumbnail-card-small {
949
margin: auto;
950
}
951