Spaces:
Running
Running
| /* CSS Custom Properties for easy theming */ | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #ec4899; | |
| --secondary-dark: #db2777; | |
| --bg-main: #f8fafc; | |
| --bg-surface: #ffffff; | |
| --bg-elevated: #f1f5f9; | |
| --text-primary: #0f172a; | |
| --text-secondary: #64748b; | |
| --text-muted: #94a3b8; | |
| --success: #22c55e; | |
| --warning: #f59e0b; | |
| --error: #ef4444; | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| html, body { | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| background: var(--bg-main); | |
| color: var(--text-primary); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Main Block */ | |
| .main-block { | |
| flex-shrink: 0; | |
| padding: 20px 16px; | |
| background: var(--bg-surface); | |
| border-bottom: 1px solid var(--bg-elevated); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .wallet-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .wallet-address { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| position: relative; | |
| } | |
| .address-text { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| letter-spacing: 0.3px; | |
| } | |
| .copy-btn { | |
| width: 32px; | |
| height: 32px; | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius-sm); | |
| transition: all 0.15s ease; | |
| } | |
| .copy-btn:active { | |
| transform: scale(0.92); | |
| background: var(--bg-elevated); | |
| } | |
| .copy-icon { | |
| width: 16px; | |
| height: 16px; | |
| color: var(--text-secondary); | |
| } | |
| .copy-feedback { | |
| position: absolute; | |
| right: -60px; | |
| font-size: 12px; | |
| color: var(--success); | |
| font-weight: 600; | |
| opacity: 0; | |
| transform: translateX(-10px); | |
| transition: all 0.2s ease; | |
| pointer-events: none; | |
| } | |
| .copy-feedback.show { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .balance-main { | |
| font-size: 42px; | |
| font-weight: 800; | |
| color: var(--text-primary); | |
| letter-spacing: -1px; | |
| line-height: 1; | |
| } | |
| .balance-hold { | |
| font-size: 15px; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| /* Carousel Block */ | |
| .carousel-block { | |
| flex-shrink: 0; | |
| width: 100%; | |
| height: 100px; | |
| position: relative; | |
| overflow: hidden; | |
| background: var(--bg-surface); | |
| } | |
| .carousel-track { | |
| display: flex; | |
| height: 100%; | |
| transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| will-change: transform; | |
| } | |
| .carousel-slide { | |
| min-width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .slide-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 0 20px; | |
| } | |
| .slide-icon { | |
| width: 40px; | |
| height: 40px; | |
| color: white; | |
| opacity: 0.95; | |
| } | |
| .slide-text { | |
| color: white; | |
| font-size: 17px; | |
| font-weight: 700; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.15); | |
| } | |
| .carousel-indicators { | |
| position: absolute; | |
| bottom: 8px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 8px; | |
| z-index: 10; | |
| } | |
| .indicator { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.4); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .indicator.active { | |
| background: white; | |
| width: 24px; | |
| border-radius: 4px; | |
| } | |
| /* Information Block */ | |
| .info-block { | |
| flex: 1; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| padding: 16px; | |
| padding-bottom: 80px; | |
| } | |
| /* Transfer Tab */ | |
| .transfer-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .form-label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .form-input { | |
| height: 56px; | |
| padding: 0 16px; | |
| font-size: 16px; | |
| border: 2px solid var(--bg-elevated); | |
| border-radius: var(--radius-md); | |
| background: var(--bg-surface); | |
| color: var(--text-primary); | |
| transition: all 0.15s ease; | |
| font-weight: 500; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgb(99 102 241 / 0.1); | |
| } | |
| .form-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .btn-primary { | |
| height: 56px; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: white; | |
| font-size: 17px; | |
| font-weight: 700; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 8px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| /* Store Tab */ | |
| .store-section { | |
| margin-bottom: 24px; | |
| } | |
| .section-title { | |
| font-size: 14px; | |
| font-weight: 700; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 12px; | |
| padding-left: 4px; | |
| } | |
| .subscription-card { | |
| background: var(--bg-surface); | |
| border-radius: var(--radius-lg); | |
| padding: 16px; | |
| margin-bottom: 12px; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid var(--bg-elevated); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .subscription-card.purchased { | |
| border-color: var(--success); | |
| background: linear-gradient(135deg, rgb(34 197 94 / 0.05) 0%, var(--bg-surface) 100%); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .level-badge { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| font-weight: 800; | |
| color: white; | |
| flex-shrink: 0; | |
| } | |
| .lvl1 { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } | |
| .lvl2 { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } | |
| .lvl3 { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); } | |
| .lvl4 { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } | |
| .card-info { | |
| flex: 1; | |
| } | |
| .card-title { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .card-desc { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin-top: 2px; | |
| } | |
| .card-status { | |
| font-size: 12px; | |
| color: var(--success); | |
| font-weight: 600; | |
| margin-top: 4px; | |
| } | |
| .btn-renew, .btn-buy { | |
| height: 44px; | |
| border-radius: var(--radius-md); | |
| font-size: 15px; | |
| font-weight: 700; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .btn-renew { | |
| background: var(--bg-elevated); | |
| color: var(--text-primary); | |
| } | |
| .btn-renew:active { | |
| background: var(--bg-main); | |
| } | |
| .btn-buy { | |
| color: white; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .btn-buy:active { | |
| transform: scale(0.98); | |
| } | |
| /* History Tab */ | |
| .history-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .history-item { | |
| background: var(--bg-surface); | |
| border-radius: var(--radius-lg); | |
| padding: 16px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .history-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .history-icon { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .icon-in { background: rgb(34 197 94 / 0.15); color: var(--success); } | |
| .icon-out { background: rgb(239 68 68 / 0.15); color: var(--error); } | |
| .icon-sub { background: rgb(99 102 241 / 0.15); color: var(--primary); } | |
| .icon-task { background: rgb(245 158 11 / 0.15); color: var(--warning); } | |
| .history-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .history-type { | |
| font-size: 15px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .history-date { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| .history-amount { | |
| font-size: 16px; | |
| font-weight: 800; | |
| } | |
| .positive { color: var(--success); } | |
| .negative { color: var(--error); } | |
| /* Tasks Tab */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| background: var(--bg-surface); | |
| border-radius: var(--radius-lg); | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .stat-value { | |
| font-size: 28px; | |
| font-weight: 800; | |
| color: var(--primary); | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .action-section { | |
| margin-bottom: 20px; | |
| } | |
| .action-btn, .copy-field { | |
| width: 100%; | |
| height: 52px; | |
| border-radius: var(--radius-md); | |
| font-size: 15px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .action-btn { | |
| background: var(--bg-surface); | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .action-btn:active { | |
| background: rgb(99 102 241 / 0.1); | |
| } | |
| .copy-field { | |
| display: none; | |
| background: var(--bg-elevated); | |
| border: none; | |
| padding: 0 16px; | |
| align-items: center; | |
| justify-content: space-between; | |
| cursor: pointer; | |
| } | |
| .copy-field.show { | |
| display: flex; | |
| } | |
| .copy-field-value { | |
| font-size: 14px; | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| font-family: 'SF Mono', Monaco, monospace; | |
| } | |
| .copy-field-icon { | |
| width: 20px; | |
| height: 20px; | |
| color: var(--text-secondary); | |
| } | |
| .tasks-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .task-card { | |
| background: var(--bg-surface); | |
| border-radius: var(--radius-lg); | |
| padding: 16px; | |
| box-shadow: var(--shadow-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| text-decoration: none; | |
| } | |
| .task-card:active { | |
| transform: scale(0.99); | |
| background: var(--bg-elevated); | |
| } | |
| .task-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius-md); | |
| background: linear-gradient(135deg, #07f 0%, #00d2ff 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .task-icon svg { | |
| width: 24px; | |
| height: 24px; | |
| color: white; | |
| } | |
| .task-info { | |
| flex: 1; | |
| } | |
| .task-title { | |
| font-size: 15px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .task-reward { | |
| font-size: 13px; | |
| color: var(--success); | |
| font-weight: 600; | |
| margin-top: 2px; | |
| } | |
| .task-arrow { | |
| width: 24px; | |
| height: 24px; | |
| color: var(--text-muted); | |
| } | |
| /* Bottom Navigation */ | |
| .nav-panel { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 64px; | |
| background: var(--bg-surface); | |
| border-top: 1px solid var(--bg-elevated); | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| padding: 0 8px; | |
| box-shadow: 0 -4px 20px rgba(0,0,0,0.08); | |
| z-index: 100; | |
| } | |
| .nav-btn { | |
| flex: 1; | |
| height: 100%; | |
| background: transparent; | |
| border: none; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| position: relative; | |
| } | |
| .nav-icon { | |
| width: 24px; | |
| height: 24px; | |
| color: var(--text-muted); | |
| transition: all 0.15s ease; | |
| } | |
| .nav-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| transition: all 0.15s ease; | |
| } | |
| .nav-btn.active .nav-icon, | |
| .nav-btn.active .nav-label { | |
| color: var(--primary); | |
| } | |
| .nav-btn.active::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 40px; | |
| height: 3px; | |
| background: var(--primary); | |
| border-radius: 0 0 4px 4px; | |
| } | |
| /* Utility Classes */ | |
| .section-divider { | |
| height: 8px; | |
| background: transparent; | |
| } | |
| /* Mobile Optimization */ | |
| @media (max-width: 480px) { | |
| .balance-main { | |
| font-size: 38px; | |
| } | |
| .slide-text { | |
| font-size: 15px; | |
| } | |
| } | |
| /* Loading Animation */ | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .loading { | |
| animation: pulse 1.5s ease-in-out infinite; | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--text-primary); | |
| color: white; | |
| padding: 12px 24px; | |
| border-radius: var(--radius-lg); | |
| font-size: 14px; | |
| font-weight: 600; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.3s ease; | |
| z-index: 200; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| .toast.success { | |
| background: var(--success); | |
| } | |
| /* Scrollbar Styling */ | |
| .info-block::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .info-block::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .info-block::-webkit-scrollbar-thumb { | |
| background: var(--text-muted); | |
| border-radius: 2px; | |
| } |