fadgram-ui/components/drop-zone.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@layer components {

    .previews-item,
    .previews-appender {
        @apply relative flex items-center justify-center text-gray-500 dark:text-gray-400 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-300 hover:ring-2 hover:ring-primary/50 dark:border-gray-600 dark:hover:ring-primary-500/50 rounded-lg overflow-hidden;

        img,
        video {
            @apply max-w-full max-h-full;
        }
    }

    .previews-item-delete {
        @apply absolute top-0 end-0 mt-2 me-2 text-xs text-white bg-red/70 hover:bg-red w-6 h-6 flex items-center justify-center rounded-full;
    }

    .previews-item-toolbar {
        @apply absolute inset-x-0 bottom-0 flex-space-2 justify-center p-1;
    }

    .toolbar-button {
        @apply text-xs w-6 h-6 rounded-full p-0 flex items-center justify-center text-white bg-blue/70 hover:bg-blue;

        &.upload {
            @apply bg-green/70 hover:bg-green;
        }

        &.pause {
            @apply bg-yellow/70 hover:bg-yellow;
        }

        &.resume {
            @apply bg-blue/70 hover:bg-blue;
        }
    }

    .form-drop-zone {
        @apply relative border-gray-300 border bg-gray-50 text-gray-900 rounded-lg text-sm p-2 leading-6 appearance-none;
        @apply border-dashed border-2 border-gray-300 dark:border-gray-600 text-gray-400 dark:text-gray-300 rounded-lg cursor-pointer transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-primary-500 dark:hover:border-primary-500;
        @apply w-36 h-36;
        @apply min-h-36;

        .previews-placeholder {
            @apply flex items-center justify-center w-full h-full cursor-pointer flex-col;
            @apply absolute inset-0 z-1;
        }

        .previews-grid {
            @apply relative block w-full h-full;
        }

        .previews-item {
            @apply w-full h-full;
        }

        &:not(.multiple) {
            .previews-item {
                @apply absolute inset-0 z-2;
            }
        }

        &.multiple {
            @apply w-full h-auto;

            .previews-grid {
                @apply flex items-center flex-wrap gap-4;
            }

            .previews-item,
            .previews-appender {
                @apply w-32 h-32;
            }
        }
    }
}