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
| /** | |
| * Enhanced Layout System | |
| * Modern sidebar, header, and responsive improvements | |
| */ | |
| /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | |
| 🎨 ENHANCED SIDEBAR | |
| ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
| .sidebar { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: var(--sidebar-width); | |
| background: linear-gradient(180deg, #ffffff 0%, #f8fdfc 100%); | |
| border-right: 1px solid var(--border-light); | |
| z-index: var(--z-sidebar); | |
| display: flex; | |
| flex-direction: column; | |
| transition: transform 0.3s ease; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| } | |
| /* Sidebar Brand */ | |
| .sidebar-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-4); | |
| border-bottom: 1px solid var(--border-light); | |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.05), rgba(34, 211, 238, 0.05)); | |
| } | |
| .brand-logo { | |
| flex-shrink: 0; | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: logoFloat 3s ease-in-out infinite; | |
| } | |
| @keyframes logoFloat { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-4px); } | |
| } | |
| .brand-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .brand-name { | |
| font-size: var(--text-base); | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| line-height: 1; | |
| } | |
| .brand-tag { | |
| font-size: 9px; | |
| font-weight: 700; | |
| color: var(--teal); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* Navigation Menu */ | |
| .nav-menu { | |
| flex: 1; | |
| padding: var(--space-3) 0; | |
| overflow-y: auto; | |
| } | |
| .nav-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .nav-item { | |
| margin: 0; | |
| } | |
| .nav-link { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-2) var(--space-4); | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: var(--text-sm); | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| position: relative; | |
| border-left: 3px solid transparent; | |
| } | |
| .nav-link::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 3px; | |
| height: 0; | |
| background: var(--gradient-primary); | |
| transition: height 0.2s ease; | |
| } | |
| .nav-link:hover { | |
| background: linear-gradient(90deg, rgba(45, 212, 191, 0.08), transparent); | |
| color: var(--teal); | |
| } | |
| .nav-link:hover::before { | |
| height: 70%; | |
| } | |
| .nav-link.active { | |
| background: linear-gradient(90deg, rgba(45, 212, 191, 0.12), transparent); | |
| color: var(--teal); | |
| font-weight: 600; | |
| } | |
| .nav-link.active::before { | |
| height: 100%; | |
| } | |
| .nav-icon { | |
| flex-shrink: 0; | |
| width: 22px; | |
| height: 22px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: currentColor; | |
| } | |
| .nav-label { | |
| flex: 1; | |
| } | |
| .nav-badge { | |
| font-size: 9px; | |
| font-weight: 700; | |
| padding: 2px 6px; | |
| border-radius: var(--radius-full); | |
| background: var(--danger); | |
| color: white; | |
| animation: badgePulse 2s ease-in-out infinite; | |
| } | |
| /* Sidebar Footer */ | |
| .sidebar-footer { | |
| padding: var(--space-3) var(--space-4); | |
| border-top: 1px solid var(--border-light); | |
| background: rgba(45, 212, 191, 0.03); | |
| } | |
| .sidebar-status { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-size: var(--text-xs); | |
| color: var(--text-muted); | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--gray-400); | |
| } | |
| .status-dot.online { | |
| background: var(--success); | |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | |
| 📱 MOBILE SIDEBAR | |
| ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
| @media (max-width: 1024px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); | |
| } | |
| /* Overlay */ | |
| .sidebar.open::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(15, 41, 38, 0.5); | |
| z-index: -1; | |
| } | |
| } | |
| /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | |
| 🎯 ENHANCED HEADER | |
| ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
| .header { | |
| position: sticky; | |
| top: 0; | |
| z-index: var(--z-header); | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border-light); | |
| padding: var(--space-3) var(--space-4); | |
| } | |
| .header-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--space-4); | |
| max-width: var(--max-content-width); | |
| margin: 0 auto; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| } | |
| .header-title { | |
| font-size: var(--text-lg); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| } | |
| /* Status Badge */ | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: 6px 12px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-full); | |
| font-size: var(--text-xs); | |
| font-weight: 600; | |
| transition: all 0.2s ease; | |
| } | |
| .status-badge[data-status="online"] { | |
| background: rgba(16, 185, 129, 0.1); | |
| border-color: var(--success); | |
| color: var(--success); | |
| } | |
| .status-badge[data-status="offline"] { | |
| background: rgba(239, 68, 68, 0.1); | |
| border-color: var(--danger); | |
| color: var(--danger); | |
| } | |
| .status-badge[data-status="checking"] { | |
| background: rgba(245, 158, 11, 0.1); | |
| border-color: var(--warning); | |
| color: var(--warning); | |
| } | |
| .status-badge[data-status="degraded"] { | |
| background: rgba(245, 158, 11, 0.1); | |
| border-color: var(--warning); | |
| color: var(--warning); | |
| } | |
| /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | |
| 📄 PAGE LAYOUT | |
| ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
| .page-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-6); | |
| padding-bottom: var(--space-4); | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .page-title h1 { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| font-size: var(--text-2xl); | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .page-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(34, 211, 238, 0.1)); | |
| border-radius: var(--radius-md); | |
| } | |
| .page-subtitle { | |
| font-size: var(--text-sm); | |
| color: var(--text-muted); | |
| margin: var(--space-1) 0 0 0; | |
| } | |
| .page-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .last-update { | |
| font-size: var(--text-xs); | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| } | |
| /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | |
| 📊 GRID LAYOUTS | |
| ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-6); | |
| } | |
| .content-grid { | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| gap: var(--space-4); | |
| } | |
| .col-span-12 { grid-column: span 12; } | |
| .col-span-8 { grid-column: span 8; } | |
| .col-span-6 { grid-column: span 6; } | |
| .col-span-4 { grid-column: span 4; } | |
| .col-span-3 { grid-column: span 3; } | |
| @media (max-width: 1024px) { | |
| .col-span-8, | |
| .col-span-6, | |
| .col-span-4, | |
| .col-span-3 { | |
| grid-column: span 12; | |
| } | |
| } | |
| /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | |
| 🌙 DARK MODE | |
| ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ | |
| [data-theme="dark"] .sidebar { | |
| background: linear-gradient(180deg, #0c1f1d 0%, #132e2a 100%); | |
| border-right-color: rgba(45, 212, 191, 0.2); | |
| } | |
| [data-theme="dark"] .sidebar-brand { | |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(34, 211, 238, 0.08)); | |
| border-bottom-color: rgba(45, 212, 191, 0.2); | |
| } | |
| [data-theme="dark"] .nav-link:hover { | |
| background: linear-gradient(90deg, rgba(45, 212, 191, 0.12), transparent); | |
| } | |
| [data-theme="dark"] .nav-link.active { | |
| background: linear-gradient(90deg, rgba(45, 212, 191, 0.18), transparent); | |
| } | |
| [data-theme="dark"] .sidebar-footer { | |
| background: rgba(45, 212, 191, 0.05); | |
| border-top-color: rgba(45, 212, 191, 0.2); | |
| } | |
| [data-theme="dark"] .header { | |
| background: rgba(12, 31, 29, 0.8); | |
| border-bottom-color: rgba(45, 212, 191, 0.2); | |
| } | |
| [data-theme="dark"] .page-header { | |
| border-bottom-color: rgba(45, 212, 191, 0.2); | |
| } | |
| [data-theme="dark"] .page-icon { | |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.15), rgba(34, 211, 238, 0.15)); | |
| } | |