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

21
frontend/src/App.css
View File

@@ -14,6 +14,23 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
font-size: 1.5rem; gap: 0.75rem;
color: #667eea; font-size: var(--text-lg);
color: var(--color-text-secondary);
}
.loading::before {
content: '';
width: 18px;
height: 18px;
border-radius: 999px;
border: 2px solid rgba(var(--color-accent-rgb), 0.22);
border-top-color: var(--color-accent);
animation: app-spin 0.85s linear infinite;
}
@keyframes app-spin {
to {
transform: rotate(360deg);
}
} }

21
frontend/src/contexts/ThemeContext.tsx
View File

@@ -79,6 +79,23 @@ const ACCENT_COLORS: Record<AccentColor, { main: string; hover: string; darkMain
auto: { main: '#374151', hover: '#1f2937', darkMain: '#838b99', darkHover: '#b5bcc8' }, auto: { main: '#374151', hover: '#1f2937', darkMain: '#838b99', darkHover: '#b5bcc8' },
}; };
function hexToRgbString(color: string): string | null {
const trimmed = color.trim();
if (!trimmed) return null;
const hex = trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;
if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(hex)) return null;
const fullHex = hex.length === 3 ? hex.split('').map((c) => c + c).join('') : hex;
const value = Number.parseInt(fullHex, 16);
if (Number.isNaN(value)) return null;
const r = (value >> 16) & 255;
const g = (value >> 8) & 255;
const b = value & 255;
return `${r}, ${g}, ${b}`;
}
const BORDER_RADII: Record<BorderRadius, { sm: string; md: string; lg: string }> = { const BORDER_RADII: Record<BorderRadius, { sm: string; md: string; lg: string }> = {
small: { sm: '2px', md: '4px', lg: '6px' }, small: { sm: '2px', md: '4px', lg: '6px' },
medium: { sm: '4px', md: '6px', lg: '8px' }, medium: { sm: '4px', md: '6px', lg: '8px' },
@@ -480,6 +497,10 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
const hover = (theme === 'dark' && colors.darkHover) ? colors.darkHover : colors.hover; const hover = (theme === 'dark' && colors.darkHover) ? colors.darkHover : colors.hover;
root.style.setProperty('--color-accent', main); root.style.setProperty('--color-accent', main);
root.style.setProperty('--color-accent-hover', hover); root.style.setProperty('--color-accent-hover', hover);
const rgb = hexToRgbString(main);
if (rgb) {
root.style.setProperty('--color-accent-rgb', rgb);
}
}, [accentColor, theme]); }, [accentColor, theme]);
useEffect(() => { useEffect(() => {

37
frontend/src/styles/AdminPanel.css
View File

@@ -75,19 +75,26 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: var(--btn-padding-md); padding: var(--btn-padding-md);
background: var(--color-accent); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-weight: 600; font-weight: 600;
font-size: var(--btn-font-size); font-size: var(--btn-font-size);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
box-shadow: var(--shadow-md);
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--color-accent-hover); filter: brightness(1.03);
opacity: 0.95; transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
} }
.btn-primary .material-symbols-outlined { .btn-primary .material-symbols-outlined {
@@ -118,6 +125,12 @@
min-width: 260px; min-width: 260px;
} }
.admin-panel-root .input-group:focus-within,
.users-root .input-group:focus-within {
border-color: rgba(var(--color-accent-rgb), 0.35);
box-shadow: var(--shadow-ring);
}
.admin-panel-root .input-group input, .admin-panel-root .input-group input,
.users-root .input-group input { .users-root .input-group input {
border: none; border: none;
@@ -137,12 +150,20 @@
.admin-panel-root .users-card, .admin-panel-root .users-card,
.users-root .users-card { .users-root .users-card {
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
overflow: hidden; overflow: hidden;
} }
@supports (color: color-mix(in srgb, black, transparent)) {
.admin-panel-root .users-card,
.users-root .users-card {
background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
}
}
/* Table wrapper for horizontal scroll */ /* Table wrapper for horizontal scroll */
.admin-panel-root .users-table-wrapper, .admin-panel-root .users-table-wrapper,
.users-root .users-table-wrapper { .users-root .users-table-wrapper {
@@ -172,7 +193,7 @@
/* Users Settings Card */ /* Users Settings Card */
.users-setting-card { .users-setting-card {
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
padding: var(--space-6); padding: var(--space-6);
@@ -197,7 +218,7 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
background: var(--color-bg-elevated); background: var(--color-bg-elevated);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
border-radius: var(--radius-md); border-radius: var(--radius-md);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -2356,4 +2377,4 @@
[data-theme='dark'][data-accent='auto'] .users-modal .toggle-inline input:checked+.toggle-slider-sm::before { [data-theme='dark'][data-accent='auto'] .users-modal .toggle-inline input:checked+.toggle-slider-sm::before {
background: #111827; background: #111827;
} }

37
frontend/src/styles/Dashboard.css
View File

@@ -8,7 +8,7 @@
.stats-grid { .stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1.5rem; gap: var(--section-gap);
width: 100%; width: 100%;
} }
@@ -17,21 +17,42 @@
background: var(--color-bg-card); background: var(--color-bg-card);
padding: 1.5rem; padding: 1.5rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
border: 1px solid var(--color-card-outline);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: transform 0.2s, box-shadow 0.2s; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
@supports (color: color-mix(in srgb, black, transparent)) {
.stat-card {
background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
}
} }
.stat-card:hover { .stat-card:hover {
transform: translateY(-2px); transform: translateY(-3px);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
border-color: rgba(var(--color-accent-rgb), 0.25);
} }
.stat-card h3 { .stat-card h3 {
margin-top: 0; margin-top: 0;
color: var(--color-text-primary); color: var(--color-text-primary);
border-bottom: 2px solid var(--color-accent); border-bottom: 1px solid var(--color-card-outline);
padding-bottom: 0.5rem; padding-bottom: 0.75rem;
font-size: 1.25rem; font-size: 1.15rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.stat-card h3::before {
content: '';
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--color-accent);
box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.14);
} }
.stat-card p { .stat-card p {
@@ -43,8 +64,8 @@
/* Admin Card Variant */ /* Admin Card Variant */
.admin-card { .admin-card {
border: 2px solid var(--color-accent); border: 1px solid rgba(var(--color-accent-rgb), 0.35);
background: var(--color-bg-elevated); background: rgba(var(--color-accent-rgb), 0.05);
} }
/* Status Indicators */ /* Status Indicators */

21
frontend/src/styles/Layout.css
View File

@@ -35,7 +35,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0.75rem var(--page-padding-x); padding: 0.75rem var(--page-padding-x);
background: var(--color-bg-main); background: transparent;
} }
/* Page header slider - rounded pill style (like admin panel) */ /* Page header slider - rounded pill style (like admin panel) */
@@ -44,12 +44,20 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background: var(--color-bg-elevated); background: var(--color-bg-elevated);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 4px; padding: 4px;
gap: 4px; gap: 4px;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-md);
max-width: 100%; max-width: 100%;
backdrop-filter: blur(14px) saturate(1.15);
}
@supports (color: color-mix(in srgb, black, white)) {
.page-tabs-slider,
.admin-tabs-slider {
background: color-mix(in srgb, var(--color-bg-elevated) 78%, transparent);
}
} }
/* Page title section inside slider */ /* Page title section inside slider */
@@ -133,14 +141,15 @@
.page-tab-btn:hover:not(.active), .page-tab-btn:hover:not(.active),
.admin-tab-btn:hover:not(.active) { .admin-tab-btn:hover:not(.active) {
color: var(--color-text-primary); color: var(--color-text-primary);
background: rgba(var(--color-accent-rgb), 0.1); background: rgba(var(--color-accent-rgb), 0.10);
} }
.page-tab-btn.active, .page-tab-btn.active,
.admin-tab-btn.active { .admin-tab-btn.active {
background: var(--color-accent); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
color: white; color: white;
box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3); box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
transform: translateY(-1px);
} }
.page-subtitle { .page-subtitle {
@@ -445,4 +454,4 @@
[data-theme='dark'][data-accent='auto'] .page-tab-btn.active:focus-visible, [data-theme='dark'][data-accent='auto'] .page-tab-btn.active:focus-visible,
[data-theme='dark'][data-accent='auto'] .admin-tab-btn.active:focus-visible { [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active:focus-visible {
box-shadow: 0 0 25px 4px rgba(229, 231, 235, 0.5); box-shadow: 0 0 25px 4px rgba(229, 231, 235, 0.5);
} }

52
frontend/src/styles/Login.css
View File

@@ -3,7 +3,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--color-bg-main); background: transparent;
padding: 1rem; padding: 1rem;
} }
@@ -11,10 +11,17 @@
background: var(--color-bg-card); background: var(--color-bg-card);
padding: 2rem; padding: 2rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-xl);
width: 100%; width: 100%;
max-width: 450px; max-width: 450px;
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
}
@supports (color: color-mix(in srgb, black, transparent)) {
.login-card {
background: color-mix(in srgb, var(--color-bg-card) 86%, transparent);
backdrop-filter: blur(18px) saturate(1.15);
}
} }
/* Mobile responsiveness */ /* Mobile responsiveness */
@@ -90,38 +97,49 @@
.form-group input { .form-group input {
width: 100%; width: 100%;
padding: 0.75rem; height: var(--height-input);
padding: 0 0.875rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); border-radius: var(--radius-md);
font-size: 1rem; font-size: 0.95rem;
background: var(--color-bg-card); background: var(--color-bg-card);
color: var(--color-text-primary); color: var(--color-text-primary);
transition: border-color 0.3s; transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
} }
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: var(--color-accent); border-color: rgba(var(--color-accent-rgb), 0.55);
box-shadow: var(--shadow-ring);
} }
.btn-primary { .login-container .btn-primary {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-accent); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: var(--shadow-md);
} }
.btn-primary:hover { .login-container .btn-primary:hover {
background: var(--color-accent-hover); filter: brightness(1.03);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.login-container .btn-primary:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
} }
.login-footer { .login-footer {
@@ -134,17 +152,19 @@
gap: 1rem; gap: 1rem;
} }
.btn-link { .login-container .btn-link {
background: none; background: none;
border: none; border: none;
color: var(--color-accent); color: var(--color-accent);
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: none;
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 600;
} }
.btn-link:hover { .login-container .btn-link:hover {
color: var(--color-accent-hover); color: var(--color-accent-hover);
text-decoration: underline;
} }
.footer-actions { .footer-actions {

20
frontend/src/styles/SettingsPage.css
View File

@@ -20,13 +20,20 @@
/* Settings Sections */ /* Settings Sections */
.settings-section-modern { .settings-section-modern {
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 2rem; padding: 2rem;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@supports (color: color-mix(in srgb, black, transparent)) {
.settings-section-modern {
background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
}
}
.settings-section-modern:last-child { .settings-section-modern:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@@ -39,7 +46,7 @@
align-items: center; align-items: center;
gap: 2rem; gap: 2rem;
padding: 1.5rem 0; padding: 1.5rem 0;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-card-outline);
} }
.setting-item-modern:last-child { .setting-item-modern:last-child {
@@ -78,6 +85,7 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
background: var(--color-bg-elevated); background: var(--color-bg-elevated);
border: 1px solid var(--color-card-outline);
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-accent); color: var(--color-accent);
flex-shrink: 0; flex-shrink: 0;
@@ -89,7 +97,7 @@
.select-modern { .select-modern {
padding: 0.5rem 2rem 0.5rem 1rem; padding: 0.5rem 2rem 0.5rem 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background-color: var(--color-bg-elevated); background-color: var(--color-bg-elevated);
color: var(--color-text-primary); color: var(--color-text-primary);
@@ -104,8 +112,8 @@
.select-modern:focus { .select-modern:focus {
outline: none; outline: none;
border-color: var(--color-accent); border-color: rgba(var(--color-accent-rgb), 0.45);
box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.2); box-shadow: var(--shadow-ring);
} }
/* Modern Toggle */ /* Modern Toggle */
@@ -172,4 +180,4 @@
align-items: flex-start; align-items: flex-start;
gap: 1rem; gap: 1rem;
} }
} }

