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
| /** | |
| * Enhanced Animations for Technical Analysis | |
| * Smooth, modern animations for trend drawing and UI elements | |
| */ | |
| /* ============================================================================= | |
| TREND LINE ANIMATIONS | |
| ============================================================================= */ | |
| @keyframes drawTrendLine { | |
| from { | |
| stroke-dashoffset: 1000; | |
| opacity: 0; | |
| } | |
| to { | |
| stroke-dashoffset: 0; | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadeInScale { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.8); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes slideInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.8; | |
| transform: scale(1.05); | |
| } | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: -1000px 0; | |
| } | |
| 100% { | |
| background-position: 1000px 0; | |
| } | |
| } | |
| @keyframes gradientShift { | |
| 0%, 100% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| } | |
| @keyframes rotate { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* ============================================================================= | |
| CHART ANIMATIONS | |
| ============================================================================= */ | |
| .chart-wrapper { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .chart-wrapper::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(45, 212, 191, 0.1), | |
| transparent | |
| ); | |
| animation: shimmer 3s infinite; | |
| pointer-events: none; | |
| z-index: 10; | |
| } | |
| .trend-line { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: drawTrendLine 2s ease-out forwards; | |
| transition: stroke-width 0.3s ease; | |
| } | |
| .trend-line:hover { | |
| stroke-width: 3px; | |
| } | |
| .support-line, | |
| .resistance-line { | |
| stroke-dasharray: 5, 5; | |
| animation: drawTrendLine 1.5s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .support-line { | |
| stroke: #ef4444; | |
| } | |
| .resistance-line { | |
| stroke: #22c55e; | |
| } | |
| /* ============================================================================= | |
| CARD ANIMATIONS | |
| ============================================================================= */ | |
| .panel-section, | |
| .analysis-section, | |
| .mode-panel { | |
| animation: fadeInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; | |
| opacity: 0; | |
| } | |
| .panel-section:nth-child(1) { animation-delay: 0.1s; } | |
| .panel-section:nth-child(2) { animation-delay: 0.2s; } | |
| .panel-section:nth-child(3) { animation-delay: 0.3s; } | |
| .panel-section:nth-child(4) { animation-delay: 0.4s; } | |
| .panel-section:nth-child(5) { animation-delay: 0.5s; } | |
| .level-item, | |
| .signal-item, | |
| .pattern-item { | |
| animation: slideInRight 0.5s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .level-item:nth-child(1) { animation-delay: 0.1s; } | |
| .level-item:nth-child(2) { animation-delay: 0.2s; } | |
| .level-item:nth-child(3) { animation-delay: 0.3s; } | |
| .level-item:nth-child(4) { animation-delay: 0.4s; } | |
| .level-item:nth-child(5) { animation-delay: 0.5s; } | |
| /* ============================================================================= | |
| BUTTON ANIMATIONS | |
| ============================================================================= */ | |
| .btn, | |
| .btn-primary, | |
| .btn-icon { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .btn::before, | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .btn:hover::before, | |
| .btn-primary:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .btn:active { | |
| transform: scale(0.95); | |
| } | |
| .btn-icon { | |
| transition: all 0.2s ease; | |
| } | |
| .btn-icon:hover { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| .btn-icon:active { | |
| transform: scale(0.9); | |
| } | |
| /* ============================================================================= | |
| INDICATOR ANIMATIONS | |
| ============================================================================= */ | |
| .indicator-bar, | |
| .meter-bar { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .indicator-fill, | |
| .meter-fill { | |
| position: relative; | |
| transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); | |
| animation: pulse 2s infinite; | |
| } | |
| .indicator-fill::after, | |
| .meter-fill::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 255, 255, 0.3), | |
| transparent | |
| ); | |
| animation: shimmer 2s infinite; | |
| } | |
| /* ============================================================================= | |
| MODE TAB ANIMATIONS | |
| ============================================================================= */ | |
| .mode-tab { | |
| position: relative; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .mode-tab::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #2dd4bf, #3b82f6); | |
| transform: translateX(-50%); | |
| transition: width 0.3s ease; | |
| border-radius: 2px 2px 0 0; | |
| } | |
| .mode-tab:hover::before { | |
| width: 80%; | |
| } | |
| .mode-tab.active::before { | |
| width: 100%; | |
| } | |
| .mode-tab.active { | |
| animation: pulse 2s infinite; | |
| } | |
| /* ============================================================================= | |
| LOADING ANIMATIONS | |
| ============================================================================= */ | |
| .loading-spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 4px solid rgba(255, 255, 255, 0.1); | |
| border-top-color: #2dd4bf; | |
| border-radius: 50%; | |
| animation: rotate 1s linear infinite; | |
| } | |
| .loading-skeleton { | |
| background: linear-gradient( | |
| 90deg, | |
| rgba(255, 255, 255, 0.05) 0%, | |
| rgba(255, 255, 255, 0.1) 50%, | |
| rgba(255, 255, 255, 0.05) 100% | |
| ); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| border-radius: var(--radius-md); | |
| } | |
| /* ============================================================================= | |
| CHART DATA POINT ANIMATIONS | |
| ============================================================================= */ | |
| .chart-data-point { | |
| animation: fadeInScale 0.5s ease-out forwards; | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .chart-data-point:hover { | |
| transform: scale(1.2); | |
| filter: brightness(1.2); | |
| } | |
| .chart-data-point:nth-child(1) { animation-delay: 0.05s; } | |
| .chart-data-point:nth-child(2) { animation-delay: 0.1s; } | |
| .chart-data-point:nth-child(3) { animation-delay: 0.15s; } | |
| .chart-data-point:nth-child(4) { animation-delay: 0.2s; } | |
| .chart-data-point:nth-child(5) { animation-delay: 0.25s; } | |
| /* ============================================================================= | |
| NOTIFICATION ANIMATIONS | |
| ============================================================================= */ | |
| .notification { | |
| animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; | |
| opacity: 0; | |
| } | |
| .notification.success { | |
| border-left: 4px solid #22c55e; | |
| } | |
| .notification.error { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .notification.warning { | |
| border-left: 4px solid #eab308; | |
| } | |
| .notification.info { | |
| border-left: 4px solid #3b82f6; | |
| } | |
| /* ============================================================================= | |
| GRADIENT ANIMATIONS | |
| ============================================================================= */ | |
| .animated-gradient { | |
| background: linear-gradient( | |
| -45deg, | |
| rgba(45, 212, 191, 0.1), | |
| rgba(59, 130, 246, 0.1), | |
| rgba(139, 92, 246, 0.1), | |
| rgba(45, 212, 191, 0.1) | |
| ); | |
| background-size: 400% 400%; | |
| animation: gradientShift 8s ease infinite; | |
| } | |
| .glow-effect { | |
| position: relative; | |
| } | |
| .glow-effect::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| border-radius: inherit; | |
| padding: 2px; | |
| background: linear-gradient( | |
| 45deg, | |
| #2dd4bf, | |
| #3b82f6, | |
| #8b5cf6, | |
| #2dd4bf | |
| ); | |
| background-size: 400% 400%; | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| animation: gradientShift 3s ease infinite; | |
| opacity: 0.5; | |
| pointer-events: none; | |
| } | |
| /* ============================================================================= | |
| SMOOTH TRANSITIONS | |
| ============================================================================= */ | |
| * { | |
| transition-property: background-color, border-color, color, fill, stroke, | |
| opacity, box-shadow, transform, filter; | |
| transition-duration: 0.2s; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .panel-section, | |
| .analysis-section, | |
| .level-item, | |
| .signal-item, | |
| .pattern-item, | |
| .metric-card, | |
| .indicator-card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .panel-section:hover, | |
| .analysis-section:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); | |
| } | |
| .level-item:hover, | |
| .signal-item:hover, | |
| .pattern-item:hover { | |
| transform: translateX(4px); | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| /* ============================================================================= | |
| RESPONSIVE ANIMATIONS | |
| ============================================================================= */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* ============================================================================= | |
| PERFORMANCE OPTIMIZATIONS | |
| ============================================================================= */ | |
| .will-change-transform { | |
| will-change: transform; | |
| } | |
| .will-change-opacity { | |
| will-change: opacity; | |
| } | |
| .gpu-accelerated { | |
| transform: translateZ(0); | |
| backface-visibility: hidden; | |
| perspective: 1000px; | |
| } | |