12
12
</button >
13
13
14
14
<label :for =" inputId"
15
- class =" af-uploader flex flex-col px-3 items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer dark:hover:bg-gray-800 hover:bg-gray-100 dark:hover:border-gray-500 dark:hover:bg-gray-600"
15
+ class =" af-uploader flex flex-col px-3 items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer dark:hover:! bg-darkDropzoneBackgroundHover dark:hover:bg- gray-800 hover:! bg-lightDropzoneBackgroundHover hover:bg- gray-100 dark:hover:! border-darkDropzoneBorderHover dark:hover:border- gray-500 dark:hover:! bg-darkDropzoneBackgroundHover dark:hover:bg- gray-600 hover:!border-lightDropzoneBorderHover "
16
16
@dragover.prevent =" () => dragging = true"
17
17
@dragleave.prevent =" () => dragging = false"
18
18
@drop.prevent =" onFileChange"
19
19
:class =" {
20
- 'border-blue-600 dark:border-blue-400': dragging,
21
- 'border-gray-300 dark:border-gray-600': !dragging,
22
- 'bg-blue-50 dark:bg-blue-800': dragging,
23
- 'bg-gray-50 dark:bg-gray-800': !dragging,
20
+ 'border-blue-600 dark:border-blue-400 !border-lightDropzoneBorderDragging dark:!border-darkDropzoneBorderDragging ': dragging,
21
+ 'border-gray-300 dark:border-gray-600 !border-lightDropzoneBorder dark:!border-darkDropzoneBorder ': !dragging,
22
+ 'bg-blue-50 dark:bg-blue-800 !bg-lightDropzoneBackgroundDragging dark:!bg-darkDropzoneBackgroundDragging ': dragging,
23
+ 'bg-gray-50 dark:bg-gray-800 !bg-lightDropzoneBackground dark:!bg-darkDropzoneBackground ': !dragging,
24
24
}"
25
25
>
26
26
<div class =" flex flex-col items-center justify-center pt-5 pb-6" >
27
27
<img v-if =" imgPreview" :src =" imgPreview" class =" w-100 mt-4 rounded-lg h-40 object-contain" />
28
28
29
- <svg v-else class =" w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden =" true" xmlns =" http://www.w3.org/2000/svg" fill =" none" viewBox =" 0 0 20 16" >
29
+ <svg v-else class =" w-8 h-8 mb-4 text-gray-500 dark:text-gray-400 !text-lightDropzoneText dark:!text-darkDropzoneText " aria-hidden =" true" xmlns =" http://www.w3.org/2000/svg" fill =" none" viewBox =" 0 0 20 16" >
30
30
<path stroke =" currentColor" stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2" />
31
31
</svg >
32
32
33
33
<template v-if =" ! uploaded " >
34
- <p class =" mb-2 text-sm text-gray-500 dark:text-gray-400" ><span class =" font-semibold" >{{ $t('Click to upload') }}</span > {{ $t('or drag and drop') }}</p >
35
- <p class =" text-xs text-gray-500 dark:text-gray-400" >
34
+ <p class =" mb-2 text-sm text-gray-500 dark:text-gray-400 !text-lightDropzoneText dark:!text-darkDropzoneText " ><span class =" font-semibold" >{{ $t('Click to upload') }}</span > {{ $t('or drag and drop') }}</p >
35
+ <p class =" text-xs text-gray-500 dark:text-gray-400 !text-lightDropzoneText dark:!text-darkDropzoneText " >
36
36
{{ allowedExtensionsLabel }} {{ meta.maxFileSize ? $t(`(up to {size})`, { size: humanifySize(meta.maxFileSize) }) : '' }}
37
37
</p >
38
38
</template >
51
51
</svg >
52
52
<p class =" ml-2 text-sm text-green-600 dark:text-green-400 flex items-center" >
53
53
{{ $t('File uploaded') }}
54
- <span class =" text-xs text-gray-500 dark:text-gray-400" >{{ humanifySize(uploadedSize) }}</span >
54
+ <span class =" text-xs text-gray-500 dark:text-gray-400 !text-lightDropzoneText dark:!text-darkDropzoneText " >{{ humanifySize(uploadedSize) }}</span >
55
55
</p >
56
56
57
57
<button @click.stop.prevent =" clear" class =" ml-2 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-500
58
- hover:underline dark:hover:underline focus:outline-none" >{{ $t('Clear') }}</button >
58
+ hover:underline dark:hover:underline focus:outline-none !text-lightDropzoneText hover:!text-lightDropzoneText dark:!text-darkDropzoneText dark:hover:!text-darkDropzoneText " >{{ $t('Clear') }}</button >
59
59
</div >
60
60
61
61
</div >
@@ -72,7 +72,6 @@ import { IconMagic } from '@iconify-prerendered/vue-mdi';
72
72
import { useI18n } from ' vue-i18n' ;
73
73
import { useRoute } from ' vue-router' ;
74
74
75
-
76
75
const route = useRoute ();
77
76
const { t } = useI18n ();
78
77
0 commit comments