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 Table Styles | |
| * Modern, responsive table component with glassmorphism | |
| */ | |
| /* ========================================================================= | |
| TABLE CONTAINER | |
| ========================================================================= */ | |
| .table-wrapper { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-lg); | |
| backdrop-filter: var(--blur-lg); | |
| -webkit-backdrop-filter: var(--blur-lg); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| } | |
| /* ========================================================================= | |
| FILTER BAR | |
| ========================================================================= */ | |
| .table-filter-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: var(--space-4); | |
| padding: var(--space-4); | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-md); | |
| margin-bottom: var(--space-4); | |
| backdrop-filter: var(--blur-lg); | |
| -webkit-backdrop-filter: var(--blur-lg); | |
| } | |
| .table-filter-bar .search-wrapper { | |
| position: relative; | |
| flex: 1; | |
| max-width: 400px; | |
| } | |
| .table-filter-bar .search-icon { | |
| position: absolute; | |
| left: var(--space-3); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| pointer-events: none; | |
| } | |
| .table-search-input { | |
| width: 100%; | |
| padding: var(--space-3) var(--space-3) var(--space-3) var(--space-10); | |
| background: rgba(15, 23, 42, 0.60); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-normal); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| transition: all var(--transition-fast); | |
| } | |
| .table-search-input:focus { | |
| outline: none; | |
| border-color: var(--brand-blue); | |
| background: rgba(15, 23, 42, 0.80); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); | |
| } | |
| .table-info { | |
| color: var(--text-muted); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| white-space: nowrap; | |
| } | |
| /* ========================================================================= | |
| TABLE | |
| ========================================================================= */ | |
| .enhanced-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: var(--fs-sm); | |
| } | |
| .enhanced-table thead { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-bottom: 1px solid var(--border-light); | |
| } | |
| .enhanced-table th { | |
| padding: var(--space-4); | |
| text-align: left; | |
| font-weight: var(--fw-bold); | |
| font-size: var(--fs-xs); | |
| text-transform: uppercase; | |
| letter-spacing: var(--tracking-wider); | |
| color: var(--text-soft); | |
| user-select: none; | |
| } | |
| .enhanced-table th.sortable { | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .enhanced-table th.sortable:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--text-strong); | |
| } | |
| .enhanced-table th.sorted { | |
| color: var(--brand-blue); | |
| background: rgba(59, 130, 246, 0.1); | |
| } | |
| .th-content { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| justify-content: space-between; | |
| } | |
| .sort-icon { | |
| color: var(--brand-blue); | |
| font-size: var(--fs-base); | |
| opacity: 0.8; | |
| } | |
| .enhanced-table tbody tr { | |
| border-bottom: 1px solid var(--border-subtle); | |
| transition: all var(--transition-fast); | |
| } | |
| .enhanced-table tbody tr:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .enhanced-table tbody tr.clickable { | |
| cursor: pointer; | |
| } | |
| .enhanced-table tbody tr.clickable:hover { | |
| background: rgba(59, 130, 246, 0.1); | |
| transform: translateX(4px); | |
| } | |
| .enhanced-table td { | |
| padding: var(--space-4); | |
| color: var(--text-normal); | |
| font-weight: var(--fw-regular); | |
| } | |
| /* ========================================================================= | |
| EMPTY STATE | |
| ========================================================================= */ | |
| .table-empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-16) var(--space-8); | |
| text-align: center; | |
| } | |
| .table-empty-state .empty-icon { | |
| font-size: 64px; | |
| margin-bottom: var(--space-4); | |
| opacity: 0.3; | |
| } | |
| .table-empty-state .empty-message { | |
| color: var(--text-muted); | |
| font-size: var(--fs-base); | |
| font-weight: var(--fw-medium); | |
| } | |
| /* ========================================================================= | |
| PAGINATION | |
| ========================================================================= */ | |
| .table-pagination { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--space-4); | |
| padding: var(--space-4); | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-md); | |
| margin-top: var(--space-4); | |
| backdrop-filter: var(--blur-lg); | |
| -webkit-backdrop-filter: var(--blur-lg); | |
| } | |
| .pagination-btn { | |
| padding: var(--space-2) var(--space-4); | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-normal); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-semibold); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .pagination-btn:hover:not(:disabled) { | |
| background: var(--brand-blue); | |
| border-color: var(--brand-blue); | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: var(--glow-blue); | |
| } | |
| .pagination-btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .pagination-pages { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .pagination-page { | |
| min-width: 36px; | |
| height: 36px; | |
| padding: var(--space-2); | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-normal); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-semibold); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .pagination-page:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: var(--border-light); | |
| transform: translateY(-2px); | |
| } | |
| .pagination-page.active { | |
| background: var(--brand-blue); | |
| border-color: var(--brand-blue); | |
| color: white; | |
| box-shadow: var(--glow-blue); | |
| } | |
| .pagination-ellipsis { | |
| color: var(--text-muted); | |
| padding: 0 var(--space-2); | |
| } | |
| /* ========================================================================= | |
| RESPONSIVE | |
| ========================================================================= */ | |
| @media (max-width: 768px) { | |
| .table-filter-bar { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .table-filter-bar .search-wrapper { | |
| max-width: none; | |
| } | |
| .table-wrapper { | |
| overflow-x: auto; | |
| } | |
| .enhanced-table { | |
| min-width: 600px; | |
| } | |
| .table-pagination { | |
| flex-direction: column; | |
| } | |
| .pagination-pages { | |
| order: -1; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .enhanced-table th, | |
| .enhanced-table td { | |
| padding: var(--space-2) var(--space-3); | |
| } | |
| .pagination-page { | |
| min-width: 32px; | |
| height: 32px; | |
| } | |
| } | |