Spaces:
Running
Running
| :root { | |
| --bg: #000000; | |
| --bg-elevated: #0a0a0a; | |
| --text: #ffffff; | |
| --text-muted: #666666; | |
| --text-dim: #444444; | |
| --border: #222222; | |
| --accent: #ffffff; | |
| --positive: #4ade80; | |
| --negative: #f87171; | |
| /* Spacing scale */ | |
| --space-xs: 4px; | |
| --space-sm: 8px; | |
| --space-md: 16px; | |
| --space-lg: 24px; | |
| --space-xl: 32px; | |
| /* Font scale */ | |
| --font-xs: 0.65rem; | |
| --font-sm: 0.75rem; | |
| --font-md: 0.875rem; | |
| --font-lg: 1rem; | |
| --font-xl: 1.25rem; | |
| --font-xxl: 1.5rem; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: | |
| system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| min-height: 100vh; | |
| } | |
| .container, | |
| .page-wrapper { | |
| width: 100%; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| padding: 0 var(--space-md); | |
| } | |
| nav.main-nav { | |
| display: flex; | |
| gap: var(--space-xs); | |
| background: var(--bg); | |
| padding: var(--space-sm) var(--space-md); | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 0; | |
| } | |
| nav.main-nav a { | |
| font-family: system-ui, sans-serif; | |
| font-size: var(--font-sm); | |
| font-weight: 600; | |
| text-decoration: none; | |
| color: var(--text-muted); | |
| padding: var(--space-sm) var(--space-md); | |
| border-radius: 4px; | |
| transition: all 0.1s; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| nav.main-nav a:hover { | |
| color: var(--text); | |
| background: var(--border); | |
| } | |
| nav.main-nav a.active { | |
| background: var(--text); | |
| color: var(--bg); | |
| } | |
| .page-wrapper { | |
| padding: var(--space-sm) 0 var(--space-xl); | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| } | |
| /* Page header removed */ | |
| .control-panel { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: var(--space-md); | |
| margin-bottom: var(--space-md); | |
| } | |
| .input-row, | |
| .filter-row, | |
| .action-row { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| align-items: flex-end; | |
| } | |
| .input-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .input-label { | |
| font-family: system-ui, sans-serif; | |
| font-size: 0.6rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .input-field, | |
| .select-field, | |
| .filter-textarea { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 8px 12px; | |
| font-family: system-ui, sans-serif; | |
| font-size: 0.75rem; | |
| color: var(--text); | |
| transition: border-color 0.1s; | |
| min-width: 150px; | |
| } | |
| .input-field:focus, | |
| .select-field:focus, | |
| .filter-textarea:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| .input-field::placeholder, | |
| .filter-textarea::placeholder { | |
| color: var(--text-muted); | |
| opacity: 0.5; | |
| } | |
| .filter-textarea { | |
| flex: 1; | |
| min-height: 44px; | |
| max-height: 150px; | |
| resize: vertical; | |
| } | |
| .btn { | |
| font-family: system-ui, sans-serif; | |
| font-weight: 600; | |
| font-size: 0.8rem; | |
| padding: 10px 20px; | |
| border-radius: 4px; | |
| border: 1px solid var(--border); | |
| cursor: pointer; | |
| transition: all 0.1s; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| white-space: nowrap; | |
| background: var(--bg); | |
| color: var(--text); | |
| } | |
| .btn:hover { | |
| background: var(--border); | |
| color: var(--text); | |
| } | |
| .btn:active { | |
| transform: scale(0.98); | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: var(--bg); | |
| border-color: var(--accent); | |
| } | |
| .btn-primary:hover { | |
| background: var(--text-muted); | |
| border-color: var(--text-muted); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-elevated); | |
| color: var(--text-muted); | |
| border-color: var(--border); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--border); | |
| color: var(--text); | |
| } | |
| .btn-danger { | |
| background: var(--negative); | |
| color: var(--bg); | |
| border-color: var(--negative); | |
| } | |
| .btn-danger:hover { | |
| background: #ef4444; | |
| border-color: #ef4444; | |
| } | |
| .tf-selector { | |
| display: flex; | |
| gap: 4px; | |
| background: var(--bg); | |
| padding: 4px; | |
| border-radius: 4px; | |
| border: 1px solid var(--border); | |
| } | |
| .tf-selector .tf-btn { | |
| font-family: system-ui, sans-serif; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 6px 12px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.1s; | |
| } | |
| .tf-selector .tf-btn:hover { | |
| color: var(--text); | |
| background: var(--border); | |
| } | |
| .tf-selector .tf-btn.active { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| .view-toggle { | |
| display: flex; | |
| gap: 4px; | |
| background: var(--bg); | |
| padding: 4px; | |
| border-radius: 4px; | |
| border: 1px solid var(--border); | |
| } | |
| .view-toggle .view-btn { | |
| font-family: system-ui, sans-serif; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-muted); | |
| padding: 6px 12px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.1s; | |
| } | |
| .view-toggle .view-btn:hover { | |
| color: var(--text); | |
| background: var(--border); | |
| } | |
| .view-toggle .view-btn.active { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| .results-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); | |
| gap: var(--space-md); | |
| } | |
| .grid-layout { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); | |
| gap: var(--space-md); | |
| } | |
| .list-layout { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .status { | |
| font-family: system-ui, sans-serif; | |
| font-size: var(--font-sm); | |
| color: var(--text-muted); | |
| padding: var(--space-lg); | |
| text-align: center; | |
| } | |
| .status-empty, | |
| .status-loading, | |
| .status-error { | |
| padding: var(--space-xl) var(--space-md); | |
| text-align: center; | |
| border-radius: 4px; | |
| border: 1px solid var(--border); | |
| background: var(--bg-elevated); | |
| } | |
| .status-error { | |
| color: var(--negative); | |
| border-color: var(--negative); | |
| } | |
| .result-card, | |
| .stats-card, | |
| .trade-card { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| transition: border-color 0.1s; | |
| } | |
| .result-card:hover, | |
| .stats-card:hover, | |
| .trade-card:hover { | |
| border-color: var(--text-muted); | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-sm) var(--space-md); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .card-title { | |
| font-weight: 600; | |
| font-size: var(--font-lg); | |
| } | |
| .card-subtitle { | |
| font-family: system-ui, sans-serif; | |
| font-size: var(--font-xs); | |
| color: var(--text-muted); | |
| } | |
| .card-chart { | |
| height: 220px; | |
| background: var(--bg); | |
| } | |
| .card-metrics { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1px; | |
| background: var(--border); | |
| } | |
| .metric-cell { | |
| background: var(--bg-elevated); | |
| padding: 8px; | |
| text-align: center; | |
| } | |
| .metric-label { | |
| font-family: system-ui, sans-serif; | |
| font-size: 0.55rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 4px; | |
| } | |
| .metric-value { | |
| font-family: system-ui, sans-serif; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .metric-value.positive { | |
| color: var(--positive); | |
| } | |
| .metric-value.negative { | |
| color: var(--negative); | |
| } | |
| .metric-value.accent { | |
| color: var(--accent); | |
| } | |
| .summary-bar { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .summary-card { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 12px; | |
| text-align: center; | |
| } | |
| .summary-label { | |
| font-family: system-ui, sans-serif; | |
| font-size: 0.6rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-bottom: 6px; | |
| } | |
| .summary-value { | |
| font-family: system-ui, sans-serif; | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| } | |
| .summary-value.positive { | |
| color: var(--positive); | |
| } | |
| .summary-value.negative { | |
| color: var(--negative); | |
| } | |
| .badge { | |
| display: inline-block; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .badge-positive { | |
| background: rgba(74, 222, 128, 0.15); | |
| color: var(--positive); | |
| } | |
| .badge-negative { | |
| background: rgba(248, 113, 113, 0.15); | |
| color: var(--negative); | |
| } | |
| .badge-neutral { | |
| background: rgba(102, 102, 102, 0.15); | |
| color: var(--text-muted); | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| } | |
| .modal-overlay.hidden { | |
| display: none; | |
| } | |
| .modal-content { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 24px; | |
| width: 350px; | |
| max-height: 85vh; | |
| overflow-y: auto; | |
| } | |
| .modal-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 16px; | |
| } | |
| .flex { | |
| display: flex; | |
| } | |
| .flex-1 { | |
| flex: 1; | |
| } | |
| .gap-sm { | |
| gap: 8px; | |
| } | |
| .gap-md { | |
| gap: 16px; | |
| } | |
| .gap-lg { | |
| gap: 24px; | |
| } | |
| .mt-auto { | |
| margin-top: auto; | |
| } | |
| .ml-auto { | |
| margin-left: auto; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .text-dim { | |
| color: var(--text-muted); | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| @media (max-width: 900px) { | |
| .input-row, | |
| .filter-row, | |
| .action-row { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .input-field, | |
| .select-field { | |
| width: 100%; | |
| } | |
| .summary-bar { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .results-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .result-card, | |
| .stats-card, | |
| .trade-card, | |
| .summary-card { | |
| animation: fadeIn 0.2s ease-out; | |
| } | |
| .unified-chart-card { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .unified-chart-card .lt-chart-card-header { | |
| padding: var(--space-sm) var(--space-md); | |
| } | |
| .unified-chart-card .lt-chart-card-body { | |
| padding: 0 var(--space-md) var(--space-sm); | |
| } | |
| .unified-chart-card .lt-card-chart { | |
| height: 240px; | |
| } | |
| .unified-chart-card .lt-card-chart.short { | |
| height: 220px; | |
| } | |
| .scanner-card .lt-card-chart, | |
| .stock-card .lt-card-chart, | |
| .gainer-card .lt-card-chart { | |
| height: 240px; | |
| } | |
| .unified-chart-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-sm) var(--space-md); | |
| border-top: 1px solid var(--border); | |
| gap: var(--space-md); | |
| } | |
| .unified-chart-metrics { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| font-size: var(--font-sm); | |
| } | |
| .unified-chart-date { | |
| font-size: var(--font-xs); | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| .unified-chart-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .scanner-card .unified-chart-label-selector, | |
| .scanner-card .unified-chart-last-update, | |
| .scanner-card .unified-chart-volume { | |
| display: none; | |
| } | |
| .stock-card .unified-chart-volume { | |
| display: none; | |
| } | |
| .gainer-card .unified-chart-label-selector, | |
| .gainer-card .unified-chart-last-update { | |
| display: none; | |
| } | |
| .unified-chart-label { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| color: #000; | |
| background: #666666; | |
| margin-left: 8px; | |
| } | |
| .unified-chart-label-selector { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| font-size: 0.7rem; | |
| max-width: 120px; | |
| } | |
| .unified-chart-last-update { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| margin-left: auto; | |
| } | |
| .unified-chart-volume { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| } | |
| .unified-chart-action-btn { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text-muted); | |
| padding: 6px 12px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.1s; | |
| } | |
| .unified-chart-action-btn:hover { | |
| background: var(--accent); | |
| color: #000; | |
| border-color: var(--accent); | |
| } | |
| .unified-chart-action-btn.added { | |
| background: var(--positive); | |
| color: #000; | |
| border-color: var(--positive); | |
| } | |
| .unified-chart-action-btn.remove { | |
| background: transparent; | |
| color: var(--negative); | |
| border-color: var(--negative); | |
| } | |
| .unified-chart-action-btn.remove:hover { | |
| background: var(--negative); | |
| color: white; | |
| } | |
| .unified-chart-header-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .unified-chart-title-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .unified-chart-symbol { | |
| color: var(--accent); | |
| font-size: 1rem; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| } | |
| .unified-chart-ohlcv { | |
| color: var(--text-muted); | |
| font-size: 0.65rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| font-family: system-ui, sans-serif; | |
| background: var(--bg); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| border: 1px solid var(--border); | |
| max-width: 200px; | |
| } | |
| .unified-chart-ohlcv-overlay { | |
| position: absolute; | |
| top: 8px; | |
| left: 8px; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| .unified-chart-ohlcv-overlay .unified-chart-ohlcv { | |
| font-size: 0.65rem; | |
| padding: 3px 6px; | |
| background: rgba(30, 30, 30, 0.85); | |
| backdrop-filter: blur(4px); | |
| } | |
| .unified-chart-header-row .unified-chart-ohlcv { | |
| flex-shrink: 0; | |
| } | |
| .unified-chart-meta-row { | |
| margin-top: 6px; | |
| } | |
| .unified-chart-price { | |
| color: var(--text); | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| } | |
| .unified-chart-change { | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| } | |
| .unified-chart-change.positive { | |
| color: var(--positive); | |
| } | |
| .unified-chart-change.negative { | |
| color: var(--negative); | |
| } | |
| .stock-row { | |
| display: grid; | |
| grid-template-columns: 90px 90px 90px 90px 100px 70px; | |
| gap: 6px; | |
| align-items: center; | |
| padding: 8px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| font-size: 0.7rem; | |
| transition: border-color 0.1s; | |
| } | |
| .stock-row:hover { | |
| border-color: var(--accent); | |
| } | |
| .stock-row-symbol { | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .stock-row-price { | |
| font-weight: 600; | |
| } | |
| .stock-row-change { | |
| font-weight: 600; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| text-align: center; | |
| } | |
| .stock-row-change.positive { | |
| color: var(--positive); | |
| background: rgba(74, 222, 128, 0.15); | |
| } | |
| .stock-row-change.negative { | |
| color: var(--negative); | |
| background: rgba(248, 113, 113, 0.15); | |
| } | |
| .stock-row-volume { | |
| color: var(--text-muted); | |
| font-size: 0.7rem; | |
| } | |
| .label-badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| color: #000; | |
| } | |
| .search-bar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| background: var(--bg-elevated); | |
| padding: 16px; | |
| border-radius: 4px; | |
| border: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .bar-top { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .bar-bottom { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid var(--border); | |
| padding-top: 12px; | |
| gap: 12px; | |
| } | |
| .ohlcv-tooltip { | |
| position: absolute; | |
| background: rgba(10, 10, 10, 0.95); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: 8px; | |
| color: white; | |
| font-size: 11px; | |
| pointer-events: none; | |
| z-index: 1000; | |
| } | |
| textarea { | |
| flex: 1; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| padding: 12px 16px; | |
| border-radius: 4px; | |
| font-family: system-ui, sans-serif; | |
| font-size: 1rem; | |
| min-height: 44px; | |
| max-height: 150px; | |
| resize: vertical; | |
| transition: border-color 0.1s; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: var(--text-muted); | |
| background: var(--bg-elevated); | |
| border-radius: 4px; | |
| border: 1px solid var(--border); | |
| } | |
| input, | |
| select, | |
| textarea { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| border-radius: 4px; | |
| padding: 8px 12px; | |
| } | |
| textarea:focus, | |
| input:focus, | |
| select:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| button { | |
| font-family: system-ui, sans-serif; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| border: 1px solid transparent; | |
| padding: 10px 16px; | |
| font-weight: 600; | |
| transition: | |
| transform 0.1s ease, | |
| filter 0.1s ease; | |
| background: var(--bg); | |
| color: var(--text); | |
| } | |
| button:active { | |
| transform: scale(0.98); | |
| } | |
| button.secondary { | |
| background: #30363d; | |
| color: #8b949e; | |
| border-color: transparent; | |
| } | |
| button.secondary:hover { | |
| background: #3d444d; | |
| color: #c9d1d9; | |
| } | |
| button.danger { | |
| background: #da3633; | |
| color: white; | |
| } | |
| button.danger:hover { | |
| background: #f85149; | |
| } | |