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
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); | |
| :root { | |
| --bg-gradient: radial-gradient(circle at top, #172032, #05060a 60%); | |
| --glass-bg: rgba(17, 25, 40, 0.65); | |
| --glass-border: rgba(255, 255, 255, 0.08); | |
| --glass-highlight: rgba(255, 255, 255, 0.15); | |
| --primary: #8f88ff; | |
| --primary-strong: #6c63ff; | |
| --secondary: #16d9fa; | |
| --accent: #f472b6; | |
| --success: #22c55e; | |
| --warning: #facc15; | |
| --danger: #ef4444; | |
| --info: #38bdf8; | |
| --text-primary: #f8fafc; | |
| --text-muted: rgba(248, 250, 252, 0.7); | |
| --shadow-strong: 0 25px 60px rgba(0, 0, 0, 0.45); | |
| --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.35); | |
| --sidebar-width: 260px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100vh; | |
| font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: var(--bg-gradient); | |
| color: var(--text-primary); | |
| } | |
| body[data-theme='light'] { | |
| --bg-gradient: radial-gradient(circle at top, #f3f6ff, #dfe5ff); | |
| --glass-bg: rgba(255, 255, 255, 0.75); | |
| --glass-border: rgba(15, 23, 42, 0.1); | |
| --glass-highlight: rgba(15, 23, 42, 0.05); | |
| --text-primary: #0f172a; | |
| --text-muted: rgba(15, 23, 42, 0.6); | |
| } | |
| .app-shell { | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| padding: 32px 24px; | |
| background: linear-gradient(180deg, rgba(9, 9, 13, 0.8), rgba(9, 9, 13, 0.4)); | |
| backdrop-filter: blur(30px); | |
| border-right: 1px solid var(--glass-border); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| } | |
| .brand { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .brand strong { | |
| font-size: 1.3rem; | |
| letter-spacing: 0.1em; | |
| } | |
| .env-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(255, 255, 255, 0.08); | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .nav-button { | |
| border: none; | |
| border-radius: 14px; | |
| padding: 12px 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: transparent; | |
| color: inherit; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: transform 0.3s ease, background 0.3s ease; | |
| } | |
| .nav-button svg { | |
| width: 22px; | |
| height: 22px; | |
| fill: currentColor; | |
| } | |
| .nav-button.active, | |
| .nav-button:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| transform: translateX(6px); | |
| } | |
| .sidebar-footer { | |
| margin-top: auto; | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .main-area { | |
| flex: 1; | |
| padding: 32px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .topbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 18px 24px; | |
| border-radius: 24px; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| box-shadow: var(--shadow-soft); | |
| backdrop-filter: blur(20px); | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .topbar h1 { | |
| margin: 0; | |
| font-size: 1.8rem; | |
| } | |
| .status-group { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .status-pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 14px; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--glass-border); | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--warning); | |
| } | |
| .status-pill[data-state='ok'] .status-dot { | |
| background: var(--success); | |
| } | |
| .status-pill[data-state='warn'] .status-dot { | |
| background: var(--warning); | |
| } | |
| .status-pill[data-state='error'] .status-dot { | |
| background: var(--danger); | |
| } | |
| .page-container { | |
| flex: 1; | |
| } | |
| .page { | |
| display: none; | |
| animation: fadeIn 0.6s ease; | |
| } | |
| .page.active { | |
| display: block; | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| } | |
| .section-title { | |
| font-size: 1.3rem; | |
| letter-spacing: 0.05em; | |
| } | |
| .glass-card { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 24px; | |
| padding: 20px; | |
| box-shadow: var(--shadow-strong); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(120deg, transparent, var(--glass-highlight), transparent); | |
| opacity: 0; | |
| transition: opacity 0.4s ease; | |
| } | |
| .glass-card:hover::before { | |
| opacity: 1; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 18px; | |
| margin-bottom: 24px; | |
| } | |
| .stat-card h3 { | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| } | |
| .stat-value { | |
| font-size: 1.9rem; | |
| font-weight: 600; | |
| margin: 12px 0 6px; | |
| } | |
| .stat-trend { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.85rem; | |
| } | |
| .grid-two { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 20px; | |
| } | |
| .table-wrapper { | |
| overflow: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, td { | |
| text-align: left; | |
| padding: 12px 10px; | |
| font-size: 0.92rem; | |
| } | |
| th { | |
| font-size: 0.8rem; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| } | |
| tr { | |
| transition: background 0.3s ease, transform 0.3s ease; | |
| } | |
| tbody tr:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| transform: translateY(-1px); | |
| } | |
| .badge { | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| font-size: 0.75rem; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| .badge-success { background: rgba(34, 197, 94, 0.15); color: var(--success); } | |
| .badge-danger { background: rgba(239, 68, 68, 0.15); color: var(--danger); } | |
| .badge-neutral { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); } | |
| .text-muted { color: var(--text-muted); } | |
| .text-success { color: var(--success); } | |
| .text-danger { color: var(--danger); } | |
| .ai-result { | |
| margin-top: 20px; | |
| padding: 20px; | |
| border-radius: 20px; | |
| border: 1px solid var(--glass-border); | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| .action-badge { | |
| display: inline-flex; | |
| padding: 6px 14px; | |
| border-radius: 999px; | |
| letter-spacing: 0.08em; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .action-buy { background: rgba(34, 197, 94, 0.18); color: var(--success); } | |
| .action-sell { background: rgba(239, 68, 68, 0.18); color: var(--danger); } | |
| .action-hold { background: rgba(56, 189, 248, 0.18); color: var(--info); } | |
| .ai-insights ul { | |
| padding-left: 20px; | |
| } | |
| .chip-row { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin: 12px 0; | |
| } | |
| .news-item { | |
| padding: 12px 0; | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .ai-block { | |
| padding: 14px; | |
| border-radius: 12px; | |
| border: 1px dashed var(--glass-border); | |
| margin-top: 12px; | |
| } | |
| .controls-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .input-chip { | |
| border: 1px solid var(--glass-border); | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 999px; | |
| padding: 8px 14px; | |
| color: var(--text-muted); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| input[type='text'], select, textarea { | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 14px; | |
| padding: 12px 14px; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| } | |
| textarea { | |
| min-height: 100px; | |
| } | |
| button.primary { | |
| background: linear-gradient(120deg, var(--primary), var(--secondary)); | |
| border: none; | |
| border-radius: 999px; | |
| color: #fff; | |
| padding: 12px 24px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| } | |
| button.primary:hover { | |
| transform: translateY(-2px) scale(1.01); | |
| } | |
| button.ghost { | |
| background: transparent; | |
| border: 1px solid var(--glass-border); | |
| border-radius: 999px; | |
| padding: 10px 20px; | |
| color: inherit; | |
| cursor: pointer; | |
| } | |
| .skeleton { | |
| position: relative; | |
| overflow: hidden; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| } | |
| .skeleton-block { | |
| display: inline-block; | |
| width: 100%; | |
| height: 12px; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .skeleton::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| transform: translateX(-100%); | |
| background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent); | |
| animation: shimmer 1.5s infinite; | |
| } | |
| .drawer { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| height: 100vh; | |
| width: min(420px, 90vw); | |
| background: rgba(5, 7, 12, 0.92); | |
| border-left: 1px solid var(--glass-border); | |
| transform: translateX(100%); | |
| transition: transform 0.4s ease; | |
| padding: 32px; | |
| overflow-y: auto; | |
| z-index: 40; | |
| } | |
| .drawer.active { | |
| transform: translateX(0); | |
| } | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(2, 6, 23, 0.7); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 50; | |
| } | |
| .modal-backdrop.active { | |
| display: flex; | |
| } | |
| .modal { | |
| width: min(640px, 90vw); | |
| background: var(--glass-bg); | |
| border-radius: 28px; | |
| padding: 28px; | |
| border: 1px solid var(--glass-border); | |
| backdrop-filter: blur(20px); | |
| } | |
| .inline-message { | |
| border-radius: 16px; | |
| padding: 16px 18px; | |
| border: 1px solid var(--glass-border); | |
| } | |
| .inline-error { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); } | |
| .inline-warn { border-color: rgba(250, 204, 21, 0.4); background: rgba(250, 204, 21, 0.1); } | |
| .inline-info { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.1); } | |
| .log-table { | |
| font-family: 'JetBrains Mono', 'Space Grotesk', monospace; | |
| font-size: 0.8rem; | |
| } | |
| .chip { | |
| padding: 4px 12px; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.08); | |
| font-size: 0.75rem; | |
| } | |
| .toggle { | |
| position: relative; | |
| width: 44px; | |
| height: 24px; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.2); | |
| cursor: pointer; | |
| } | |
| .toggle input { | |
| position: absolute; | |
| opacity: 0; | |
| } | |
| .toggle span { | |
| position: absolute; | |
| top: 3px; | |
| left: 4px; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: #fff; | |
| transition: transform 0.3s ease; | |
| } | |
| .toggle input:checked + span { | |
| transform: translateX(18px); | |
| background: var(--secondary); | |
| } | |
| .flash { | |
| animation: flash 0.6s ease; | |
| } | |
| @keyframes flash { | |
| 0% { background: rgba(34, 197, 94, 0.2); } | |
| 100% { background: transparent; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes shimmer { | |
| 100% { transform: translateX(100%); } | |
| } | |
| @media (max-width: 1024px) { | |
| .app-shell { | |
| flex-direction: column; | |
| } | |
| .sidebar { | |
| width: 100%; | |
| position: relative; | |
| height: auto; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| .nav { | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| } | |
| body[data-layout='compact'] .glass-card { | |
| padding: 14px; | |
| } | |
| body[data-layout='compact'] th, | |
| body[data-layout='compact'] td { | |
| padding: 8px; | |
| } | |