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
| /** | |
| * Data Sources Page Styles | |
| */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .stat-card.active { | |
| border-color: #2dd4bf; | |
| background: rgba(45, 212, 191, 0.05); | |
| } | |
| .stat-icon { | |
| font-size: 2rem; | |
| } | |
| .stat-label { | |
| font-size: 0.85rem; | |
| color: rgba(255, 255, 255, 0.6); | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-value { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| color: #2dd4bf; | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-bottom: 2rem; | |
| overflow-x: auto; | |
| padding-bottom: 0.5rem; | |
| } | |
| .tab { | |
| padding: 0.75rem 1.5rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| color: rgba(255, 255, 255, 0.7); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .tab:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: #f8fafc; | |
| } | |
| .tab.active { | |
| background: linear-gradient(135deg, #2dd4bf, #818cf8); | |
| border-color: transparent; | |
| color: white; | |
| } | |
| .source-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin-bottom: 1rem; | |
| transition: all 0.2s; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .source-card:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); | |
| border-color: rgba(45, 212, 191, 0.5); | |
| } | |
| .source-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: start; | |
| margin-bottom: 0; | |
| gap: 1rem; | |
| } | |
| .source-title-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| flex: 1; | |
| } | |
| .source-title-group h3 { | |
| margin: 0; | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: #f8fafc; | |
| } | |
| .key-badge { | |
| font-size: 0.875rem; | |
| opacity: 0.7; | |
| } | |
| .status-badge { | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 6px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| white-space: nowrap; | |
| } | |
| .status-badge.status-active { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #22c55e; | |
| border: 1px solid #22c55e; | |
| } | |
| .status-badge.status-degraded { | |
| background: rgba(234, 179, 8, 0.2); | |
| color: #eab308; | |
| border: 1px solid #eab308; | |
| } | |
| .status-badge.status-inactive, | |
| .status-badge.status-error { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #ef4444; | |
| border: 1px solid #ef4444; | |
| } | |
| .source-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .source-badge { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: #22c55e; | |
| box-shadow: 0 0 10px #22c55e; | |
| } | |
| .source-badge.inactive { | |
| background: #64748b; | |
| box-shadow: none; | |
| } | |
| .source-name { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: #f8fafc; | |
| } | |
| .source-category { | |
| padding: 0.25rem 0.75rem; | |
| background: rgba(45, 212, 191, 0.1); | |
| border: 1px solid rgba(45, 212, 191, 0.3); | |
| border-radius: 6px; | |
| font-size: 0.75rem; | |
| color: #2dd4bf; | |
| text-transform: uppercase; | |
| } | |
| .source-url { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.85rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| margin-bottom: 0.75rem; | |
| word-break: break-all; | |
| } | |
| .source-endpoints { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .endpoint-item { | |
| padding: 0.75rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 6px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.8rem; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .source-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .btn-test { | |
| padding: 0.5rem 1rem; | |
| background: rgba(45, 212, 191, 0.1); | |
| border: 1px solid rgba(45, 212, 191, 0.3); | |
| border-radius: 6px; | |
| color: #2dd4bf; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 0.85rem; | |
| } | |
| .btn-test:hover { | |
| background: rgba(45, 212, 191, 0.2); | |
| } | |
| .btn-copy { | |
| padding: 0.5rem 1rem; | |
| background: rgba(129, 140, 248, 0.1); | |
| border: 1px solid rgba(129, 140, 248, 0.3); | |
| border-radius: 6px; | |
| color: #818cf8; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 0.85rem; | |
| } | |
| .btn-copy:hover { | |
| background: rgba(129, 140, 248, 0.2); | |
| } | |
| .search-box { | |
| margin-bottom: 1.5rem; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| color: #f8fafc; | |
| font-size: 1rem; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: #2dd4bf; | |
| box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1); | |
| } | |
| .loading { | |
| text-align: center; | |
| padding: 3rem; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .spinner { | |
| width: 48px; | |
| height: 48px; | |
| border: 4px solid rgba(255, 255, 255, 0.1); | |
| border-top-color: #2dd4bf; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Refresh Button Styles */ | |
| .btn-gradient { | |
| background: linear-gradient(135deg, #2dd4bf, #818cf8); | |
| border: none; | |
| border-radius: 8px; | |
| padding: 0.75rem 1.5rem; | |
| color: white; | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(45, 212, 191, 0.2); | |
| } | |
| .btn-gradient:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 6px 12px rgba(45, 212, 191, 0.3); | |
| filter: brightness(1.1); | |
| } | |
| .btn-gradient:active { | |
| transform: translateY(0); | |
| } | |
| .btn-gradient svg { | |
| transition: transform 0.5s ease; | |
| } | |
| .btn-gradient:hover svg { | |
| transform: rotate(180deg); | |
| } | |
| .btn-gradient.loading { | |
| opacity: 0.8; | |
| cursor: wait; | |
| } | |
| .spinner-icon { | |
| animation: spin 1s linear infinite; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: 12px; | |
| border: 1px dashed rgba(255, 255, 255, 0.1); | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |