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
| /** | |
| * Crypto API Hub Page Styles | |
| * Integrated with design system | |
| */ | |
| /* ============================================================================ | |
| STATS GRID | |
| ============================================================================ */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-6); | |
| } | |
| .stat-card { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| padding: var(--space-5); | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| transition: all var(--transition-normal); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| border-color: var(--border-light); | |
| background: var(--surface-glass-strong); | |
| } | |
| .stat-icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 56px; | |
| height: 56px; | |
| background: var(--gradient-primary); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--glow-blue); | |
| flex-shrink: 0; | |
| } | |
| .stat-icon svg { | |
| color: white; | |
| } | |
| .stat-content { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .stat-value { | |
| font-size: var(--font-size-2xl); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| line-height: 1.2; | |
| margin-bottom: var(--space-1); | |
| } | |
| .stat-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| font-weight: var(--font-weight-medium); | |
| } | |
| /* ============================================================================ | |
| CONTROLS SECTION | |
| ============================================================================ */ | |
| .controls-section { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-5); | |
| margin-bottom: var(--space-6); | |
| } | |
| .search-wrapper { | |
| position: relative; | |
| margin-bottom: var(--space-4); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: var(--space-4); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| pointer-events: none; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) * 2.5); | |
| background: var(--surface-panel); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| color: var(--text-normal); | |
| font-size: var(--font-size-base); | |
| font-weight: var(--font-weight-medium); | |
| transition: all var(--transition-normal); | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: var(--brand-blue); | |
| background: var(--surface-glass-strong); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); | |
| } | |
| .search-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| /* ============================================================================ | |
| FILTER TABS | |
| ============================================================================ */ | |
| .filter-tabs { | |
| display: flex; | |
| gap: var(--space-2); | |
| flex-wrap: wrap; | |
| } | |
| .filter-tab { | |
| padding: var(--space-2) var(--space-4); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-panel); | |
| border-radius: var(--radius-md); | |
| color: var(--text-soft); | |
| font-weight: var(--font-weight-semibold); | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .filter-tab:hover { | |
| background: var(--surface-glass-strong); | |
| border-color: var(--brand-blue); | |
| color: var(--text-strong); | |
| transform: translateY(-1px); | |
| } | |
| .filter-tab.active { | |
| background: var(--gradient-primary); | |
| border-color: transparent; | |
| color: white; | |
| box-shadow: var(--glow-blue); | |
| } | |
| /* ============================================================================ | |
| SERVICES GRID | |
| ============================================================================ */ | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); | |
| gap: var(--space-5); | |
| margin-bottom: var(--space-6); | |
| } | |
| .service-card { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-5); | |
| transition: all var(--transition-normal); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .service-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: var(--card-gradient, var(--gradient-primary)); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform var(--transition-normal); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: var(--border-light); | |
| background: var(--surface-glass-strong); | |
| } | |
| .service-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| /* Gradient variations for cards */ | |
| .service-card:nth-child(8n+1) { --card-gradient: linear-gradient(135deg, #667eea, #764ba2); } | |
| .service-card:nth-child(8n+2) { --card-gradient: linear-gradient(135deg, #f093fb, #f5576c); } | |
| .service-card:nth-child(8n+3) { --card-gradient: linear-gradient(135deg, #4facfe, #00f2fe); } | |
| .service-card:nth-child(8n+4) { --card-gradient: linear-gradient(135deg, #43e97b, #38f9d7); } | |
| .service-card:nth-child(8n+5) { --card-gradient: linear-gradient(135deg, #fa709a, #fee140); } | |
| .service-card:nth-child(8n+6) { --card-gradient: linear-gradient(135deg, #30cfd0, #330867); } | |
| .service-card:nth-child(8n+7) { --card-gradient: linear-gradient(135deg, #a8edea, #fed6e3); } | |
| .service-card:nth-child(8n+8) { --card-gradient: linear-gradient(135deg, #ff9a9e, #fecfef); } | |
| .service-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-4); | |
| } | |
| .service-icon { | |
| width: 56px; | |
| height: 56px; | |
| background: var(--card-gradient, var(--gradient-primary)); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| box-shadow: var(--glow-blue); | |
| transition: transform var(--transition-normal); | |
| } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.08) rotate(3deg); | |
| } | |
| .service-icon svg { | |
| width: 28px; | |
| height: 28px; | |
| color: white; | |
| } | |
| .service-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .service-name { | |
| font-size: var(--font-size-lg); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| margin-bottom: var(--space-1); | |
| font-family: var(--font-display); | |
| } | |
| .service-url { | |
| font-family: var(--font-mono); | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| word-break: break-all; | |
| opacity: 0.9; | |
| } | |
| /* ============================================================================ | |
| SERVICE BADGES | |
| ============================================================================ */ | |
| .service-badges { | |
| display: flex; | |
| gap: var(--space-2); | |
| flex-wrap: wrap; | |
| margin-bottom: var(--space-4); | |
| } | |
| .badge { | |
| padding: var(--space-1) var(--space-3); | |
| border-radius: var(--radius-full); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-bold); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| } | |
| .badge-category { | |
| background: rgba(102, 126, 234, 0.2); | |
| color: #a8b7ff; | |
| border: 1px solid rgba(102, 126, 234, 0.3); | |
| } | |
| .badge-endpoints { | |
| background: rgba(79, 172, 254, 0.2); | |
| color: #7dd3fc; | |
| border: 1px solid rgba(79, 172, 254, 0.3); | |
| } | |
| .badge-key { | |
| background: rgba(67, 233, 123, 0.2); | |
| color: #86efac; | |
| border: 1px solid rgba(67, 233, 123, 0.3); | |
| } | |
| /* ============================================================================ | |
| ENDPOINTS LIST | |
| ============================================================================ */ | |
| .endpoints-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-3); | |
| } | |
| .endpoint-item { | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-4); | |
| transition: all var(--transition-normal); | |
| } | |
| .endpoint-item:hover { | |
| border-color: var(--brand-blue); | |
| background: rgba(0, 0, 0, 0.6); | |
| transform: translateX(4px); | |
| } | |
| .endpoint-path { | |
| font-family: var(--font-mono); | |
| font-size: var(--font-size-sm); | |
| color: var(--brand-cyan-light); | |
| word-break: break-all; | |
| margin-bottom: var(--space-3); | |
| line-height: 1.6; | |
| } | |
| .endpoint-actions { | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .btn-sm { | |
| padding: var(--space-2) var(--space-3); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-panel); | |
| color: var(--text-normal); | |
| border-radius: var(--radius-sm); | |
| font-weight: var(--font-weight-semibold); | |
| font-size: var(--font-size-xs); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .btn-sm:hover { | |
| background: var(--gradient-primary); | |
| border-color: transparent; | |
| transform: translateY(-1px); | |
| box-shadow: var(--glow-blue); | |
| color: white; | |
| } | |
| .btn-sm svg { | |
| width: 14px; | |
| height: 14px; | |
| } | |
| /* ============================================================================ | |
| MODAL STYLES | |
| ============================================================================ */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| z-index: var(--z-modal, 1000); | |
| padding: var(--space-6); | |
| overflow-y: auto; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal.active { | |
| display: flex; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--surface-overlay); | |
| backdrop-filter: var(--blur-md); | |
| } | |
| .modal-content { | |
| background: var(--background-secondary); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-xl); | |
| max-width: 900px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-2xl); | |
| animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .modal-header { | |
| padding: var(--space-6); | |
| border-bottom: 1px solid var(--border-subtle); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: var(--gradient-primary); | |
| } | |
| .modal-header h2 { | |
| font-family: var(--font-display); | |
| font-size: var(--font-size-xl); | |
| font-weight: var(--font-weight-bold); | |
| color: white; | |
| margin: 0; | |
| } | |
| .modal-close { | |
| width: 40px; | |
| height: 40px; | |
| border: none; | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-close:hover { | |
| background: rgba(239, 68, 68, 0.8); | |
| transform: rotate(90deg) scale(1.1); | |
| } | |
| .modal-body { | |
| padding: var(--space-6); | |
| } | |
| /* ============================================================================ | |
| FORM STYLES | |
| ============================================================================ */ | |
| .form-group { | |
| margin-bottom: var(--space-5); | |
| } | |
| .form-label { | |
| display: block; | |
| font-weight: var(--font-weight-semibold); | |
| font-size: var(--font-size-sm); | |
| margin-bottom: var(--space-2); | |
| color: var(--text-strong); | |
| } | |
| .form-input, | |
| .form-textarea { | |
| width: 100%; | |
| padding: var(--space-3) var(--space-4); | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| color: var(--text-normal); | |
| font-family: var(--font-mono); | |
| font-size: var(--font-size-sm); | |
| transition: all var(--transition-normal); | |
| } | |
| .form-input:focus, | |
| .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--brand-blue); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); | |
| background: rgba(0, 0, 0, 0.6); | |
| } | |
| .form-textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| font-family: var(--font-mono); | |
| } | |
| /* ============================================================================ | |
| METHOD BUTTONS | |
| ============================================================================ */ | |
| .method-buttons { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: var(--space-2); | |
| } | |
| .method-btn { | |
| padding: var(--space-3); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-panel); | |
| color: var(--text-soft); | |
| border-radius: var(--radius-md); | |
| font-weight: var(--font-weight-bold); | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| } | |
| .method-btn:hover { | |
| background: var(--surface-glass-strong); | |
| border-color: var(--brand-blue); | |
| color: var(--text-strong); | |
| } | |
| .method-btn.active { | |
| background: var(--gradient-primary); | |
| border-color: transparent; | |
| color: white; | |
| box-shadow: var(--glow-blue); | |
| } | |
| /* ============================================================================ | |
| RESPONSE CONTAINER | |
| ============================================================================ */ | |
| .response-container { | |
| background: rgba(0, 0, 0, 0.6); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-4); | |
| margin-top: var(--space-5); | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .response-container h3 { | |
| font-size: var(--font-size-base); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| margin-bottom: var(--space-3); | |
| } | |
| .response-json { | |
| font-family: var(--font-mono); | |
| font-size: var(--font-size-xs); | |
| line-height: 1.7; | |
| color: var(--brand-cyan-light); | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| margin: 0; | |
| } | |
| /* ============================================================================ | |
| BUTTON UTILITIES | |
| ============================================================================ */ | |
| .btn-block { | |
| width: 100%; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-primary); | |
| color: white; | |
| box-shadow: var(--glow-blue); | |
| } | |
| .btn-primary:hover { | |
| box-shadow: var(--glow-blue-strong); | |
| } | |
| .btn-secondary { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-light); | |
| color: var(--text-strong); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--surface-glass-strong); | |
| border-color: var(--brand-blue); | |
| } | |
| /* ============================================================================ | |
| RESPONSIVE | |
| ============================================================================ */ | |
| @media (max-width: 768px) { | |
| .services-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .filter-tabs { | |
| justify-content: center; | |
| } | |
| .method-buttons { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |