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

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

@layer utilities {
    /* Basis-Filter */
    .filter-blur {
        filter: blur(var(--spacing-1));
    }

    .filter-blur-sm {
        filter: blur(var(--border-width-thick));
    }

    .filter-blur-lg {
        filter: blur(var(--spacing-2));
    }

    .filter-brightness {
        filter: brightness(1.2);
    }

    .filter-brightness-sm {
        filter: brightness(1.1);
    }

    .filter-brightness-lg {
        filter: brightness(1.3);
    }

    .filter-contrast {
        filter: var(--filter-contrast-125);
    }

    .filter-contrast-sm {
        filter: contrast(1.1);
    }

    .filter-contrast-lg {
        filter: contrast(1.3);
    }

    .filter-grayscale {
        filter: var(--filter-grayscale-100);
    }

    .filter-grayscale-sm {
        filter: grayscale(0.5);
    }

    .filter-grayscale-lg {
        filter: grayscale(0.8);
    }

    .filter-hue-rotate {
        filter: hue-rotate(90deg);
    }

    .filter-hue-rotate-sm {
        filter: hue-rotate(45deg);
    }

    .filter-hue-rotate-lg {
        filter: hue-rotate(180deg);
    }

    .filter-invert {
        filter: invert(1);
    }

    .filter-invert-sm {
        filter: invert(0.5);
    }

    .filter-invert-lg {
        filter: invert(0.8);
    }

    .filter-opacity {
        filter: opacity(0.5);
    }

    .filter-opacity-sm {
        filter: opacity(0.7);
    }

    .filter-opacity-lg {
        filter: opacity(0.3);
    }

    .filter-saturate {
        filter: saturate(1.5);
    }

    .filter-saturate-sm {
        filter: saturate(1.2);
    }

    .filter-saturate-lg {
        filter: saturate(1.8);
    }

    .filter-sepia {
        filter: sepia(1);
    }

    .filter-sepia-sm {
        filter: sepia(0.5);
    }

    .filter-sepia-lg {
        filter: sepia(0.8);
    }

    /* Kombinierte Filter */
    .filter-vintage {
        filter: sepia(0.5) contrast(1.2) brightness(0.9);
    }

    .filter-cool {
        filter: saturate(1.2) hue-rotate(30deg);
    }

    .filter-warm {
        filter: saturate(1.2) hue-rotate(-30deg);
    }

    .filter-dramatic {
        filter: contrast(1.4) saturate(1.2) brightness(0.9);
    }

    .filter-soft {
        filter: blur(var(--border-width)) brightness(1.1) contrast(0.9);
    }

    /* Hover-Effekte */
    .filter-hover {
        transition: filter 0.3s ease;
    }

    .filter-hover:hover {
        filter: brightness(1.1) contrast(1.1);
    }

    .filter-hover-sm:hover {
        filter: brightness(1.05) contrast(1.05);
    }

    .filter-hover-lg:hover {
        filter: brightness(1.2) contrast(1.2);
    }
}

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