matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modernize UI with glass morphism and refined styling

Browse Source 
- 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>
This commit is contained in:
matteoscrugli
2025-12-15 16:45:49 +01:00
parent 41c41adb98
commit 04a0fe4b27
14 changed files with 361 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/styles/theme/effects.css
View File

@@ -3,44 +3,45 @@
========================================== */
:root {
/* Box Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
/* 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: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.3s ease;
--transition-slower: 0.5s ease;
--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 0.2s ease;
--transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
--transition-transform: transform 0.2s ease;
--transition-opacity: opacity 0.2s ease;
--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: 150ms;
--duration-base: 200ms;
--duration-slow: 300ms;
--duration-slower: 500ms;
--duration-fast: 120ms;
--duration-base: 180ms;
--duration-slow: 260ms;
--duration-slower: 420ms;
/* Easing Functions */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--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 - Stronger Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
/* 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);
}