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