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