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 SYSTEM — ULTRA ENTERPRISE EDITION | |
| * Crypto Monitor HF — Glass + Neon + Dark Aero UI | |
| * ═══════════════════════════════════════════════════════════════════ | |
| * | |
| * This file contains the complete design token system: | |
| * - Color Palette (Brand, Surface, Status, Semantic) | |
| * - Typography Scale (Font families, sizes, weights, tracking) | |
| * - Spacing System (Consistent rhythm) | |
| * - Border Radius (Corner rounding) | |
| * - Shadows & Depth (Elevation system) | |
| * - Neon Glows (Accent lighting effects) | |
| * - Transitions & Animations (Motion design) | |
| * - Z-Index Scale (Layering) | |
| * | |
| * ALL components must reference these tokens. | |
| * NO hardcoded values allowed. | |
| */ | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 🎨 COLOR SYSTEM — ULTRA DETAILED PALETTE | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| /* ━━━ BRAND CORE ━━━ */ | |
| --brand-blue: #3B82F6; | |
| --brand-blue-light: #60A5FA; | |
| --brand-blue-dark: #1E40AF; | |
| --brand-blue-darker: #1E3A8A; | |
| --brand-purple: #8B5CF6; | |
| --brand-purple-light: #A78BFA; | |
| --brand-purple-dark: #5B21B6; | |
| --brand-purple-darker: #4C1D95; | |
| --brand-cyan: #06B6D4; | |
| --brand-cyan-light: #22D3EE; | |
| --brand-cyan-dark: #0891B2; | |
| --brand-cyan-darker: #0E7490; | |
| --brand-green: #10B981; | |
| --brand-green-light: #34D399; | |
| --brand-green-dark: #047857; | |
| --brand-green-darker: #065F46; | |
| --brand-pink: #EC4899; | |
| --brand-pink-light: #F472B6; | |
| --brand-pink-dark: #BE185D; | |
| --brand-orange: #F97316; | |
| --brand-orange-light: #FB923C; | |
| --brand-orange-dark: #C2410C; | |
| --brand-yellow: #F59E0B; | |
| --brand-yellow-light: #FCD34D; | |
| --brand-yellow-dark: #D97706; | |
| /* ━━━ SURFACES (Glassmorphism) ━━━ */ | |
| --surface-glass: rgba(255, 255, 255, 0.08); | |
| --surface-glass-strong: rgba(255, 255, 255, 0.16); | |
| --surface-glass-stronger: rgba(255, 255, 255, 0.24); | |
| --surface-panel: rgba(255, 255, 255, 0.12); | |
| --surface-elevated: rgba(255, 255, 255, 0.14); | |
| --surface-overlay: rgba(0, 0, 0, 0.80); | |
| /* ━━━ BACKGROUND ━━━ */ | |
| --background-main: #0F172A; | |
| --background-secondary: #1E293B; | |
| --background-tertiary: #334155; | |
| --background-gradient: radial-gradient(circle at 20% 30%, #1E293B 0%, #0F172A 80%); | |
| --background-gradient-alt: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); | |
| /* ━━━ TEXT HIERARCHY ━━━ */ | |
| --text-strong: #F8FAFC; | |
| --text-normal: #E2E8F0; | |
| --text-soft: #CBD5E1; | |
| --text-muted: #94A3B8; | |
| --text-faint: #64748B; | |
| --text-disabled: #475569; | |
| /* ━━━ STATUS COLORS ━━━ */ | |
| --success: #22C55E; | |
| --success-light: #4ADE80; | |
| --success-dark: #16A34A; | |
| --warning: #F59E0B; | |
| --warning-light: #FBBF24; | |
| --warning-dark: #D97706; | |
| --danger: #EF4444; | |
| --danger-light: #F87171; | |
| --danger-dark: #DC2626; | |
| --info: #0EA5E9; | |
| --info-light: #38BDF8; | |
| --info-dark: #0284C7; | |
| /* ━━━ BORDERS ━━━ */ | |
| --border-subtle: rgba(255, 255, 255, 0.08); | |
| --border-light: rgba(255, 255, 255, 0.20); | |
| --border-medium: rgba(255, 255, 255, 0.30); | |
| --border-heavy: rgba(255, 255, 255, 0.40); | |
| --border-strong: rgba(255, 255, 255, 0.50); | |
| /* ━━━ SHADOWS (Depth System) ━━━ */ | |
| --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.20); | |
| --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.26); | |
| --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.30); | |
| --shadow-lg: 0 12px 42px rgba(0, 0, 0, 0.45); | |
| --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.60); | |
| --shadow-2xl: 0 32px 80px rgba(0, 0, 0, 0.75); | |
| /* ━━━ NEON GLOWS (Accent Lighting) ━━━ */ | |
| --glow-blue: 0 0 12px rgba(59, 130, 246, 0.55), 0 0 24px rgba(59, 130, 246, 0.25); | |
| --glow-blue-strong: 0 0 16px rgba(59, 130, 246, 0.70), 0 0 32px rgba(59, 130, 246, 0.40); | |
| --glow-cyan: 0 0 14px rgba(34, 211, 238, 0.35), 0 0 28px rgba(34, 211, 238, 0.18); | |
| --glow-cyan-strong: 0 0 18px rgba(34, 211, 238, 0.50), 0 0 36px rgba(34, 211, 238, 0.30); | |
| --glow-purple: 0 0 16px rgba(139, 92, 246, 0.50), 0 0 32px rgba(139, 92, 246, 0.25); | |
| --glow-purple-strong: 0 0 20px rgba(139, 92, 246, 0.65), 0 0 40px rgba(139, 92, 246, 0.35); | |
| --glow-green: 0 0 16px rgba(52, 211, 153, 0.50), 0 0 32px rgba(52, 211, 153, 0.25); | |
| --glow-green-strong: 0 0 20px rgba(52, 211, 153, 0.65), 0 0 40px rgba(52, 211, 153, 0.35); | |
| --glow-pink: 0 0 14px rgba(236, 72, 153, 0.45), 0 0 28px rgba(236, 72, 153, 0.22); | |
| --glow-orange: 0 0 14px rgba(249, 115, 22, 0.45), 0 0 28px rgba(249, 115, 22, 0.22); | |
| /* ━━━ GRADIENTS ━━━ */ | |
| --gradient-primary: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan)); | |
| --gradient-secondary: linear-gradient(135deg, var(--brand-purple), var(--brand-pink)); | |
| --gradient-success: linear-gradient(135deg, var(--brand-green), var(--brand-cyan)); | |
| --gradient-danger: linear-gradient(135deg, var(--danger), var(--brand-pink)); | |
| --gradient-rainbow: linear-gradient(135deg, var(--brand-blue), var(--brand-purple), var(--brand-pink)); | |
| /* ━━━ BACKDROP BLUR ━━━ */ | |
| --blur-sm: blur(8px); | |
| --blur-md: blur(16px); | |
| --blur-lg: blur(22px); | |
| --blur-xl: blur(32px); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 🔠 TYPOGRAPHY SYSTEM | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| /* ━━━ FONT FAMILIES ━━━ */ | |
| --font-main: "Inter", "Rubik", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, monospace; | |
| /* ━━━ FONT SIZES ━━━ */ | |
| --fs-xs: 11px; | |
| --fs-sm: 13px; | |
| --fs-base: 15px; | |
| --fs-md: 15px; | |
| --fs-lg: 18px; | |
| --fs-xl: 22px; | |
| --fs-2xl: 26px; | |
| --fs-3xl: 32px; | |
| --fs-4xl: 40px; | |
| --fs-5xl: 52px; | |
| /* ━━━ FONT WEIGHTS ━━━ */ | |
| --fw-light: 300; | |
| --fw-regular: 400; | |
| --fw-medium: 500; | |
| --fw-semibold: 600; | |
| --fw-bold: 700; | |
| --fw-extrabold: 800; | |
| --fw-black: 900; | |
| /* ━━━ LINE HEIGHTS ━━━ */ | |
| --lh-tight: 1.2; | |
| --lh-snug: 1.375; | |
| --lh-normal: 1.5; | |
| --lh-relaxed: 1.625; | |
| --lh-loose: 2; | |
| /* ━━━ LETTER SPACING ━━━ */ | |
| --tracking-tighter: -0.5px; | |
| --tracking-tight: -0.3px; | |
| --tracking-normal: 0; | |
| --tracking-wide: 0.2px; | |
| --tracking-wider: 0.4px; | |
| --tracking-widest: 0.8px; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 📐 SPACING SYSTEM | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| --space-0: 0; | |
| --space-1: 4px; | |
| --space-2: 8px; | |
| --space-3: 12px; | |
| --space-4: 16px; | |
| --space-5: 20px; | |
| --space-6: 24px; | |
| --space-7: 28px; | |
| --space-8: 32px; | |
| --space-10: 40px; | |
| --space-12: 48px; | |
| --space-16: 64px; | |
| --space-20: 80px; | |
| --space-24: 96px; | |
| --space-32: 128px; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 🔲 BORDER RADIUS | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| --radius-xs: 6px; | |
| --radius-sm: 10px; | |
| --radius-md: 14px; | |
| --radius-lg: 20px; | |
| --radius-xl: 28px; | |
| --radius-2xl: 36px; | |
| --radius-full: 9999px; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| ⏱️ TRANSITIONS & ANIMATIONS | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| /* ━━━ DURATION ━━━ */ | |
| --duration-instant: 0.1s; | |
| --duration-fast: 0.15s; | |
| --duration-normal: 0.25s; | |
| --duration-medium: 0.35s; | |
| --duration-slow: 0.45s; | |
| --duration-slower: 0.6s; | |
| /* ━━━ EASING ━━━ */ | |
| --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-spring: cubic-bezier(0.34, 1.56, 0.64, 1); | |
| --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| /* ━━━ COMBINED ━━━ */ | |
| --transition-fast: var(--duration-fast) var(--ease-out); | |
| --transition-normal: var(--duration-normal) var(--ease-out); | |
| --transition-medium: var(--duration-medium) var(--ease-in-out); | |
| --transition-slow: var(--duration-slow) var(--ease-in-out); | |
| --transition-spring: var(--duration-medium) var(--ease-spring); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 🗂️ Z-INDEX SCALE | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| --z-base: 1; | |
| --z-dropdown: 1000; | |
| --z-sticky: 1100; | |
| --z-fixed: 1200; | |
| --z-overlay: 8000; | |
| --z-modal: 9000; | |
| --z-toast: 9500; | |
| --z-tooltip: 9999; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 📏 LAYOUT CONSTANTS | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| --header-height: 64px; | |
| --sidebar-width: 280px; | |
| --mobile-nav-height: 70px; | |
| --status-bar-height: 40px; | |
| --max-content-width: 1680px; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 📱 BREAKPOINTS (for reference in media queries) | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| --breakpoint-xs: 320px; | |
| --breakpoint-sm: 480px; | |
| --breakpoint-md: 640px; | |
| --breakpoint-lg: 768px; | |
| --breakpoint-xl: 1024px; | |
| --breakpoint-2xl: 1280px; | |
| --breakpoint-3xl: 1440px; | |
| --breakpoint-4xl: 1680px; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 🎭 THEME OVERRIDES (Light Mode - optional) | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .theme-light { | |
| /* Light theme not implemented in this ultra-dark design */ | |
| /* If needed, override tokens here */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 🌈 SEMANTIC TOKENS (Component-specific) | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| /* Button variants */ | |
| --btn-primary-bg: var(--gradient-primary); | |
| --btn-primary-shadow: var(--glow-blue); | |
| --btn-secondary-bg: var(--surface-glass); | |
| --btn-secondary-border: var(--border-light); | |
| /* Card styles */ | |
| --card-bg: var(--surface-glass); | |
| --card-border: var(--border-light); | |
| --card-shadow: var(--shadow-md); | |
| /* Input styles */ | |
| --input-bg: rgba(15, 23, 42, 0.60); | |
| --input-border: var(--border-light); | |
| --input-focus-border: var(--brand-blue); | |
| --input-focus-glow: var(--glow-blue); | |
| /* Tab styles */ | |
| --tab-active-indicator: var(--brand-cyan); | |
| --tab-active-glow: var(--glow-cyan); | |
| /* Toast styles */ | |
| --toast-bg: var(--surface-glass-strong); | |
| --toast-border: var(--border-medium); | |
| /* Modal styles */ | |
| --modal-bg: var(--surface-elevated); | |
| --modal-backdrop: var(--surface-overlay); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| ✨ UTILITY: Quick Glassmorphism Builder | |
| ═══════════════════════════════════════════════════════════════════ */ | |
| .glass-panel { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-light); | |
| backdrop-filter: var(--blur-lg); | |
| -webkit-backdrop-filter: var(--blur-lg); | |
| } | |
| .glass-panel-strong { | |
| background: var(--surface-glass-strong); | |
| border: 1px solid var(--border-medium); | |
| backdrop-filter: var(--blur-lg); | |
| -webkit-backdrop-filter: var(--blur-lg); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════ | |
| 🎯 END OF DESIGN SYSTEM | |
| ═══════════════════════════════════════════════════════════════════ */ | |