98
frontend/src/styles/Sidebar.css
View File

@@ -25,6 +25,19 @@
/* Subtle border */ /* Subtle border */
} }
@supports (color: color-mix(in srgb, black, transparent)) {
.sidebar {
background: color-mix(in srgb, var(--color-bg-sidebar) 88%, transparent);
}
/* Avoid backdrop-filter on collapsed sidebar: it can break fixed-position dropdowns */
.sidebar:not(.collapsed),
.sidebar.dynamic.collapsed.expanded-force,
.sidebar.open {
backdrop-filter: blur(18px) saturate(1.15);
}
}
.sidebar.clickable { .sidebar.clickable {
cursor: pointer; cursor: pointer;
} }
@@ -204,7 +217,7 @@
.sidebar-header { .sidebar-header {
padding: 1rem; padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid var(--color-sidebar-border);
height: 70px; height: 70px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -313,7 +326,7 @@
.nav-section-bottom { .nav-section-bottom {
margin-top: 0.75rem; margin-top: 0.75rem;
padding-top: 0.75rem; padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid var(--color-sidebar-border);
} }
.nav-section-title { .nav-section-title {
@@ -350,8 +363,12 @@
/* Ensure no gap affects centering */ /* Ensure no gap affects centering */
} }
.sidebar.collapsed .nav-item.active::before {
display: none;
}
.nav-item:hover { .nav-item:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(var(--color-accent-rgb), 0.10);
color: var(--color-text-sidebar) !important; color: var(--color-text-sidebar) !important;
} }
@@ -361,25 +378,32 @@
} }
.sidebar:not(.collapsed) .nav-item:hover { .sidebar:not(.collapsed) .nav-item:hover {
transform: translateX(4px); transform: translateX(2px);
} }
.nav-item.active { .nav-item.active {
background: var(--color-accent); background: rgba(var(--color-accent-rgb), 0.16);
/* Use accent color for active state */ border: 1px solid rgba(var(--color-accent-rgb), 0.22);
font-weight: 600; font-weight: 650;
color: white !important; color: var(--color-text-sidebar) !important;
box-shadow: var(--shadow-md); box-shadow: none;
} }
.nav-item.active .nav-icon, .nav-item.active .nav-icon,
.nav-item.active .nav-label { .nav-item.active .nav-label {
color: white !important; color: var(--color-text-sidebar) !important;
} }
.nav-item.active::before { .nav-item.active::before {
display: none; content: '';
/* Remove the side bar indicator */ position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 58%;
border-radius: 999px;
background: var(--color-accent);
} }
.nav-icon { .nav-icon {
@@ -400,7 +424,7 @@
.sidebar-footer { .sidebar-footer {
padding: 0.75rem; padding: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid var(--color-sidebar-border);
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -423,7 +447,7 @@
gap: 0.75rem; gap: 0.75rem;
padding: 0.75rem; padding: 0.75rem;
background: transparent; background: transparent;
border: none; border: 1px solid transparent;
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: var(--color-text-sidebar); color: var(--color-text-sidebar);
cursor: pointer; cursor: pointer;
@@ -434,7 +458,8 @@
} }
.view-mode-toggle:hover { .view-mode-toggle:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(var(--color-accent-rgb), 0.10);
border-color: rgba(var(--color-accent-rgb), 0.18);
color: var(--color-text-sidebar) !important; color: var(--color-text-sidebar) !important;
} }
@@ -450,13 +475,13 @@
} }
.view-mode-toggle.user-mode { .view-mode-toggle.user-mode {
background: rgba(var(--color-accent-rgb), 0.2); background: rgba(var(--color-accent-rgb), 0.16);
border-color: rgba(var(--color-accent-rgb), 0.3); border-color: rgba(var(--color-accent-rgb), 0.22);
} }
.view-mode-toggle.user-mode:hover { .view-mode-toggle.user-mode:hover {
background: rgba(var(--color-accent-rgb), 0.3); background: rgba(var(--color-accent-rgb), 0.20);
border-color: rgba(var(--color-accent-rgb), 0.4); border-color: rgba(var(--color-accent-rgb), 0.28);
} }
.sidebar.collapsed .view-mode-toggle { .sidebar.collapsed .view-mode-toggle {
@@ -468,7 +493,8 @@
.user-info-compact { .user-info-compact {
padding: 0.5rem; padding: 0.5rem;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--color-sidebar-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
margin: 0; margin: 0;
transition: padding 0.3s ease; transition: padding 0.3s ease;
@@ -516,7 +542,7 @@
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 700; font-weight: 700;
background: rgba(255, 255, 255, 0.3); background: rgba(var(--color-accent-rgb), 0.25);
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
color: var(--color-text-sidebar); color: var(--color-text-sidebar);
@@ -669,10 +695,8 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.3); background: var(--color-overlay);
/* Lighter overlay */ backdrop-filter: blur(6px);
backdrop-filter: blur(2px);
/* Blur the content behind */
z-index: 1000; z-index: 1000;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
@@ -729,7 +753,7 @@
.user-menu-trigger:hover, .user-menu-trigger:hover,
.user-menu-trigger.active { .user-menu-trigger.active {
background: rgba(255, 255, 255, 0.1); background: rgba(var(--color-accent-rgb), 0.10);
} }
.sidebar.dynamic.collapsed .user-menu-trigger:hover, .sidebar.dynamic.collapsed .user-menu-trigger:hover,
@@ -751,7 +775,7 @@
} }
.sidebar.dynamic.collapsed .user-menu-trigger .user-info-compact:hover { .sidebar.dynamic.collapsed .user-menu-trigger .user-info-compact:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(var(--color-accent-rgb), 0.10);
} }
.user-menu-trigger .chevron { .user-menu-trigger .chevron {
@@ -773,14 +797,20 @@
transform: translateX(-50%); transform: translateX(-50%);
transform-origin: bottom center; transform-origin: bottom center;
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
z-index: 1100; z-index: 1100;
overflow: hidden; overflow: hidden;
animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1); animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
width: 244px; width: 244px;
border-color: var(--color-border); }
@supports (color: color-mix(in srgb, black, transparent)) {
.user-menu-dropdown {
background: color-mix(in srgb, var(--color-bg-card) 86%, transparent);
backdrop-filter: blur(16px) saturate(1.15);
}
} }
.sidebar.collapsed .user-menu-dropdown { .sidebar.collapsed .user-menu-dropdown {
@@ -842,8 +872,8 @@
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-md);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
z-index: 1100; z-index: 1100;
pointer-events: none; pointer-events: none;
animation: tooltipFadeIn 0.2s ease forwards; animation: tooltipFadeIn 0.2s ease forwards;
@@ -857,7 +887,7 @@
transform: translateY(-50%); transform: translateY(-50%);
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
border-style: solid; border-style: solid;
border-color: transparent var(--color-border) transparent transparent; border-color: transparent var(--color-card-outline) transparent transparent;
} }
.sidebar-tooltip::after { .sidebar-tooltip::after {
@@ -956,7 +986,7 @@
} }
.user-menu-item:hover { .user-menu-item:hover {
background: var(--color-bg-elevated); background: rgba(var(--color-accent-rgb), 0.08);
color: var(--color-accent); color: var(--color-accent);
} }
@@ -1032,4 +1062,4 @@
[data-theme='dark'][data-accent='auto'] .nav-item.active .nav-icon, [data-theme='dark'][data-accent='auto'] .nav-item.active .nav-icon,
[data-theme='dark'][data-accent='auto'] .nav-item.active .nav-label { [data-theme='dark'][data-accent='auto'] .nav-item.active .nav-label {
color: #111827 !important; color: #111827 !important;
} }

