@casoon/dragonfly/effects/interaction/warning.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Warning-Effekte
 * 
 * Diese Datei enthält verschiedene Warning-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@keyframes warning-pulse {
    0%, 100% {
        opacity: var(--opacity-100);
    }

    50% {
        opacity: var(--opacity-70);
    }
}

@keyframes warning-pulse-sm {
    0%, 100% {
        opacity: var(--opacity-100);
    }

    50% {
        opacity: var(--opacity-80);
    }
}

@keyframes warning-pulse-lg {
    0%, 100% {
        opacity: var(--opacity-100);
    }

    50% {
        opacity: var(--opacity-60);
    }
}

@keyframes warning-flash {
    0%, 100% {
        opacity: var(--opacity-100);
    }

    50% {
        opacity: var(--opacity-50);
    }
}

@keyframes warning-flash-sm {
    0%, 100% {
        opacity: var(--opacity-100);
    }

    50% {
        opacity: var(--opacity-70);
    }
}

@keyframes warning-flash-lg {
    0%, 100% {
        opacity: var(--opacity-100);
    }

    50% {
        opacity: var(--opacity-30);
    }
}

@layer components {
    .warning-pulse {
        animation: warning-pulse 2s infinite;
    }

    .warning-pulse-sm {
        animation: warning-pulse-sm 2s infinite;
    }

    .warning-pulse-lg {
        animation: warning-pulse-lg 2s infinite;
    }

    .warning-border {
        animation: warning-pulse 2s infinite;
        border: var(--border-width-thick) solid var(--warning-color, #f59e0b);
    }

    .warning-border-sm {
        border-width: var(--border-width);
    }

    .warning-border-lg {
        border-width: var(--spacing-1);
    }

    .warning-bg {
        animation: warning-pulse 2s infinite;
        background-color: var(--warning-bg, rgb(245 158 11 / 10%));
    }

    .warning-bg-sm {
        background-color: var(--warning-bg-sm, rgb(245 158 11 / 5%));
    }

    .warning-bg-lg {
        background-color: var(--warning-bg-lg, rgb(245 158 11 / 20%));
    }

    .warning-text {
        color: var(--warning-text, #f59e0b);
    }

    .warning-text-sm {
        color: var(--warning-text-sm, #fbbf24);
    }

    .warning-text-lg {
        color: var(--warning-text-lg, #d97706);
    }

    .warning-glow {
        animation: warning-pulse 2s infinite;
        box-shadow: 0 0 var(--spacing-2-5) var(--warning-glow, rgb(245 158 11 / 50%));
    }

    .warning-glow-sm {
        box-shadow: 0 0 var(--spacing-1) var(--warning-glow-sm, rgb(245 158 11 / 30%));
    }

    .warning-glow-lg {
        box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--warning-glow-lg, rgb(245 158 11 / 70%));
    }

    .warning-flash {
        animation: warning-flash 1s infinite;
    }

    .warning-flash-sm {
        animation: warning-flash-sm 1s infinite;
    }

    .warning-flash-lg {
        animation: warning-flash-lg 1s infinite;
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .warning-pulse,
        .warning-pulse-sm,
        .warning-pulse-lg,
        .warning-border,
        .warning-bg,
        .warning-glow,
        .warning-flash,
        .warning-flash-sm,
        .warning-flash-lg {
            animation: var(--animation-none);
        }
    }
}