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
| /* Trading Assistant Page Styles */ | |
| .trading-layout { | |
| display: grid; | |
| grid-template-columns: 350px 1fr; | |
| grid-template-rows: auto auto 1fr; | |
| gap: var(--space-4); | |
| } | |
| .signal-form { | |
| grid-column: 1; | |
| grid-row: 1; | |
| } | |
| .watchlist { | |
| grid-column: 1; | |
| grid-row: 2; | |
| } | |
| .tradingview-chart { | |
| grid-column: 2; | |
| grid-row: 1; | |
| min-height: 500px; | |
| } | |
| .tradingview-widget-container { | |
| width: 100%; | |
| height: 500px; | |
| min-height: 500px; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .signal-results { | |
| grid-column: 2; | |
| grid-row: 2 / span 2; | |
| } | |
| .panel-card { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .panel-header { | |
| display: flex; | |
| align-items: center; | |
| padding: var(--space-3) var(--space-4); | |
| background: var(--surface-elevated); | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .panel-header h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| 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-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-3); | |
| } | |
| .form-group { | |
| margin-bottom: var(--space-3); | |
| } | |
| .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); | |
| } | |
| .btn-block { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| } | |
| .watchlist-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--space-2); | |
| } | |
| .watchlist-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: var(--space-3); | |
| background: var(--surface-elevated); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .watchlist-item:hover { | |
| background: var(--color-primary-alpha); | |
| border-color: var(--color-primary); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); | |
| } | |
| /* Error State */ | |
| .error-state { | |
| text-align: center; | |
| padding: var(--space-6); | |
| color: var(--text-secondary); | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .error-state svg { | |
| color: var(--color-danger); | |
| margin-bottom: var(--space-3); | |
| width: 48px; | |
| height: 48px; | |
| } | |
| .error-state h3 { | |
| color: var(--text-strong); | |
| margin: var(--space-3) 0 var(--space-2); | |
| font-size: var(--font-size-lg); | |
| } | |
| .error-state p { | |
| color: var(--text-muted); | |
| line-height: 1.6; | |
| } | |
| /* Signal Indicator Improvements */ | |
| .signal-indicator { | |
| padding: var(--space-4); | |
| border-radius: var(--radius-lg); | |
| margin: var(--space-4) 0; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| background: var(--surface-elevated); | |
| border: 2px solid var(--border-subtle); | |
| } | |
| .signal-indicator.signal-buy { | |
| border-color: var(--color-success); | |
| background: rgba(34, 197, 94, 0.1); | |
| } | |
| .signal-indicator.signal-sell { | |
| border-color: var(--color-danger); | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| .signal-indicator.signal-hold { | |
| border-color: var(--color-warning); | |
| background: rgba(234, 179, 8, 0.1); | |
| } | |
| .signal-icon { | |
| font-size: 2.5rem; | |
| line-height: 1; | |
| } | |
| .signal-content { | |
| flex: 1; | |
| } | |
| .signal-text { | |
| font-size: var(--font-size-xl); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| margin-bottom: var(--space-2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .signal-strength-bar { | |
| width: 100%; | |
| height: 8px; | |
| background: var(--surface-base); | |
| border-radius: var(--radius-full); | |
| overflow: hidden; | |
| margin: var(--space-2) 0; | |
| } | |
| .strength-fill { | |
| height: 100%; | |
| border-radius: var(--radius-full); | |
| transition: width 0.5s ease; | |
| } | |
| .signal-confidence { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| margin-top: var(--space-1); | |
| } | |
| /* Price Targets Improvements */ | |
| .price-targets { | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-4); | |
| margin: var(--space-4) 0; | |
| } | |
| .price-targets h4 { | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-3); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .target-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-3); | |
| background: var(--surface-base); | |
| border-radius: var(--radius-md); | |
| margin-bottom: var(--space-2); | |
| border-left: 3px solid var(--color-primary); | |
| } | |
| .target-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .target-item.stop-loss { | |
| border-left-color: var(--color-danger); | |
| } | |
| .target-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .target-value { | |
| font-size: var(--font-size-lg); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| } | |
| .target-profit { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-success); | |
| font-weight: var(--font-weight-semibold); | |
| padding: var(--space-1) var(--space-2); | |
| background: rgba(34, 197, 94, 0.1); | |
| border-radius: var(--radius-sm); | |
| } | |
| .target-risk { | |
| font-size: var(--font-size-sm); | |
| color: var(--color-danger); | |
| font-weight: var(--font-weight-semibold); | |
| padding: var(--space-1) var(--space-2); | |
| background: rgba(239, 68, 68, 0.1); | |
| border-radius: var(--radius-sm); | |
| } | |
| /* Technical Indicators */ | |
| .technical-indicators { | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-4); | |
| margin: var(--space-4) 0; | |
| } | |
| .technical-indicators h4 { | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-3); | |
| } | |
| .indicators-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: var(--space-3); | |
| } | |
| .indicator-box { | |
| background: var(--surface-base); | |
| padding: var(--space-3); | |
| border-radius: var(--radius-md); | |
| text-align: center; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .indicator-label { | |
| display: block; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: var(--space-1); | |
| } | |
| .indicator-value { | |
| display: block; | |
| font-size: var(--font-size-lg); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| } | |
| .indicator-value.bullish { | |
| color: var(--color-success); | |
| } | |
| .indicator-value.bearish { | |
| color: var(--color-danger); | |
| } | |
| .indicator-value.up { | |
| color: var(--color-success); | |
| } | |
| .indicator-value.down { | |
| color: var(--color-danger); | |
| } | |
| .watchlist-item .symbol { | |
| font-size: var(--font-size-lg); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| } | |
| .watchlist-item .name { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| .empty-state, | |
| .loading-container, | |
| .error-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: var(--space-10); | |
| color: var(--text-muted); | |
| min-height: 300px; | |
| } | |
| /* Signals Content */ | |
| .signals-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-4); | |
| } | |
| .overall-signal { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| padding: var(--space-4); | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-lg); | |
| border-left: 4px solid var(--text-muted); | |
| } | |
| .overall-signal.bullish { | |
| border-left-color: var(--color-success); | |
| } | |
| .overall-signal.bearish { | |
| border-left-color: var(--color-danger); | |
| } | |
| .signal-symbol { | |
| font-size: var(--font-size-2xl); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| } | |
| .signal-direction { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-size: var(--font-size-xl); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .bullish .signal-direction { | |
| color: var(--color-success); | |
| } | |
| .bearish .signal-direction { | |
| color: var(--color-danger); | |
| } | |
| .signal-strength { | |
| margin-left: auto; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| } | |
| .signals-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: var(--space-3); | |
| } | |
| .signal-card { | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-3); | |
| border-left: 3px solid var(--text-muted); | |
| } | |
| .signal-card.bullish { | |
| border-left-color: var(--color-success); | |
| } | |
| .signal-card.bearish { | |
| border-left-color: var(--color-danger); | |
| } | |
| .signal-card.neutral { | |
| border-left-color: var(--color-warning); | |
| } | |
| .signal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-2); | |
| } | |
| .signal-name { | |
| font-weight: var(--font-weight-medium); | |
| color: var(--text-strong); | |
| } | |
| .signal-value { | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .bullish .signal-value { | |
| color: var(--color-success); | |
| } | |
| .bearish .signal-value { | |
| color: var(--color-danger); | |
| } | |
| .signal-desc { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| } | |
| .signal-weight { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| margin-top: var(--space-2); | |
| } | |
| .key-levels, | |
| .trade-setup { | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-4); | |
| } | |
| .key-levels h4, | |
| .trade-setup h4 { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-3); | |
| } | |
| .levels-grid, | |
| .setup-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: var(--space-3); | |
| } | |
| .level, | |
| .setup-item { | |
| text-align: center; | |
| padding: var(--space-3); | |
| background: var(--surface-base); | |
| border-radius: var(--radius-md); | |
| } | |
| .level-label, | |
| .setup-item span { | |
| display: block; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| margin-bottom: var(--space-1); | |
| } | |
| .level-value, | |
| .setup-item strong { | |
| font-size: var(--font-size-lg); | |
| color: var(--text-strong); | |
| } | |
| .level.resistance .level-value { | |
| color: var(--color-success); | |
| } | |
| .level.support .level-value { | |
| color: var(--color-danger); | |
| } | |
| .setup-item.stop strong { | |
| color: var(--color-danger); | |
| } | |
| .setup-item.take strong { | |
| color: var(--color-success); | |
| } | |
| .risk-warning { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-2); | |
| padding: var(--space-3); | |
| background: var(--color-warning-alpha); | |
| border-radius: var(--radius-md); | |
| font-size: var(--font-size-xs); | |
| color: var(--color-warning); | |
| } | |
| .risk-warning svg { | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| /* Strategy Badges */ | |
| .strategy-badges { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| margin-top: var(--space-1); | |
| flex-wrap: wrap; | |
| } | |
| .strategy-badge { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-2); | |
| background: var(--color-primary-alpha); | |
| color: var(--color-primary); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-medium); | |
| } | |
| .strategy-badge.badge-advanced { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2)); | |
| color: #8b5cf6; | |
| border: 1px solid rgba(139, 92, 246, 0.3); | |
| } | |
| .badge-premium { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-2); | |
| background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(251, 191, 36, 0.2)); | |
| color: #eab308; | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| border: 1px solid rgba(234, 179, 8, 0.3); | |
| animation: pulse-glow 2s ease-in-out infinite; | |
| } | |
| .badge-fallback { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-2); | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--color-danger); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-medium); | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| } | |
| .badge-scalping { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-2); | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.15)); | |
| color: #fca5a5; | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-bold); | |
| border: 1px solid rgba(239, 68, 68, 0.4); | |
| animation: pulse-scalping 1.5s ease-in-out infinite; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| @keyframes pulse-scalping { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); | |
| transform: scale(1); | |
| } | |
| 50% { | |
| box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); | |
| transform: scale(1.02); | |
| } | |
| } | |
| .signal-indicator.signal-buy.badge-scalping, | |
| .signal-indicator.signal-sell.badge-scalping { | |
| border-width: 3px; | |
| box-shadow: 0 0 25px rgba(239, 68, 68, 0.4); | |
| } | |
| .signal-indicator.signal-buy.badge-scalping { | |
| border-color: var(--color-success); | |
| box-shadow: 0 0 25px rgba(34, 197, 94, 0.4); | |
| } | |
| .signal-indicator.signal-sell.badge-scalping { | |
| border-color: var(--color-danger); | |
| box-shadow: 0 0 25px rgba(239, 68, 68, 0.4); | |
| } | |
| /* Scalping Warning */ | |
| .scalping-warning { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-3); | |
| padding: var(--space-3); | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)); | |
| border: 2px solid rgba(239, 68, 68, 0.3); | |
| border-radius: var(--radius-md); | |
| margin: var(--space-3) 0; | |
| animation: warning-pulse 2s ease-in-out infinite; | |
| } | |
| .scalping-warning svg { | |
| color: var(--color-danger); | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .scalping-warning strong { | |
| display: block; | |
| color: var(--color-danger); | |
| font-size: var(--font-size-sm); | |
| font-weight: var(--font-weight-bold); | |
| margin-bottom: var(--space-1); | |
| } | |
| .scalping-warning p { | |
| margin: 0; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| } | |
| @keyframes warning-pulse { | |
| 0%, | |
| 100% { | |
| border-color: rgba(239, 68, 68, 0.3); | |
| box-shadow: 0 0 0 rgba(239, 68, 68, 0); | |
| } | |
| 50% { | |
| border-color: rgba(239, 68, 68, 0.6); | |
| box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); | |
| } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, | |
| 100% { | |
| box-shadow: 0 0 5px rgba(234, 179, 8, 0.3); | |
| } | |
| 50% { | |
| box-shadow: 0 0 15px rgba(234, 179, 8, 0.6); | |
| } | |
| } | |
| /* Risk/Reward Info */ | |
| .risk-reward-info { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-3); | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-md); | |
| margin: var(--space-4) 0; | |
| border-left: 3px solid var(--color-primary); | |
| } | |
| .risk-reward-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| } | |
| .risk-reward-value { | |
| font-size: var(--font-size-lg); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--color-primary); | |
| } | |
| /* Key Levels Section */ | |
| .key-levels-section { | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-4); | |
| margin: var(--space-4) 0; | |
| } | |
| .key-levels-section h4 { | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-semibold); | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-3); | |
| } | |
| .levels-group { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| margin-bottom: var(--space-2); | |
| flex-wrap: wrap; | |
| } | |
| .levels-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| font-weight: var(--font-weight-medium); | |
| min-width: 80px; | |
| } | |
| .level-tag { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-2); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .level-tag.resistance { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--color-danger); | |
| border: 1px solid var(--color-danger); | |
| } | |
| .level-tag.support { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--color-success); | |
| border: 1px solid var(--color-success); | |
| } | |
| /* Signal Modal (Waterfall Display) */ | |
| .signal-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(8px); | |
| z-index: 10000; | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: center; | |
| padding: var(--space-4); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| pointer-events: none; | |
| } | |
| .signal-modal.active { | |
| opacity: 1; | |
| visibility: visible; | |
| pointer-events: all; | |
| } | |
| .signal-modal-content { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| max-width: 500px; | |
| width: 100%; | |
| margin-top: 10vh; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); | |
| transform: translateY(-20px); | |
| transition: transform 0.3s ease; | |
| position: relative; | |
| } | |
| .signal-modal.active .signal-modal-content { | |
| transform: translateY(0); | |
| } | |
| .signal-modal-close { | |
| position: absolute; | |
| top: var(--space-3); | |
| right: var(--space-3); | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 2rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| padding: 0; | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| transition: all 0.2s ease; | |
| } | |
| .signal-modal-close:hover { | |
| background: var(--surface-elevated); | |
| color: var(--text-strong); | |
| } | |
| .signal-modal-header { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| padding: var(--space-4); | |
| border-bottom: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg) var(--radius-lg) 0 0; | |
| } | |
| .signal-modal-header.signal-buy { | |
| background: rgba(34, 197, 94, 0.1); | |
| border-left: 4px solid var(--color-success); | |
| } | |
| .signal-modal-header.signal-sell { | |
| background: rgba(239, 68, 68, 0.1); | |
| border-left: 4px solid var(--color-danger); | |
| } | |
| .signal-modal-header.signal-hold { | |
| background: rgba(234, 179, 8, 0.1); | |
| border-left: 4px solid var(--color-warning); | |
| } | |
| .signal-modal-icon { | |
| font-size: 3rem; | |
| line-height: 1; | |
| } | |
| .signal-modal-header h2 { | |
| margin: 0; | |
| font-size: var(--font-size-xl); | |
| color: var(--text-strong); | |
| } | |
| .signal-modal-header p { | |
| margin: var(--space-1) 0 0; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| } | |
| .signal-modal-details { | |
| padding: var(--space-4); | |
| } | |
| .detail-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-2) 0; | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .detail-row:last-child { | |
| border-bottom: none; | |
| } | |
| .detail-row span { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| } | |
| .detail-row strong { | |
| font-size: var(--font-size-md); | |
| color: var(--text-strong); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .detail-section { | |
| margin-top: var(--space-3); | |
| padding-top: var(--space-3); | |
| border-top: 2px solid var(--border-subtle); | |
| } | |
| .detail-section h3 { | |
| margin: 0 0 var(--space-2); | |
| font-size: var(--font-size-md); | |
| color: var(--text-strong); | |
| } | |
| /* Signal Stack (Waterfall) */ | |
| .signal-stack { | |
| margin-top: var(--space-4); | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-4); | |
| } | |
| .signal-stack h4 { | |
| margin: 0 0 var(--space-3); | |
| font-size: var(--font-size-md); | |
| color: var(--text-strong); | |
| } | |
| .signal-stack-items { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| } | |
| .signal-stack-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-3); | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid var(--text-muted); | |
| transition: all 0.2s ease; | |
| } | |
| .signal-stack-item.signal-buy { | |
| border-left-color: var(--color-success); | |
| } | |
| .signal-stack-item.signal-sell { | |
| border-left-color: var(--color-danger); | |
| } | |
| .signal-stack-item.signal-hold { | |
| border-left-color: var(--color-warning); | |
| } | |
| .signal-stack-item:hover { | |
| transform: translateX(4px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .stack-icon { | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| } | |
| .stack-symbol { | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| min-width: 60px; | |
| } | |
| .stack-signal { | |
| flex: 1; | |
| font-weight: var(--font-weight-semibold); | |
| text-transform: uppercase; | |
| font-size: var(--font-size-sm); | |
| } | |
| .signal-stack-item.signal-buy .stack-signal { | |
| color: var(--color-success); | |
| } | |
| .signal-stack-item.signal-sell .stack-signal { | |
| color: var(--color-danger); | |
| } | |
| .stack-time { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| /* Checkbox Label */ | |
| .checkbox-label { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .form-checkbox { | |
| width: 18px; | |
| height: 18px; | |
| cursor: pointer; | |
| } | |
| /* TP Levels Styling */ | |
| .target-item.tp-1 { | |
| border-left-color: var(--color-success); | |
| } | |
| .target-item.tp-2 { | |
| border-left-color: #3b82f6; | |
| } | |
| .target-item.tp-3 { | |
| border-left-color: #8b5cf6; | |
| } | |
| /* Indicator Overbought/Oversold */ | |
| .indicator-value.overbought { | |
| color: var(--color-danger); | |
| } | |
| .indicator-value.oversold { | |
| color: var(--color-success); | |
| } | |
| /* Advanced Strategy Visual Enhancements */ | |
| .signal-indicator.signal-buy.badge-advanced { | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1)); | |
| border: 2px solid var(--color-success); | |
| box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); | |
| } | |
| .signal-indicator.signal-sell.badge-advanced { | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)); | |
| border: 2px solid var(--color-danger); | |
| box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); | |
| } | |
| .signal-indicator.badge-advanced .signal-icon { | |
| font-size: 3rem; | |
| filter: drop-shadow(0 0 10px currentColor); | |
| } | |
| /* Enhanced Loading State */ | |
| .loading-spinner { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-8); | |
| gap: var(--space-4); | |
| } | |
| .loading-spinner::before { | |
| content: ''; | |
| width: 48px; | |
| height: 48px; | |
| border: 4px solid var(--border-subtle); | |
| border-top-color: var(--color-primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Enhanced Error State */ | |
| .error-state { | |
| text-align: center; | |
| padding: var(--space-6); | |
| color: var(--text-secondary); | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .error-state button { | |
| margin-top: var(--space-4); | |
| } | |
| /* Strategy Info Tooltip */ | |
| .strategy-info { | |
| position: relative; | |
| display: inline-block; | |
| margin-left: var(--space-1); | |
| cursor: help; | |
| } | |
| .strategy-info::after { | |
| content: 'ℹ️'; | |
| font-size: 0.875rem; | |
| opacity: 0.6; | |
| } | |
| .strategy-info:hover::before { | |
| content: attr(data-description); | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: var(--space-2) var(--space-3); | |
| background: var(--surface-base); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| font-size: var(--font-size-xs); | |
| white-space: nowrap; | |
| z-index: 1000; | |
| margin-bottom: var(--space-1); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| @media (max-width: 1024px) { | |
| .trading-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .tradingview-chart { | |
| grid-column: 1; | |
| grid-row: 3; | |
| } | |
| .signal-results { | |
| grid-column: 1; | |
| grid-row: 4; | |
| } | |
| .watchlist-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .signal-modal-content { | |
| margin-top: 5vh; | |
| max-width: 95%; | |
| } | |
| .help-modal-content { | |
| max-width: 95%; | |
| } | |
| .analysis-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Multi-Strategy Analysis */ | |
| .multi-strategy-analysis { | |
| background: var(--surface-elevated); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-4); | |
| margin: var(--space-4) 0; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .multi-strategy-analysis h4 { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| margin: 0 0 var(--space-3); | |
| font-size: var(--font-size-md); | |
| color: var(--text-strong); | |
| } | |
| .multi-strategy-analysis h4 svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .analysis-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: var(--space-3); | |
| } | |
| .analysis-card { | |
| background: var(--surface-base); | |
| padding: var(--space-3); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| text-align: center; | |
| } | |
| .analysis-card.best-strategy { | |
| border-color: var(--color-primary); | |
| background: rgba(59, 130, 246, 0.05); | |
| } | |
| .analysis-label { | |
| display: block; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| margin-bottom: var(--space-2); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .analysis-value { | |
| display: block; | |
| font-size: var(--font-size-xl); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| } | |
| .analysis-value.success { | |
| color: var(--color-success); | |
| } | |
| .analysis-value.risk-low { | |
| color: var(--color-success); | |
| } | |
| .analysis-value.risk-medium { | |
| color: var(--color-warning); | |
| } | |
| .analysis-value.risk-high, | |
| .analysis-value.risk-very-high { | |
| color: var(--color-danger); | |
| } | |
| .analysis-sub { | |
| display: block; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| margin-top: var(--space-1); | |
| } | |
| /* Help Modal */ | |
| .help-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(8px); | |
| z-index: 10001; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-4); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| pointer-events: none; | |
| } | |
| .help-modal.active { | |
| opacity: 1; | |
| visibility: visible; | |
| pointer-events: all; | |
| } | |
| .help-modal-content { | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| max-width: 800px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); | |
| transform: scale(0.9); | |
| transition: transform 0.3s ease; | |
| } | |
| .help-modal.active .help-modal-content { | |
| transform: scale(1); | |
| } | |
| .help-modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-4); | |
| border-bottom: 1px solid var(--border-subtle); | |
| position: sticky; | |
| top: 0; | |
| background: var(--surface-elevated); | |
| z-index: 10; | |
| } | |
| .help-modal-header h2 { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| margin: 0; | |
| font-size: var(--font-size-xl); | |
| color: var(--text-strong); | |
| } | |
| .help-modal-header h2 svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .help-modal-close { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| font-size: 2rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| padding: 0; | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| transition: all 0.2s ease; | |
| } | |
| .help-modal-close:hover { | |
| background: var(--surface-elevated); | |
| color: var(--text-strong); | |
| } | |
| .help-modal-body { | |
| padding: var(--space-4); | |
| } | |
| .help-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-6); | |
| } | |
| .help-section h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| margin: 0 0 var(--space-3); | |
| font-size: var(--font-size-lg); | |
| color: var(--text-strong); | |
| } | |
| .help-section h3 svg { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| .strategy-types-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: var(--space-4); | |
| } | |
| .strategy-type-card { | |
| background: var(--surface-elevated); | |
| padding: var(--space-4); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .strategy-type-card.advanced { | |
| border-color: rgba(139, 92, 246, 0.3); | |
| background: rgba(139, 92, 246, 0.05); | |
| } | |
| .strategy-type-card.scalping { | |
| border-color: rgba(239, 68, 68, 0.3); | |
| background: rgba(239, 68, 68, 0.05); | |
| } | |
| .strategy-type-card h4 { | |
| margin: 0 0 var(--space-2); | |
| font-size: var(--font-size-md); | |
| color: var(--text-strong); | |
| } | |
| .strategy-type-card p { | |
| margin: 0 0 var(--space-3); | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| .success-badge { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-2); | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--color-success); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| } | |
| .help-features { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .help-features li { | |
| padding: var(--space-2) 0; | |
| padding-left: var(--space-6); | |
| position: relative; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| .help-features li::before { | |
| content: '✓'; | |
| position: absolute; | |
| left: 0; | |
| color: var(--color-success); | |
| font-weight: var(--font-weight-bold); | |
| } | |
| .help-features li strong { | |
| color: var(--text-strong); | |
| } | |
| /* Signal Icon SVG Styling */ | |
| .signal-icon svg, | |
| .signal-modal-icon svg, | |
| .stack-icon svg { | |
| width: 100%; | |
| height: 100%; | |
| color: currentColor; | |
| } | |
| .signal-icon { | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .signal-modal-icon { | |
| width: 64px; | |
| height: 64px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .stack-icon { | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .signal-buy .signal-icon svg, | |
| .signal-buy .signal-modal-icon svg { | |
| color: var(--color-success); | |
| } | |
| .signal-sell .signal-icon svg, | |
| .signal-sell .signal-modal-icon svg { | |
| color: var(--color-danger); | |
| } | |
| .signal-hold .signal-icon svg, | |
| .signal-hold .signal-modal-icon svg { | |
| color: var(--color-warning); | |
| } | |
| /* Modal Analysis Grid */ | |
| .modal-analysis-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); | |
| gap: var(--space-2); | |
| margin-top: var(--space-2); | |
| } | |
| .modal-analysis-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-1); | |
| padding: var(--space-2); | |
| background: var(--surface-base); | |
| border-radius: var(--radius-sm); | |
| } | |
| .modal-analysis-label { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| .modal-analysis-value { | |
| font-size: var(--font-size-md); | |
| font-weight: var(--font-weight-bold); | |
| color: var(--text-strong); | |
| } | |
| .modal-analysis-value.success { | |
| color: var(--color-success); | |
| } | |
| .modal-analysis-value.risk-low { | |
| color: var(--color-success); | |
| } | |
| .modal-analysis-value.risk-medium { | |
| color: var(--color-warning); | |
| } | |
| .modal-analysis-value.risk-high, | |
| .modal-analysis-value.risk-very-high { | |
| color: var(--color-danger); | |
| } | |
| .modal-best-strategy { | |
| margin-top: var(--space-3); | |
| padding: var(--space-3); | |
| background: rgba(59, 130, 246, 0.1); | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid var(--color-primary); | |
| font-size: var(--font-size-sm); | |
| } | |
| .profit-badge { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-2); | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--color-success); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| margin-left: var(--space-2); | |
| } | |
| .risk-badge-modal { | |
| display: inline-block; | |
| padding: var(--space-1) var(--space-2); | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--color-danger); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: var(--font-weight-semibold); | |
| margin-left: var(--space-2); | |
| } | |
| .detail-row { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .detail-row svg { | |
| width: 16px; | |
| height: 16px; | |
| flex-shrink: 0; | |
| } |