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

24
frontend/src/styles/theme/colors.css
View File

@@ -27,6 +27,11 @@
--color-border: #e5e7eb;
--color-border-hover: #d1d5db;
/* Derived tokens */
--color-overlay: rgba(15, 23, 42, 0.35);
--color-card-outline: rgba(15, 23, 42, 0.06);
--color-focus-ring: rgba(var(--color-accent-rgb), 0.22);
/* Semantic Colors (same for both themes) */
--color-success: #059669;
--color-error: #dc2626;
@@ -59,9 +64,26 @@
--color-border: #334155;
--color-border-hover: #475569;
/* Derived tokens */
--color-overlay: rgba(0, 0, 0, 0.55);
--color-card-outline: rgba(255, 255, 255, 0.08);
--color-focus-ring: rgba(var(--color-accent-rgb), 0.30);
/* Semantic Colors */
--color-success: #10b981;
--color-error: #ef4444;
--color-warning: #f59e0b;
--color-info: #06b6d4;
}
}
@supports (color: color-mix(in srgb, black, white)) {
:root {
--color-border-hover: color-mix(in srgb, var(--color-border) 75%, var(--color-text-primary));
--color-card-outline: color-mix(in srgb, var(--color-border) 60%, transparent);
}
[data-theme='dark'] {
--color-border-hover: color-mix(in srgb, var(--color-border) 70%, var(--color-text-primary));
--color-card-outline: color-mix(in srgb, var(--color-border) 55%, transparent);
}
}

4
frontend/src/styles/theme/dimensions.css
View File

@@ -32,7 +32,7 @@
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Component Heights */
@@ -151,4 +151,4 @@
--breakpoint-mobile: 768px;
--breakpoint-tablet: 1024px;
--breakpoint-desktop: 1280px;
}
}

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);
}

49
frontend/src/styles/theme/index.css
View File

@@ -19,6 +19,10 @@
padding: 0;
}
html {
color-scheme: light dark;
}
body {
margin: 0;
min-width: 320px;
@@ -31,6 +35,8 @@ body {
-moz-osx-font-smoothing: grayscale;
user-select: none;
-webkit-user-select: none;
overflow-x: hidden;
accent-color: var(--color-accent);
}
/* Utility for selectable text */
@@ -43,6 +49,23 @@ body {
#root {
min-height: 100vh;
width: 100%;
position: relative;
isolation: isolate;
}
/* Ambient background glow (subtle, adapts to accent) */
#root::before {
content: '';
position: fixed;
inset: -20%;
pointer-events: none;
z-index: -1;
opacity: 0.7;
background:
radial-gradient(40% 30% at 12% 12%, rgba(var(--color-accent-rgb), 0.18) 0%, rgba(var(--color-accent-rgb), 0) 65%),
radial-gradient(35% 28% at 88% 18%, rgba(var(--color-accent-rgb), 0.12) 0%, rgba(var(--color-accent-rgb), 0) 70%),
radial-gradient(45% 35% at 55% 92%, rgba(var(--color-accent-rgb), 0.10) 0%, rgba(var(--color-accent-rgb), 0) 70%);
filter: saturate(1.2);
}
/* Links */
@@ -71,8 +94,8 @@ button {
button:focus,
button:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
outline: none;
box-shadow: var(--shadow-ring);
}
/* Loading state */
@@ -85,6 +108,12 @@ button:focus-visible {
color: var(--color-accent);
}
/* Text selection */
::selection {
background: rgba(var(--color-accent-rgb), 0.22);
color: var(--color-text-primary);
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 10px;
@@ -124,4 +153,18 @@ button:focus-visible {
/* Loading state */
[data-theme='dark'][data-accent='auto'] .loading {
color: #e5e7eb;
}
}
[data-theme='dark'] #root::before {
opacity: 0.45;
filter: saturate(1.15);
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}