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 Sidebar Styles - Collapsible & Responsive | |
| * Supports expanded (280px) and collapsed (72px) states | |
| */ | |
| /* ═══════════════════════════════════════════════════════════ | |
| SIDEBAR CONTAINER | |
| ═══════════════════════════════════════════════════════════ */ | |
| .sidebar-modern { | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: var(--sidebar-width); | |
| background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); | |
| border-right: 1px solid var(--border-primary); | |
| display: flex; | |
| flex-direction: column; | |
| z-index: var(--z-sidebar); | |
| transition: width var(--transition-base), transform var(--transition-base); | |
| box-shadow: var(--shadow-lg); | |
| overflow: hidden; | |
| } | |
| .sidebar-modern.collapsed { | |
| width: var(--sidebar-collapsed-width); | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| TOGGLE BUTTON | |
| ═══════════════════════════════════════════════════════════ */ | |
| .sidebar-toggle-btn { | |
| position: absolute; | |
| right: -12px; | |
| top: 20px; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: var(--radius-full); | |
| background: var(--surface-primary); | |
| border: 1px solid var(--border-primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| z-index: 10; | |
| transition: all var(--transition-fast); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .sidebar-toggle-btn:hover { | |
| background: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| transform: scale(1.1); | |
| } | |
| .sidebar-toggle-btn:hover .icon-chevron { | |
| color: white; | |
| } | |
| .sidebar-toggle-btn .icon-chevron { | |
| width: 16px; | |
| height: 16px; | |
| color: var(--text-tertiary); | |
| transition: transform var(--transition-base), color var(--transition-fast); | |
| } | |
| .sidebar-modern.collapsed .sidebar-toggle-btn .icon-chevron { | |
| transform: rotate(180deg); | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| BRAND SECTION | |
| ═══════════════════════════════════════════════════════════ */ | |
| .sidebar-brand-modern { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-5) var(--space-4); | |
| border-bottom: 1px solid var(--border-primary); | |
| background: linear-gradient(135deg, rgba(34, 211, 238, 0.05), rgba(99, 102, 241, 0.05)); | |
| min-height: 72px; | |
| transition: all var(--transition-base); | |
| } | |
| .brand-logo-container { | |
| width: 40px; | |
| height: 40px; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--accent-gradient); | |
| border-radius: var(--radius-lg); | |
| box-shadow: 0 4px 14px rgba(34, 211, 238, 0.3); | |
| transition: all var(--transition-base); | |
| } | |
| .sidebar-modern:hover .brand-logo-container { | |
| transform: scale(1.05); | |
| box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4); | |
| } | |
| .brand-logo-svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .brand-text-modern { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| opacity: 1; | |
| transition: opacity var(--transition-fast); | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .sidebar-modern.collapsed .brand-text-modern { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .brand-name-modern { | |
| font-size: var(--text-lg); | |
| font-weight: var(--font-bold); | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| letter-spacing: -0.02em; | |
| white-space: nowrap; | |
| } | |
| .brand-tagline-modern { | |
| font-size: var(--text-xs); | |
| font-weight: var(--font-semibold); | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| white-space: nowrap; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| NAVIGATION MENU | |
| ═══════════════════════════════════════════════════════════ */ | |
| .nav-menu-modern { | |
| flex: 1; | |
| padding: var(--space-4) var(--space-3); | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| } | |
| .nav-menu-modern::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .nav-menu-modern::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .nav-menu-modern::-webkit-scrollbar-thumb { | |
| background: var(--border-secondary); | |
| border-radius: var(--radius-full); | |
| } | |
| .nav-menu-modern::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-tertiary); | |
| } | |
| .nav-list-modern { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| NAVIGATION ITEMS | |
| ═══════════════════════════════════════════════════════════ */ | |
| .nav-item-modern { | |
| position: relative; | |
| } | |
| .nav-link-modern { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3); | |
| color: var(--text-secondary); | |
| font-size: var(--text-sm); | |
| font-weight: var(--font-medium); | |
| border-radius: var(--radius-lg); | |
| text-decoration: none; | |
| transition: all var(--transition-base); | |
| position: relative; | |
| overflow: hidden; | |
| cursor: pointer; | |
| } | |
| /* Hover Effect */ | |
| .nav-link-modern::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 3px; | |
| height: 0; | |
| background: var(--accent-gradient); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| transition: height var(--transition-base); | |
| } | |
| .nav-link-modern:hover { | |
| background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(99, 102, 241, 0.04)); | |
| color: var(--text-primary); | |
| } | |
| .nav-link-modern:hover::before { | |
| height: 24px; | |
| } | |
| /* Active State */ | |
| .nav-link-modern.active { | |
| background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(99, 102, 241, 0.08)); | |
| color: var(--accent-primary); | |
| font-weight: var(--font-semibold); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .nav-link-modern.active::before { | |
| height: 32px; | |
| } | |
| /* Icon Container */ | |
| .nav-icon-modern { | |
| width: 40px; | |
| height: 40px; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(99, 102, 241, 0.05)); | |
| border-radius: var(--radius-md); | |
| transition: all var(--transition-base); | |
| } | |
| .nav-link-modern:hover .nav-icon-modern, | |
| .nav-link-modern.active .nav-icon-modern { | |
| background: var(--accent-gradient); | |
| box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3); | |
| transform: scale(1.05); | |
| } | |
| .nav-icon-modern svg { | |
| width: 20px; | |
| height: 20px; | |
| color: var(--accent-primary); | |
| transition: color var(--transition-fast); | |
| } | |
| .nav-link-modern:hover .nav-icon-modern svg, | |
| .nav-link-modern.active .nav-icon-modern svg { | |
| color: white; | |
| } | |
| /* Label */ | |
| .nav-label-modern { | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| opacity: 1; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .sidebar-modern.collapsed .nav-label-modern { | |
| opacity: 0; | |
| width: 0; | |
| } | |
| /* Badge (optional notification badge) */ | |
| .nav-badge-modern { | |
| min-width: 20px; | |
| height: 20px; | |
| padding: 0 var(--space-2); | |
| background: var(--color-danger); | |
| color: white; | |
| font-size: var(--text-xs); | |
| font-weight: var(--font-bold); | |
| border-radius: var(--radius-full); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 1; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .nav-badge-modern:not(:empty) { | |
| display: flex; | |
| } | |
| .sidebar-modern.collapsed .nav-badge-modern { | |
| opacity: 0; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| DIVIDER | |
| ═══════════════════════════════════════════════════════════ */ | |
| .nav-divider-modern { | |
| margin: var(--space-4) 0; | |
| } | |
| .nav-divider-modern hr { | |
| border: none; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--border-primary), transparent); | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| SIDEBAR FOOTER | |
| ═══════════════════════════════════════════════════════════ */ | |
| .sidebar-footer-modern { | |
| padding: var(--space-4); | |
| border-top: 1px solid var(--border-primary); | |
| background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.03)); | |
| } | |
| .system-status-modern { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| } | |
| .status-indicator-modern { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3); | |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(34, 211, 238, 0.05)); | |
| border-radius: var(--radius-md); | |
| font-size: var(--text-sm); | |
| transition: all var(--transition-base); | |
| } | |
| .status-dot-modern { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: var(--radius-full); | |
| background: var(--text-disabled); | |
| flex-shrink: 0; | |
| transition: all var(--transition-base); | |
| } | |
| .status-dot-modern.online { | |
| background: var(--color-success); | |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 8px rgba(16, 185, 129, 0.4); | |
| animation: pulse-status 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse-status { | |
| 0%, 100% { | |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 8px rgba(16, 185, 129, 0.4); | |
| } | |
| 50% { | |
| box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.15), 0 0 12px rgba(16, 185, 129, 0.3); | |
| } | |
| } | |
| .status-text-modern { | |
| color: var(--text-secondary); | |
| font-weight: var(--font-medium); | |
| opacity: 1; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .sidebar-modern.collapsed .status-text-modern { | |
| opacity: 0; | |
| } | |
| .status-details-modern { | |
| padding-left: var(--space-3); | |
| font-size: var(--text-xs); | |
| color: var(--text-tertiary); | |
| opacity: 1; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .sidebar-modern.collapsed .status-details-modern { | |
| opacity: 0; | |
| display: none; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| MOBILE OVERLAY | |
| ═══════════════════════════════════════════════════════════ */ | |
| .sidebar-overlay-modern { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--bg-overlay); | |
| z-index: calc(var(--z-sidebar) - 1); | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity var(--transition-base); | |
| } | |
| .sidebar-overlay-modern.active { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| TOOLTIPS (for collapsed state) | |
| ═══════════════════════════════════════════════════════════ */ | |
| .sidebar-modern.collapsed .nav-link-modern { | |
| position: relative; | |
| } | |
| .sidebar-modern.collapsed .nav-link-modern::after { | |
| content: attr(title); | |
| position: absolute; | |
| left: calc(100% + 12px); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| padding: var(--space-2) var(--space-3); | |
| background: var(--surface-primary); | |
| color: var(--text-primary); | |
| font-size: var(--text-sm); | |
| font-weight: var(--font-medium); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-lg); | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity var(--transition-fast); | |
| z-index: 1000; | |
| } | |
| .sidebar-modern.collapsed .nav-link-modern:hover::after { | |
| opacity: 1; | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| RESPONSIVE BEHAVIOR | |
| ═══════════════════════════════════════════════════════════ */ | |
| /* Tablet */ | |
| @media (max-width: 1024px) { | |
| .sidebar-modern { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar-modern.open { | |
| transform: translateX(0); | |
| } | |
| .sidebar-toggle-btn { | |
| display: none; /* Hide collapse button on mobile */ | |
| } | |
| } | |
| /* Mobile */ | |
| @media (max-width: 768px) { | |
| .sidebar-modern { | |
| width: 280px; | |
| box-shadow: var(--shadow-2xl); | |
| } | |
| .sidebar-modern.collapsed { | |
| width: 280px; /* Don't collapse on mobile */ | |
| } | |
| .nav-icon-modern { | |
| width: 36px; | |
| height: 36px; | |
| } | |
| .nav-icon-modern svg { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .brand-logo-container { | |
| width: 36px; | |
| height: 36px; | |
| } | |
| .brand-logo-svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| } | |
| /* ═══════════════════════════════════════════════════════════ | |
| ACCESSIBILITY | |
| ═══════════════════════════════════════════════════════════ */ | |
| .nav-link-modern:focus-visible { | |
| outline: 2px solid var(--border-focus); | |
| outline-offset: 2px; | |
| } | |
| .sidebar-toggle-btn:focus-visible { | |
| outline: 2px solid var(--border-focus); | |
| outline-offset: 2px; | |
| } | |
| /* Reduced motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .sidebar-modern, | |
| .sidebar-toggle-btn, | |
| .nav-link-modern, | |
| .nav-icon-modern, | |
| .brand-logo-container, | |
| .status-dot-modern { | |
| transition: none; | |
| animation: none; | |
| } | |
| } | |
| /* Dark mode specific adjustments */ | |
| [data-theme="dark"] .sidebar-modern { | |
| background: linear-gradient(180deg, #0f1419 0%, #1a1f2e 100%); | |
| box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5); | |
| } | |
| [data-theme="dark"] .sidebar-toggle-btn { | |
| background: var(--surface-secondary); | |
| } | |
| [data-theme="dark"] .nav-link-modern:hover { | |
| background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(99, 102, 241, 0.08)); | |
| } | |
| [data-theme="dark"] .nav-link-modern.active { | |
| background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(99, 102, 241, 0.12)); | |
| } | |