Your Name
feat: UI improvements and error suppression - Enhanced dashboard and market pages with improved header buttons, logo, and currency symbol display - Stopped animated ticker - Removed pie chart legends - Added error suppressor for external service errors (SSE, Permissions-Policy warnings) - Improved header button prominence and icon appearance - Enhanced logo with glow effects and better design - Fixed currency symbol visibility in market tables
8b7b267
| /** | |
| * ============================================ | |
| * DESIGN TOKENS - Enterprise Edition | |
| * Crypto Monitor Ultimate | |
| * ============================================ | |
| * | |
| * Complete design system with: | |
| * - Color palette (light/dark) | |
| * - Typography scale | |
| * - Spacing system | |
| * - Border radius tokens | |
| * - Shadow system | |
| * - Blur tokens | |
| * - Elevation levels | |
| * - Animation timings | |
| */ | |
| :root { | |
| /* ===== COLOR PALETTE ===== */ | |
| /* Base Colors - Dark Mode */ | |
| --color-bg-primary: #0a0e1a; | |
| --color-bg-secondary: #111827; | |
| --color-bg-tertiary: #1f2937; | |
| --color-bg-elevated: #1f2937; | |
| --color-bg-overlay: rgba(0, 0, 0, 0.75); | |
| /* Glassmorphism Backgrounds */ | |
| --color-glass-bg: rgba(17, 24, 39, 0.7); | |
| --color-glass-bg-light: rgba(31, 41, 55, 0.5); | |
| --color-glass-border: rgba(255, 255, 255, 0.1); | |
| /* Text Colors */ | |
| --color-text-primary: #f9fafb; | |
| --color-text-secondary: #9ca3af; | |
| --color-text-tertiary: #6b7280; | |
| --color-text-disabled: #4b5563; | |
| --color-text-inverse: #0a0e1a; | |
| /* Accent Colors - Neon Palette */ | |
| --color-accent-blue: #3b82f6; | |
| --color-accent-blue-dark: #2563eb; | |
| --color-accent-blue-light: #60a5fa; | |
| --color-accent-purple: #8b5cf6; | |
| --color-accent-purple-dark: #7c3aed; | |
| --color-accent-purple-light: #a78bfa; | |
| --color-accent-pink: #ec4899; | |
| --color-accent-pink-dark: #db2777; | |
| --color-accent-pink-light: #f472b6; | |
| --color-accent-green: #10b981; | |
| --color-accent-green-dark: #059669; | |
| --color-accent-green-light: #34d399; | |
| --color-accent-yellow: #f59e0b; | |
| --color-accent-yellow-dark: #d97706; | |
| --color-accent-yellow-light: #fbbf24; | |
| --color-accent-red: #ef4444; | |
| --color-accent-red-dark: #dc2626; | |
| --color-accent-red-light: #f87171; | |
| --color-accent-cyan: #06b6d4; | |
| --color-accent-cyan-dark: #0891b2; | |
| --color-accent-cyan-light: #22d3ee; | |
| /* Semantic Colors */ | |
| --color-success: var(--color-accent-green); | |
| --color-error: var(--color-accent-red); | |
| --color-warning: var(--color-accent-yellow); | |
| --color-info: var(--color-accent-blue); | |
| /* Border Colors */ | |
| --color-border-primary: rgba(255, 255, 255, 0.1); | |
| --color-border-secondary: rgba(255, 255, 255, 0.05); | |
| --color-border-focus: var(--color-accent-blue); | |
| /* ===== GRADIENTS ===== */ | |
| --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); | |
| --gradient-secondary: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); | |
| --gradient-glass: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.4) 100%); | |
| --gradient-overlay: linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, rgba(10, 14, 26, 0.8) 100%); | |
| /* Radial Gradients for Background */ | |
| --gradient-radial-blue: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 40%); | |
| --gradient-radial-purple: radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 40%); | |
| --gradient-radial-green: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 30%); | |
| /* ===== TYPOGRAPHY ===== */ | |
| --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; | |
| /* Font Sizes */ | |
| --font-size-xs: 0.75rem; /* 12px */ | |
| --font-size-sm: 0.875rem; /* 14px */ | |
| --font-size-base: 1rem; /* 16px */ | |
| --font-size-md: 1.125rem; /* 18px */ | |
| --font-size-lg: 1.25rem; /* 20px */ | |
| --font-size-xl: 1.5rem; /* 24px */ | |
| --font-size-2xl: 1.875rem; /* 30px */ | |
| --font-size-3xl: 2.25rem; /* 36px */ | |
| --font-size-4xl: 3rem; /* 48px */ | |
| /* Font Weights */ | |
| --font-weight-light: 300; | |
| --font-weight-normal: 400; | |
| --font-weight-medium: 500; | |
| --font-weight-semibold: 600; | |
| --font-weight-bold: 700; | |
| --font-weight-extrabold: 800; | |
| --font-weight-black: 900; | |
| /* Line Heights */ | |
| --line-height-tight: 1.25; | |
| --line-height-normal: 1.5; | |
| --line-height-relaxed: 1.75; | |
| --line-height-loose: 2; | |
| /* ===== SPACING SCALE ===== */ | |
| --spacing-0: 0; | |
| --spacing-1: 0.25rem; /* 4px */ | |
| --spacing-2: 0.5rem; /* 8px */ | |
| --spacing-3: 0.75rem; /* 12px */ | |
| --spacing-4: 1rem; /* 16px */ | |
| --spacing-5: 1.25rem; /* 20px */ | |
| --spacing-6: 1.5rem; /* 24px */ | |
| --spacing-8: 2rem; /* 32px */ | |
| --spacing-10: 2.5rem; /* 40px */ | |
| --spacing-12: 3rem; /* 48px */ | |
| --spacing-16: 4rem; /* 64px */ | |
| --spacing-20: 5rem; /* 80px */ | |
| /* Semantic Spacing */ | |
| --spacing-xs: var(--spacing-1); | |
| --spacing-sm: var(--spacing-2); | |
| --spacing-md: var(--spacing-4); | |
| --spacing-lg: var(--spacing-6); | |
| --spacing-xl: var(--spacing-8); | |
| --spacing-2xl: var(--spacing-12); | |
| /* ===== BORDER RADIUS ===== */ | |
| --radius-none: 0; | |
| --radius-sm: 0.25rem; /* 4px */ | |
| --radius-base: 0.5rem; /* 8px */ | |
| --radius-md: 0.75rem; /* 12px */ | |
| --radius-lg: 1rem; /* 16px */ | |
| --radius-xl: 1.25rem; /* 20px */ | |
| --radius-2xl: 1.5rem; /* 24px */ | |
| --radius-3xl: 2rem; /* 32px */ | |
| --radius-full: 9999px; | |
| /* ===== SHADOWS ===== */ | |
| --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); | |
| --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| /* Colored Shadows */ | |
| --shadow-blue: 0 10px 30px -5px rgba(59, 130, 246, 0.3); | |
| --shadow-purple: 0 10px 30px -5px rgba(139, 92, 246, 0.3); | |
| --shadow-pink: 0 10px 30px -5px rgba(236, 72, 153, 0.3); | |
| --shadow-green: 0 10px 30px -5px rgba(16, 185, 129, 0.3); | |
| /* Inner Shadows */ | |
| --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); | |
| --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1); | |
| /* ===== BLUR TOKENS ===== */ | |
| --blur-none: 0; | |
| --blur-sm: 4px; | |
| --blur-base: 8px; | |
| --blur-md: 12px; | |
| --blur-lg: 16px; | |
| --blur-xl: 20px; | |
| --blur-2xl: 40px; | |
| --blur-3xl: 64px; | |
| /* ===== ELEVATION LEVELS ===== */ | |
| /* Use these for layering UI elements */ | |
| --z-base: 0; | |
| --z-dropdown: 1000; | |
| --z-sticky: 1020; | |
| --z-fixed: 1030; | |
| --z-modal-backdrop: 1040; | |
| --z-modal: 1050; | |
| --z-popover: 1060; | |
| --z-tooltip: 1070; | |
| --z-notification: 1080; | |
| /* ===== ANIMATION TIMINGS ===== */ | |
| --duration-instant: 0ms; | |
| --duration-fast: 150ms; | |
| --duration-base: 250ms; | |
| --duration-slow: 350ms; | |
| --duration-slower: 500ms; | |
| /* Easing Functions */ | |
| --ease-linear: linear; | |
| --ease-in: cubic-bezier(0.4, 0, 1, 1); | |
| --ease-out: cubic-bezier(0, 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); | |
| /* ===== LAYOUT ===== */ | |
| --header-height: 72px; | |
| --sidebar-width: 280px; | |
| --sidebar-collapsed-width: 80px; | |
| --mobile-nav-height: 64px; | |
| --container-max-width: 1920px; | |
| --content-max-width: 1440px; | |
| /* ===== BREAKPOINTS (for JS usage) ===== */ | |
| --breakpoint-xs: 320px; | |
| --breakpoint-sm: 480px; | |
| --breakpoint-md: 640px; | |
| --breakpoint-lg: 768px; | |
| --breakpoint-xl: 1024px; | |
| --breakpoint-2xl: 1280px; | |
| --breakpoint-3xl: 1440px; | |
| } | |
| /* ===== LIGHT MODE OVERRIDES ===== */ | |
| [data-theme="light"] { | |
| --color-bg-primary: #ffffff; | |
| --color-bg-secondary: #f9fafb; | |
| --color-bg-tertiary: #f3f4f6; | |
| --color-bg-elevated: #ffffff; | |
| --color-bg-overlay: rgba(255, 255, 255, 0.9); | |
| --color-glass-bg: rgba(255, 255, 255, 0.7); | |
| --color-glass-bg-light: rgba(249, 250, 251, 0.5); | |
| --color-glass-border: rgba(0, 0, 0, 0.1); | |
| --color-text-primary: #111827; | |
| --color-text-secondary: #6b7280; | |
| --color-text-tertiary: #9ca3af; | |
| --color-text-disabled: #d1d5db; | |
| --color-text-inverse: #ffffff; | |
| --color-border-primary: rgba(0, 0, 0, 0.1); | |
| --color-border-secondary: rgba(0, 0, 0, 0.05); | |
| --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(249, 250, 251, 0.4) 100%); | |
| --gradient-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%); | |
| --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03); | |
| --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04); | |
| --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); | |
| --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03); | |
| --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02); | |
| } | |
| /* ===== UTILITY CLASSES ===== */ | |
| /* Glassmorphism Effects */ | |
| .glass-effect { | |
| background: var(--color-glass-bg); | |
| backdrop-filter: blur(var(--blur-xl)); | |
| border: 1px solid var(--color-glass-border); | |
| } | |
| .glass-effect-light { | |
| background: var(--color-glass-bg-light); | |
| backdrop-filter: blur(var(--blur-lg)); | |
| border: 1px solid var(--color-glass-border); | |
| } | |
| /* Gradient Backgrounds */ | |
| .bg-gradient-primary { | |
| background: var(--gradient-primary); | |
| } | |
| .bg-gradient-secondary { | |
| background: var(--gradient-secondary); | |
| } | |
| /* Text Gradients */ | |
| .text-gradient-primary { | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Shadow Utilities */ | |
| .shadow-glow-blue { | |
| box-shadow: var(--shadow-blue); | |
| } | |
| .shadow-glow-purple { | |
| box-shadow: var(--shadow-purple); | |
| } | |
| .shadow-glow-pink { | |
| box-shadow: var(--shadow-pink); | |
| } | |
| .shadow-glow-green { | |
| box-shadow: var(--shadow-green); | |
| } | |
| /* Animation Utilities */ | |
| .transition-fast { | |
| transition: all var(--duration-fast) var(--ease-out); | |
| } | |
| .transition-base { | |
| transition: all var(--duration-base) var(--ease-in-out); | |
| } | |
| .transition-slow { | |
| transition: all var(--duration-slow) var(--ease-in-out); | |
| } | |