@casoon/dragonfly
Version:
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.
68 lines (56 loc) • 1.92 kB
CSS
/**
* Leuchteffekte
*
* Diese Datei enthält verschiedene Leuchteffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes glow-pulse {
0% { box-shadow: 0 0 var(--spacing-1) var(--glow-color, var(--color-primary)); }
50% { box-shadow: 0 0 var(--spacing-5) var(--glow-color, var(--color-primary)); }
100% { box-shadow: 0 0 var(--spacing-1) var(--glow-color, var(--color-primary)); }
}
@layer components {
.glow {
box-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
transition: box-shadow var(--transition-normal);
}
.glow-hover:hover {
box-shadow: 0 0 var(--spacing-5) var(--glow-color, var(--color-primary));
}
.glow-pulse {
animation: glow-pulse 2s infinite;
}
.glow-text {
text-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
}
.glow-border {
border: var(--border-width) solid var(--glow-color, var(--color-primary));
box-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
}
.glow-strong {
box-shadow:
0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary)),
0 0 var(--spacing-5) var(--glow-color, var(--color-primary)),
0 0 30px var(--glow-color, var(--color-primary));
}
.glow-soft {
box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--glow-color, var(--color-primary));
filter: blur(var(--spacing-1));
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.glow-pulse {
animation: var(--animation-none);
}
.glow,
.glow-hover,
.glow-text,
.glow-border,
.glow-strong,
.glow-soft {
transition: var(--transition-none);
}
}
}