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
| /** | |
| * Settings Page - Styles | |
| * Beautiful, functional settings interface | |
| */ | |
| /* ========================================================================= | |
| BACKGROUND EFFECTS | |
| ========================================================================= */ | |
| .background-effects { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| overflow: hidden; | |
| } | |
| .gradient-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(100px); | |
| opacity: 0.2; | |
| animation: float 25s ease-in-out infinite; | |
| } | |
| .orb-1 { | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, rgba(34, 197, 94, 0.5) 0%, transparent 70%); | |
| top: -300px; | |
| left: -200px; | |
| animation-delay: 0s; | |
| } | |
| .orb-2 { | |
| width: 500px; | |
| height: 500px; | |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%); | |
| bottom: -250px; | |
| right: -150px; | |
| animation-delay: 8s; | |
| } | |
| .orb-3 { | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%); | |
| top: 40%; | |
| left: 60%; | |
| transform: translate(-50%, -50%); | |
| animation-delay: 16s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(40px, -40px) scale(1.05); } | |
| 66% { transform: translate(-30px, 30px) scale(0.95); } | |
| } | |
| /* ========================================================================= | |
| PAGE HEADER | |
| ========================================================================= */ | |
| .page-header.glass-panel { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-6); | |
| background: rgba(17, 24, 39, 0.7); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-xl); | |
| margin-bottom: var(--space-6); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .page-header.glass-panel::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, #22c55e, #3b82f6, #8b5cf6); | |
| } | |
| .page-title { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| } | |
| .title-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%); | |
| border-radius: var(--radius-lg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4); | |
| animation: spin-slow 10s linear infinite; | |
| } | |
| @keyframes spin-slow { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .title-content h1 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--font-size-2xl); | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin: 0; | |
| } | |
| .page-subtitle { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| margin-top: var(--space-1); | |
| } | |
| .page-actions { | |
| display: flex; | |
| gap: var(--space-3); | |
| } | |
| /* ========================================================================= | |
| BUTTONS | |
| ========================================================================= */ | |
| .btn-gradient { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); | |
| } | |
| .btn-gradient:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 25px rgba(34, 197, 94, 0.5); | |
| } | |
| .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-secondary); | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| border-color: rgba(255, 255, 255, 0.25); | |
| } | |
| /* ========================================================================= | |
| SETTINGS NAVIGATION | |
| ========================================================================= */ | |
| .settings-nav.glass-panel { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-2); | |
| padding: var(--space-3); | |
| background: rgba(17, 24, 39, 0.6); | |
| backdrop-filter: blur(15px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-xl); | |
| margin-bottom: var(--space-6); | |
| } | |
| .settings-nav-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| background: transparent; | |
| color: var(--text-muted); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .settings-nav-btn:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-secondary); | |
| } | |
| .settings-nav-btn.active { | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2); | |
| } | |
| /* ========================================================================= | |
| SETTINGS SECTIONS | |
| ========================================================================= */ | |
| .settings-section { | |
| display: none; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .settings-section.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .section-card.glass-panel { | |
| background: rgba(17, 24, 39, 0.7); | |
| backdrop-filter: blur(15px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-6); | |
| } | |
| .section-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-6); | |
| padding-bottom: var(--space-6); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .section-icon { | |
| font-size: 40px; | |
| } | |
| .section-info h2 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--font-size-xl); | |
| font-weight: 700; | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-1) 0; | |
| } | |
| .section-info p { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-muted); | |
| margin: 0; | |
| } | |
| /* ========================================================================= | |
| FORM STYLES | |
| ========================================================================= */ | |
| .settings-form { | |
| max-width: 800px; | |
| } | |
| .form-group { | |
| margin-bottom: var(--space-5); | |
| } | |
| .form-label { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| margin-bottom: var(--space-2); | |
| } | |
| .label-icon { | |
| font-size: 18px; | |
| } | |
| .optional-badge { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 2px 8px; | |
| border-radius: var(--radius-xs); | |
| margin-left: var(--space-2); | |
| } | |
| .form-input, | |
| .form-select { | |
| width: 100%; | |
| padding: var(--space-3) var(--space-4); | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-md); | |
| color: var(--text-strong); | |
| font-family: inherit; | |
| font-size: var(--font-size-base); | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus, | |
| .form-select:focus { | |
| outline: none; | |
| border-color: #22c55e; | |
| box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); | |
| } | |
| .form-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .form-select { | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 16px center; | |
| padding-right: var(--space-10); | |
| cursor: pointer; | |
| } | |
| .form-hint { | |
| display: block; | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| margin-top: var(--space-2); | |
| } | |
| .form-hint a { | |
| color: #60a5fa; | |
| text-decoration: none; | |
| } | |
| .form-hint a:hover { | |
| text-decoration: underline; | |
| } | |
| .input-with-action { | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .input-with-action .form-input { | |
| flex: 1; | |
| } | |
| .toggle-visibility { | |
| padding: var(--space-3); | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-md); | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .toggle-visibility:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-secondary); | |
| } | |
| /* ========================================================================= | |
| SETTINGS GROUPS | |
| ========================================================================= */ | |
| .settings-group { | |
| margin-bottom: var(--space-6); | |
| padding-bottom: var(--space-6); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .settings-group:last-of-type { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .settings-group-title { | |
| font-size: var(--font-size-base); | |
| font-weight: 700; | |
| color: var(--text-strong); | |
| margin: 0 0 var(--space-4) 0; | |
| } | |
| /* ========================================================================= | |
| TOGGLE SWITCHES | |
| ========================================================================= */ | |
| .toggle-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-3); | |
| } | |
| .toggle-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-4); | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: var(--radius-lg); | |
| transition: background 0.3s ease; | |
| } | |
| .toggle-item:hover { | |
| background: rgba(0, 0, 0, 0.3); | |
| } | |
| .toggle-info { | |
| flex: 1; | |
| } | |
| .toggle-label { | |
| display: block; | |
| font-weight: 600; | |
| color: var(--text-strong); | |
| margin-bottom: var(--space-1); | |
| } | |
| .toggle-desc { | |
| font-size: var(--font-size-xs); | |
| color: var(--text-muted); | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 52px; | |
| height: 28px; | |
| flex-shrink: 0; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 28px; | |
| transition: 0.3s; | |
| } | |
| .toggle-slider::before { | |
| position: absolute; | |
| content: ""; | |
| height: 22px; | |
| width: 22px; | |
| left: 3px; | |
| bottom: 3px; | |
| background: white; | |
| border-radius: 50%; | |
| transition: 0.3s; | |
| } | |
| .toggle-switch input:checked + .toggle-slider { | |
| background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%); | |
| } | |
| .toggle-switch input:checked + .toggle-slider::before { | |
| transform: translateX(24px); | |
| } | |
| /* ========================================================================= | |
| RANGE INPUT | |
| ========================================================================= */ | |
| .range-with-value { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| } | |
| .range-input { | |
| flex: 1; | |
| height: 8px; | |
| appearance: none; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| outline: none; | |
| } | |
| .range-input::-webkit-slider-thumb { | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: transform 0.2s; | |
| } | |
| .range-input::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| } | |
| .range-value { | |
| min-width: 50px; | |
| font-weight: 600; | |
| color: var(--text-strong); | |
| text-align: right; | |
| } | |
| /* ========================================================================= | |
| SIGNAL GRID | |
| ========================================================================= */ | |
| .signal-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: var(--space-3); | |
| } | |
| .signal-card { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-4); | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: var(--radius-lg); | |
| transition: all 0.3s ease; | |
| } | |
| .signal-card:hover { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .signal-header { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .signal-icon { | |
| font-size: 20px; | |
| } | |
| .signal-name { | |
| font-size: var(--font-size-sm); | |
| font-weight: 600; | |
| color: var(--text-strong); | |
| } | |
| /* ========================================================================= | |
| INTERVAL GRID | |
| ========================================================================= */ | |
| .interval-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: var(--space-4); | |
| } | |
| /* ========================================================================= | |
| TIME RANGE | |
| ========================================================================= */ | |
| .time-range { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-4); | |
| margin-top: var(--space-4); | |
| } | |
| /* ========================================================================= | |
| THEME SELECTOR | |
| ========================================================================= */ | |
| .theme-selector { | |
| display: flex; | |
| gap: var(--space-4); | |
| } | |
| .theme-option { | |
| cursor: pointer; | |
| } | |
| .theme-option input { | |
| position: absolute; | |
| opacity: 0; | |
| } | |
| .theme-preview { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: var(--space-5); | |
| border: 2px solid rgba(255, 255, 255, 0.1); | |
| border-radius: var(--radius-lg); | |
| transition: all 0.3s ease; | |
| min-width: 100px; | |
| } | |
| .theme-option input:checked + .theme-preview { | |
| border-color: #22c55e; | |
| box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); | |
| } | |
| .theme-preview:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .theme-icon { | |
| font-size: 32px; | |
| } | |
| .theme-preview span { | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .dark-theme { | |
| background: rgba(17, 24, 39, 0.8); | |
| } | |
| .light-theme { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .system-theme { | |
| background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 50%, rgba(255, 255, 255, 0.1) 50%); | |
| } | |
| /* ========================================================================= | |
| FORM ACTIONS | |
| ========================================================================= */ | |
| .form-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: var(--space-3); | |
| margin-top: var(--space-6); | |
| padding-top: var(--space-6); | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| /* ========================================================================= | |
| RESPONSIVE | |
| ========================================================================= */ | |
| @media (max-width: 768px) { | |
| .page-header.glass-panel { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: var(--space-4); | |
| } | |
| .page-title { | |
| flex-direction: column; | |
| } | |
| .page-actions { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .settings-nav.glass-panel { | |
| justify-content: center; | |
| } | |
| .settings-nav-btn span { | |
| display: none; | |
| } | |
| .section-header { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .signal-grid, | |
| .interval-grid, | |
| .time-range { | |
| grid-template-columns: 1fr; | |
| } | |
| .theme-selector { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .theme-preview { | |
| width: 100%; | |
| } | |
| .form-actions { | |
| flex-direction: column; | |
| } | |
| .form-actions button { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } | |