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
| /** | |
| * Hybrid Trading System (HTS) Styles | |
| * Professional trading dashboard design | |
| */ | |
| /* Tab Bar */ | |
| .trading-tab-bar { | |
| display: flex; | |
| gap: var(--space-2); | |
| padding: var(--space-3); | |
| background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(59, 130, 246, 0.05) 100%); | |
| border-bottom: 2px solid var(--border-subtle); | |
| margin-bottom: var(--space-4); | |
| border-radius: var(--radius-lg) var(--radius-lg) 0 0; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .trading-tab { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-2) var(--space-4); | |
| background: transparent; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-medium); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .trading-tab:hover { | |
| background: var(--surface-base); | |
| color: var(--text-strong); | |
| } | |
| .trading-tab.active { | |
| background: linear-gradient(135deg, var(--color-primary) 0%, rgba(59, 130, 246, 0.8) 100%); | |
| color: white; | |
| border-color: var(--color-primary); | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .trading-tab svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .trading-view-container { | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* HTS Container */ | |
| .hts-container { | |
| padding: var(--space-4); | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| } | |
| .hts-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: var(--space-4); | |
| padding: var(--space-5); | |
| background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(139, 92, 246, 0.05) 100%); | |
| border-radius: var(--radius-xl); | |
| border: 1px solid var(--border-subtle); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(10px); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hts-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--color-primary), rgba(139, 92, 246, 0.8), var(--color-primary)); | |
| animation: shimmer 3s infinite; | |
| } | |
| @keyframes shimmer { | |
| 0%, 100% { opacity: 0.5; } | |
| 50% { opacity: 1; } | |
| } | |
| .hts-title h1 { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| margin: 0 0 var(--space-2); | |
| font-size: var(--font-size-2xl); | |
| color: var(--text-strong); | |
| } | |
| .hts-title h1 svg { | |
| color: var(--color-primary); | |
| } | |
| .hts-subtitle { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-sm); | |
| } | |
| .hts-status { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .status-indicator { | |
| padding: var(--space-2) var(--space-3); | |
| border-radius: var(--radius-md); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .status-indicator.status-success { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--color-success); | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| } | |
| .status-indicator.status-error { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--color-danger); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| .status-indicator.status-warning { | |
| background: rgba(234, 179, 8, 0.1); | |
| color: var(--color-warning); | |
| border: 1px solid rgba(234, 179, 8, 0.3); | |
| } | |
| .status-indicator.status-info { | |
| background: rgba(59, 130, 246, 0.1); | |
| color: var(--color-primary); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| } | |
| /* Controls */ | |
| .hts-controls { | |
| display: flex; | |
| gap: var(--space-4); | |
| align-items: flex-end; | |
| padding: var(--space-5); | |
| margin-bottom: var(--space-4); | |
| flex-wrap: wrap; | |
| background: linear-gradient(135deg, var(--surface-glass) 0%, rgba(59, 130, 246, 0.03) 100%); | |
| border-radius: var(--radius-xl); | |
| border: 1px solid var(--border-subtle); | |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); | |
| } | |
| .control-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-1); | |
| min-width: 150px; | |
| } | |
| .control-group label { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .control-group input[type="checkbox"] { | |
| margin-right: var(--space-2); | |
| } | |
| /* Dashboard Grid */ | |
| .hts-dashboard { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| grid-template-rows: auto auto auto; | |
| gap: var(--space-4); | |
| } | |
| .hts-chart-section { | |
| grid-column: 1; | |
| grid-row: 1 / 3; | |
| padding: var(--space-4); | |
| } | |
| .hts-signal-panel { | |
| grid-column: 2; | |
| grid-row: 1; | |
| padding: var(--space-4); | |
| } | |
| .hts-components { | |
| grid-column: 2; | |
| grid-row: 2; | |
| padding: var(--space-4); | |
| } | |
| .hts-smc-levels { | |
| grid-column: 1; | |
| grid-row: 3; | |
| padding: var(--space-4); | |
| } | |
| .hts-patterns { | |
| grid-column: 2; | |
| grid-row: 3; | |
| padding: var(--space-4); | |
| } | |
| /* Chart */ | |
| .chart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-3); | |
| } | |
| .chart-header h3 { | |
| margin: 0; | |
| font-size: var(--font-size-lg); | |
| color: var(--text-strong); | |
| } | |
| .chart-indicators-toggle { | |
| display: flex; | |
| gap: var(--space-3); | |
| } | |
| .chart-indicators-toggle label { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| font-size: var(--font-size-xs); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| } | |
| .chart-container { | |
| width: 100%; | |
| height: 500px; | |
| position: relative; | |
| background: var(--surface-base); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Signal Panel */ | |
| .signal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-4); | |
| } | |
| .signal-header h3 { | |
| margin: 0; | |
| font-size: var(--font-size-lg); | |
| color: var(--text-strong); | |
| } | |
| .signal-badge { | |
| padding: var(--space-2) var(--space-3); | |
| border-radius: var(--radius-md); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-bold); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .signal-badge.signal-buy { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--color-success); | |
| border: 1px solid rgba(34, 197, 94, 0.3); | |
| } | |
| .signal-badge.signal-sell { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--color-danger); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| } | |
| .signal-badge.signal-hold { | |
| background: rgba(234, 179, 8, 0.1); | |
| color: var(--color-warning); | |
| border: 1px solid rgba(234, 179, 8, 0.3); | |
| } | |
| .signal-content { | |
| min-height: 200px; | |
| } | |
| .signal-loading { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-6); | |
| color: var(--text-secondary); | |
| } | |
| .signal-main { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-4); | |
| } | |
| .signal-score { | |
| text-align: center; | |
| padding: var(--space-5); | |
| background: linear-gradient(135deg, var(--surface-base) 0%, rgba(59, 130, 246, 0.05) 100%); | |
| border-radius: var(--radius-xl); | |
| border: 2px solid var(--border-subtle); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .signal-score::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%); | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.5; } | |
| 50% { transform: scale(1.1); opacity: 0.8; } | |
| } | |
| .score-value { | |
| font-size: 4rem; | |
| font-weight: var(--font-weight-bold); | |
| line-height: 1; | |
| margin-bottom: var(--space-2); | |
| background: linear-gradient(135deg, currentColor 0%, rgba(59, 130, 246, 0.8) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| position: relative; | |
| z-index: 1; | |
| text-shadow: 0 0 30px currentColor; | |
| } | |
| .score-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .signal-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| } | |
| .detail-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-3); | |
| background: linear-gradient(90deg, var(--surface-base) 0%, var(--surface-elevated) 100%); | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid var(--color-primary); | |
| transition: all 0.2s ease; | |
| } | |
| .detail-item:hover { | |
| transform: translateX(4px); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| .detail-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| } | |
| .detail-value { | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| } | |
| .detail-value svg { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| .take-profit-levels { | |
| padding: var(--space-4); | |
| background: linear-gradient(135deg, var(--surface-base) 0%, rgba(34, 197, 94, 0.05) 100%); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid rgba(34, 197, 94, 0.2); | |
| box-shadow: 0 2px 12px rgba(34, 197, 94, 0.1); | |
| } | |
| .take-profit-levels h4 { | |
| margin: 0 0 var(--space-3); | |
| font-size: var(--font-size-md); | |
| color: var(--text-strong); | |
| } | |
| .tp-level { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-3); | |
| margin-bottom: var(--space-2); | |
| background: linear-gradient(90deg, var(--surface-elevated) 0%, rgba(34, 197, 94, 0.05) 100%); | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid var(--color-success); | |
| transition: all 0.2s ease; | |
| } | |
| .tp-level:hover { | |
| transform: translateX(4px); | |
| box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2); | |
| } | |
| .tp-level:last-child { | |
| margin-bottom: 0; | |
| } | |
| .tp-label { | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| } | |
| .tp-value { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-success); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .tp-rr { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| padding: var(--space-1) var(--space-2); | |
| background: rgba(59, 130, 246, 0.1); | |
| border-radius: var(--radius-sm); | |
| } | |
| /* Components Grid */ | |
| .components-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: var(--space-3); | |
| } | |
| .component-card { | |
| padding: var(--space-4); | |
| background: linear-gradient(135deg, var(--surface-base) 0%, var(--surface-elevated) 100%); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .component-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .component-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); | |
| border-color: var(--color-primary); | |
| } | |
| .component-card:hover::before { | |
| left: 100%; | |
| } | |
| .component-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-2); | |
| } | |
| .component-header h4 { | |
| margin: 0; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-strong); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .component-weight { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-strong); | |
| font-weight: var(--font-weight-bold); | |
| padding: var(--space-1) var(--space-2); | |
| background: rgba(59, 130, 246, 0.1); | |
| border-radius: var(--radius-sm); | |
| } | |
| .weight-info { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: var(--space-1); | |
| } | |
| .weight-change { | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .weight-bar-container { | |
| position: relative; | |
| width: 100%; | |
| height: 4px; | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-sm); | |
| margin: var(--space-2) 0; | |
| overflow: hidden; | |
| } | |
| .weight-bar-base { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| background: rgba(107, 114, 128, 0.3); | |
| border-radius: var(--radius-sm); | |
| } | |
| .weight-bar-current { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| border-radius: var(--radius-sm); | |
| transition: width 0.3s ease; | |
| } | |
| .market-regime-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3); | |
| border-radius: var(--radius-md); | |
| border: 2px solid; | |
| margin-bottom: var(--space-4); | |
| flex-wrap: wrap; | |
| } | |
| .regime-label { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .regime-value { | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| } | |
| .regime-stats { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-secondary); | |
| margin-left: auto; | |
| } | |
| .component-score { | |
| font-size: 2rem; | |
| font-weight: var(--font-weight-bold); | |
| margin: var(--space-2) 0; | |
| } | |
| .component-signal { | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| text-transform: uppercase; | |
| margin-bottom: var(--space-2); | |
| } | |
| .component-confidence { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| .component-details { | |
| margin-top: var(--space-2); | |
| padding-top: var(--space-2); | |
| border-top: 1px solid var(--border-subtle); | |
| font-size: var(--font-size-xs); | |
| color: var(--text-secondary); | |
| text-align: left; | |
| } | |
| .component-details div { | |
| margin-bottom: var(--space-1); | |
| } | |
| /* SMC Levels */ | |
| .smc-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-4); | |
| } | |
| .smc-section h4 { | |
| margin: 0 0 var(--space-2); | |
| font-size: var(--font-size-md); | |
| color: var(--text-strong); | |
| } | |
| .smc-items { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| } | |
| .smc-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-2); | |
| background: var(--surface-base); | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid var(--color-primary); | |
| font-size: var(--font-size-sm); | |
| } | |
| .smc-item.smc-support { | |
| border-left-color: var(--color-success); | |
| } | |
| .smc-item.smc-resistance { | |
| border-left-color: var(--color-danger); | |
| } | |
| .smc-item.smc-bullish { | |
| border-left-color: var(--color-success); | |
| } | |
| .smc-item.smc-bearish { | |
| border-left-color: var(--color-danger); | |
| } | |
| .smc-item span { | |
| color: var(--text-strong); | |
| } | |
| /* Patterns */ | |
| .patterns-content { | |
| min-height: 100px; | |
| } | |
| .no-patterns { | |
| text-align: center; | |
| color: var(--text-muted); | |
| padding: var(--space-4); | |
| } | |
| .patterns-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); | |
| gap: var(--space-2); | |
| } | |
| .pattern-card { | |
| padding: var(--space-3); | |
| background: linear-gradient(135deg, var(--surface-base) 0%, var(--surface-elevated) 100%); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .pattern-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); | |
| z-index: 10; | |
| } | |
| .pattern-card.pattern-bullish { | |
| border-color: rgba(34, 197, 94, 0.3); | |
| background: rgba(34, 197, 94, 0.05); | |
| } | |
| .pattern-card.pattern-bearish { | |
| border-color: rgba(239, 68, 68, 0.3); | |
| background: rgba(239, 68, 68, 0.05); | |
| } | |
| .pattern-name { | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| margin-bottom: var(--space-1); | |
| } | |
| .pattern-type { | |
| font-size: var(--font-size-xs); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: var(--space-1); | |
| } | |
| .pattern-card.pattern-bullish .pattern-type { | |
| color: var(--color-success); | |
| } | |
| .pattern-card.pattern-bearish .pattern-type { | |
| color: var(--color-danger); | |
| } | |
| .pattern-confidence { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| /* Error Message */ | |
| .error-message { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-6); | |
| color: var(--color-danger); | |
| text-align: center; | |
| } | |
| .error-message svg { | |
| width: 48px; | |
| height: 48px; | |
| margin-bottom: var(--space-3); | |
| } | |
| .error-message p { | |
| margin: 0; | |
| font-size: var(--font-size-sm); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1200px) { | |
| .hts-dashboard { | |
| grid-template-columns: 1fr; | |
| } | |
| .hts-chart-section { | |
| grid-column: 1; | |
| grid-row: 1; | |
| } | |
| .hts-signal-panel { | |
| grid-column: 1; | |
| grid-row: 2; | |
| } | |
| .hts-components { | |
| grid-column: 1; | |
| grid-row: 3; | |
| } | |
| .hts-smc-levels { | |
| grid-column: 1; | |
| grid-row: 4; | |
| } | |
| .hts-patterns { | |
| grid-column: 1; | |
| grid-row: 5; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hts-controls { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .control-group { | |
| min-width: 100%; | |
| } | |
| .trading-tab-bar { | |
| flex-direction: column; | |
| } | |
| .trading-tab { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } | |