oppi.li
1.ui .field .dropzone {
2 border: 2px dashed var(--color-secondary);
3 background: none;
4 box-shadow: none;
5 padding: 0;
6 border-radius: var(--border-radius-medium);
7 min-height: 0;
8}
9
10.ui .field .dropzone .dz-message {
11 margin: 10px 0;
12}
13
14.dropzone .dz-button {
15 color: var(--color-text-light) !important;
16}
17
18.dropzone:hover .dz-button {
19 color: var(--color-text) !important;
20}
21
22.dropzone .dz-error-message {
23 top: 145px !important;
24}
25
26.dropzone .dz-image {
27 display: flex !important;
28 align-items: center !important;
29 justify-content: center !important;
30 border-radius: 0 !important;
31}
32
33.dropzone .dz-image img {
34 max-width: 100% !important;
35 max-height: 100% !important;
36 object-fit: contain !important;
37}
38
39.dropzone .dz-preview.dz-image-preview,
40.dropzone-attachments .thumbnails img {
41 background: transparent !important;
42}
43
44.dropzone-attachments .thumbnails img {
45 height: 120px !important;
46 width: 120px !important;
47 object-fit: contain !important;
48 margin-bottom: 0 !important;
49}
50
51.dropzone .dz-preview:hover .dz-image img {
52 filter: opacity(0.5) !important;
53}
54
55.ui .field .dropzone .dz-preview .dz-progress {
56 /* by default the progress-bar is vertically centered (top: 50%), it's better to put it after the "details (size, filename)",
57 then the layout from top to bottom is: size, filename, progress */
58 top: 7em;
59}