style.css
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