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
| /** | |
| * Modern Theme System - Crypto Intelligence Hub | |
| * A comprehensive design system with modern colors, typography, and spacing | |
| * Version: 2.0 | |
| */ | |
| :root { | |
| /* ═══════════════════════════════════════════════════════════ | |
| COLOR PALETTE - Modern & Professional | |
| ═══════════════════════════════════════════════════════════ */ | |
| /* Primary Colors - Teal & Cyan Gradient */ | |
| --color-primary-50: #ecfeff; | |
| --color-primary-100: #cffafe; | |
| --color-primary-200: #a5f3fc; | |
| --color-primary-300: #67e8f9; | |
| --color-primary-400: #22d3ee; | |
| --color-primary-500: #14b8a6; | |
| --color-primary-600: #0d9488; | |
| --color-primary-700: #0f766e; | |
| --color-primary-800: #115e59; | |
| --color-primary-900: #134e4a; | |
| /* Secondary Colors - Indigo & Purple */ | |
| --color-secondary-50: #eef2ff; | |
| --color-secondary-100: #e0e7ff; | |
| --color-secondary-200: #c7d2fe; | |
| --color-secondary-300: #a5b4fc; | |
| --color-secondary-400: #818cf8; | |
| --color-secondary-500: #6366f1; | |
| --color-secondary-600: #4f46e5; | |
| --color-secondary-700: #4338ca; | |
| --color-secondary-800: #3730a3; | |
| --color-secondary-900: #312e81; | |
| /* Neutral Colors - Gray Scale */ | |
| --color-gray-50: #f9fafb; | |
| --color-gray-100: #f3f4f6; | |
| --color-gray-200: #e5e7eb; | |
| --color-gray-300: #d1d5db; | |
| --color-gray-400: #9ca3af; | |
| --color-gray-500: #6b7280; | |
| --color-gray-600: #4b5563; | |
| --color-gray-700: #374151; | |
| --color-gray-800: #1f2937; | |
| --color-gray-900: #111827; | |
| /* Semantic Colors */ | |
| --color-success: #10b981; | |
| --color-success-light: #34d399; | |
| --color-success-dark: #059669; | |
| --color-warning: #f59e0b; | |
| --color-warning-light: #fbbf24; | |
| --color-warning-dark: #d97706; | |
| --color-danger: #ef4444; | |
| --color-danger-light: #f87171; | |
| --color-danger-dark: #dc2626; | |
| --color-info: #3b82f6; | |
| --color-info-light: #60a5fa; | |
| --color-info-dark: #2563eb; | |
| /* ═══════════════════════════════════════════════════════════ | |
| THEME VARIABLES - Light Mode (Default) | |
| ═══════════════════════════════════════════════════════════ */ | |
| /* Background */ | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f9fafb; | |
| --bg-tertiary: #f3f4f6; | |
| --bg-elevated: #ffffff; | |
| --bg-overlay: rgba(0, 0, 0, 0.5); | |
| /* Surface */ | |
| --surface-primary: #ffffff; | |
| --surface-secondary: #f9fafb; | |
| --surface-hover: #f3f4f6; | |
| --surface-active: #e5e7eb; | |
| /* Text */ | |
| --text-primary: #111827; | |
| --text-secondary: #4b5563; | |
| --text-tertiary: #6b7280; | |
| --text-disabled: #9ca3af; | |
| --text-inverse: #ffffff; | |
| /* Border */ | |
| --border-primary: #e5e7eb; | |
| --border-secondary: #d1d5db; | |
| --border-focus: var(--color-primary-400); | |
| /* Accent */ | |
| --accent-primary: var(--color-primary-500); | |
| --accent-secondary: var(--color-secondary-500); | |
| --accent-gradient: linear-gradient(135deg, var(--color-primary-400), var(--color-secondary-400)); | |
| /* ═══════════════════════════════════════════════════════════ | |
| TYPOGRAPHY | |
| ═══════════════════════════════════════════════════════════ */ | |
| /* Font Families */ | |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif; | |
| --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Monaco', monospace; | |
| --font-display: 'Space Grotesk', var(--font-sans); | |
| /* 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-none: 1; | |
| --leading-tight: 1.25; | |
| --leading-snug: 1.375; | |
| --leading-normal: 1.5; | |
| --leading-relaxed: 1.625; | |
| --leading-loose: 2; | |
| /* ═══════════════════════════════════════════════════════════ | |
| SPACING & SIZING | |
| ═══════════════════════════════════════════════════════════ */ | |
| /* Spacing Scale */ | |
| --space-0: 0; | |
| --space-1: 0.25rem; /* 4px */ | |
| --space-2: 0.5rem; /* 8px */ | |
| --space-3: 0.75rem; /* 12px */ | |
| --space-4: 1rem; /* 16px */ | |
| --space-5: 1.25rem; /* 20px */ | |
| --space-6: 1.5rem; /* 24px */ | |
| --space-7: 1.75rem; /* 28px */ | |
| --space-8: 2rem; /* 32px */ | |
| --space-10: 2.5rem; /* 40px */ | |
| --space-12: 3rem; /* 48px */ | |
| --space-16: 4rem; /* 64px */ | |
| --space-20: 5rem; /* 80px */ | |
| --space-24: 6rem; /* 96px */ | |
| /* Border Radius */ | |
| --radius-none: 0; | |
| --radius-sm: 0.25rem; /* 4px */ | |
| --radius-base: 0.375rem; /* 6px */ | |
| --radius-md: 0.5rem; /* 8px */ | |
| --radius-lg: 0.75rem; /* 12px */ | |
| --radius-xl: 1rem; /* 16px */ | |
| --radius-2xl: 1.5rem; /* 24px */ | |
| --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 -1px rgba(0, 0, 0, 0.1); | |
| --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); | |
| --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); | |
| --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); | |
| --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| --shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3); | |
| /* ═══════════════════════════════════════════════════════════ | |
| LAYOUT | |
| ═══════════════════════════════════════════════════════════ */ | |
| --sidebar-width: 280px; | |
| --sidebar-collapsed-width: 72px; | |
| --header-height: 64px; | |
| --footer-height: 60px; | |
| --max-content-width: 1440px; | |
| /* ═══════════════════════════════════════════════════════════ | |
| TRANSITIONS & ANIMATIONS | |
| ═══════════════════════════════════════════════════════════ */ | |
| --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| /* ═══════════════════════════════════════════════════════════ | |
| Z-INDEX LAYERS | |
| ═══════════════════════════════════════════════════════════ */ | |
| --z-base: 0; | |
| --z-dropdown: 1000; | |
| --z-sticky: 1020; | |
| --z-fixed: 1030; | |
| --z-sidebar: 1040; | |
| --z-header: 1050; | |
| --z-modal-backdrop: 1060; | |
| --z-modal: 1070; | |
| --z-popover: 1080; | |
| --z-tooltip: 1090; | |
| --z-toast: 1100; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| DARK MODE THEME | |
| ═══════════════════════════════════════════════════════════ */ | |
| [data-theme="dark"] { | |
| /* Background */ | |
| --bg-primary: #0f1419; | |
| --bg-secondary: #1a1f2e; | |
| --bg-tertiary: #232936; | |
| --bg-elevated: #1f2937; | |
| --bg-overlay: rgba(0, 0, 0, 0.7); | |
| /* Surface */ | |
| --surface-primary: #1a1f2e; | |
| --surface-secondary: #232936; | |
| --surface-hover: #2d3748; | |
| --surface-active: #374151; | |
| /* Text */ | |
| --text-primary: #f9fafb; | |
| --text-secondary: #d1d5db; | |
| --text-tertiary: #9ca3af; | |
| --text-disabled: #6b7280; | |
| --text-inverse: #111827; | |
| /* Border */ | |
| --border-primary: #374151; | |
| --border-secondary: #4b5563; | |
| --border-focus: var(--color-primary-400); | |
| /* Shadows (darker for dark mode) */ | |
| --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); | |
| --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); | |
| --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5); | |
| --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6); | |
| --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7); | |
| --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8); | |
| --shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.9); | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| GLOBAL STYLES | |
| ═══════════════════════════════════════════════════════════ */ | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 16px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| font-size: var(--text-base); | |
| line-height: var(--leading-normal); | |
| color: var(--text-primary); | |
| background: var(--bg-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Typography */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-weight: var(--font-bold); | |
| line-height: var(--leading-tight); | |
| color: var(--text-primary); | |
| } | |
| h1 { font-size: var(--text-4xl); } | |
| h2 { font-size: var(--text-3xl); } | |
| h3 { font-size: var(--text-2xl); } | |
| h4 { font-size: var(--text-xl); } | |
| h5 { font-size: var(--text-lg); } | |
| h6 { font-size: var(--text-base); } | |
| p { | |
| margin-bottom: var(--space-4); | |
| color: var(--text-secondary); | |
| } | |
| a { | |
| color: var(--accent-primary); | |
| text-decoration: none; | |
| transition: color var(--transition-fast); | |
| } | |
| a:hover { | |
| color: var(--color-primary-600); | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border-secondary); | |
| border-radius: var(--radius-full); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-tertiary); | |
| } | |
| /* Selection */ | |
| ::selection { | |
| background: var(--color-primary-200); | |
| color: var(--color-primary-900); | |
| } | |
| [data-theme="dark"] ::selection { | |
| background: var(--color-primary-700); | |
| color: var(--color-primary-100); | |
| } | |
| /* Focus Styles */ | |
| :focus-visible { | |
| outline: 2px solid var(--border-focus); | |
| outline-offset: 2px; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| UTILITY CLASSES | |
| ═══════════════════════════════════════════════════════════ */ | |
| /* Display */ | |
| .block { display: block; } | |
| .inline-block { display: inline-block; } | |
| .flex { display: flex; } | |
| .inline-flex { display: inline-flex; } | |
| .grid { display: grid; } | |
| .hidden { display: none; } | |
| /* Flex */ | |
| .flex-row { flex-direction: row; } | |
| .flex-col { flex-direction: column; } | |
| .flex-wrap { flex-wrap: wrap; } | |
| .items-center { align-items: center; } | |
| .items-start { align-items: flex-start; } | |
| .items-end { align-items: flex-end; } | |
| .justify-center { justify-content: center; } | |
| .justify-between { justify-content: space-between; } | |
| .justify-start { justify-content: flex-start; } | |
| .justify-end { justify-content: flex-end; } | |
| .gap-2 { gap: var(--space-2); } | |
| .gap-3 { gap: var(--space-3); } | |
| .gap-4 { gap: var(--space-4); } | |
| .gap-6 { gap: var(--space-6); } | |
| /* Text */ | |
| .text-center { text-align: center; } | |
| .text-left { text-align: left; } | |
| .text-right { text-align: right; } | |
| .font-bold { font-weight: var(--font-bold); } | |
| .font-semibold { font-weight: var(--font-semibold); } | |
| .font-medium { font-weight: var(--font-medium); } | |
| .uppercase { text-transform: uppercase; } | |
| /* Gradients */ | |
| .gradient-primary { | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Transitions */ | |
| .transition { transition: all var(--transition-base); } | |
| .transition-fast { transition: all var(--transition-fast); } | |
| .transition-slow { transition: all var(--transition-slow); } | |