matteoscrugli
04a0fe4b27
- Add backdrop-filter blur effects to sidebar, cards, and dropdowns - Replace flat button colors with gradients - Implement softer multi-layer shadows - Add new CSS variables: --color-overlay, --color-card-outline, --color-focus-ring - Modernize transitions with smoother easing curves - Add loading spinner animation - Add hexToRgbString() for --color-accent-rgb variable 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
48 lines
2.0 KiB
CSS
48 lines
2.0 KiB
CSS
/* ==========================================
|
|
EFFECTS (Shadows, Transitions, Animations)
|
|
========================================== */
|
|
|
|
:root {
|
|
/* Box Shadows (modern, softer multi-layer) */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--shadow-md: 0 8px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06);
|
|
--shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.08);
|
|
--shadow-2xl: 0 48px 110px rgba(0, 0, 0, 0.22);
|
|
--shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
--shadow-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 120ms var(--ease-out);
|
|
--transition-base: 180ms var(--ease-out);
|
|
--transition-slow: 260ms var(--ease-out);
|
|
--transition-slower: 420ms var(--ease-out);
|
|
|
|
/* Transition Properties */
|
|
--transition: all var(--transition-base);
|
|
--transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
|
|
--transition-transform: transform var(--transition-base);
|
|
--transition-opacity: opacity var(--transition-base);
|
|
|
|
/* Animation Durations */
|
|
--duration-fast: 120ms;
|
|
--duration-base: 180ms;
|
|
--duration-slow: 260ms;
|
|
--duration-slower: 420ms;
|
|
|
|
/* Easing Functions */
|
|
--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
/* Dark Theme - Deeper Shadows with less haze */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
|
|
--shadow-md: 0 10px 22px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
|
|
--shadow-xl: 0 34px 72px rgba(0, 0, 0, 0.65), 0 14px 28px rgba(0, 0, 0, 0.4);
|
|
--shadow-2xl: 0 60px 130px rgba(0, 0, 0, 0.75);
|
|
}
|