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
| /** | |
| * Components - Compact Light Theme | |
| */ | |
| /* Cards */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-3) var(--space-4); | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .card-title { | |
| font-size: var(--text-base); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .card-body { | |
| padding: var(--space-3) var(--space-4); | |
| } | |
| /* Badges */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 8px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| border-radius: var(--radius-full); | |
| } | |
| .badge-success { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--success); | |
| } | |
| .badge-error, | |
| .badge-danger { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--danger); | |
| } | |
| .badge-warning { | |
| background: rgba(245, 158, 11, 0.1); | |
| color: var(--warning); | |
| } | |
| .badge-info { | |
| background: rgba(34, 211, 238, 0.1); | |
| color: var(--cyan); | |
| } | |
| .badge-primary { | |
| background: rgba(20, 184, 166, 0.1); | |
| color: var(--teal); | |
| } | |
| /* Forms */ | |
| .form-group { | |
| margin-bottom: var(--space-4); | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: var(--text-sm); | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-1); | |
| } | |
| .form-input, | |
| .form-select, | |
| .form-textarea { | |
| width: 100%; | |
| padding: var(--space-2) var(--space-3); | |
| font-size: var(--text-sm); | |
| color: var(--text-primary); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-sm); | |
| } | |
| .form-input:focus, | |
| .form-select:focus, | |
| .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1); | |
| } | |
| /* Tables */ | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .data-table thead { | |
| background: var(--mint); | |
| } | |
| .data-table th { | |
| padding: var(--space-2) var(--space-3); | |
| text-align: left; | |
| font-size: 10px; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .data-table td { | |
| padding: var(--space-2) var(--space-3); | |
| font-size: var(--text-sm); | |
| color: var(--text-secondary); | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .data-table tbody tr:hover { | |
| background: var(--bg-tint); | |
| } | |
| .data-table tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* Modals */ | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(15, 41, 38, 0.5); | |
| backdrop-filter: blur(4px); | |
| z-index: 999; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .modal-backdrop.show { | |
| opacity: 1; | |
| } | |
| .modal { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) scale(0.95); | |
| z-index: var(--z-modal); | |
| opacity: 0; | |
| transition: all 0.2s; | |
| } | |
| .modal.show { | |
| opacity: 1; | |
| transform: translate(-50%, -50%) scale(1); | |
| } | |
| .modal-dialog { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-xl); | |
| box-shadow: var(--shadow-xl); | |
| max-width: 90vw; | |
| max-height: 90vh; | |
| overflow: auto; | |
| } | |
| .modal-small .modal-dialog { width: 360px; } | |
| .modal-medium .modal-dialog { width: 500px; } | |
| .modal-large .modal-dialog { width: 720px; } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-4); | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .modal-title { | |
| font-size: var(--text-lg); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 18px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 4px; | |
| border-radius: var(--radius-sm); | |
| } | |
| .modal-close:hover { | |
| color: var(--text-primary); | |
| background: var(--mint); | |
| } | |
| .modal-body { | |
| padding: var(--space-4); | |
| } | |
| /* Toasts */ | |
| .toast-container, | |
| #toast-container { | |
| position: fixed; | |
| top: 60px; | |
| right: 16px; | |
| z-index: var(--z-toast); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| max-width: 320px; | |
| pointer-events: none; | |
| } | |
| .toast { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 12px 14px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-lg); | |
| pointer-events: all; | |
| opacity: 0; | |
| transform: translateX(100%); | |
| transition: all 0.3s; | |
| } | |
| .toast.toast-show { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .toast.toast-hide { | |
| opacity: 0; | |
| transform: translateX(100%); | |
| } | |
| .toast-success { border-left: 3px solid var(--success); } | |
| .toast-error { border-left: 3px solid var(--danger); } | |
| .toast-warning { border-left: 3px solid var(--warning); } | |
| .toast-info { border-left: 3px solid var(--cyan); } | |
| .toast-icon { | |
| font-size: 16px; | |
| flex-shrink: 0; | |
| } | |
| .toast-success .toast-icon { color: var(--success); } | |
| .toast-error .toast-icon { color: var(--danger); } | |
| .toast-warning .toast-icon { color: var(--warning); } | |
| .toast-info .toast-icon { color: var(--cyan); } | |
| .toast-content { | |
| flex: 1; | |
| } | |
| .toast-message { | |
| font-size: var(--text-sm); | |
| color: var(--text-primary); | |
| } | |
| .toast-close { | |
| background: none; | |
| border: none; | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 2px; | |
| } | |
| .toast-progress { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| height: 2px; | |
| background: var(--gradient-primary); | |
| animation: toast-progress linear forwards; | |
| } | |
| @keyframes toast-progress { | |
| from { width: 100%; } | |
| to { width: 0%; } | |
| } | |
| /* Loading */ | |
| .loading-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-6); | |
| } | |
| .spinner { | |
| width: 32px; | |
| height: 32px; | |
| border: 2px solid var(--mint); | |
| border-top-color: var(--primary); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-text { | |
| margin-top: var(--space-3); | |
| font-size: var(--text-sm); | |
| color: var(--text-muted); | |
| } | |
| .skeleton-box { | |
| background: linear-gradient(90deg, var(--mint) 25%, var(--aqua-light) 50%, var(--mint) 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| border-radius: var(--radius-sm); | |
| height: 1em; | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| /* Tabs */ | |
| .tabs { | |
| display: flex; | |
| gap: 2px; | |
| padding: 2px; | |
| background: var(--mint); | |
| border-radius: var(--radius-md); | |
| } | |
| .tab { | |
| padding: 6px 14px; | |
| font-size: var(--text-sm); | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| background: transparent; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .tab:hover { | |
| color: var(--text-secondary); | |
| background: white; | |
| } | |
| .tab.active { | |
| color: white; | |
| background: var(--gradient-primary); | |
| } | |
| /* Progress */ | |
| .progress { | |
| height: 6px; | |
| background: var(--mint); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: var(--gradient-primary); | |
| border-radius: var(--radius-full); | |
| transition: width 0.3s; | |
| } | |
| /* Tooltips */ | |
| [data-tooltip] { | |
| position: relative; | |
| } | |
| [data-tooltip]::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: calc(100% + 6px); | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.9); | |
| padding: 4px 8px; | |
| font-size: 10px; | |
| font-weight: 500; | |
| color: white; | |
| background: var(--gray-800); | |
| border-radius: var(--radius-sm); | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.15s; | |
| z-index: 100; | |
| } | |
| [data-tooltip]:hover::after { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .modal-dialog { | |
| width: 95vw ; | |
| } | |
| .toast-container, | |
| #toast-container { | |
| left: 12px; | |
| right: 12px; | |
| max-width: none; | |
| } | |
| .toast { | |
| width: 100%; | |
| } | |
| } | |
| /* Dark Mode */ | |
| [data-theme="dark"] .card, | |
| [data-theme="dark"] .data-table, | |
| [data-theme="dark"] .modal-dialog, | |
| [data-theme="dark"] .toast { | |
| background: var(--bg-card); | |
| border-color: var(--border-light); | |
| } | |
| [data-theme="dark"] .data-table thead, | |
| [data-theme="dark"] .modal-header { | |
| background: rgba(45, 212, 191, 0.05); | |
| } | |
| [data-theme="dark"] .tabs, | |
| [data-theme="dark"] .progress { | |
| background: rgba(45, 212, 191, 0.1); | |
| } | |