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
| /** | |
| * ============================================ | |
| * ENTERPRISE COMPONENTS | |
| * Complete UI Component Library | |
| * ============================================ | |
| * | |
| * All components use design tokens and glassmorphism | |
| */ | |
| /* ===== CARDS ===== */ | |
| .card { | |
| background: var(--color-glass-bg); | |
| backdrop-filter: blur(var(--blur-xl)); | |
| border: 1px solid var(--color-glass-border); | |
| border-radius: var(--radius-2xl); | |
| padding: var(--spacing-lg); | |
| box-shadow: var(--shadow-lg); | |
| transition: all var(--duration-base) var(--ease-out); | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-xl); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: var(--spacing-md); | |
| padding-bottom: var(--spacing-md); | |
| border-bottom: 1px solid var(--color-border-secondary); | |
| } | |
| .card-title { | |
| font-size: var(--font-size-lg); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--color-text-primary); | |
| margin: 0; | |
| } | |
| .card-subtitle { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-secondary); | |
| margin-top: var(--spacing-1); | |
| } | |
| .card-body { | |
| color: var(--color-text-secondary); | |
| } | |
| .card-footer { | |
| margin-top: var(--spacing-lg); | |
| padding-top: var(--spacing-md); | |
| border-top: 1px solid var(--color-border-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| /* Provider Card */ | |
| .provider-card { | |
| background: var(--color-glass-bg); | |
| backdrop-filter: blur(var(--blur-lg)); | |
| border: 1px solid var(--color-glass-border); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-lg); | |
| transition: all var(--duration-base) var(--ease-out); | |
| } | |
| .provider-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-blue); | |
| border-color: var(--color-accent-blue); | |
| } | |
| .provider-card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .provider-icon { | |
| flex-shrink: 0; | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--gradient-primary); | |
| border-radius: var(--radius-lg); | |
| color: white; | |
| } | |
| .provider-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .provider-name { | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--color-text-primary); | |
| margin: 0 0 var(--spacing-1) 0; | |
| } | |
| .provider-category { | |
| font-size: var(--font-size-xs); | |
| color: var(--color-text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .provider-status { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-2); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .provider-card-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| } | |
| .provider-meta { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--spacing-md); | |
| } | |
| .meta-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-1); | |
| } | |
| .meta-label { | |
| font-size: var(--font-size-xs); | |
| color: var(--color-text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .meta-value { | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| color: var(--color-text-primary); | |
| } | |
| .provider-rate-limit { | |
| padding: var(--spacing-2) var(--spacing-3); | |
| background: rgba(59, 130, 246, 0.1); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: var(--radius-base); | |
| font-size: var(--font-size-xs); | |
| } | |
| .provider-actions { | |
| display: flex; | |
| gap: var(--spacing-2); | |
| } | |
| /* ===== TABLES ===== */ | |
| .table-container { | |
| background: var(--color-glass-bg); | |
| backdrop-filter: blur(var(--blur-xl)); | |
| border: 1px solid var(--color-glass-border); | |
| border-radius: var(--radius-xl); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .table thead { | |
| background: var(--color-bg-tertiary); | |
| border-bottom: 2px solid var(--color-border-primary); | |
| } | |
| .table th { | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| text-align: left; | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--color-text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .table tbody tr { | |
| border-bottom: 1px solid var(--color-border-secondary); | |
| transition: background var(--duration-fast) var(--ease-out); | |
| } | |
| .table tbody tr:hover { | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .table tbody tr:last-child { | |
| border-bottom: none; | |
| } | |
| .table td { | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-primary); | |
| } | |
| .table-striped tbody tr:nth-child(odd) { | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .table th.sortable { | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .table th.sortable:hover { | |
| color: var(--color-text-primary); | |
| } | |
| .sort-icon { | |
| margin-left: var(--spacing-1); | |
| opacity: 0.5; | |
| transition: opacity var(--duration-fast); | |
| } | |
| .table th.sortable:hover .sort-icon { | |
| opacity: 1; | |
| } | |
| /* ===== BUTTONS ===== */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-2); | |
| padding: var(--spacing-3) var(--spacing-6); | |
| font-size: var(--font-size-base); | |
| font-weight: var(--font-weight-medium); | |
| font-family: var(--font-family-primary); | |
| line-height: 1; | |
| text-decoration: none; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-lg); | |
| cursor: pointer; | |
| transition: all var(--duration-fast) var(--ease-out); | |
| white-space: nowrap; | |
| user-select: none; | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary { | |
| background: var(--gradient-primary); | |
| color: white; | |
| border-color: transparent; | |
| box-shadow: var(--shadow-blue); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--color-text-primary); | |
| border-color: var(--color-border-primary); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: var(--color-glass-bg); | |
| border-color: var(--color-accent-blue); | |
| } | |
| .btn-success { | |
| background: var(--color-accent-green); | |
| color: white; | |
| } | |
| .btn-danger { | |
| background: var(--color-accent-red); | |
| color: white; | |
| } | |
| .btn-sm { | |
| padding: var(--spacing-2) var(--spacing-4); | |
| font-size: var(--font-size-sm); | |
| } | |
| .btn-lg { | |
| padding: var(--spacing-4) var(--spacing-8); | |
| font-size: var(--font-size-lg); | |
| } | |
| .btn-icon { | |
| padding: var(--spacing-3); | |
| aspect-ratio: 1; | |
| } | |
| /* ===== FORMS ===== */ | |
| .form-group { | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: var(--spacing-2); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| color: var(--color-text-secondary); | |
| } | |
| .form-input, | |
| .form-select, | |
| .form-textarea { | |
| width: 100%; | |
| padding: var(--spacing-3) var(--spacing-4); | |
| font-size: var(--font-size-base); | |
| font-family: var(--font-family-primary); | |
| color: var(--color-text-primary); | |
| background: var(--color-bg-secondary); | |
| border: 1px solid var(--color-border-primary); | |
| border-radius: var(--radius-base); | |
| transition: all var(--duration-fast) var(--ease-out); | |
| } | |
| .form-input:focus, | |
| .form-select:focus, | |
| .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--color-accent-blue); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .form-input::placeholder { | |
| color: var(--color-text-tertiary); | |
| } | |
| .form-textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| /* Toggle Switch */ | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 52px; | |
| height: 28px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: var(--color-border-primary); | |
| transition: var(--duration-base); | |
| border-radius: 28px; | |
| } | |
| .toggle-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 20px; | |
| width: 20px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: var(--duration-base); | |
| border-radius: 50%; | |
| } | |
| .toggle-switch input:checked + .toggle-slider { | |
| background-color: var(--color-accent-blue); | |
| } | |
| .toggle-switch input:checked + .toggle-slider:before { | |
| transform: translateX(24px); | |
| } | |
| /* ===== BADGES ===== */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: var(--spacing-1) var(--spacing-3); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-medium); | |
| border-radius: var(--radius-full); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .badge-primary { | |
| background: rgba(59, 130, 246, 0.2); | |
| color: var(--color-accent-blue); | |
| border: 1px solid var(--color-accent-blue); | |
| } | |
| .badge-success { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--color-accent-green); | |
| border: 1px solid var(--color-accent-green); | |
| } | |
| .badge-danger { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--color-accent-red); | |
| border: 1px solid var(--color-accent-red); | |
| } | |
| .badge-warning { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--color-accent-yellow); | |
| border: 1px solid var(--color-accent-yellow); | |
| } | |
| /* ===== LOADING STATES ===== */ | |
| .skeleton { | |
| background: linear-gradient( | |
| 90deg, | |
| var(--color-bg-secondary) 0%, | |
| var(--color-bg-tertiary) 50%, | |
| var(--color-bg-secondary) 100% | |
| ); | |
| background-size: 200% 100%; | |
| animation: skeleton-loading 1.5s ease-in-out infinite; | |
| border-radius: var(--radius-base); | |
| } | |
| @keyframes skeleton-loading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| .spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid var(--color-border-primary); | |
| border-top-color: var(--color-accent-blue); | |
| border-radius: 50%; | |
| animation: spinner-rotation 0.8s linear infinite; | |
| } | |
| @keyframes spinner-rotation { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ===== TABS ===== */ | |
| .tabs { | |
| display: flex; | |
| gap: var(--spacing-2); | |
| border-bottom: 2px solid var(--color-border-primary); | |
| margin-bottom: var(--spacing-lg); | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .tabs::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .tab { | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| color: var(--color-text-secondary); | |
| background: transparent; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| cursor: pointer; | |
| transition: all var(--duration-fast) var(--ease-out); | |
| white-space: nowrap; | |
| } | |
| .tab:hover { | |
| color: var(--color-text-primary); | |
| } | |
| .tab.active { | |
| color: var(--color-accent-blue); | |
| border-bottom-color: var(--color-accent-blue); | |
| } | |
| /* ===== STAT CARDS ===== */ | |
| .stat-card { | |
| background: var(--color-glass-bg); | |
| backdrop-filter: blur(var(--blur-lg)); | |
| border: 1px solid var(--color-glass-border); | |
| border-radius: var(--radius-xl); | |
| padding: var(--spacing-lg); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .stat-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: var(--spacing-2); | |
| } | |
| .stat-value { | |
| font-size: var(--font-size-3xl); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--color-text-primary); | |
| margin-bottom: var(--spacing-2); | |
| } | |
| .stat-change { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--spacing-1); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .stat-change.positive { | |
| color: var(--color-accent-green); | |
| } | |
| .stat-change.negative { | |
| color: var(--color-accent-red); | |
| } | |
| /* ===== MODALS ===== */ | |
| .modal-backdrop { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: var(--color-bg-overlay); | |
| backdrop-filter: blur(var(--blur-md)); | |
| z-index: var(--z-modal-backdrop); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--spacing-lg); | |
| } | |
| .modal { | |
| background: var(--color-glass-bg); | |
| backdrop-filter: blur(var(--blur-2xl)); | |
| border: 1px solid var(--color-glass-border); | |
| border-radius: var(--radius-2xl); | |
| box-shadow: var(--shadow-2xl); | |
| max-width: 600px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| z-index: var(--z-modal); | |
| } | |
| .modal-header { | |
| padding: var(--spacing-lg); | |
| border-bottom: 1px solid var(--color-border-primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .modal-title { | |
| font-size: var(--font-size-xl); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--color-text-primary); | |
| margin: 0; | |
| } | |
| .modal-body { | |
| padding: var(--spacing-lg); | |
| } | |
| .modal-footer { | |
| padding: var(--spacing-lg); | |
| border-top: 1px solid var(--color-border-primary); | |
| display: flex; | |
| gap: var(--spacing-md); | |
| justify-content: flex-end; | |
| } | |
| /* ===== UTILITY CLASSES ===== */ | |
| .text-center { text-align: center; } | |
| .text-right { text-align: right; } | |
| .text-left { text-align: left; } | |
| .mt-1 { margin-top: var(--spacing-1); } | |
| .mt-2 { margin-top: var(--spacing-2); } | |
| .mt-3 { margin-top: var(--spacing-3); } | |
| .mt-4 { margin-top: var(--spacing-4); } | |
| .mb-1 { margin-bottom: var(--spacing-1); } | |
| .mb-2 { margin-bottom: var(--spacing-2); } | |
| .mb-3 { margin-bottom: var(--spacing-3); } | |
| .mb-4 { margin-bottom: var(--spacing-4); } | |
| .flex { display: flex; } | |
| .flex-col { flex-direction: column; } | |
| .items-center { align-items: center; } | |
| .justify-between { justify-content: space-between; } | |
| .gap-2 { gap: var(--spacing-2); } | |
| .gap-4 { gap: var(--spacing-4); } | |
| .grid { display: grid; } | |
| .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } | |
| .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } | |
| .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } | |