@casoon/dragonfly/effects/visual/patterns.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.

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

@layer utilities {
    .pattern-dots {
        background-image: radial-gradient(var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width));
        background-size: var(--spacing-2-5) var(--spacing-2-5);
    }

    .pattern-lines {
        background-image: linear-gradient(45deg, var(--pattern-color, currentColor) 25%, transparent 25%);
        background-size: var(--spacing-2-5) var(--spacing-2-5);
    }

    .pattern-grid {
        background-image: 
            linear-gradient(var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width)),
            linear-gradient(90deg, var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width));
        background-size: var(--spacing-2-5) var(--spacing-2-5);
    }

    .pattern-zigzag {
        background-image: linear-gradient(135deg, var(--pattern-color, currentColor) 25%, transparent 25%),
                        linear-gradient(225deg, var(--pattern-color, currentColor) 25%, transparent 25%);
        background-size: var(--spacing-2-5) var(--spacing-2-5);
    }

    .pattern-checker {
        background-image: linear-gradient(45deg, var(--pattern-color, currentColor) 25%, transparent 25%),
                        linear-gradient(-45deg, var(--pattern-color, currentColor) 25%, transparent 25%);
        background-size: var(--spacing-2-5) var(--spacing-2-5);
    }

    .pattern-hover:hover {
        background-image: var(--pattern-hover-image);
        transition: background-image var(--transition-normal);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer utilities {
        .pattern-hover:hover {
            transition: var(--transition-none);
        }
    }
}