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
| /** | |
| * NEWS PAGE - ULTRA MODERN UI | |
| * Magazine-style layout with glass-morphism | |
| */ | |
| /* ============================================================================= | |
| GLOBAL ANIMATIONS | |
| ============================================================================= */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes shimmer { | |
| 0% { | |
| background-position: -1000px 0; | |
| } | |
| 100% { | |
| background-position: 1000px 0; | |
| } | |
| } | |
| /* ============================================================================= | |
| FILTERS BAR | |
| ============================================================================= */ | |
| .filters-bar { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| padding: 1.5rem; | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 16px; | |
| backdrop-filter: blur(20px); | |
| animation: slideUp 0.5s ease; | |
| } | |
| .search-box { | |
| flex: 2; | |
| min-width: 250px; | |
| position: relative; | |
| } | |
| .search-box svg { | |
| position: absolute; | |
| left: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-secondary, #94a3b8); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .search-box .form-input, | |
| .search-box input[type="text"] { | |
| padding-left: 3rem; | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 0.875rem 1rem 0.875rem 3rem; | |
| color: var(--text-primary, #f8fafc); | |
| font-size: 0.95rem; | |
| transition: all 0.3s ease; | |
| } | |
| .search-box input:focus { | |
| outline: none; | |
| background: rgba(255, 255, 255, 0.08); | |
| border-color: rgba(45, 212, 191, 0.5); | |
| box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1); | |
| } | |
| .filters-bar .form-select, | |
| .filters-bar select { | |
| flex: 1; | |
| min-width: 160px; | |
| padding: 0.875rem 1rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| color: var(--text-primary, #f8fafc); | |
| font-size: 0.95rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .filters-bar select:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-color: rgba(45, 212, 191, 0.3); | |
| } | |
| .filters-bar select:focus { | |
| outline: none; | |
| border-color: rgba(45, 212, 191, 0.5); | |
| box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1); | |
| } | |
| /* ============================================================================= | |
| CATEGORY FILTERS | |
| ============================================================================= */ | |
| .category-filters { | |
| display: flex; | |
| gap: 0.75rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 2rem; | |
| } | |
| .category-filter { | |
| padding: 0.75rem 1.5rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 999px; | |
| color: var(--text-secondary, #94a3b8); | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .category-filter:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-color: rgba(45, 212, 191, 0.3); | |
| color: var(--text-primary, #f8fafc); | |
| transform: translateY(-2px); | |
| } | |
| .category-filter.active { | |
| background: linear-gradient(135deg, #2dd4bf, #818cf8); | |
| border-color: transparent; | |
| color: white; | |
| box-shadow: 0 8px 24px rgba(45, 212, 191, 0.4); | |
| } | |
| /* ============================================================================= | |
| NEWS STATS BAR | |
| ============================================================================= */ | |
| .news-stats { | |
| display: flex; | |
| gap: 2rem; | |
| padding: 1.5rem 2rem; | |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.08), rgba(129, 140, 248, 0.05)); | |
| border: 1px solid rgba(45, 212, 191, 0.2); | |
| border-radius: 16px; | |
| margin-bottom: 2rem; | |
| animation: slideUp 0.6s ease; | |
| } | |
| .stat-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| flex: 1; | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-size: 2rem; | |
| font-weight: 900; | |
| background: linear-gradient(135deg, #2dd4bf, #818cf8); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| line-height: 1; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--text-secondary, #94a3b8); | |
| font-weight: 600; | |
| } | |
| /* ============================================================================= | |
| NEWS GRID | |
| ============================================================================= */ | |
| .news-list, | |
| .news-grid, | |
| #news-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| gap: 1.5rem; | |
| animation: fadeIn 0.6s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .news-list, | |
| .news-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* ============================================================================= | |
| NEWS CARDS - MAGAZINE STYLE | |
| ============================================================================= */ | |
| .news-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: 20px; | |
| padding: 0; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| animation: slideUp 0.5s ease both; | |
| backdrop-filter: blur(20px); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .news-content { | |
| padding: 1.75rem; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .news-image-container { | |
| width: 100%; | |
| height: 200px; | |
| overflow: hidden; | |
| position: relative; | |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(129, 140, 248, 0.1)); | |
| } | |
| .news-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.4s ease; | |
| } | |
| .news-card:hover .news-image { | |
| transform: scale(1.05); | |
| } | |
| .news-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #2dd4bf, #818cf8, #ec4899); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.4s ease; | |
| } | |
| .news-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .news-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); | |
| border-color: rgba(45, 212, 191, 0.3); | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)); | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| /* ============================================================================= | |
| NEWS CARD CONTENT | |
| ============================================================================= */ | |
| .news-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .news-title { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| line-height: 1.4; | |
| color: var(--text-primary, #f8fafc); | |
| margin: 0; | |
| flex: 1; | |
| } | |
| .news-time { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary, #94a3b8); | |
| white-space: nowrap; | |
| font-weight: 500; | |
| } | |
| .news-body { | |
| color: var(--text-secondary, #94a3b8); | |
| line-height: 1.6; | |
| margin-bottom: 1.5rem; | |
| font-size: 0.95rem; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| /* ============================================================================= | |
| NEWS FOOTER | |
| ============================================================================= */ | |
| .news-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: 1rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.08); | |
| margin-top: auto; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .news-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| flex: 1; | |
| } | |
| .news-source { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary, #94a3b8); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .news-source svg { | |
| width: 14px; | |
| height: 14px; | |
| opacity: 0.7; | |
| } | |
| .news-author { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.375rem; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary, #94a3b8); | |
| font-weight: 500; | |
| } | |
| .news-author svg { | |
| width: 12px; | |
| height: 12px; | |
| opacity: 0.6; | |
| } | |
| .news-category { | |
| display: inline-block; | |
| padding: 0.375rem 0.875rem; | |
| background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(129, 140, 248, 0.2)); | |
| border: 1px solid rgba(45, 212, 191, 0.3); | |
| border-radius: 999px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: #2dd4bf; | |
| } | |
| .news-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: #2dd4bf; | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .news-link:hover { | |
| color: #818cf8; | |
| gap: 0.75rem; | |
| } | |
| /* ============================================================================= | |
| EMPTY STATE | |
| ============================================================================= */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| grid-column: 1 / -1; | |
| animation: slideUp 0.6s ease; | |
| } | |
| .empty-icon { | |
| font-size: 5rem; | |
| margin-bottom: 1.5rem; | |
| opacity: 0.5; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .empty-state h3 { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin-bottom: 0.75rem; | |
| color: var(--text-primary, #f8fafc); | |
| } | |
| .empty-state p { | |
| color: var(--text-secondary, #94a3b8); | |
| font-size: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .empty-state .btn-gradient { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 1rem 2rem; | |
| background: linear-gradient(135deg, #2dd4bf, #818cf8); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 8px 24px rgba(45, 212, 191, 0.4); | |
| } | |
| .empty-state .btn-gradient:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 32px rgba(45, 212, 191, 0.6); | |
| } | |
| /* ============================================================================= | |
| LOADING STATE | |
| ============================================================================= */ | |
| .loading-skeleton { | |
| animation: shimmer 2s infinite linear; | |
| background: linear-gradient( | |
| 90deg, | |
| rgba(255, 255, 255, 0.03) 0%, | |
| rgba(255, 255, 255, 0.08) 50%, | |
| rgba(255, 255, 255, 0.03) 100% | |
| ); | |
| background-size: 1000px 100%; | |
| } | |
| /* ============================================================================= | |
| SENTIMENT INDICATORS | |
| ============================================================================= */ | |
| .sentiment-positive { | |
| color: #22c55e; | |
| } | |
| .sentiment-negative { | |
| color: #ef4444; | |
| } | |
| .sentiment-neutral { | |
| color: #eab308; | |
| } | |
| .sentiment-badge { | |
| display: inline-block; | |
| padding: 0.375rem 0.875rem; | |
| border-radius: 999px; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| border: 1px solid; | |
| } | |
| .sentiment-badge.sentiment-positive { | |
| background: rgba(34, 197, 94, 0.15); | |
| border-color: rgba(34, 197, 94, 0.4); | |
| color: #22c55e; | |
| } | |
| .sentiment-badge.sentiment-negative { | |
| background: rgba(239, 68, 68, 0.15); | |
| border-color: rgba(239, 68, 68, 0.4); | |
| color: #ef4444; | |
| } | |
| .sentiment-badge.sentiment-neutral { | |
| background: rgba(234, 179, 8, 0.15); | |
| border-color: rgba(234, 179, 8, 0.4); | |
| color: #eab308; | |
| } | |
| /* Stats sentiment colors */ | |
| .stat-item.positive .stat-value { | |
| background: linear-gradient(135deg, #22c55e, #10b981); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .stat-item.neutral .stat-value { | |
| background: linear-gradient(135deg, #eab308, #f59e0b); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .stat-item.negative .stat-value { | |
| background: linear-gradient(135deg, #ef4444, #dc2626); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* ============================================================================= | |
| BADGES & TAGS | |
| ============================================================================= */ | |
| .news-badge { | |
| display: inline-block; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 999px; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .news-badge.hot { | |
| background: linear-gradient(135deg, #ef4444, #dc2626); | |
| color: white; | |
| animation: glow 2s ease-in-out infinite; | |
| } | |
| .news-badge.new { | |
| background: linear-gradient(135deg, #22c55e, #10b981); | |
| color: white; | |
| } | |
| .news-badge.trending { | |
| background: linear-gradient(135deg, #818cf8, #6366f1); | |
| color: white; | |
| } | |
| @keyframes glow { | |
| 0%, 100% { | |
| box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); | |
| } | |
| 50% { | |
| box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); | |
| } | |
| } | |
| /* ============================================================================= | |
| RESPONSIVE DESIGN | |
| ============================================================================= */ | |
| @media (max-width: 968px) { | |
| .news-stats { | |
| flex-wrap: wrap; | |
| gap: 1.5rem; | |
| } | |
| .stat-item { | |
| min-width: 120px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .filters-bar { | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .search-box { | |
| min-width: 100%; | |
| } | |
| .filters-bar select { | |
| min-width: 100%; | |
| } | |
| .news-stats { | |
| padding: 1rem 1.5rem; | |
| } | |
| .news-card { | |
| padding: 1.25rem; | |
| } | |
| .news-title { | |
| font-size: 1.1rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .news-footer { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| } | |
| .news-link { | |
| font-size: 0.8rem; | |
| } | |
| } | |
| /* ============================================================================= | |
| SCROLL ANIMATIONS | |
| ============================================================================= */ | |
| @media (prefers-reduced-motion: no-preference) { | |
| .news-card { | |
| animation-delay: calc(var(--index, 0) * 0.05s); | |
| } | |
| } | |