19
frontend/src/styles/ThemeSettings.css
View File

@@ -564,28 +564,29 @@
} }
/* Button Styles for Preview */ /* Button Styles for Preview */
.btn-primary { .theme-settings-root .btn-primary {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.65rem 1.25rem; padding: 0.65rem 1.25rem;
background: var(--color-accent); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
box-shadow: var(--shadow-md);
} }
.btn-primary:hover { .theme-settings-root .btn-primary:hover {
opacity: 0.9; filter: brightness(1.03);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.3); box-shadow: var(--shadow-lg);
} }
.btn-ghost { .theme-settings-root .btn-ghost {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
@@ -600,7 +601,7 @@
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.btn-ghost:hover { .theme-settings-root .btn-ghost:hover {
background: var(--color-bg-elevated); background: var(--color-bg-elevated);
border-color: var(--color-accent); border-color: var(--color-accent);
} }
@@ -1486,4 +1487,4 @@
[data-theme='dark'][data-accent='auto'] .chrome-picker input:focus { [data-theme='dark'][data-accent='auto'] .chrome-picker input:focus {
border-color: #e5e7eb !important; border-color: #e5e7eb !important;
box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.15) !important; box-shadow: 0 0 0 3px rgba(229, 231, 235, 0.15) !important;
} }

35
frontend/src/styles/Users.css
View File

@@ -69,12 +69,19 @@
/* Table */ /* Table */
.users-root .users-card { .users-root .users-card {
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
overflow: hidden; overflow: hidden;
} }
@supports (color: color-mix(in srgb, black, transparent)) {
.users-root .users-card {
background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
}
}
.users-root .users-table { .users-root .users-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
@@ -90,7 +97,7 @@
} }
.users-root .users-table tbody tr:not(:last-child) { .users-root .users-table tbody tr:not(:last-child) {
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-card-outline);
} }
.users-root .users-table th { .users-root .users-table th {
@@ -103,7 +110,7 @@
} }
.users-root .users-table tbody tr:hover { .users-root .users-table tbody tr:hover {
background: var(--color-bg-elevated); background: rgba(var(--color-accent-rgb), 0.05);
} }
/* User Cell */ /* User Cell */
@@ -156,17 +163,24 @@
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.35rem;
padding: 0.55rem 0.9rem; padding: 0.55rem 0.9rem;
background: var(--color-accent); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: var(--transition); transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
box-shadow: var(--shadow-sm);
} }
.users-root .btn-primary:hover { .users-root .btn-primary:hover {
background: var(--color-accent-hover); filter: brightness(1.03);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.users-root .btn-primary:active {
transform: translateY(0);
} }
.users-root .btn-ghost { .users-root .btn-ghost {
@@ -175,15 +189,16 @@
gap: 0.35rem; gap: 0.35rem;
padding: 0.5rem 0.85rem; padding: 0.5rem 0.85rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--color-border); border: 1px solid var(--color-card-outline);
background: var(--color-bg-main); background: transparent;
color: var(--color-text-primary); color: var(--color-text-primary);
cursor: pointer; cursor: pointer;
transition: var(--transition); transition: var(--transition);
} }
.users-root .btn-ghost:hover { .users-root .btn-ghost:hover {
background: var(--color-bg-card); background: rgba(var(--color-accent-rgb), 0.06);
border-color: rgba(var(--color-accent-rgb), 0.18);
} }
.users-root .btn-ghost.danger { .users-root .btn-ghost.danger {
@@ -683,4 +698,4 @@
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
} }
} }

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

@@ -27,6 +27,11 @@
--color-border: #e5e7eb; --color-border: #e5e7eb;
--color-border-hover: #d1d5db; --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) */ /* Semantic Colors (same for both themes) */
--color-success: #059669; --color-success: #059669;
--color-error: #dc2626; --color-error: #dc2626;
@@ -59,9 +64,26 @@
--color-border: #334155; --color-border: #334155;
--color-border-hover: #475569; --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 */ /* Semantic Colors */
--color-success: #10b981; --color-success: #10b981;
--color-error: #ef4444; --color-error: #ef4444;
--color-warning: #f59e0b; --color-warning: #f59e0b;
--color-info: #06b6d4; --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-sm: 4px;
--radius-md: 6px; --radius-md: 6px;
--radius-lg: 8px; --radius-lg: 8px;
--radius-xl: 12px; --radius-xl: 20px;
--radius-full: 9999px; --radius-full: 9999px;
/* Component Heights */ /* Component Heights */
@@ -151,4 +151,4 @@
--breakpoint-mobile: 768px; --breakpoint-mobile: 768px;
--breakpoint-tablet: 1024px; --breakpoint-tablet: 1024px;
--breakpoint-desktop: 1280px; --breakpoint-desktop: 1280px;
} }

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

@@ -3,44 +3,45 @@
========================================== */ ========================================== */
:root { :root {
/* Box Shadows */ /* Box Shadows (modern, softer multi-layer) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); --shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.08);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); --shadow-2xl: 0 48px 110px rgba(0, 0, 0, 0.22);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); --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 */ /* Transitions */
--transition-fast: 0.15s ease; --transition-fast: 120ms var(--ease-out);
--transition-base: 0.2s ease; --transition-base: 180ms var(--ease-out);
--transition-slow: 0.3s ease; --transition-slow: 260ms var(--ease-out);
--transition-slower: 0.5s ease; --transition-slower: 420ms var(--ease-out);
/* Transition Properties */ /* Transition Properties */
--transition: all 0.2s ease; --transition: all var(--transition-base);
--transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; --transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
--transition-transform: transform 0.2s ease; --transition-transform: transform var(--transition-base);
--transition-opacity: opacity 0.2s ease; --transition-opacity: opacity var(--transition-base);
/* Animation Durations */ /* Animation Durations */
--duration-fast: 150ms; --duration-fast: 120ms;
--duration-base: 200ms; --duration-base: 180ms;
--duration-slow: 300ms; --duration-slow: 260ms;
--duration-slower: 500ms; --duration-slower: 420ms;
/* Easing Functions */ /* Easing Functions */
--ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
--ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
} }
[data-theme='dark'] { [data-theme='dark'] {
/* Dark Theme - Stronger Shadows */ /* Dark Theme - Deeper Shadows with less haze */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-md: 0 10px 22px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6); --shadow-xl: 0 34px 72px rgba(0, 0, 0, 0.65), 0 14px 28px rgba(0, 0, 0, 0.4);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7); --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; padding: 0;
} }
html {
color-scheme: light dark;
}
body { body {
margin: 0; margin: 0;
min-width: 320px; min-width: 320px;
@@ -31,6 +35,8 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
overflow-x: hidden;
accent-color: var(--color-accent);
} }
/* Utility for selectable text */ /* Utility for selectable text */
@@ -43,6 +49,23 @@ body {
#root { #root {
min-height: 100vh; min-height: 100vh;
width: 100%; 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 */ /* Links */
@@ -71,8 +94,8 @@ button {
button:focus, button:focus,
button:focus-visible { button:focus-visible {
outline: 2px solid var(--color-accent); outline: none;
outline-offset: 2px; box-shadow: var(--shadow-ring);
} }
/* Loading state */ /* Loading state */
@@ -85,6 +108,12 @@ button:focus-visible {
color: var(--color-accent); color: var(--color-accent);
} }
/* Text selection */
::selection {
background: rgba(var(--color-accent-rgb), 0.22);
color: var(--color-text-primary);
}
/* Scrollbar styling */ /* Scrollbar styling */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
@@ -124,4 +153,18 @@ button:focus-visible {
/* Loading state */ /* Loading state */
[data-theme='dark'][data-accent='auto'] .loading { [data-theme='dark'][data-accent='auto'] .loading {
color: #e5e7eb; 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;
}
}