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 | /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: var(--space-4, 1.5rem); | |
| margin-bottom: var(--space-6, 2rem); | |
| } | |
| .stat-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: 16px; | |
| padding: var(--space-5, 1.5rem); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4, 1rem); | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); | |
| border-color: rgba(45, 212, 191, 0.3); | |
| } | |
| .stat-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .stat-icon.success-icon { | |
| background: rgba(34, 197, 94, 0.15); | |
| color: var(--success, #22c55e); | |
| } | |
| .stat-icon.info-icon { | |
| background: rgba(59, 130, 246, 0.15); | |
| color: var(--info, #3b82f6); | |
| } | |
| .stat-icon.models-icon { | |
| background: rgba(139, 92, 246, 0.15); | |
| color: var(--accent-primary, #8b5cf6); | |
| } | |
| .stat-icon.warning-icon { | |
| background: rgba(251, 191, 36, 0.15); | |
| color: var(--warning, #fbbf24); | |
| } | |
| .stat-content { | |
| flex: 1; | |
| } | |
| .stat-value { | |
| font-size: var(--font-size-2xl, 1.75rem); | |
| font-weight: var(--font-weight-bold, 700); | |
| color: var(--text-primary); | |
| margin-bottom: var(--space-1, 0.25rem); | |
| } | |
| .stat-label { | |
| font-size: var(--font-size-sm, 0.875rem); | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-1, 0.25rem); | |
| } | |
| .stat-trend { | |
| font-size: var(--font-size-xs, 0.75rem); | |
| font-weight: var(--font-weight-medium, 500); | |
| } | |
| .stat-trend.success { | |
| color: var(--success, #22c55e); | |
| } | |
| .stat-trend.warning { | |
| color: var(--warning, #fbbf24); | |
| } | |
| .stat-trend.info { | |
| color: var(--info, #3b82f6); | |
| } | |
| .stat-trend.neutral { | |
| color: var(--text-secondary); | |
| } | |
| /* Tabs */ | |
| .tabs { | |
| display: flex; | |
| gap: var(--space-2, 0.5rem); | |
| margin-bottom: var(--space-6, 2rem); | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.1); | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .tabs::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .tab { | |
| padding: var(--space-3, 0.75rem) var(--space-4, 1rem); | |
| background: transparent; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-sm, 0.875rem); | |
| font-weight: var(--font-weight-medium, 500); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2, 0.5rem); | |
| white-space: nowrap; | |
| } | |
| .tab:hover { | |
| color: var(--text-primary); | |
| } | |
| .tab.active { | |
| color: var(--accent-primary, #8b5cf6); | |
| border-bottom-color: var(--accent-primary, #8b5cf6); | |
| } | |
| .tab svg { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| /* Tab Content */ | |
| .tab-content { | |
| position: relative; | |
| } | |
| .tab-pane { | |
| display: none; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .tab-pane.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Cards */ | |
| .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: 16px; | |
| padding: 30px; | |
| margin-bottom: 30px; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| border-color: rgba(45, 212, 191, 0.2); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); | |
| } | |
| .card-title { | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| margin-bottom: 25px; | |
| color: var(--text-primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .card-header-actions { | |
| display: flex; | |
| gap: var(--space-2, 0.5rem); | |
| margin-bottom: 20px; | |
| } | |
| /* Form Elements */ | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| } | |
| .form-input, | |
| .form-textarea, | |
| .form-select { | |
| width: 100%; | |
| padding: 12px 16px; | |
| background: rgba(30, 41, 59, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| border-radius: 8px; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| font-family: inherit; | |
| } | |
| .form-input:focus, | |
| .form-textarea:focus, | |
| .form-select:focus { | |
| outline: none; | |
| border-color: var(--accent-primary, #8b5cf6); | |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); | |
| background: rgba(30, 41, 59, 0.9); | |
| } | |
| .form-textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| font-family: inherit; | |
| line-height: 1.6; | |
| } | |
| .two-column { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| /* Buttons */ | |
| .btn { | |
| padding: 12px 24px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| color: white; | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .btn-secondary { | |
| background: rgba(71, 85, 105, 0.8); | |
| color: var(--text-primary); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: rgba(100, 116, 139, 0.9); | |
| } | |
| .btn-sm { | |
| padding: 8px 16px; | |
| font-size: 0.875rem; | |
| } | |
| .btn-icon { | |
| padding: 8px; | |
| background: rgba(71, 85, 105, 0.5); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-icon:hover { | |
| background: rgba(100, 116, 139, 0.7); | |
| transform: translateY(-1px); | |
| } | |
| /* Result Boxes */ | |
| .result-box { | |
| margin-top: 25px; | |
| padding: 20px; | |
| background: rgba(30, 41, 59, 0.6); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .error-box { | |
| margin-top: 25px; | |
| padding: 16px; | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| border-radius: 8px; | |
| color: #fca5a5; | |
| } | |
| .info-box { | |
| padding: 16px; | |
| background: rgba(59, 130, 246, 0.1); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| border-radius: 8px; | |
| margin: 15px 0; | |
| color: #93c5fd; | |
| } | |
| .warning-box { | |
| padding: 16px; | |
| background: rgba(251, 191, 36, 0.1); | |
| border: 1px solid rgba(251, 191, 36, 0.3); | |
| border-radius: 8px; | |
| margin: 15px 0; | |
| color: #fcd34d; | |
| } | |
| /* Badges */ | |
| .badge { | |
| display: inline-block; | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| margin-right: 10px; | |
| } | |
| .badge-positive, | |
| .badge-bullish { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #4ade80; | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| } | |
| .badge-negative, | |
| .badge-bearish { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #f87171; | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| .badge-neutral, | |
| .badge-hold { | |
| background: rgba(148, 163, 184, 0.2); | |
| color: #94a3b8; | |
| border: 1px solid rgba(148, 163, 184, 0.3); | |
| } | |
| .badge-success { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #4ade80; | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| } | |
| .badge-danger { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #f87171; | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| .badge-buy { | |
| background: rgba(34, 197, 94, 0.2); | |
| color: #4ade80; | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| } | |
| .badge-sell { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: #f87171; | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| /* Score Bar */ | |
| .score-bar { | |
| margin-top: 15px; | |
| } | |
| .score-item { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .score-label { | |
| min-width: 80px; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .score-progress { | |
| flex: 1; | |
| height: 8px; | |
| background: rgba(30, 41, 59, 0.8); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin: 0 12px; | |
| } | |
| .score-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); | |
| border-radius: 4px; | |
| transition: width 0.5s ease; | |
| } | |
| .score-value { | |
| min-width: 50px; | |
| text-align: right; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| /* Status Grid */ | |
| .status-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| margin: 20px 0; | |
| } | |
| .status-item { | |
| padding: 15px; | |
| background: rgba(30, 41, 59, 0.6); | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .status-label { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 5px; | |
| } | |
| .status-value { | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| /* Summary Text */ | |
| .summary-text { | |
| padding: 20px; | |
| background: rgba(30, 41, 59, 0.8); | |
| border-radius: 8px; | |
| border-left: 4px solid var(--accent-primary, #8b5cf6); | |
| font-size: 1.05rem; | |
| line-height: 1.7; | |
| color: var(--text-primary); | |
| margin-bottom: 20px; | |
| } | |
| .sentences-list { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .sentences-list li { | |
| padding: 12px 15px; | |
| background: rgba(30, 41, 59, 0.6); | |
| border-radius: 8px; | |
| margin-bottom: 10px; | |
| border-left: 3px solid #8b5cf6; | |
| color: var(--text-secondary); | |
| } | |
| .sentences-list li:before { | |
| content: "→"; | |
| margin-right: 10px; | |
| color: #8b5cf6; | |
| font-weight: bold; | |
| } | |
| /* Table */ | |
| .table-container { | |
| overflow-x: auto; | |
| margin-top: 20px; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th { | |
| background: rgba(30, 41, 59, 0.8); | |
| padding: 12px; | |
| text-align: left; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| border-bottom: 2px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.875rem; | |
| } | |
| td { | |
| padding: 12px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| tr:hover { | |
| background: rgba(30, 41, 59, 0.4); | |
| } | |
| /* History */ | |
| .history-controls { | |
| display: flex; | |
| gap: var(--space-2, 0.5rem); | |
| margin-bottom: 20px; | |
| } | |
| .history-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-3, 0.75rem); | |
| } | |
| .history-item { | |
| padding: var(--space-4, 1rem); | |
| background: rgba(30, 41, 59, 0.6); | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .history-item:hover { | |
| background: rgba(30, 41, 59, 0.8); | |
| border-color: rgba(139, 92, 246, 0.3); | |
| } | |
| .history-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-2, 0.5rem); | |
| } | |
| .history-type { | |
| padding: 4px 12px; | |
| background: rgba(139, 92, 246, 0.2); | |
| color: var(--accent-primary, #8b5cf6); | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .history-time { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .history-preview { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-2, 0.5rem); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| /* Loading */ | |
| .loading { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-top-color: #fff; | |
| border-radius: 50%; | |
| animation: spin 0.6s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 3rem 1rem; | |
| color: var(--text-secondary); | |
| } | |
| .empty-state p { | |
| margin: 0; | |
| font-size: 0.95rem; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .tabs { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .tab { | |
| flex-shrink: 0; | |
| } | |
| .card { | |
| padding: 20px; | |
| } | |
| .card-title { | |
| font-size: 1.4rem; | |
| } | |
| .two-column { | |
| grid-template-columns: 1fr; | |
| } | |
| .status-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .history-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: var(--space-1, 0.25rem); | |
| } | |
| } | |