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: 100%;
632
margin: 0;
633
}
634
#picture-view > x-frame {
636
flex: 0 1 var(--width);
637
max-width: unset;
638
margin: 0;
639
}
640
#picture-actions {
642
--width: 256px;
643
position: sticky;
644
top: var(--reserved-height-top);
645
overflow: auto;
646
max-height: 100vh;
647
height: 100%;
648
background: var(--color-card);
649
padding: 1rem 0;
650
box-shadow: var(--shadow-card);
651
}
652
@media screen and (max-width: 768px) {
654
#picture-view {
655
flex-direction: column;
656
}
657
#picture-view > x-frame {
658
flex: 1 1 auto;
659
margin: 0;
660
}
661
#picture-actions {
662
--width: 768px;
663
position: static;
664
padding: 1rem;
665
}
666
#picture-actions > ul {
667
width: 100%;
668
list-style: none;
669
margin: 0;
670
padding: 0;
671
}
672
#picture-actions > ul > li {
673
display: inline;
674
}
675
.action-list > li {
676
padding: 0 !important;
677
}
678
#picture-view > x-frame > hgroup, #annotation-view-controls, #picture-details {
679
margin-left: 1rem;
680
margin-right: 1rem;
681
}
682
.mobile-padding {
683
padding-left: 1rem;
684
}
685
}
686
#annotation-view-controls {
688
display: flex;
689
flex-flow: row wrap;
690
gap: 1rem;
691
margin-top: 1rem;
692
margin-bottom: 1rem;
693
}
694
#picture-view > x-frame > hgroup {
696
margin-bottom: 1rem;
697
}
698
.action-list {
700
list-style: none;
701
margin: 0 !important;
702
padding: 0;
703
}
704
.action-list > li {
706
display: flex;
707
margin: 0;
708
width: 100%;
709
padding: 0.25rem 1rem;
710
}
711
.action-list > li > a {
713
text-decoration: none;
714
color: var(--color-card-text) !important;
715
display: flex;
716
align-items: center;
717
gap: 0.5rch;
718
font-weight: 400;
719
}
720
.action-list > li > details > summary {
722
color: var(--color-card-text) !important;
723
display: flex;
724
align-items: center;
725
gap: 0.5rch;
726
font-weight: 400;
727
}
728
#picture-buttons {
730
padding: 0 1rem;
731
}
732
@media print {
734
#picture-actions, #annotation-view-controls {
735
display: none;
736
}
737
.navbar {
738
display: none;
739
}
740
:root {
741
--color-background: #ffffff;
742
}
743
#annotation-zone, .thumbnail-list {
744
width: 100vw;
745
height: auto;
746
position: relative;
747
left: calc(-1 * (50vw - 50%));
748
}
749
}
750
.navbar > ul {
752
max-width: 100%;
753
}
754
#desktop-navbar > ul:first-child { /* list containing title */
756
flex: 0 1 auto;
757
min-width: 0;
758
}
759
#desktop-navbar > ul:last-child { /* list containing navigation */
761
flex: 1 0 auto;
762
justify-content: end;
763
}
764
#mobile-navbar-title, #desktop-navbar-title {
766
font: var(--h5-font);
767
font-weight: 700;
768
white-space: nowrap;
769
overflow: hidden;
770
text-overflow: ellipsis;
771
flex: 0 1 auto;
772
min-width: 0;
773
}
774
nav .button-flat {
776
--color-flat-button-hover: transparent;
777
--color-flat-button-active: transparent;
778
}
779
nav .button-flat .ripple-pad {
781
background: #ffffff99;
782
}
783
.warning {
785
background: var(--color-alert);
786
color: var(--color-alert-text);
787
padding: 1rem;
788
margin: 1rem 0;
789
border-radius: var(--radius-card);
790
box-shadow: var(--shadow-card);
791
--color-link-text: #000000;
792
--color-link-hover-text: #000000;
793
--color-link-visited-text: #000000;
794
--color-link-visited-hover-text: #000000;
795
--color-link-active-text: #000000;
796
}
797
.warning h2 {
799
font: var(--h3-font);
800
}
801
#annotation-zone {
803
box-shadow: var(--shadow-card);
804
}
805
#hamburger-site-name {
807
font: var(--h4-font);
808
text-transform: uppercase;
809
color: var(--color-accent);
810
}
811
#object-types {
813
z-index: 3;
814
background: var(--color-callout);
815
color: var(--color-callout-text);
816
--color-background-text: var(--color-callout-text);
817
--color-label-text: var(--color-callout-text);
818
box-shadow: var(--shadow-card);
819
border-radius: var(--radius-input);
820
position: absolute;
821
display: none;
822
overflow: auto;
823
}
824
#object-types-content {
826
padding: 1rem;
827
}
828
#annotation-controls {
830
display: flex;
831
justify-content: space-between;
832
gap: 1rem;
833
padding: 0.5rem;
834
align-items: stretch;
835
}
836
#annotation-controls > x-buttonbox {
838
align-items: center;
839
}
840
#annotation-controls > x-buttonbox button:has(iconify-icon) {
842
aspect-ratio: 1;
843
}
844
#annotation-controls > x-buttonbox button > iconify-icon {
846
font-size: 1.5rem;
847
}
848
#annotation-helper-message {
850
padding: 0.75rem;
851
text-align: center;
852
flex: 0 0 auto;
853
}
854
#annotation-zoom-container {
856
flex: 1 1 auto;
857
overflow: hidden;
858
align-self: stretch;
859
width: 100%;
860
display: flex;
861
justify-content: center;
862
align-items: center;
863
touch-action: none;
864
}
865
#annotation-zoom-container > #annotation-zone {
867
transform: scale(1);
868
transition: transform 0.125s cubic-bezier(0.28, 0.5, 0.31, 0.92);
869
max-width: 100%;
870
max-height: 100% !important;
871
box-shadow: none;
872
}
873
#annotation-zoom-container > #annotation-zone > #annotation-image {
875
object-fit: contain;
876
width: 100%;
877
height: 100%;
878
}
879
#annotation-main-area {
881
display: flex;
882
flex-direction: column;
883
flex: 1 1 auto;
884
overflow: auto;
885
width: 100%;
886
}
887
body.fixed-content-area {
889
max-width: 100vw;
890
max-height: 100vh;
891
display: flex;
892
flex-direction: column;
893
}
894
body.fixed-content-area > main {
896
flex: 1 1 auto;
897
overflow: auto;
898
display: flex;
899
flex-direction: column;
900
}
901
#annotation-zoom-controls {
903
display: flex;
904
gap: 0.5rem;
905
justify-content: center;
906
align-items: center;
907
}
908
#zoom-indicator {
910
width: 7ch;
911
text-align: right;
912
}
913
#annotation-zoom-container {
915
cursor: grab;
916
}
917
#object-types {
919
cursor: auto;
920
}
921
.thumbnail-list-scroll {
923
display: flex;
924
flex-direction: row;
925
overflow-x: auto;
926
overflow-y: hidden;
927
align-items: stretch;
928
padding: 16px;
929
}
930
.thumbnail-list-scroll > li {
932
flex: 0 0 192px;
933
max-width: 192px;
934
}
935
#picture-actions {
937
flex-shrink: 0;
938
}
939
.thumbnail-list-scroll > li > a .annotation-zone:hover {
941
transform: none;
942
}
943
summary {
945
cursor: pointer;
946
}
947
button, .button, input, select, textarea {
949
box-sizing: border-box;
950
}
951
.button-danger {
953
--color-button: var(--color-error);
954
--color-button-hover: var(--color-error);
955
--color-button-active: var(--color-error);
956
}
957
input[type="file"] {
959
padding: 0.5rem;
960
display: flex;
961
font-style: italic;
962
}
963
.thumbnail-card-small > a > .annotation-zone {
965
flex: 0 0 auto;
966
max-width: 384px;
967
}
968
.thumbnail-card-small, .thumbnail-card-small > a {
970
align-items: center;
971
}
972
.thumbnail-card-small {
974
margin: auto;
975
}
976
hr {
978
border: 0.25px solid var(--color-divider);
979
width: 100%;
980
}
981
body {
983
display: flex;
984
flex-direction: column;
985
}
986