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 | .summary-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: var(--space-4, 1.5rem); | |
| margin-bottom: var(--space-6, 2rem); | |
| animation: slideUp 0.5s ease; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .summary-card { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-lg, 16px); | |
| padding: var(--space-5, 1.5rem); | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(20px); | |
| } | |
| .summary-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); | |
| border-color: rgba(45, 212, 191, 0.3); | |
| } | |
| .summary-card.healthy { | |
| border-color: var(--success); | |
| } | |
| .summary-card.issues { | |
| border-color: var(--danger); | |
| } | |
| .summary-card.new { | |
| border-color: var(--brand-cyan, #2dd4bf); | |
| } | |
| .summary-value { | |
| font-size: var(--font-size-3xl); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| margin-bottom: var(--space-2); | |
| } | |
| .summary-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| } | |
| .filters-bar { | |
| display: flex; | |
| gap: var(--space-3, 1rem); | |
| margin-bottom: var(--space-4, 1.5rem); | |
| padding: 1.5rem; | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-lg, 16px); | |
| backdrop-filter: blur(20px); | |
| animation: slideUp 0.6s ease; | |
| align-items: center; | |
| } | |
| .search-box { | |
| flex: 2; | |
| min-width: 250px; | |
| position: relative; | |
| } | |
| .search-box svg { | |
| position: absolute; | |
| left: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-secondary, #94a3b8); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .search-box .form-input { | |
| padding-left: 3rem; | |
| width: 100%; | |
| } | |
| .filters-bar .form-input, | |
| .filters-bar .form-select { | |
| flex: 1; | |
| min-width: 180px; | |
| padding: 0.875rem 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| color: var(--text-primary, #f8fafc); | |
| font-size: 0.95rem; | |
| transition: all 0.3s ease; | |
| } | |
| .filters-bar .form-input:focus, | |
| .filters-bar .form-select:focus { | |
| outline: none; | |
| background: rgba(255, 255, 255, 0.08); | |
| border-color: rgba(45, 212, 191, 0.5); | |
| box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1); | |
| } | |
| .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.875rem 1.25rem; | |
| background: rgba(239, 68, 68, 0.15); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| border-radius: 12px; | |
| color: #ef4444; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| white-space: nowrap; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(239, 68, 68, 0.25); | |
| border-color: rgba(239, 68, 68, 0.5); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); | |
| } | |
| .btn-secondary:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary svg { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| /* Provider Name Cell */ | |
| .provider-name-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| } | |
| .provider-name-cell strong { | |
| display: block; | |
| color: var(--text-strong); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .provider-endpoint { | |
| display: block; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| margin-top: var(--space-1); | |
| } | |
| .provider-icon { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-md); | |
| font-weight: var(--font-weight-bold); | |
| font-size: 1.2rem; | |
| flex-shrink: 0; | |
| } | |
| .provider-icon.active { | |
| background: rgba(34, 197, 94, 0.15); | |
| color: var(--color-success); | |
| } | |
| .provider-icon.degraded { | |
| background: rgba(251, 191, 36, 0.15); | |
| color: var(--color-warning); | |
| } | |
| .provider-icon.inactive { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: var(--color-danger); | |
| } | |
| /* Category Badge */ | |
| .category-badge { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-3); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| border-radius: var(--radius-full); | |
| background: rgba(59, 130, 246, 0.15); | |
| color: var(--brand-blue); | |
| } | |
| .category-badge.market-data { | |
| background: rgba(45, 212, 191, 0.15); | |
| color: var(--brand-cyan); | |
| } | |
| .category-badge.sentiment { | |
| background: rgba(168, 85, 247, 0.15); | |
| color: #a855f7; | |
| } | |
| .category-badge.ai-ml { | |
| background: rgba(129, 140, 248, 0.15); | |
| color: #818cf8; | |
| } | |
| .category-badge.news { | |
| background: rgba(251, 191, 36, 0.15); | |
| color: var(--color-warning); | |
| } | |
| /* Status Badge */ | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| padding: var(--space-1) var(--space-3); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| border-radius: var(--radius-full); | |
| } | |
| .status-badge.status-active { | |
| background: rgba(34, 197, 94, 0.15); | |
| color: var(--color-success); | |
| } | |
| .status-badge.status-degraded { | |
| background: rgba(251, 191, 36, 0.15); | |
| color: var(--color-warning); | |
| } | |
| .status-badge.status-inactive { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: var(--color-danger); | |
| } | |
| /* Latency Value */ | |
| .latency-value { | |
| font-family: var(--font-mono); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-sm); | |
| } | |
| .latency-value.good { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--color-success); | |
| } | |
| .latency-value.ok { | |
| background: rgba(251, 191, 36, 0.1); | |
| color: var(--color-warning); | |
| } | |
| .latency-value.slow { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--color-danger); | |
| } | |
| /* Test Button */ | |
| .btn-test { | |
| padding: var(--space-2) var(--space-4); | |
| background: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue)); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-semibold); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .btn-test:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4); | |
| } | |
| .btn-test:active { | |
| transform: translateY(0); | |
| } | |
| .table-container { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-lg, 16px); | |
| overflow: hidden; | |
| backdrop-filter: blur(20px); | |
| animation: slideUp 0.7s ease; | |
| } | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .data-table thead { | |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(129, 140, 248, 0.05)); | |
| border-bottom: 2px solid rgba(45, 212, 191, 0.2); | |
| } | |
| .data-table th { | |
| padding: 1rem 1.5rem; | |
| text-align: left; | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-primary, #f8fafc); | |
| } | |
| .data-table tbody tr { | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| transition: all 0.3s ease; | |
| } | |
| .data-table tbody tr:hover { | |
| background: rgba(45, 212, 191, 0.08); | |
| transform: scale(1.01); | |
| } | |
| .data-table td { | |
| padding: 1rem 1.5rem; | |
| color: var(--text-secondary, #94a3b8); | |
| font-size: 0.95rem; | |
| } | |
| .text-center { | |
| text-align: center; | |
| padding: 3rem 1rem; | |
| color: var(--text-muted, #64748b); | |
| } | |
| .empty-state-cell { | |
| text-align: center; | |
| padding: 4rem 2rem ; | |
| } | |
| .empty-state-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| color: var(--text-muted, #64748b); | |
| } | |
| .empty-state-content svg { | |
| opacity: 0.5; | |
| margin-bottom: 1rem; | |
| } | |
| .empty-state-content h3 { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--text-primary, #f8fafc); | |
| margin: 0; | |
| } | |
| .empty-state-content p { | |
| font-size: 0.95rem; | |
| color: var(--text-secondary, #94a3b8); | |
| margin: 0; | |
| max-width: 400px; | |
| } | |
| @media (max-width: 968px) { | |
| .filters-bar { | |
| flex-wrap: wrap; | |
| } | |
| .search-box { | |
| flex: 100%; | |
| min-width: 100%; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .summary-cards { | |
| grid-template-columns: 1fr; | |
| } | |
| .filters-bar { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .search-box { | |
| min-width: 100%; | |
| } | |
| .filters-bar .form-select, | |
| .btn-secondary { | |
| width: 100%; | |
| } | |
| .data-table { | |
| font-size: 0.875rem; | |
| } | |
| .data-table th, | |
| .data-table td { | |
| padding: 0.75rem 1rem; | |
| } | |
| .provider-endpoint { | |
| display: none; | |
| } | |
| } | |