bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): tokenize symbol card surfaces

Browse Source
This commit is contained in:
root 2026-05-07 05:18:37 +00:00
parent 6b7103b32b
commit 902523d30f
1 changed files with 52 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
web/src/components/SymbolCard.css
View File

@ -1,15 +1,19 @@
.symbol-card { .symbol-card {
background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%); background: linear-gradient(
135deg,
color-mix(in oklab, var(--bl-surface-overlay) 92%, var(--card-elevated)) 0%,
color-mix(in oklab, var(--bl-surface-overlay) 78%, var(--background)) 100%
);
border-radius: 16px; border-radius: 16px;
padding: 24px; padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid var(--bl-border-subtle);
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
} }
.symbol-card:hover { .symbol-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4); box-shadow: 0 32px 80px color-mix(in oklab, var(--foreground) 22%, transparent);
} }
.symbol-header { .symbol-header {
@ -38,19 +42,19 @@
} }
.vol-label.high { .vol-label.high {
color: #ff3366; color: var(--bl-danger);
} }
.vol-label.med { .vol-label.med {
color: #ffaa00; color: var(--bl-warning);
} }
.vol-label.low { .vol-label.low {
color: #00ff88; color: var(--bl-success);
} }
.symbol-header h2 { .symbol-header h2 {
color: #fff; color: var(--foreground);
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
margin: 0; margin: 0;
@ -67,7 +71,7 @@
.price { .price {
font-size: 26px; font-size: 26px;
font-weight: 700; font-weight: 700;
color: #fff; color: var(--foreground);
} }
.change-grid { .change-grid {
@ -82,11 +86,11 @@
} }
.change-item.up { .change-item.up {
color: #00ff88; color: var(--bl-success);
} }
.change-item.down { .change-item.down {
color: #ff3366; color: var(--bl-danger);
} }
.signal-status { .signal-status {
@ -108,7 +112,7 @@
.rules-section h3, .rules-section h3,
.indicators-section h3 { .indicators-section h3 {
color: #888; color: var(--bl-text-faint);
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1.5px; letter-spacing: 1.5px;
@ -132,27 +136,27 @@
border-radius: 8px; border-radius: 8px;
padding: 8px 10px; padding: 8px 10px;
font-size: 11px; font-size: 11px;
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid var(--bl-border-soft);
background: rgba(255, 255, 255, 0.04); background: color-mix(in oklab, var(--foreground) 4%, transparent);
color: #c7c7c7; color: var(--foreground);
} }
.profile-execution.executed { .profile-execution.executed {
border-color: rgba(0, 255, 136, 0.35); border-color: color-mix(in oklab, var(--bl-success) 35%, transparent);
background: rgba(0, 255, 136, 0.08); background: color-mix(in oklab, var(--bl-success) 8%, transparent);
color: #8dffca; color: var(--bl-success);
} }
.profile-execution.blocked { .profile-execution.blocked {
border-color: rgba(255, 51, 102, 0.35); border-color: color-mix(in oklab, var(--bl-danger) 35%, transparent);
background: rgba(255, 51, 102, 0.08); background: color-mix(in oklab, var(--bl-danger) 8%, transparent);
color: #ff9bb6; color: var(--bl-danger);
} }
.profile-execution.skipped { .profile-execution.skipped {
border-color: rgba(255, 255, 255, 0.14); border-color: color-mix(in oklab, var(--bl-border) 82%, transparent);
background: rgba(255, 255, 255, 0.03); background: color-mix(in oklab, var(--foreground) 3%, transparent);
color: #b5b5b5; color: var(--bl-text-quiet);
} }
.profile-execution-head { .profile-execution-head {
@ -167,8 +171,8 @@
.profile-execution-head code { .profile-execution-head code {
font-size: 10px; font-size: 10px;
color: #ddd; color: var(--foreground);
background: rgba(0, 0, 0, 0.2); background: color-mix(in oklab, var(--foreground) 12%, transparent);
border-radius: 4px; border-radius: 4px;
padding: 1px 5px; padding: 1px 5px;
} }
@ -190,17 +194,17 @@
font-size: 11px; font-size: 11px;
margin-top: -4px; margin-top: -4px;
border-left: 3px solid transparent; border-left: 3px solid transparent;
background: rgba(255, 255, 255, 0.03); background: color-mix(in oklab, var(--foreground) 3%, transparent);
} }
.ai-details.passed { .ai-details.passed {
background: rgba(0, 255, 136, 0.05); background: color-mix(in oklab, var(--bl-success) 5%, transparent);
border-color: #00ff88; border-color: var(--bl-success);
} }
.ai-details.failed { .ai-details.failed {
background: rgba(255, 51, 102, 0.05); background: color-mix(in oklab, var(--bl-danger) 5%, transparent);
border-color: #ff3366; border-color: var(--bl-danger);
} }
.ai-confidence { .ai-confidence {
@ -210,15 +214,15 @@
} }
.ai-details.passed .ai-confidence { .ai-details.passed .ai-confidence {
color: #00ff88; color: var(--bl-success);
} }
.ai-details.failed .ai-confidence { .ai-details.failed .ai-confidence {
color: #ff3366; color: var(--bl-danger);
} }
.ai-reasoning { .ai-reasoning {
color: #aaa; color: var(--bl-text-quiet);
line-height: 1.4; line-height: 1.4;
font-style: italic; font-style: italic;
} }
@ -233,19 +237,19 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 10px; padding: 10px;
background: rgba(255, 255, 255, 0.05); background: color-mix(in oklab, var(--foreground) 5%, transparent);
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--bl-border-subtle);
} }
.indicator-label { .indicator-label {
color: #888; color: var(--bl-text-faint);
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
.indicator-value { .indicator-value {
color: #fff; color: var(--foreground);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
} }
@ -253,19 +257,19 @@
/* Active Position Panel */ /* Active Position Panel */
.active-position-panel { .active-position-panel {
background: rgba(255, 255, 255, 0.05); background: color-mix(in oklab, var(--foreground) 5%, transparent);
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 12px;
margin: 15px 0; margin: 15px 0;
border-left: 4px solid #888; border-left: 4px solid var(--bl-text-faint);
} }
.active-position-panel.buy { .active-position-panel.buy {
border-left-color: #00ff88; border-left-color: var(--bl-success);
} }
.active-position-panel.sell { .active-position-panel.sell {
border-left-color: #ff3366; border-left-color: var(--bl-danger);
} }
.pos-header { .pos-header {
@ -277,15 +281,15 @@
} }
.pos-label { .pos-label {
color: #aaa; color: var(--bl-text-quiet);
} }
.buy .pos-label { .buy .pos-label {
color: #00ff88; color: var(--bl-success);
} }
.sell .pos-label { .sell .pos-label {
color: #ff3366; color: var(--bl-danger);
} }
.pos-grid { .pos-grid {
@ -301,7 +305,7 @@
.pos-item .label { .pos-item .label {
font-size: 0.65rem; font-size: 0.65rem;
color: #666; color: var(--bl-text-quiet);
text-transform: uppercase; text-transform: uppercase;
} }
@ -311,9 +315,9 @@
} }
.pos-item.sl .value { .pos-item.sl .value {
color: #ff3366; color: var(--bl-danger);
} }
.pos-item.tp .value { .pos-item.tp .value {
color: #00ff88; color: var(--bl-success);
} }