mycsslab/src/utilities/shadows.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Shadow Utilities
 * Box shadows, text shadows, and drop shadows
 */

/* Box Shadows */
.my-shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.my-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.my-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.my-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.my-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.my-shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.my-shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.my-shadow-none { box-shadow: none; }

/* Colored Shadows */
.my-shadow-primary { box-shadow: 0 1px 3px 0 rgba(59, 130, 246, 0.1), 0 1px 2px 0 rgba(59, 130, 246, 0.06); }
.my-shadow-success { box-shadow: 0 1px 3px 0 rgba(34, 197, 94, 0.1), 0 1px 2px 0 rgba(34, 197, 94, 0.06); }
.my-shadow-warning { box-shadow: 0 1px 3px 0 rgba(245, 158, 11, 0.1), 0 1px 2px 0 rgba(245, 158, 11, 0.06); }
.my-shadow-error { box-shadow: 0 1px 3px 0 rgba(239, 68, 68, 0.1), 0 1px 2px 0 rgba(239, 68, 68, 0.06); }

/* Text Shadows */
.my-text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.my-text-shadow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.my-text-shadow-md { text-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); }
.my-text-shadow-lg { text-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); }
.my-text-shadow-xl { text-shadow: 0 20px 25px rgba(0, 0, 0, 0.5); }
.my-text-shadow-2xl { text-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); }
.my-text-shadow-none { text-shadow: none; }

/* Drop Shadows */
.my-drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); }
.my-drop-shadow { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); }
.my-drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)); }
.my-drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)); }
.my-drop-shadow-xl { filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)); }
.my-drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); }
.my-drop-shadow-none { filter: drop-shadow(0 0 #0000); }

/* Glow Effects */
.my-glow-sm { box-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
.my-glow { box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
.my-glow-md { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
.my-glow-lg { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
.my-glow-xl { box-shadow: 0 0 25px rgba(59, 130, 246, 0.7); }
.my-glow-2xl { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8); }

/* Glow Colors */
.my-glow-primary { box-shadow: 0 0 10px rgba(59, 130, 246, 0.4); }
.my-glow-success { box-shadow: 0 0 10px rgba(34, 197, 94, 0.4); }
.my-glow-warning { box-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }
.my-glow-error { box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
.my-glow-purple { box-shadow: 0 0 10px rgba(147, 51, 234, 0.4); }
.my-glow-pink { box-shadow: 0 0 10px rgba(236, 72, 153, 0.4); }
.my-glow-cyan { box-shadow: 0 0 10px rgba(6, 182, 212, 0.4); }
.my-glow-emerald { box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }

/* Hover Shadow Effects */
.my-hover-shadow:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.my-hover-shadow-lg:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.my-hover-glow:hover { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
.my-hover-glow-lg:hover { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8); }

/* Focus Shadow Effects */
.my-focus-shadow:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
.my-focus-shadow-sm:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); }
.my-focus-shadow-lg:focus { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); }
.my-focus-glow:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }

/* Active Shadow Effects */
.my-active-shadow:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
.my-active-shadow-sm:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); }
.my-active-shadow-lg:active { box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.07); }