Transform glass designs to subtle bolt.ai style
Build And Push Image / docker (push) Successful in 2m0s
Details
Build And Push Image / docker (push) Successful in 2m0s
Details
- Reduced blur effects from 10-60px to 2-4px for better performance
- Changed gradients from heavy red to subtle light (#fef2f2-#ffffff)
- Updated text colors from white to dark (#27272a) for better readability
- Created design tokens system for consistent theming
- Added global glass-bolt-style.scss for unified styling
- Updated GlassCard, MonacoButton, GlassSidebar components
- Transformed glass dashboard to match bolt.ai mockup patterns
- Simplified animations and reduced visual noise
- Improved mobile performance with responsive blur reduction
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
f735b68fed
commit
af31781323
|
|
@ -0,0 +1,193 @@
|
||||||
|
// Design Tokens for Bolt.ai Style System
|
||||||
|
// Based on consensus from multiple AI models for optimal UI transformation
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Color Palette
|
||||||
|
// ============================================
|
||||||
|
:root {
|
||||||
|
// Primary Colors - Subtle, professional tones
|
||||||
|
--color-primary: #dc2626; // Monaco red for branding
|
||||||
|
--color-primary-light: #fef2f2; // Very light red for backgrounds
|
||||||
|
--color-primary-soft: rgba(220, 38, 38, 0.1); // Soft red for hover states
|
||||||
|
|
||||||
|
// Background Colors
|
||||||
|
--color-bg-primary: #ffffff;
|
||||||
|
--color-bg-secondary: #f8f9fa;
|
||||||
|
--color-bg-gradient: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
||||||
|
|
||||||
|
// Glass Effects - Subtle transparency
|
||||||
|
--color-glass-white: rgba(255, 255, 255, 0.6);
|
||||||
|
--color-glass-light: rgba(255, 255, 255, 0.8);
|
||||||
|
--color-glass-dark: rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
// Text Colors
|
||||||
|
--color-text-primary: #27272a;
|
||||||
|
--color-text-secondary: #6b7280;
|
||||||
|
--color-text-muted: #9ca3af;
|
||||||
|
--color-text-white: #ffffff;
|
||||||
|
|
||||||
|
// Status Colors
|
||||||
|
--color-success: #10b981;
|
||||||
|
--color-warning: #f59e0b;
|
||||||
|
--color-error: #ef4444;
|
||||||
|
--color-info: #3b82f6;
|
||||||
|
|
||||||
|
// Border Colors
|
||||||
|
--color-border-light: rgba(0, 0, 0, 0.05);
|
||||||
|
--color-border-medium: rgba(0, 0, 0, 0.1);
|
||||||
|
--color-border-white: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Spacing System (8-point grid)
|
||||||
|
// ============================================
|
||||||
|
$spacing-unit: 8px;
|
||||||
|
|
||||||
|
$space-0: 0;
|
||||||
|
$space-1: $spacing-unit; // 8px
|
||||||
|
$space-2: $spacing-unit * 2; // 16px
|
||||||
|
$space-3: $spacing-unit * 3; // 24px
|
||||||
|
$space-4: $spacing-unit * 4; // 32px
|
||||||
|
$space-5: $spacing-unit * 5; // 40px
|
||||||
|
$space-6: $spacing-unit * 6; // 48px
|
||||||
|
$space-7: $spacing-unit * 7; // 56px
|
||||||
|
$space-8: $spacing-unit * 8; // 64px
|
||||||
|
$space-10: $spacing-unit * 10; // 80px
|
||||||
|
$space-12: $spacing-unit * 12; // 96px
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Typography Scale
|
||||||
|
// ============================================
|
||||||
|
:root {
|
||||||
|
// Font Families
|
||||||
|
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
|
||||||
|
|
||||||
|
// Font Sizes
|
||||||
|
--text-xs: 0.75rem; // 12px
|
||||||
|
--text-sm: 0.875rem; // 14px
|
||||||
|
--text-base: 1rem; // 16px
|
||||||
|
--text-lg: 1.125rem; // 18px
|
||||||
|
--text-xl: 1.25rem; // 20px
|
||||||
|
--text-2xl: 1.5rem; // 24px
|
||||||
|
--text-3xl: 1.875rem; // 30px
|
||||||
|
--text-4xl: 2.25rem; // 36px
|
||||||
|
--text-5xl: 3rem; // 48px
|
||||||
|
|
||||||
|
// Font Weights
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold: 600;
|
||||||
|
--font-bold: 700;
|
||||||
|
--font-extrabold: 800;
|
||||||
|
|
||||||
|
// Line Heights
|
||||||
|
--leading-tight: 1.25;
|
||||||
|
--leading-normal: 1.5;
|
||||||
|
--leading-relaxed: 1.75;
|
||||||
|
|
||||||
|
// Letter Spacing
|
||||||
|
--tracking-tight: -0.02em;
|
||||||
|
--tracking-normal: 0;
|
||||||
|
--tracking-wide: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Border Radius
|
||||||
|
// ============================================
|
||||||
|
:root {
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 8px;
|
||||||
|
--radius-lg: 12px;
|
||||||
|
--radius-xl: 16px;
|
||||||
|
--radius-2xl: 24px;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Shadows (Subtle, layered approach)
|
||||||
|
// ============================================
|
||||||
|
:root {
|
||||||
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||||
|
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
|
||||||
|
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||||
|
--shadow-monaco: 0 8px 24px rgba(220, 38, 38, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Glass Effects (Reduced blur for performance)
|
||||||
|
// ============================================
|
||||||
|
:root {
|
||||||
|
--blur-none: 0;
|
||||||
|
--blur-sm: 2px;
|
||||||
|
--blur-md: 4px;
|
||||||
|
--blur-lg: 8px; // Maximum blur, use sparingly
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Transitions (Consistent timing)
|
||||||
|
// ============================================
|
||||||
|
:root {
|
||||||
|
--transition-fast: 150ms ease;
|
||||||
|
--transition-base: 200ms ease;
|
||||||
|
--transition-slow: 300ms ease;
|
||||||
|
--transition-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Z-Index Scale
|
||||||
|
// ============================================
|
||||||
|
:root {
|
||||||
|
--z-base: 0;
|
||||||
|
--z-dropdown: 10;
|
||||||
|
--z-sticky: 20;
|
||||||
|
--z-overlay: 30;
|
||||||
|
--z-modal: 40;
|
||||||
|
--z-popover: 50;
|
||||||
|
--z-tooltip: 60;
|
||||||
|
--z-max: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Breakpoints
|
||||||
|
// ============================================
|
||||||
|
$breakpoint-sm: 640px;
|
||||||
|
$breakpoint-md: 768px;
|
||||||
|
$breakpoint-lg: 1024px;
|
||||||
|
$breakpoint-xl: 1280px;
|
||||||
|
$breakpoint-2xl: 1536px;
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// Utility Mixins
|
||||||
|
// ============================================
|
||||||
|
@mixin glass-effect($blur: var(--blur-sm), $bg: var(--color-glass-white)) {
|
||||||
|
background: $bg;
|
||||||
|
backdrop-filter: blur($blur);
|
||||||
|
-webkit-backdrop-filter: blur($blur);
|
||||||
|
border: 1px solid var(--color-border-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin hover-lift() {
|
||||||
|
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin text-gradient() {
|
||||||
|
background: var(--color-bg-gradient);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin focus-ring() {
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--color-primary);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
// Bolt.ai Glass Style Overrides
|
||||||
|
// Ensures all glass components use the subtle bolt.ai design system
|
||||||
|
|
||||||
|
// Import design tokens
|
||||||
|
@import 'design-tokens';
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// GLOBAL GLASS STYLES - Bolt.ai Pattern
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// All glass elements get the subtle treatment
|
||||||
|
.glass,
|
||||||
|
.glass-light,
|
||||||
|
.glass-ultra,
|
||||||
|
.glass-card,
|
||||||
|
.glass-stat-card,
|
||||||
|
.glass-dues-card,
|
||||||
|
.glass-navbar,
|
||||||
|
.glass-sidebar,
|
||||||
|
.glass-app-bar,
|
||||||
|
.glass-card-bright {
|
||||||
|
// Subtle glass effect like bolt.ai
|
||||||
|
background: rgba(255, 255, 255, 0.6) !important;
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(4px) !important;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
||||||
|
|
||||||
|
// Hover state
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ultra glass variant (slightly more opaque)
|
||||||
|
.glass-ultra {
|
||||||
|
background: rgba(255, 255, 255, 0.8) !important;
|
||||||
|
backdrop-filter: blur(2px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(2px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Glass Monaco soft colors
|
||||||
|
.bg-glass-monaco-soft,
|
||||||
|
.glass-monaco-soft {
|
||||||
|
background: rgba(254, 242, 242, 0.6) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(254, 242, 242, 0.8) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Border radius consistency
|
||||||
|
.rounded-glass {
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// TEXT COLORS - Dark on Light
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Ensure text is always readable on light backgrounds
|
||||||
|
.glass,
|
||||||
|
.glass-light,
|
||||||
|
.glass-ultra,
|
||||||
|
.glass-card,
|
||||||
|
.glass-stat-card,
|
||||||
|
.glass-dues-card,
|
||||||
|
.glass-navbar,
|
||||||
|
.glass-sidebar,
|
||||||
|
.glass-card-bright {
|
||||||
|
color: var(--color-text-primary, #27272a) !important;
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--color-text-primary, #27272a) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--color-text-secondary, #6b7280) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gray-500 {
|
||||||
|
color: var(--color-text-muted, #9ca3af) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// GRADIENT OVERRIDES - Subtle Bolt.ai Style
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Hero gradients
|
||||||
|
.hero-gradient,
|
||||||
|
.bg-gradient-monaco,
|
||||||
|
.gradient-monaco,
|
||||||
|
.text-gradient-monaco {
|
||||||
|
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Monaco gradient for text
|
||||||
|
.text-gradient-monaco {
|
||||||
|
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
|
||||||
|
-webkit-background-clip: text !important;
|
||||||
|
background-clip: text !important;
|
||||||
|
-webkit-text-fill-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// BUTTON STYLES - Bolt.ai Pattern
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
.btn-glass,
|
||||||
|
.btn-glass-primary,
|
||||||
|
.btn-glass-secondary {
|
||||||
|
background: rgba(255, 255, 255, 0.6) !important;
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(4px) !important;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||||
|
color: var(--color-text-primary, #27272a) !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.8) !important;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-glass-primary {
|
||||||
|
border-color: rgba(220, 38, 38, 0.1) !important;
|
||||||
|
color: #dc2626 !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(254, 242, 242, 0.8) !important;
|
||||||
|
border-color: rgba(220, 38, 38, 0.2) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// ANIMATION OVERRIDES - Simple and Subtle
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
.animate-fade-in {
|
||||||
|
animation: fadeIn 0.3s ease-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove complex animations
|
||||||
|
.animate-float,
|
||||||
|
.animate-bounce,
|
||||||
|
.animate-pulse-glow,
|
||||||
|
.animate-shimmer-slow {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// SHADOW OVERRIDES - Subtle Shadows
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
.shadow-glass,
|
||||||
|
.shadow-glass-hover,
|
||||||
|
.shadow-glass-lg,
|
||||||
|
.shadow-monaco,
|
||||||
|
.shadow-monaco-sm,
|
||||||
|
.shadow-monaco-intense {
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-glass-hover:hover,
|
||||||
|
.shadow-glass-lg:hover {
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// SIDEBAR SPECIFIC
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
.glass-sidebar {
|
||||||
|
background: rgba(255, 255, 255, 0.6) !important;
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(4px) !important;
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||||
|
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08) !important;
|
||||||
|
|
||||||
|
.bg-glass-light {
|
||||||
|
background: rgba(255, 255, 255, 0.4) !important;
|
||||||
|
backdrop-filter: blur(2px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// GLOBAL BLUR REDUCTION
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Override any high blur values
|
||||||
|
* {
|
||||||
|
&[style*="blur(60px)"],
|
||||||
|
&[style*="blur(50px)"],
|
||||||
|
&[style*="blur(40px)"],
|
||||||
|
&[style*="blur(30px)"],
|
||||||
|
&[style*="blur(20px)"],
|
||||||
|
&[style*="blur(10px)"] {
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(4px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure maximum blur is 8px
|
||||||
|
.backdrop-blur-3xl,
|
||||||
|
.backdrop-blur-2xl,
|
||||||
|
.backdrop-blur-xl,
|
||||||
|
.backdrop-blur-lg {
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(4px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backdrop-blur-md {
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(4px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backdrop-blur-sm {
|
||||||
|
backdrop-filter: blur(2px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(2px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// RESPONSIVE ADJUSTMENTS
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.glass,
|
||||||
|
.glass-light,
|
||||||
|
.glass-ultra,
|
||||||
|
.glass-card {
|
||||||
|
backdrop-filter: blur(2px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(2px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// PERFORMANCE OPTIMIZATIONS
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Reduce motion for better performance
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
* {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// GPU acceleration for transforms
|
||||||
|
.glass,
|
||||||
|
.glass-card,
|
||||||
|
.glass-stat-card {
|
||||||
|
will-change: transform;
|
||||||
|
transform: translateZ(0);
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,12 @@
|
||||||
// MonacoUSA Portal - Main Stylesheet
|
// MonacoUSA Portal - Main Stylesheet
|
||||||
// Based on design-system.md specifications
|
// Based on design-system.md specifications
|
||||||
|
|
||||||
|
// Import design tokens for bolt.ai style
|
||||||
|
@import 'design-tokens';
|
||||||
|
|
||||||
|
// Import bolt.ai glass style overrides
|
||||||
|
@import 'glass-bolt-style';
|
||||||
|
|
||||||
// Import component styles
|
// Import component styles
|
||||||
@import 'components/dashboards';
|
@import 'components/dashboards';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -249,6 +249,29 @@ const settingsItems = [
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* Glass Sidebar Styles - Bolt.ai Style */
|
||||||
|
.glass-sidebar {
|
||||||
|
background: rgba(255, 255, 255, 0.6) !important;
|
||||||
|
backdrop-filter: blur(4px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(4px) !important;
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glass effects for internal elements */
|
||||||
|
.bg-glass-light {
|
||||||
|
background: rgba(255, 255, 255, 0.4) !important;
|
||||||
|
backdrop-filter: blur(2px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glass-monaco-soft {
|
||||||
|
background: rgba(254, 242, 242, 0.6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover\:bg-glass-monaco-soft:hover {
|
||||||
|
background: rgba(254, 242, 242, 0.8) !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Fade transition for collapsing elements */
|
/* Fade transition for collapsing elements */
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
|
|
@ -266,12 +289,24 @@ const settingsItems = [
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollbar-thin::-webkit-scrollbar-track {
|
.scrollbar-thin::-webkit-scrollbar-track {
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: rgba(0, 0, 0, 0.03);
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
background: rgba(220, 38, 38, 0.2);
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(220, 38, 38, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text gradient for branding */
|
||||||
|
.text-gradient-monaco {
|
||||||
|
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -91,58 +91,34 @@ const animationConfig = {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
// Glass effect base
|
// Variants - Updated to bolt.ai style with reduced blur
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
padding: 1px;
|
|
||||||
background: linear-gradient(135deg,
|
|
||||||
rgba(255, 255, 255, 0.3) 0%,
|
|
||||||
rgba(255, 255, 255, 0.1) 100%);
|
|
||||||
-webkit-mask:
|
|
||||||
linear-gradient(#fff 0 0) content-box,
|
|
||||||
linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Variants
|
|
||||||
&--light {
|
&--light {
|
||||||
background: rgba(255, 255, 255, 0.7);
|
background: rgba(255, 255, 255, 0.6);
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
backdrop-filter: blur(4px);
|
||||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
-webkit-backdrop-filter: blur(4px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
color: #27272a;
|
color: #27272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--dark {
|
&--dark {
|
||||||
background: rgba(0, 0, 0, 0.7);
|
background: rgba(0, 0, 0, 0.05);
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
backdrop-filter: blur(2px);
|
||||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
-webkit-backdrop-filter: blur(2px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
color: #ffffff;
|
color: #27272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--colored {
|
&--colored {
|
||||||
background: linear-gradient(135deg,
|
background: rgba(254, 242, 242, 0.6);
|
||||||
rgba(220, 38, 38, 0.1) 0%,
|
backdrop-filter: blur(2px);
|
||||||
rgba(185, 28, 28, 0.05) 100%);
|
-webkit-backdrop-filter: blur(2px);
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
border: 1px solid rgba(220, 38, 38, 0.1);
|
||||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
||||||
border: 1px solid rgba(220, 38, 38, 0.2);
|
|
||||||
color: #27272a;
|
color: #27272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--gradient {
|
&--gradient {
|
||||||
background: linear-gradient(135deg,
|
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
||||||
rgba(255, 255, 255, 0.8) 0%,
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
rgba(255, 255, 255, 0.4) 100%);
|
|
||||||
backdrop-filter: blur(20px) saturate(180%);
|
|
||||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
||||||
color: #27272a;
|
color: #27272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -205,16 +181,10 @@ const animationConfig = {
|
||||||
}
|
}
|
||||||
|
|
||||||
&--elevated {
|
&--elevated {
|
||||||
box-shadow:
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||||
0 10px 40px rgba(0, 0, 0, 0.1),
|
|
||||||
0 2px 10px rgba(0, 0, 0, 0.05),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow:
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
|
||||||
0 20px 60px rgba(0, 0, 0, 0.15),
|
|
||||||
0 4px 15px rgba(0, 0, 0, 0.08),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -231,7 +201,7 @@ const animationConfig = {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #dc2626;
|
color: #27272a;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__subtitle {
|
&__subtitle {
|
||||||
|
|
|
||||||
|
|
@ -149,33 +149,30 @@ defineEmits<{
|
||||||
}
|
}
|
||||||
|
|
||||||
&--glass {
|
&--glass {
|
||||||
background: rgba(255, 255, 255, 0.7);
|
background: rgba(255, 255, 255, 0.6);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(4px);
|
||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(4px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
color: #dc2626;
|
color: #27272a;
|
||||||
box-shadow:
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
&:hover:not(:disabled) {
|
||||||
background: rgba(255, 255, 255, 0.8);
|
background: rgba(255, 255, 255, 0.8);
|
||||||
border-color: rgba(220, 38, 38, 0.2);
|
border-color: rgba(220, 38, 38, 0.1);
|
||||||
box-shadow:
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||||
0 12px 40px rgba(0, 0, 0, 0.15),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--gradient {
|
&--gradient {
|
||||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
||||||
color: white;
|
color: #dc2626;
|
||||||
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
|
border: 1px solid rgba(220, 38, 38, 0.1);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
&:hover:not(:disabled) {
|
||||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
|
||||||
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -228,31 +228,10 @@ const visibleDuesMembers = ref([
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Animations */
|
/* Simplified Animations */
|
||||||
@keyframes float {
|
@keyframes fade-in {
|
||||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
from { opacity: 0; }
|
||||||
50% { transform: translateY(-20px) rotate(10deg); }
|
to { opacity: 1; }
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse-slow {
|
|
||||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
|
||||||
50% { opacity: 0.5; transform: scale(1.1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce-slow {
|
|
||||||
0%, 100% { transform: translateY(0); }
|
|
||||||
50% { transform: translateY(-10px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradient {
|
|
||||||
0% { background-position: 0% 50%; }
|
|
||||||
50% { background-position: 100% 50%; }
|
|
||||||
100% { background-position: 0% 50%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-in {
|
|
||||||
from { opacity: 0; transform: translateX(-20px); }
|
|
||||||
to { opacity: 1; transform: translateX(0); }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-up {
|
@keyframes slide-up {
|
||||||
|
|
@ -260,10 +239,15 @@ const visibleDuesMembers = ref([
|
||||||
to { opacity: 1; transform: translateY(0); }
|
to { opacity: 1; transform: translateY(0); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes slide-in {
|
||||||
|
from { opacity: 0; transform: translateX(-20px); }
|
||||||
|
to { opacity: 1; transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
/* Base Styles */
|
/* Base Styles */
|
||||||
.glass-dashboard {
|
.glass-dashboard {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: #f8f9fa;
|
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Header */
|
/* Hero Header */
|
||||||
|
|
@ -276,7 +260,7 @@ const visibleDuesMembers = ref([
|
||||||
.hero-gradient {
|
.hero-gradient {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: linear-gradient(135deg, #dc2626 0%, #991b1b 50%, #7f1d1d 100%);
|
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-overlay {
|
.hero-overlay {
|
||||||
|
|
@ -289,34 +273,32 @@ const visibleDuesMembers = ref([
|
||||||
.floating-orb {
|
.floating-orb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
filter: blur(60px);
|
opacity: 0.3;
|
||||||
animation: float 8s ease-in-out infinite;
|
filter: blur(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.orb-1 {
|
.orb-1 {
|
||||||
top: 40px;
|
top: 40px;
|
||||||
right: 80px;
|
right: 80px;
|
||||||
width: 256px;
|
width: 200px;
|
||||||
height: 256px;
|
height: 200px;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(220, 38, 38, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.orb-2 {
|
.orb-2 {
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
left: 80px;
|
left: 80px;
|
||||||
width: 192px;
|
width: 150px;
|
||||||
height: 192px;
|
height: 150px;
|
||||||
background: rgba(239, 68, 68, 0.1);
|
background: rgba(220, 38, 38, 0.03);
|
||||||
animation: pulse-slow 4s ease-in-out infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.orb-3 {
|
.orb-3 {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 128px;
|
width: 100px;
|
||||||
height: 128px;
|
height: 100px;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(220, 38, 38, 0.02);
|
||||||
animation: bounce-slow 3s ease-in-out infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mesh-overlay {
|
.mesh-overlay {
|
||||||
|
|
@ -352,7 +334,7 @@ const visibleDuesMembers = ref([
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
animation: slide-in 0.6s ease-out;
|
animation: fade-in 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
|
|
@ -362,15 +344,15 @@ const visibleDuesMembers = ref([
|
||||||
|
|
||||||
.avatar-glow {
|
.avatar-glow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: -8px;
|
inset: -4px;
|
||||||
background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(254,202,202,0.3));
|
background: rgba(220, 38, 38, 0.1);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
filter: blur(12px);
|
opacity: 0.5;
|
||||||
transition: filter 0.3s;
|
transition: opacity 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-wrapper:hover .avatar-glow {
|
.avatar-wrapper:hover .avatar-glow {
|
||||||
filter: blur(16px);
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-container {
|
.avatar-container {
|
||||||
|
|
@ -446,22 +428,18 @@ const visibleDuesMembers = ref([
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome-title {
|
.welcome-title {
|
||||||
font-size: 3rem;
|
font-size: 2.5rem;
|
||||||
font-weight: 900;
|
font-weight: 700;
|
||||||
color: white;
|
color: #27272a;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
line-height: 1.1;
|
line-height: 1.2;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name-gradient {
|
.name-gradient {
|
||||||
display: block;
|
display: block;
|
||||||
background: linear-gradient(90deg, #fff, #fee2e2, #fff);
|
color: #dc2626;
|
||||||
background-size: 300% 100%;
|
font-weight: 800;
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
animation: gradient 3s ease infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-meta {
|
.user-meta {
|
||||||
|
|
@ -471,12 +449,12 @@ const visibleDuesMembers = ref([
|
||||||
}
|
}
|
||||||
|
|
||||||
.role-badge {
|
.role-badge {
|
||||||
background: rgba(255,255,255,0.2);
|
background: rgba(255,255,255,0.6);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(4px);
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
padding: 0.75rem 1.5rem;
|
padding: 0.75rem 1.5rem;
|
||||||
border: 1px solid rgba(255,255,255,0.3);
|
border: 1px solid rgba(255,255,255,0.2);
|
||||||
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
|
@ -487,8 +465,8 @@ const visibleDuesMembers = ref([
|
||||||
}
|
}
|
||||||
|
|
||||||
.role-text {
|
.role-text {
|
||||||
color: white;
|
color: #27272a;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
|
|
@ -498,30 +476,32 @@ const visibleDuesMembers = ref([
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-name {
|
.org-name {
|
||||||
color: #fecaca;
|
color: #6b7280;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Actions Section */
|
/* Actions Section */
|
||||||
.actions-section {
|
.actions-section {
|
||||||
animation: slide-up 0.6s ease-out;
|
animation: fade-in 0.3s ease-out;
|
||||||
animation-delay: 200ms;
|
animation-delay: 100ms;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-card {
|
.date-card {
|
||||||
background: rgba(255,255,255,0.1);
|
background: rgba(255,255,255,0.6);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(2px);
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
border: 1px solid rgba(0,0,0,0.05);
|
||||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||||
transition: background 0.3s;
|
transition: all 0.3s;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-card:hover {
|
.date-card:hover {
|
||||||
background: rgba(255,255,255,0.15);
|
background: rgba(255,255,255,0.8);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-header {
|
.date-header {
|
||||||
|
|
@ -536,14 +516,14 @@ const visibleDuesMembers = ref([
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-label {
|
.date-label {
|
||||||
color: #fecaca;
|
color: #6b7280;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-text {
|
.date-text {
|
||||||
font-size: 1.5rem;
|
font-size: 1.25rem;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
color: white;
|
color: #27272a;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -582,25 +562,27 @@ const visibleDuesMembers = ref([
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-alerts {
|
.action-alerts {
|
||||||
background: rgba(255,255,255,0.1);
|
background: rgba(255,255,255,0.6);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(2px);
|
||||||
color: white;
|
color: #27272a;
|
||||||
|
border: 1px solid rgba(0,0,0,0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-alerts:hover {
|
.action-alerts:hover {
|
||||||
background: rgba(255,255,255,0.2);
|
background: rgba(255,255,255,0.8);
|
||||||
transform: scale(1.05);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-primary {
|
.action-primary {
|
||||||
background: white;
|
background: #dc2626;
|
||||||
color: #dc2626;
|
color: white;
|
||||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-primary:hover {
|
.action-primary:hover {
|
||||||
background: #fee2e2;
|
background: #b91c1c;
|
||||||
transform: scale(1.05);
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-icon {
|
.action-icon {
|
||||||
|
|
@ -631,30 +613,32 @@ const visibleDuesMembers = ref([
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card {
|
.stat-card {
|
||||||
background: white;
|
background: rgba(255, 255, 255, 0.8);
|
||||||
border-radius: 1.5rem;
|
border-radius: 1rem;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||||
border: 1px solid rgba(0,0,0,0.05);
|
border: 1px solid rgba(0,0,0,0.05);
|
||||||
transition: all 0.3s;
|
transition: all 0.2s;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card:hover {
|
.stat-card:hover {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-icon {
|
.stat-icon {
|
||||||
font-size: 2rem;
|
font-size: 1.5rem;
|
||||||
width: 48px;
|
width: 40px;
|
||||||
height: 48px;
|
height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(135deg, #fee2e2, #fecaca);
|
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
||||||
|
border: 1px solid rgba(220, 38, 38, 0.1);
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -706,16 +690,18 @@ const visibleDuesMembers = ref([
|
||||||
}
|
}
|
||||||
|
|
||||||
.dues-card {
|
.dues-card {
|
||||||
background: white;
|
background: rgba(255, 255, 255, 0.8);
|
||||||
border-radius: 1.5rem;
|
border-radius: 1rem;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||||
border: 1px solid rgba(0,0,0,0.05);
|
border: 1px solid rgba(0,0,0,0.05);
|
||||||
transition: all 0.3s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dues-card:hover {
|
.dues-card:hover {
|
||||||
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
.member-header {
|
.member-header {
|
||||||
|
|
@ -776,20 +762,20 @@ const visibleDuesMembers = ref([
|
||||||
.btn-pay {
|
.btn-pay {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
background: linear-gradient(135deg, #fee2e2, #fecaca);
|
background: rgba(255, 255, 255, 0.6);
|
||||||
color: #dc2626;
|
color: #dc2626;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border: 1px solid #fecaca;
|
border: 1px solid rgba(220, 38, 38, 0.2);
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-pay:hover {
|
.btn-pay:hover {
|
||||||
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
background: #dc2626;
|
||||||
color: white;
|
color: white;
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-all-container {
|
.view-all-container {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue