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
| /* API Explorer Page Styles */ | |
| .explorer-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-4); | |
| } | |
| .request-panel, | |
| .response-panel, | |
| .history-panel { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-3) var(--space-4); | |
| background: var(--surface-elevated); | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .panel-header h3 { | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| margin: 0; | |
| } | |
| .panel-body { | |
| padding: var(--space-4); | |
| } | |
| .form-group { | |
| margin-bottom: var(--space-4); | |
| } | |
| .form-group label { | |
| display: block; | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-2); | |
| } | |
| .form-textarea { | |
| width: 100%; | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| font-size: var(--font-size-sm); | |
| padding: var(--space-3); | |
| background: var(--surface-base); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| resize: vertical; | |
| } | |
| .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--color-primary); | |
| } | |
| .btn-block { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| } | |
| .response-meta { | |
| display: flex; | |
| gap: var(--space-3); | |
| } | |
| .response-meta .status { | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface-base); | |
| } | |
| .response-meta .status.status-success { | |
| color: var(--color-success); | |
| background: var(--color-success-alpha); | |
| } | |
| .response-meta .status.status-error { | |
| color: var(--color-danger); | |
| background: var(--color-danger-alpha); | |
| } | |
| .response-meta .status.status-loading { | |
| color: var(--color-primary); | |
| background: var(--color-primary-alpha); | |
| } | |
| .response-meta .time { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| } | |
| .response-content { | |
| background: var(--surface-base); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-4); | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| overflow: auto; | |
| max-height: 400px; | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .response-actions { | |
| display: flex; | |
| gap: var(--space-2); | |
| margin-top: var(--space-3); | |
| justify-content: flex-end; | |
| } | |
| .response-actions .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| } | |
| .history-panel { | |
| margin-top: var(--space-4); | |
| } | |
| .history-list { | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .history-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-2) var(--space-4); | |
| border-bottom: 1px solid var(--border-subtle); | |
| transition: background 0.15s ease; | |
| } | |
| .history-item:hover { | |
| background: var(--surface-elevated); | |
| } | |
| .history-item:last-child { | |
| border-bottom: none; | |
| } | |
| .history-method { | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-bold); | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-sm); | |
| min-width: 50px; | |
| text-align: center; | |
| } | |
| .method-get { background: #10b98120; color: #10b981; } | |
| .method-post { background: #3b82f620; color: #3b82f6; } | |
| .method-put { background: #f59e0b20; color: #f59e0b; } | |
| .method-delete { background: #ef444420; color: #ef4444; } | |
| .history-endpoint { | |
| flex: 1; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .history-status { | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .status-success { color: var(--color-success); } | |
| .status-error { color: var(--color-danger); } | |
| .status-loading { color: var(--color-primary); } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| .history-time { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| min-width: 50px; | |
| text-align: right; | |
| } | |
| /* Toast Notifications */ | |
| .toast { | |
| position: fixed; | |
| bottom: var(--space-4); | |
| right: var(--space-4); | |
| padding: var(--space-3) var(--space-4); | |
| background: var(--surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-lg); | |
| font-size: var(--font-size-sm); | |
| color: var(--text-primary); | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .toast.toast-success { | |
| border-left: 3px solid var(--color-success); | |
| } | |
| .toast.toast-error { | |
| border-left: 3px solid var(--color-danger); | |
| } | |
| .empty-state { | |
| padding: var(--space-6); | |
| text-align: center; | |
| color: var(--text-muted); | |
| } | |
| .empty-state.error { | |
| color: var(--color-danger); | |
| } | |
| /* Providers Panel */ | |
| .providers-panel { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| margin-bottom: var(--space-4); | |
| } | |
| .providers-stats { | |
| display: flex; | |
| gap: var(--space-2); | |
| align-items: center; | |
| } | |
| .providers-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: var(--space-3); | |
| padding: var(--space-4); | |
| max-height: 500px; | |
| overflow-y: auto; | |
| } | |
| .provider-card { | |
| background: var(--surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-3); | |
| transition: all 0.2s ease; | |
| } | |
| .provider-card:hover { | |
| border-color: var(--color-primary); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .provider-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: start; | |
| margin-bottom: var(--space-3); | |
| gap: var(--space-2); | |
| } | |
| .provider-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .provider-name { | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-1) 0; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .provider-badges { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-1); | |
| align-items: flex-end; | |
| } | |
| .badge-category { | |
| background: var(--color-primary-alpha); | |
| color: var(--color-primary); | |
| } | |
| .provider-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| } | |
| .provider-url { | |
| font-size: var(--font-size-xs); | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace; | |
| color: var(--text-muted); | |
| background: var(--surface-base); | |
| padding: var(--space-2); | |
| border-radius: var(--radius-sm); | |
| word-break: break-all; | |
| } | |
| .provider-description { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| line-height: 1.4; | |
| } | |
| .provider-meta { | |
| display: flex; | |
| gap: var(--space-3); | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| .provider-status { | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-medium); | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-sm); | |
| text-align: center; | |
| } | |
| .provider-status.status-success { | |
| color: var(--color-success); | |
| background: var(--color-success-alpha); | |
| } | |
| .provider-status.status-error { | |
| color: var(--color-danger); | |
| background: var(--color-danger-alpha); | |
| } | |
| .provider-status.status-warning { | |
| color: var(--color-warning); | |
| background: var(--color-warning-alpha); | |
| } | |
| .provider-status.status-unknown { | |
| color: var(--text-muted); | |
| background: var(--surface-base); | |
| } | |
| .provider-capabilities { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-1); | |
| margin-top: var(--space-2); | |
| } | |
| .capability-tag { | |
| font-size: var(--font-size-xs); | |
| padding: var(--space-1) var(--space-2); | |
| background: var(--surface-base); | |
| color: var(--text-secondary); | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| @media (max-width: 1024px) { | |
| .explorer-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .providers-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |