Modernize UI with glass morphism and refined styling
- 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:
@@ -14,6 +14,23 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
font-size: 1.5rem;
|
||||
color: #667eea;
|
||||
gap: 0.75rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,6 +79,23 @@ const ACCENT_COLORS: Record<AccentColor, { main: string; hover: string; darkMain
|
||||
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 }> = {
|
||||
small: { sm: '2px', md: '4px', lg: '6px' },
|
||||
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;
|
||||
root.style.setProperty('--color-accent', main);
|
||||
root.style.setProperty('--color-accent-hover', hover);
|
||||
const rgb = hexToRgbString(main);
|
||||
if (rgb) {
|
||||
root.style.setProperty('--color-accent-rgb', rgb);
|
||||
}
|
||||
}, [accentColor, theme]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -75,19 +75,26 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: var(--btn-padding-md);
|
||||
background: var(--color-accent);
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: var(--btn-font-size);
|
||||
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 {
|
||||
background: var(--color-accent-hover);
|
||||
opacity: 0.95;
|
||||
filter: brightness(1.03);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary .material-symbols-outlined {
|
||||
@@ -118,6 +125,12 @@
|
||||
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,
|
||||
.users-root .input-group input {
|
||||
border: none;
|
||||
@@ -137,12 +150,20 @@
|
||||
.admin-panel-root .users-card,
|
||||
.users-root .users-card {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
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 */
|
||||
.admin-panel-root .users-table-wrapper,
|
||||
.users-root .users-table-wrapper {
|
||||
@@ -172,7 +193,7 @@
|
||||
/* Users Settings Card */
|
||||
.users-setting-card {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--space-6);
|
||||
@@ -197,7 +218,7 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
gap: var(--section-gap);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -17,21 +17,42 @@
|
||||
background: var(--color-bg-card);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
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 {
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: rgba(var(--color-accent-rgb), 0.25);
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
margin-top: 0;
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: 2px solid var(--color-accent);
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
border-bottom: 1px solid var(--color-card-outline);
|
||||
padding-bottom: 0.75rem;
|
||||
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 {
|
||||
@@ -43,8 +64,8 @@
|
||||
|
||||
/* Admin Card Variant */
|
||||
.admin-card {
|
||||
border: 2px solid var(--color-accent);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(var(--color-accent-rgb), 0.35);
|
||||
background: rgba(var(--color-accent-rgb), 0.05);
|
||||
}
|
||||
|
||||
/* Status Indicators */
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.75rem var(--page-padding-x);
|
||||
background: var(--color-bg-main);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Page header slider - rounded pill style (like admin panel) */
|
||||
@@ -44,12 +44,20 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
box-shadow: var(--shadow-md);
|
||||
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 */
|
||||
@@ -133,14 +141,15 @@
|
||||
.page-tab-btn:hover:not(.active),
|
||||
.admin-tab-btn:hover:not(.active) {
|
||||
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,
|
||||
.admin-tab-btn.active {
|
||||
background: var(--color-accent);
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-bg-main);
|
||||
background: transparent;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@@ -11,10 +11,17 @@
|
||||
background: var(--color-bg-card);
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
width: 100%;
|
||||
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 */
|
||||
@@ -90,38 +97,49 @@
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
height: var(--height-input);
|
||||
padding: 0 0.875rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.95rem;
|
||||
background: var(--color-bg-card);
|
||||
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 {
|
||||
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%;
|
||||
padding: 0.75rem;
|
||||
background: var(--color-accent);
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-accent-hover);
|
||||
.login-container .btn-primary: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 {
|
||||
@@ -134,17 +152,19 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
.login-container .btn-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-accent);
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
.login-container .btn-link:hover {
|
||||
color: var(--color-accent-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
|
||||
@@ -20,13 +20,20 @@
|
||||
/* Settings Sections */
|
||||
.settings-section-modern {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -39,7 +46,7 @@
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-card-outline);
|
||||
}
|
||||
|
||||
.setting-item-modern:last-child {
|
||||
@@ -78,6 +85,7 @@
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-accent);
|
||||
flex-shrink: 0;
|
||||
@@ -89,7 +97,7 @@
|
||||
|
||||
.select-modern {
|
||||
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);
|
||||
background-color: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
@@ -104,8 +112,8 @@
|
||||
|
||||
.select-modern:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.2);
|
||||
border-color: rgba(var(--color-accent-rgb), 0.45);
|
||||
box-shadow: var(--shadow-ring);
|
||||
}
|
||||
|
||||
/* Modern Toggle */
|
||||
|
||||
@@ -25,6 +25,19 @@
|
||||
/* 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 {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -204,7 +217,7 @@
|
||||
|
||||
.sidebar-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--color-sidebar-border);
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -313,7 +326,7 @@
|
||||
.nav-section-bottom {
|
||||
margin-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 {
|
||||
@@ -350,8 +363,12 @@
|
||||
/* Ensure no gap affects centering */
|
||||
}
|
||||
|
||||
.sidebar.collapsed .nav-item.active::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(var(--color-accent-rgb), 0.10);
|
||||
color: var(--color-text-sidebar) !important;
|
||||
}
|
||||
|
||||
@@ -361,25 +378,32 @@
|
||||
}
|
||||
|
||||
.sidebar:not(.collapsed) .nav-item:hover {
|
||||
transform: translateX(4px);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: var(--color-accent);
|
||||
/* Use accent color for active state */
|
||||
font-weight: 600;
|
||||
color: white !important;
|
||||
box-shadow: var(--shadow-md);
|
||||
background: rgba(var(--color-accent-rgb), 0.16);
|
||||
border: 1px solid rgba(var(--color-accent-rgb), 0.22);
|
||||
font-weight: 650;
|
||||
color: var(--color-text-sidebar) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-icon,
|
||||
.nav-item.active .nav-label {
|
||||
color: white !important;
|
||||
color: var(--color-text-sidebar) !important;
|
||||
}
|
||||
|
||||
.nav-item.active::before {
|
||||
display: none;
|
||||
/* Remove the side bar indicator */
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 58%;
|
||||
border-radius: 999px;
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
@@ -400,7 +424,7 @@
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--color-sidebar-border);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -423,7 +447,7 @@
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-sidebar);
|
||||
cursor: pointer;
|
||||
@@ -434,7 +458,8 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -450,13 +475,13 @@
|
||||
}
|
||||
|
||||
.view-mode-toggle.user-mode {
|
||||
background: rgba(var(--color-accent-rgb), 0.2);
|
||||
border-color: rgba(var(--color-accent-rgb), 0.3);
|
||||
background: rgba(var(--color-accent-rgb), 0.16);
|
||||
border-color: rgba(var(--color-accent-rgb), 0.22);
|
||||
}
|
||||
|
||||
.view-mode-toggle.user-mode:hover {
|
||||
background: rgba(var(--color-accent-rgb), 0.3);
|
||||
border-color: rgba(var(--color-accent-rgb), 0.4);
|
||||
background: rgba(var(--color-accent-rgb), 0.20);
|
||||
border-color: rgba(var(--color-accent-rgb), 0.28);
|
||||
}
|
||||
|
||||
.sidebar.collapsed .view-mode-toggle {
|
||||
@@ -468,7 +493,8 @@
|
||||
|
||||
.user-info-compact {
|
||||
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);
|
||||
margin: 0;
|
||||
transition: padding 0.3s ease;
|
||||
@@ -516,7 +542,7 @@
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(var(--color-accent-rgb), 0.25);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
color: var(--color-text-sidebar);
|
||||
@@ -669,10 +695,8 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
/* Lighter overlay */
|
||||
backdrop-filter: blur(2px);
|
||||
/* Blur the content behind */
|
||||
background: var(--color-overlay);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 1000;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
@@ -729,7 +753,7 @@
|
||||
|
||||
.user-menu-trigger:hover,
|
||||
.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,
|
||||
@@ -751,7 +775,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -773,14 +797,20 @@
|
||||
transform: translateX(-50%);
|
||||
transform-origin: bottom center;
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
z-index: 1100;
|
||||
overflow: hidden;
|
||||
animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
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 {
|
||||
@@ -842,8 +872,8 @@
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
z-index: 1100;
|
||||
pointer-events: none;
|
||||
animation: tooltipFadeIn 0.2s ease forwards;
|
||||
@@ -857,7 +887,7 @@
|
||||
transform: translateY(-50%);
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-style: solid;
|
||||
border-color: transparent var(--color-border) transparent transparent;
|
||||
border-color: transparent var(--color-card-outline) transparent transparent;
|
||||
}
|
||||
|
||||
.sidebar-tooltip::after {
|
||||
@@ -956,7 +986,7 @@
|
||||
}
|
||||
|
||||
.user-menu-item:hover {
|
||||
background: var(--color-bg-elevated);
|
||||
background: rgba(var(--color-accent-rgb), 0.08);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
|
||||
@@ -564,28 +564,29 @@
|
||||
}
|
||||
|
||||
/* Button Styles for Preview */
|
||||
.btn-primary {
|
||||
.theme-settings-root .btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.65rem 1.25rem;
|
||||
background: var(--color-accent);
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
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 {
|
||||
opacity: 0.9;
|
||||
.theme-settings-root .btn-primary:hover {
|
||||
filter: brightness(1.03);
|
||||
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;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
@@ -600,7 +601,7 @@
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
.theme-settings-root .btn-ghost:hover {
|
||||
background: var(--color-bg-elevated);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
@@ -69,12 +69,19 @@
|
||||
/* Table */
|
||||
.users-root .users-card {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
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 {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
@@ -90,7 +97,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@@ -103,7 +110,7 @@
|
||||
}
|
||||
|
||||
.users-root .users-table tbody tr:hover {
|
||||
background: var(--color-bg-elevated);
|
||||
background: rgba(var(--color-accent-rgb), 0.05);
|
||||
}
|
||||
|
||||
/* User Cell */
|
||||
@@ -156,17 +163,24 @@
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.55rem 0.9rem;
|
||||
background: var(--color-accent);
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
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 {
|
||||
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 {
|
||||
@@ -175,15 +189,16 @@
|
||||
gap: 0.35rem;
|
||||
padding: 0.5rem 0.85rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-main);
|
||||
border: 1px solid var(--color-card-outline);
|
||||
background: transparent;
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Component Heights */
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
@@ -125,3 +154,17 @@ button:focus-visible {
|
||||
[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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user