klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fixed browse and tailwindcss style

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-15 11:01:19 +01:00
parent d114472823
commit 7734e53d87
16 changed files with 341 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/components/upload/UploadDropzone.jsx
View File

@@ -98,20 +98,27 @@ export default function UploadDropzone({
const droppedFile = event.dataTransfer?.files?.[0]
if (droppedFile) emitFile(droppedFile)
}}
animate={prefersReducedMotion ? undefined : {
scale: dragging ? 1.01 : 1,
borderColor: invalid ? 'rgba(252,165,165,0.7)' : dragging ? 'rgba(103,232,249,0.9)' : 'rgba(56,189,248,0.35)',
backgroundColor: invalid ? 'rgba(23,68,68,0.10)' : dragging ? 'rgba(6,182,212,0.20)' : 'rgba(14,165,233,0.05)',
}}
animate={prefersReducedMotion ? undefined : { scale: dragging ? 1.01 : 1 }}
transition={dragTransition}
className={`group rounded-xl border-2 border-dashed border-white/50 py-6 px-4 text-center transition hover:border-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70 ${locked ? 'cursor-default bg-white/5 opacity-75' : 'cursor-pointer'} ${invalid ? 'border-red-300/70 bg-red-500/10 shadow-[0_0_0_1px_rgba(248,113,113,0.2)]' : dragging ? 'border-cyan-300 bg-cyan-500/20 shadow-[0_0_0_1px_rgba(103,232,249,0.35)]' : locked ? 'bg-white/5' : 'bg-sky-500/5 hover:bg-sky-500/12'}`}
>
<h3 className="mt-3 text-sm font-semibold text-white">{title}</h3>
<p className="mt-1 text-xs text-soft">{description}</p>
{previewUrl ? (
<div className="mt-2 grid place-items-center">
<div className="relative w-full max-w-[520px]">
<img src={previewUrl} alt="Selected preview" className="mx-auto max-h-64 w-auto rounded-lg object-contain" />
<div className="pointer-events-none absolute bottom-2 right-2 rounded-full bg-black/40 px-2 py-1 text-xs text-white/90">Click to replace</div>
<div className="mt-2 w-full flex flex-col items-center gap-2">
<div className="flex h-52 w-64 items-center justify-center overflow-hidden rounded-lg bg-black/40 ring-1 ring-white/10">
<img
src={previewUrl}
alt="Selected preview"
className="h-full w-full object-contain object-center"
loading="lazy"
decoding="async"
width="250"
height="208"
/>
</div>
<div className="text-xs text-white/70">Click to replace</div>
</div>
) : (
<>
@@ -123,8 +130,6 @@ export default function UploadDropzone({
</svg>
</div>
<h3 className="mt-3 text-sm font-semibold text-white">{title}</h3>
<p className="mt-1 text-xs text-soft">{description}</p>
<p className="mt-1 text-xs text-soft">Accepted: JPG, JPEG, PNG, WEBP, ZIP, RAR, 7Z, TAR, GZ</p>
<p className="text-xs text-soft">Max size: images 50MB · archives 200MB</p>