@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.
1,845 lines (1,562 loc) • 240 kB
CSS
/* Datei: effects/visual/vignette.css */
/**
* Vignettierungseffekte
*
* Diese Datei enthält verschiedene Vignettierungseffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer components {
.vignette {
position: relative;
}
.vignette::after {
background: radial-gradient(
circle at center,
transparent 0,
rgb(0 0 0 / 30%) 100
);
content: '';
inset: 0;
pointer-events: none;
position: absolute;
}
.vignette-strong::after {
background: radial-gradient(
circle at center,
transparent 0,
rgb(0 0 0 / 50%) 100
);
}
.vignette-soft::after {
background: radial-gradient(
circle at center,
transparent 0,
rgb(0 0 0 / 20%) 100
);
}
.vignette-color::after {
background: radial-gradient(
circle at center,
transparent 0,
var(--vignette-color, rgb(0 0 0 / 30%)) 100
);
}
.vignette-top::after {
background: radial-gradient(
circle at top,
transparent 0,
rgb(0 0 0 / 30%) 100
);
}
.vignette-bottom::after {
background: radial-gradient(
circle at bottom,
transparent 0,
rgb(0 0 0 / 30%) 100
);
}
.vignette-hover:hover::after {
opacity: var(--opacity-80);
transition: opacity var(--transition-normal);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.vignette-hover:hover::after {
transition: var(--transition-none);
}
}
}
/* Datei: effects/visual/textures.css */
/**
* Textureffekte
*
* Diese Datei enthält verschiedene Textureffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
.texture-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-10);
}
.texture-grain {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grainFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23grainFilter)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: var(--opacity-5);
}
.texture-paper {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23paperFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-20);
}
.texture-concrete {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='concreteFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23concreteFilter)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: var(--opacity-20);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.texture-noise,
.texture-grain,
.texture-paper,
.texture-concrete {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/sparkle.css */
/**
* Funkeleffekte
*
* Diese Datei enthält verschiedene Funkeleffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
/* Animationen - außerhalb von @layer definieren */
@keyframes sparkle-effect {
0% {
opacity: var(--opacity-0);
transform: var(--transform-scale-0);
}
50% {
opacity: var(--opacity-100);
transform: var(--transform-scale-100);
}
100% {
opacity: var(--opacity-0);
transform: var(--transform-scale-0);
}
}
/* Komponenten-Styles */
@layer components {
.sparkle {
overflow: hidden;
position: relative;
}
.sparkle::before,
.sparkle::after {
background-color: var(--sparkle-color, rgb(255 255 255 / 0.8));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.sparkle::before {
left: 2%0%;
top: 2%0%;
}
.sparkle::after {
left: 6%0%;
top: 6%0%;
}
.sparkle-many::before,
.sparkle-many::after,
.sparkle-many span {
background-color: var(--sparkle-color, rgb(255 255 255 / 0.8));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.sparkle-many span:nth-child(1) {
left: 3%0%;
top: 3%0%;
}
.sparkle-many span:nth-child(2) {
left: 7%0%;
top: 7%0%;
}
.sparkle-many span:nth-child(3) {
left: 6%0%;
top: 4%0%;
}
.sparkle-many span:nth-child(4) {
left: 4%0%;
top: 6%0%;
}
}
/* Animations-Styles */
@layer animations {
.sparkle::before,
.sparkle::after {
animation: sparkle-effect 2s infinite;
}
.sparkle::before {
animation-delay: 0s;
}
.sparkle::after {
animation-delay: var(--animation-duration-slow);
}
.sparkle-hover:hover::before,
.sparkle-hover:hover::after {
animation: sparkle-effect 1s;
}
.sparkle-many::before,
.sparkle-many::after,
.sparkle-many span {
animation: sparkle-effect 2s infinite;
}
.sparkle-many span:nth-child(1) {
animation-delay: var(--animation-duration-normal);
}
.sparkle-many span:nth-child(2) {
animation-delay: 0.7s;
}
.sparkle-many span:nth-child(3) {
animation-delay: 1.1s;
}
.sparkle-many span:nth-child(4) {
animation-delay: 1.4s;
}
}
/* Barrierefreiheit - reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer animations {
.sparkle::before,
.sparkle::after,
.sparkle-hover:hover::before,
.sparkle-hover:hover::after,
.sparkle-many::before,
.sparkle-many::after,
.sparkle-many span {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/shine.css */
/**
* Glanzeffekte
*
* Diese Datei enthält verschiedene Glanzeffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes shine-effect {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) rotate(45deg);
}
}
@layer components {
.shine {
overflow: hidden;
position: relative;
}
.shine::after {
animation: shine-effect 3s infinite;
background: linear-gradient(
45deg,
transparent,
rgb(255 255 255 / 10%),
transparent
);
content: '';
height: 200%;
left: -50%;
position: absolute;
top: -50%;
transform: var(--transform-rotate-45deg);
width: 200%;
}
.shine-hover:hover::after {
animation: shine-effect 1s;
}
.shine-strong::after {
background: linear-gradient(
45deg,
transparent,
rgb(255 255 255 / 30%),
transparent
);
}
.shine-soft::after {
background: linear-gradient(
45deg,
transparent,
rgb(255 255 255 / 5%),
transparent
);
}
.shine-color::after {
background: linear-gradient(
45deg,
transparent,
var(--shine-color, rgb(255 255 255 / 20%)),
transparent
);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.shine::after,
.shine-hover:hover::after,
.shine-strong::after,
.shine-soft::after,
.shine-color::after {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/shadows.css */
/**
* Schatten-Effekte
*
* Diese Datei enthält verschiedene Schatten-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
.shadow-sm {
box-shadow: var(--shadow-sm, 0 var(--border-width) var(--border-width-thick) 0 rgb(0 0 0 / 5%));
}
.shadow {
box-shadow: var(--shadow, 0 var(--border-width) var(--spacing-1) 0 rgb(0 0 0 / 10%), 0 var(--border-width) var(--border-width-thick) -var(--border-width) rgb(0 0 0 / 10%));
}
.shadow-md {
box-shadow: var(--shadow-md, 0 var(--spacing-1) 6px -var(--border-width) rgb(0 0 0 / 10%), 0 var(--border-width-thick) var(--spacing-1) -var(--border-width-thick) rgb(0 0 0 / 10%));
}
.shadow-lg {
box-shadow: var(--shadow-lg, 0 var(--spacing-2-5) var(--spacing-1)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%), 0 var(--spacing-1) 6px -var(--spacing-1) rgb(0 0 0 / 10%));
}
.shadow-xl {
box-shadow: var(--shadow-xl, 0 var(--spacing-5) var(--spacing-2)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%), 0 var(--spacing-2) var(--spacing-2-5) -6px rgb(0 0 0 / 10%));
}
.shadow-2xl {
box-shadow: var(--shadow-2xl, 0 var(--spacing-2)(--spacing-1) 50px -var(--spacing-1)(--border-width-thick) rgb(0 0 0 / 25%));
}
.shadow-inner {
box-shadow: var(--shadow-inner, inset 0 var(--border-width-thick) var(--spacing-1) 0 rgb(0 0 0 / 5%));
}
.shadow-none {
box-shadow: var(--shadow-none, 0 0 #0000);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.shadow-hover,
.shadow-transition {
transition: var(--transition-none);
}
}
}
/* Datei: effects/visual/reflections.css */
/**
* Reflexionseffekte
*
* Diese Datei enthält verschiedene Reflexionseffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes reflection-shine {
0% { transform: scaleY(-1%) translateY(0%); }
50% { transform: scaleY(-1%) translateY(var(--spacing-2-5)); }
100% { transform: scaleY(-1%) translateY(0%); }
}
@layer components {
.reflection {
overflow: hidden;
position: relative;
}
.reflection::after {
background: linear-gradient(
to bottom,
transparent,
var(--reflection-color, rgb(255 255 255 / 20%))
);
content: '';
inset: 0;
opacity: var(--opacity-50);
pointer-events: none;
position: absolute;
transform: scaleY(-1%);
}
.reflection-strong::after {
background: linear-gradient(
to bottom,
transparent,
var(--reflection-color, rgb(255 255 255 / 0.4))
);
opacity: var(--opacity-70);
}
.reflection-soft::after {
background: linear-gradient(
to bottom,
transparent,
var(--reflection-color, rgb(255 255 255 / 10%))
);
opacity: var(--opacity-30);
}
.reflection-color::after {
background: linear-gradient(
to bottom,
transparent,
var(--reflection-color, rgb(255 255 255 / 20%))
);
mix-blend-mode: overlay;
}
.reflection-hover:hover::after {
animation: reflection-shine 2s infinite;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.reflection-hover:hover::after {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/patterns.css */
/**
* 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);
}
}
}
/* Datei: effects/visual/noise.css */
/**
* Rausch-Effekte
*
* Diese Datei enthält verschiedene Rausch-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes noise-animation {
0% {
transform: translate(0%, 0%);
}
10% {
transform: translate(-5%, -5%);
}
20% {
transform: translate(-10%, 5%);
}
30% {
transform: translate(5%, -10%);
}
40% {
transform: translate(-5%, 15%);
}
50% {
transform: translate(-10%, 5%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 10%);
}
80% {
transform: translate(3%, 15%);
}
90% {
transform: translate(-10%, 10%);
}
100% {
transform: translate(0%, 0%);
}
}
@layer utilities {
.noise-film {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-5);
}
.noise-digital {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: 3%;
}
.noise-texture {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-10);
}
.noise-animated {
animation: noise-animation 0.5s steps(4) infinite;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-5);
}
.noise-grain {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: 4%;
}
.noise-static {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: 2%;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.noise-animated {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/neon.css */
/**
* Neon-Effekte
*
* Diese Datei enthält verschiedene Neon-Effekte für Text und Rahmen.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*
* Verwendung:
*
* 1. Neon-Text:
* <div class="neon-text">Standard Neon-Text</div>
* <div class="neon-text-secondary">Sekundärer Neon-Text</div>
* <div class="neon-text-accent">Akzent Neon-Text</div>
*
* 2. Animation-Varianten:
* <div class="neon-text-slow">Langsame Animation</div>
* <div class="neon-text-fast">Schnelle Animation</div>
* <div class="neon-text-flicker">Flackernder Effekt</div>
* <div class="neon-text-hover">Effekt nur beim Hover</div>
*
* 3. Neon-Rahmen:
* <div class="neon-border">Element mit Neon-Rahmen</div>
*
* 4. Glow-Effekte:
* <div class="glow">Text mit Glow-Effekt in Standard-Farbe</div>
* <span class="glow" style="--glow-color: #0ff;">Text mit türkisem Glow</span>
* <button class="glow-button">Button mit Glow-Effekt</button>
* <button class="glow-button" style="--glow-button-color: #ff00ff;">Button mit pinkem Glow</button>
*
* 5. Flacker-Effekte:
* <div class="flicker-element">Element mit Flacker-Animation</div>
* <div class="flicker-fast">Schnell flackerndes Element</div>
* <div class="flicker-slow">Langsam flackerndes Element</div>
*
* Technische Details:
* - Verwendet CSS-Variablen für Farben
* - Optimiert mit will-change
* - Responsive Anpassungen für mobile Geräte
* - Reduzierte Bewegung wird berücksichtigt
*
* Performance-Hinweise:
* - Die Effekte sind hardware-beschleunigt
* - Animationen werden auf mobilen Geräten reduziert
* - Reduzierte Bewegung wird automatisch berücksichtigt
*/
/* Animationen - immer außerhalb von @layer definieren */
@keyframes neon-pulse {
from {
opacity: var(--opacity-100);
}
to {
opacity: var(--opacity-70);
}
}
@keyframes neon-flicker {
0, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-10) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-20) currentcolor;
}
20, 24%, 55% {
text-shadow: var(--display-none);
}
}
@keyframes flicker {
0, 100% { opacity: var(--opacity-100); }
30% { opacity: var(--opacity-70); }
50% { opacity: var(--opacity-100); }
70% { opacity: var(--opacity-80); }
90% { opacity: var(--opacity-50); }
}
/* Effekte-Definitionen in Layer */
@layer effects {
/* Neon Text */
.neon-text {
animation: neon-pulse 1.5s var(--easing-smooth) infinite alternate;
color: var(--theme-primary-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-primary-500);
}
.neon-text-secondary {
color: var(--theme-secondary-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-secondary-500);
}
.neon-text-accent {
color: var(--theme-accent-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-accent-500);
}
/* Neon Border */
.neon-border {
animation: neon-pulse 1.5s var(--easing-smooth) infinite alternate;
border: var(--spacing-2) solid var(--theme-primary-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-primary-500);
}
.neon-border-secondary {
border: var(--spacing-2) solid var(--theme-secondary-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-secondary-500);
}
.neon-border-accent {
border: var(--spacing-2) solid var(--theme-accent-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-accent-500);
}
/* Animation Variants */
.neon-text-slow {
animation: neon-pulse 4s var(--easing-smooth) infinite;
}
.neon-text-fast {
animation: neon-pulse 1s var(--easing-smooth) infinite;
}
.neon-text-flicker {
animation: neon-flicker 2s var(--easing-smooth) infinite;
}
.neon-text-hover {
transition: var(--transition-shadow);
}
.neon-text-hover:hover {
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-10) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-20) currentcolor;
}
/* Zusätzliche Glow-Effekte */
.glow {
color: var(--glow-color, var(--theme-info-500));
text-shadow:
0 0 var(--spacing-1) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-2) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-1)(--border-width-thick) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-4) var(--glow-color, var(--theme-info-500));
}
.glow-button {
box-shadow:
0 0 var(--spacing-2) var(--glow-button-color, var(--theme-accent-500)),
0 0 var(--spacing-1)(--spacing-1) var(--glow-button-color, var(--theme-accent-500)),
0 0 var(--spacing-5) var(--glow-button-color, var(--theme-accent-500)),
0 0 30px var(--glow-button-color, var(--theme-accent-500));
position: relative;
z-index: var(--z-index-1);
}
.flicker-element {
animation: flicker 4s infinite;
}
.flicker-fast {
animation: flicker 2s infinite;
}
.flicker-slow {
animation: flicker 8s infinite;
}
}
/* Barrierefreiheit-Anpassungen */
@layer utilities {
/* Reduced Motion */
@container root (prefers-reduced-motion: reduce) {
.neon-text,
.neon-border,
.flicker-element,
.flicker-fast,
.flicker-slow {
animation: var(--animation-none);
transition: var(--transition-none);
}
}
}
/* Responsive Anpassungen */
@media (max-width: 640px) {
@layer effects {
.neon-sign {
font-size: 1.5rem;
padding: 0.5rem var(--spacing-4);
}
.neon-border {
border-width: var(--border-width-thick);
}
.neon-box {
aspect-ratio: 16/9;
height: auto;
width: 100%;
}
}
}
/* Datei: effects/visual/light.css */
/**
* Lichteffekte
*
* Diese Datei enthält verschiedene Lichteffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes light-move {
0% { transform: translate(-25%, -25%); }
50% { transform: translate(25%, 25%); }
100% { transform: translate(-25%, -25%); }
}
@layer components {
.light-spot {
overflow: hidden;
position: relative;
}
.light-spot::before {
background: radial-gradient(
circle at center,
var(--light-color, rgb(255 255 255 / 0.8)) 0,
transparent 50
);
content: '';
height: 200%;
pointer-events: none;
position: absolute;
transform: translate(-25%, -25%);
width: 200%;
}
.light-beam {
overflow: hidden;
position: relative;
}
.light-beam::before {
background: linear-gradient(
45deg,
transparent,
var(--light-color, rgb(255 255 255 / 30%)),
transparent
);
content: '';
height: 200%;
pointer-events: none;
position: absolute;
transform: translate(-25%, -25%);
width: 200%;
}
.light-ambient {
overflow: hidden;
position: relative;
}
.light-ambient::before {
background: radial-gradient(
circle at var(--light-x, 50) var(--light-y, 50),
var(--light-color, rgb(255 255 255 / 20%)) 0,
transparent 70
);
content: '';
inset: 0;
pointer-events: none;
position: absolute;
}
.light-hover:hover::before {
animation: light-move 2s infinite;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.light-hover:hover::before {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/glow.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);
}
}
}
/* Datei: effects/visual/glass.css */
/**
* Glaseffekte
*
* Diese Datei enthält verschiedene Glaseffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer components {
.glass {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
}
.glass-sm {
backdrop-filter: blur(var(--spacing-1));
background: rgb(255 255 255 / 5%);
border: var(--border-width) solid rgb(255 255 255 / 10%);
box-shadow: 0 var(--spacing-1) var(--spacing-4) 0 rgb(31 38 135 / 20%);
}
.glass-lg {
backdrop-filter: blur(var(--spacing-1)(--spacing-1));
background: rgb(255 255 255 / 15%);
border: var(--border-width) solid rgb(255 255 255 / 30%);
box-shadow: 0 var(--spacing-1)(--border-width-thick) var(--spacing-4)(--spacing-2) 0 rgb(31 38 135 / 50%);
}
.glass-morph {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
border-radius: var(--spacing-5);
box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
}
.glass-border {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
position: relative;
}
.glass-border::before {
background: linear-gradient(45deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 30%));
border-radius: inherit;
content: '';
inset: calc(-1 * var(--border-width-thick));
position: absolute;
z-index: -1;
}
.glass-shadow {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
box-shadow:
0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%),
0 0 0 var(--border-width) rgb(255 255 255 / 10%);
}
.glass-hover {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
transition: all 0.3s ease;
}
.glass-hover:hover {
background: rgb(255 255 255 / 15%);
border: var(--border-width) solid rgb(255 255 255 / 30%);
box-shadow: 0 var(--spacing-1)(--border-width-thick) var(--spacing-4)(--spacing-2) 0 rgb(31 38 135 / 50%);
}
.glass-blur {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
}
.glass-blur-sm {
backdrop-filter: blur(var(--spacing-1));
}
.glass-blur-lg {
backdrop-filter: blur(var(--spacing-1)(--spacing-1));
}
.glass-color-primary {
background: rgb(59 130 246 / 10%);
border-color: rgb(59 130 246 / 20%);
}
.glass-color-secondary {
background: rgb(107 114 128 / 10%);
border-color: rgb(107 114 128 / 20%);
}
.glass-color-success {
background: rgb(16 185 129 / 10%);
border-color: rgb(16 185 129 / 20%);
}
.glass-color-error {
background: rgb(239 68 68 / 10%);
border-color: rgb(239 68 68 / 20%);
}
.glass-color-warning {
background: rgb(245 158 11 / 10%);
border-color: rgb(245 158 11 / 20%);
}
.glass-color-info {
background: rgb(6 182 212 / 10%);
border-color: rgb(6 182 212 / 20%);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.glass-hover {
transition: var(--transition-none);
}
}
}
/* Datei: effects/visual/filters.css */
/**
* 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);
}
}
}
/* Datei: effects/typography/text-effects.css */
/**
* Typografie-Effekte
*
* Diese Datei enthält verschiedene Typografie-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes text-shine {
0% {
background-position: 200% 0;
}
100% {
background-position: -200 0;
}
}
@layer utilities {
.text-shadow-sm {
text-shadow: 0 var(--border-width) var(--border-width-thick) rgb(0 0 0 / 10%);
}
.text-shadow-md {
text-shadow: 0 var(--border-width-thick) var(--spacing-1) rgb(0 0 0 / 10%);
}
.text-shadow-lg {
text-shadow: 0 var(--spacing-1) var(--spacing-2) rgb(0 0 0 / 10%);
}
.text-shadow-glow {
text-shadow: 0 0 var(--spacing-2-5) var(--text-glow-color, currentColor);
}
.text-shadow-neon {
text-shadow:
0 0 var(--spacing-1) var(--text-neon-color, currentColor),
0 0 var(--spacing-2-5) var(--text-neon-color, currentColor),
0 0 var(--spacing-5) var(--text-neon-color, currentColor);
}
.text-stroke-sm {
-webkit-text-stroke: var(--border-width) var(--text-stroke-color, currentColor);
}
.text-stroke-md {
-webkit-text-stroke: var(--border-width-thick) var(--text-stroke-color, currentColor);
}
.text-stroke-lg {
-webkit-text-stroke: var(--spacing-1) var(--text-stroke-color, currentColor);
}
.text-gradient {
background: var(--text-gradient, linear-gradient(45deg, #ff6b6b, #4ecdc4));
background-clip: text;
color: transparent;
}
.text-shine {
animation: text-shine 3s linear infinite;
background: linear-gradient(
90deg,
transparent 0,
rgb(255 255 255 / 20%) 50,
transparent 100
);
background-clip: text;
background-size: 200% 100;
color: transparent;
}
.text-blur-sm {
filter: blur(var(--border-width));
}
.text-blur-md {
filter: blur(var(--border-width-thick));
}
.text-blur-lg {
filter: blur(var(--spacing-1));
}
.text-outline {
text-shadow:
-var(--border-width) -var(--border-width) 0 var(--text-outline-color, currentColor),
var(--border-width) -var(--border-width) 0 var(--text-outline-color, currentColor),
-var(--border-width) var(--border-width) 0 var(--text-outline-color, currentColor),
var(--border-width) var(--border-width) 0 var(--text-outline-color, currentColor);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.text-shine {
animation: var(--animation-none);
}
}
}
/* Datei: effects/themes/neumorphism.css */
/**
* Neumorphismus-Effekte
*
* Diese Datei enthält verschiedene Neumorphismus-Effekte für moderne UIs.
* Die Effekte sind für Barrierefreiheit optimiert und unterstützen Dark Mode.
*/
@layer components {
/* Basisvariablen für Neumorphismus */
:root {
--neuro-radius: var(--spacing-4);
--neuro-shadow-intensity: 0.1;
--neuro-shadow-distance: 0.5rem;
--neuro-shadow-blur: var(--spacing-4);
--neuro-light-shadow-color: rgb(255 255 255 / var(--neuro-shadow-intensity));
--neuro-dark-shadow-color: rgb(0 0 0 / var(--neuro-shadow-intensity));
--neuro-background: var(--surface-3, #f0f0f0);
--neuro-transition: 200ms var(--easing-decelerate);
--neuro-surface-tint: 0.02;
}
/* Basisklasse für Neumorphismus */
.neuro {
background-color: var(--neuro-background);
border-radius: var(--neuro-radius);
overflow: hidden;
position: relative;
transition: all var(--neuro-transition);
}
/* Konvexe Elevation (herausstehend) */
.neuro-convex {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 96%, white),
color-mix(in srgb, var(--neuro-background) 92%, black)
);
box-shadow:
var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),
calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);
}
/* Konkave Elevation (eingedrückt) */
.neuro-concave {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 92%, black),
color-mix(in srgb, var(--neuro-background) 96%, white)
);
box-shadow: inset
var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),
inset calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);
}
/* Flache Elevation */
.neuro-flat {
box-shadow:
var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),
calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);
}
/* Neumorphe Buttons */
.neuro-button {
align-items: center;
background: var(--neuro-background);
border: none;
border-radius: var(--neuro-radius);
cursor: pointer;
display: inline-flex;
font-weight: var(--font-weight-medium);
justify-content: center;
padding: 0.75rem 1.5rem;
position: relative;
transition: all var(--neuro-transition);
user-select: none;
vertical-align: middle;
}
/* Button-Varianten */
.neuro-button-convex {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 96%, white),
color-mix(in srgb, var(--neuro-background) 92%, black)
);
box-shadow:
var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),
calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);
}
.neuro-button-convex:hover {
box-shadow:
calc(var(--neuro-shadow-distance) * 1.2) calc(var(--neuro-shadow-distance) * 1.2) calc(var(--neuro-shadow-blur) * 1.2) var(--neuro-dark-shadow-color),
calc(-1.2 * var(--neuro-shadow-distance)) calc(-1.2 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 1.2) var(--neuro-light-shadow-color);
}
.neuro-button-convex:active,
.neuro-button-convex.active {
box-shadow: inset
calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-dark-shadow-color),
inset calc(-0.5 * var(--neuro-shadow-distance)) calc(-0.5 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-light-shadow-color);
transform: translateY(var(--border-width-thick));
}
/* Neumorphe Karten */
.neuro-card {
background: var(--neuro-background);
border-radius: var(--neuro-radius);
overflow: hidden;
padding: 1.5rem;
position: relative;
transition: all var(--neuro-transition);
}
.neuro-card-elevated {
box-shadow:
var(--neuro-shadow-distance) var(--neuro-shadow-distance) calc(var(--neuro-shadow-blur) * 1.5) var(--neuro-dark-shadow-color),
calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 1.5) var(--neuro-light-shadow-color);
}
/* Neumorphe Eingabefelder */
.neuro-input {
background: var(--neuro-background);
border: none;
border-radius: var(--neuro-radius);
box-shadow: inset
calc(var(--neuro-shadow-distance) * 0.4) calc(var(--neuro-shadow-distance) * 0.4) calc(var(--neuro-shadow-blur) * 0.6) var(--neuro-dark-shadow-color),
inset calc(-0.4 * var(--neuro-shadow-distance)) calc(-0.4 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.6) var(--neuro-light-shadow-color);
color: inherit;
font-size: var(--spacing-4);
outline: none;
padding: 0.75rem var(--spacing-4);
transition: all var(--neuro-transition);
width: 100%;
}
.neuro-input:focus {
box-shadow: inset
calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-dark-shadow-color),
inset calc(-0.5 * var(--neuro-shadow-distance)) calc(-0.5 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-light-shadow-color);
}
/* Neumorphe Checkbox */
.neuro-checkbox {
appearance: none;
background: var(--neuro-background);
border: none;
border-radius: calc(var(--neuro-radius) * 0.5);
box-shadow:
calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-dark-shadow-color),
calc(-0.3 * var(--neuro-shadow-distance)) calc(-0.3 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-light-shadow-color);
cursor: pointer;
height: 1%.5rem;
margin: 0;
position: relative;
transition: all var(--neuro-transition);
width: 1%.5rem;
}
.neuro-checkbox:checked {
box-shadow: inset
calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-dark-shadow-color),
inset calc(-0.3 * var(--neuro-shadow-distance)) calc(-0.3 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-light-shadow-color);
}
.neuro-checkbox:checked::after {
border-bottom: var(--border-width-thick) solid var(--accent-6, currentColor);
border-right: var(--border-width-thick) solid var(--accent-6, currentColor);
content: '';
display: block;
height: 0%.5rem;
left: 5%0%;
position: absolute;
top: var(--percentage-45);
transform: translate(-50%, -50%) rotate(45deg);
width: 0%.25rem;
}
/* Intensitäts-Varianten */
.neuro-intensity-low {
--neuro-shadow-intensity: 0.05;
}
.neuro-intensity-medium {
--neuro-shadow-intensity: 0.1;
}
.neuro-intensity-high {
--neuro-shadow-intensity: 0.15;
}
/* Größen-Varianten */
.neuro-small {
--neuro-radius: 0.5rem;
--neuro-shadow-distance: 0.25rem;
--neuro-shadow-blur: 0.5rem;
}
.neuro-medium {
--neuro-radius: var(--spacing-4);
--neuro-shadow-distance: 0.5rem;
--neuro-shadow-blur: var(--spacing-4);
}
.neuro-large {
--neuro-radius: 1.5rem;
--neuro-shadow-distance: 0.75rem;
--neuro-shadow-blur: 1.5rem;
}
}
/* Dark Mode Anpassungen */
@media (prefers-color-scheme: dark) {
@layer components {
:root {
--neuro-shadow-intensity: 0.2;
--neuro-light-shadow-color: rgb(255 255 255 / calc(var(--neuro-shadow-intensity) * 0.6));
--neuro-dark-shadow-color: rgb(0 0 0 / var(--neuro-shadow-intensity));
}
.neuro-convex,
.neuro-button-convex {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 92%, white),
color-mix(in srgb, var(--neuro-background) 94%, black)
);
}
.neuro-concave {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 94%, black),
color-mix(in srgb, var(--neuro-background) 92%, white)
);
}
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.neuro,
.neuro-button,
.neuro-card,
.neuro-input,
.neuro-checkbox {
transition: var(--transition-none);
}
}
}
/* Datei: effects/themes/neos.css */
/**
* Neo-Effekte
*
* Diese Datei enthält verschiedene Neo-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer components {
/* Basis Neo-Effekte */
.neo {
background: var(--neo-bg, #e0e5ec);
border-radius: var(--spacing-2-5);
box-shadow:
var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff);
}
.neo-inset {
background: var(--neo-bg, #e0e5ec);
border-radius: var(--spacing-2-5);
box-shadow:
inset var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
inset -var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff);
}
/* Größen-Varianten */
.neo-sm {
border-radius: var(--spacing-1-5);
box-shadow:
var(--spacing-1) var(--spacing-1) var(--spacing-2) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-1) -var(--spacing-1) var(--spacing-2) var(--neo-shadow-light, #fff);
}
.neo-lg {
border-radius: var(--spacing-4);
box-shadow:
var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
}
/* Hover-Effekte */
.neo-hover {
transition: all 0.3s ease;
}
.neo-hover:hover {
box-shadow:
var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
transform: translateY(calc(-1 * var(--border-width-thick)));
}
.neo-hover-inset:hover {
box-shadow:
inset var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
inset -var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
}
/* Aktive Zustände */
.neo-active {
transition: all 0.2s ease;
}
.neo-active:active {
box-shadow:
inset var(--spacing-1) var(--spacing-1) var(--spacing-2) var(--neo-shadow-dark, #a3b1c6),
inset -var(--spacing-1) -var(--spacing-1) var(--spacing-2) var(--neo-shadow-light, #fff);
transform: var(--transform-scale-98);
}
/* Farb-Varianten */
.neo-primary {
--neo-bg: var(--color-primary-light, #e6f3ff);
--neo-shadow-dark: var(--color-primary-dark, #b3d1ff);
--neo-shadow-light: var(--color-primary-lighter, #f0f7ff);
}
.neo-secondary {
--neo-bg: var(--color-secondary-light, #f0f0f0);
--neo-shadow-dark: var(--color-secondary-dark, #d1d1d1);
--neo-shadow-light: var(--color-secondary-lighter, #fff);
}
.neo-success {
--neo-bg: var(--color-success-light, #e6fff0);
--neo-shadow-dark: var(--color-success-dark, #b3ffd1);
--neo-shadow-light: var(--color-success-lighter, #f0fff7);
}
.neo-error {
--neo-bg: var(--color-error-light, #ffe6e6);
--neo-shadow-dark: var(--color-error-dark, #ffb3b3);
--neo-shadow-light: var(--color-error-lighter, #fff0f0);
}
.neo-warning {
--neo-bg: var(--color-warning-light, #fff7e6);
--neo-shadow-dark: var(--color-warning-dark, #ffe0b3);
--neo-shadow-light: var(--color-warning-lighter, #fffaf0);
}
.neo-info {
--neo-bg: var(--color-info-light, #e6f7ff);
--neo-shadow-dark: var(--color-info-dark, #b3e0ff);
--neo-shadow-light: var(--color-info-lighter, #f0f9ff);
}
/* Spezielle Effekte */
.neo-glow {
box-shadow:
var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff),
0 0 var(--spacing-5) var(--neo-glow, rgb(59 130 246 / 50%));
}
.neo-border {
border: var(--border-width-thick) solid var(--neo-border, rgb(59 130 246 / 20%));
}
.neo-gradient {
background: linear-gradient(
145deg,
var(--neo-gradient-start, #e0e5ec),
var(--neo-gradient-end, #fff)
);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.neo-hover,
.neo-hover-inset,
.neo-active {
transition: var(--transition-none);
}
.neo-hover:hover,
.neo-active:active {
transform: var(--transform-none);
}
}
}
/* Datei: effects/themes/gradients.css */
/**
* Farbverläufe
*
* Diese Datei enthält verschiedene Farbverläufe für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes gradient-shift {
0% { background-position: 0% 50; }
50% { background-position: 100% 50; }
100% { background-position: 0% 50; }
}
@layer utilities {
.gradient-primary {
background: linear-gradient(
45deg,
var(--color-primary),
var(--color-primary-light)
);
}
.gradient-secondary {
background: linear-g