Add trading cockpit styles
This commit is contained in:
@@ -0,0 +1,885 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #ebe4d8;
|
||||
--surface: rgba(247, 241, 230, 0.88);
|
||||
--surface-solid: #f7f1e6;
|
||||
--surface-2: #efe7da;
|
||||
--surface-3: #e4dacb;
|
||||
--text: #26231f;
|
||||
--muted: #716a60;
|
||||
--line: rgba(58, 49, 39, 0.14);
|
||||
--shadow: 0 18px 48px rgba(68, 55, 38, 0.12);
|
||||
--shadow-soft: 0 8px 24px rgba(68, 55, 38, 0.08);
|
||||
--blue: #3867c8;
|
||||
--green: #257b50;
|
||||
--orange: #9a6416;
|
||||
--red: #b94a42;
|
||||
--grey: #948b7e;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background:
|
||||
linear-gradient(180deg, #f3eddf 0%, #ebe4d8 48%, #e1d7c7 100%);
|
||||
color: var(--text);
|
||||
font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1220px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 42px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
gap: 20px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h1, h2, h3, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 46px;
|
||||
line-height: 1;
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
select,
|
||||
input,
|
||||
button {
|
||||
height: 36px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: rgba(248, 242, 231, 0.76);
|
||||
color: var(--text);
|
||||
padding: 0 11px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 250, 241, 0.75);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: var(--blue);
|
||||
border-color: rgba(56, 103, 200, 0.62);
|
||||
color: #fffaf1;
|
||||
font-weight: 720;
|
||||
box-shadow: 0 8px 18px rgba(10, 132, 255, 0.18);
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
filter: brightness(0.98);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.42;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.demo-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.muted,
|
||||
#updated,
|
||||
small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.signal-band,
|
||||
.panel,
|
||||
.timeframe,
|
||||
.summary-strip article {
|
||||
background: var(--surface);
|
||||
border: 1px solid rgba(255, 250, 241, 0.58);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.signal-band {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 1fr) minmax(360px, 0.95fr);
|
||||
gap: 18px;
|
||||
padding: 24px;
|
||||
margin-bottom: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.decision-status {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.decision-copy {
|
||||
max-width: 760px;
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.decision-foot {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.decision-foot span {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.signal-blockers {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.signal-blockers span {
|
||||
border: 1px solid rgba(185, 74, 66, 0.26);
|
||||
border-radius: 999px;
|
||||
background: rgba(185, 74, 66, 0.08);
|
||||
color: #7b2c27;
|
||||
padding: 5px 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 680;
|
||||
}
|
||||
|
||||
.signal-blockers span.ok {
|
||||
border-color: rgba(37, 123, 80, 0.26);
|
||||
background: rgba(37, 123, 80, 0.08);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.signal-light {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
border-radius: 50%;
|
||||
background: var(--grey);
|
||||
border: 6px solid rgba(255, 250, 241, 0.70);
|
||||
box-shadow: 0 10px 30px rgba(139, 148, 163, 0.28);
|
||||
}
|
||||
|
||||
.signal-light.green {
|
||||
background: var(--green);
|
||||
box-shadow: 0 12px 34px rgba(31, 164, 99, 0.30);
|
||||
}
|
||||
|
||||
.signal-light.orange {
|
||||
background: var(--orange);
|
||||
box-shadow: 0 12px 34px rgba(199, 121, 0, 0.26);
|
||||
}
|
||||
|
||||
.signal-light.red {
|
||||
background: var(--red);
|
||||
box-shadow: 0 12px 34px rgba(185, 74, 66, 0.28);
|
||||
}
|
||||
|
||||
.signal-numbers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.signal-numbers span,
|
||||
.methodology-block,
|
||||
.optimizer-ranking div,
|
||||
.quality,
|
||||
.chart-card {
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 11px;
|
||||
}
|
||||
|
||||
.signal-numbers strong,
|
||||
.signal-numbers small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.signal-numbers strong {
|
||||
font-size: 18px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.decision-graphic {
|
||||
background: linear-gradient(180deg, rgba(239, 231, 218, 0.9), rgba(228, 218, 203, 0.72));
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.decision-graphic-head,
|
||||
.gauge-row {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.decision-graphic-head {
|
||||
grid-template-columns: 1fr auto;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.decision-graphic-head strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.gauge-row {
|
||||
grid-template-columns: 52px 1fr 44px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gauge-row label {
|
||||
color: var(--muted);
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.gauge-row strong {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gauge-track {
|
||||
position: relative;
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(58, 49, 39, 0.12);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.gauge-track > span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--grey);
|
||||
}
|
||||
|
||||
.gauge-track.score > span,
|
||||
.gauge-track.confidence > span {
|
||||
background: linear-gradient(90deg, var(--orange), var(--green));
|
||||
}
|
||||
|
||||
.gauge-track.rr > span {
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
.gauge-track i {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
bottom: -3px;
|
||||
width: 2px;
|
||||
background: rgba(38, 35, 31, 0.55);
|
||||
}
|
||||
|
||||
.gauge-thresholds {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.gauge-thresholds span {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
transform: translateX(-50%);
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
font-weight: 680;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 0 14px;
|
||||
margin-bottom: 2px;
|
||||
background: rgba(235, 228, 216, 0.86);
|
||||
backdrop-filter: blur(18px);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background: rgba(248, 242, 231, 0.78);
|
||||
border-color: var(--line);
|
||||
color: var(--text);
|
||||
box-shadow: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: #2d2923;
|
||||
border-color: #2d2923;
|
||||
color: #fffaf1;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.summary-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.summary-strip article {
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.summary-strip span,
|
||||
.summary-strip strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.summary-strip span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.summary-strip strong {
|
||||
margin-top: 4px;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.timeframe,
|
||||
.panel {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.status-row,
|
||||
.corr-row,
|
||||
.pattern-row,
|
||||
.history-row,
|
||||
.macro-row {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-top: 1px solid var(--line);
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
.status-row {
|
||||
grid-template-columns: 18px 1fr;
|
||||
}
|
||||
|
||||
.corr-row {
|
||||
grid-template-columns: 1fr 70px 90px;
|
||||
}
|
||||
|
||||
.pattern-row {
|
||||
grid-template-columns: 120px 1fr;
|
||||
}
|
||||
|
||||
.history-row {
|
||||
grid-template-columns: 110px 160px 1fr 1.4fr;
|
||||
}
|
||||
|
||||
.macro-row {
|
||||
grid-template-columns: 18px 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.timeframe-graphic {
|
||||
display: grid;
|
||||
grid-template-columns: 54px 1fr;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin: 6px 0 8px;
|
||||
}
|
||||
|
||||
.tf-score {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.tf-score strong {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tf-score span {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
max-width: 48px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tf-score.positive {
|
||||
background: rgba(37, 123, 80, 0.1);
|
||||
border-color: rgba(37, 123, 80, 0.26);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.tf-score.negative {
|
||||
background: rgba(185, 74, 66, 0.1);
|
||||
border-color: rgba(185, 74, 66, 0.26);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.tf-stack {
|
||||
height: 10px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(58, 49, 39, 0.12);
|
||||
border: 1px solid rgba(58, 49, 39, 0.08);
|
||||
}
|
||||
|
||||
.tf-stack span.green {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.tf-stack span.orange {
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
.tf-stack span.red {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.tf-dots {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.audit-row {
|
||||
display: grid;
|
||||
grid-template-columns: 18px 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.audit-row span,
|
||||
.audit-row small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.audit-table {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.audit-values {
|
||||
display: grid;
|
||||
grid-template-columns: 52px repeat(6, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.audit-values strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--grey);
|
||||
}
|
||||
|
||||
.dot.green {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.dot.orange {
|
||||
background: var(--orange);
|
||||
}
|
||||
|
||||
.dot.red {
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.dot.grey {
|
||||
background: var(--grey);
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.label span,
|
||||
.macro-row span,
|
||||
.optimizer-ranking span,
|
||||
.quality span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.methodology-panel,
|
||||
.macro-panel,
|
||||
.backtest-panel,
|
||||
.history-panel {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.panel-actions,
|
||||
.backtest-meta,
|
||||
.macro-summary,
|
||||
.chart-legend,
|
||||
.progress-line {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.backtest-meta,
|
||||
.macro-summary,
|
||||
.chart-legend,
|
||||
.progress-line {
|
||||
color: var(--muted);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.optimizer-progress {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: min(360px, 100%);
|
||||
height: 10px;
|
||||
background: var(--surface-3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--green);
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.optimizer-ranking,
|
||||
.methodology-grid,
|
||||
.macro-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.methodology-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.quality {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.quality.pass {
|
||||
border-color: rgba(31, 164, 99, 0.45);
|
||||
}
|
||||
|
||||
.quality.fail {
|
||||
border-color: rgba(215, 53, 53, 0.42);
|
||||
}
|
||||
|
||||
.backtest-table {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.backtest-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr 70px 80px 80px 60px 70px;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.backtest-row.head {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
margin-top: 12px;
|
||||
background: var(--surface-solid);
|
||||
}
|
||||
|
||||
.chart-card svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.chart-card line {
|
||||
stroke: rgba(22, 25, 31, 0.18);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.chart-card text {
|
||||
fill: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.chart-card .chart-axis {
|
||||
stroke: rgba(38, 35, 31, 0.46);
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
|
||||
.chart-card .chart-grid line {
|
||||
stroke: rgba(58, 49, 39, 0.11);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.chart-card .chart-zero {
|
||||
stroke: rgba(38, 35, 31, 0.32);
|
||||
stroke-dasharray: 2 4;
|
||||
}
|
||||
|
||||
.chart-card .chart-split {
|
||||
stroke: rgba(56, 103, 200, 0.44);
|
||||
stroke-dasharray: 5 5;
|
||||
}
|
||||
|
||||
.chart-card .chart-label {
|
||||
fill: rgba(38, 35, 31, 0.72);
|
||||
font-size: 12px;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.chart-point {
|
||||
fill: var(--blue);
|
||||
stroke: var(--surface-solid);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.chart-card path {
|
||||
fill: none;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.price-chart line {
|
||||
stroke: rgba(22, 25, 31, 0.18);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.price-chart rect {
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.candle.up line,
|
||||
.candle.up rect {
|
||||
fill: rgba(31, 164, 99, 0.18);
|
||||
stroke: var(--green);
|
||||
}
|
||||
|
||||
.candle.down line,
|
||||
.candle.down rect {
|
||||
fill: rgba(215, 53, 53, 0.16);
|
||||
stroke: var(--red);
|
||||
}
|
||||
|
||||
.trade-marker circle {
|
||||
fill: var(--blue);
|
||||
}
|
||||
|
||||
.trade-marker line {
|
||||
stroke: rgba(10, 132, 255, 0.44);
|
||||
stroke-dasharray: 4 4;
|
||||
}
|
||||
|
||||
.trade-marker line.stop {
|
||||
stroke: rgba(215, 53, 53, 0.44);
|
||||
}
|
||||
|
||||
.trade-marker line.target {
|
||||
stroke: rgba(31, 164, 99, 0.44);
|
||||
}
|
||||
|
||||
.equity-line {
|
||||
stroke: var(--green);
|
||||
}
|
||||
|
||||
.drawdown-line {
|
||||
stroke: var(--red);
|
||||
}
|
||||
|
||||
.history-line {
|
||||
stroke: #51483c;
|
||||
}
|
||||
|
||||
.forecast-line {
|
||||
stroke: var(--green);
|
||||
}
|
||||
|
||||
.forecast-band {
|
||||
fill: rgba(37, 123, 80, 0.12);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.metric-chart path,
|
||||
.forecast-chart path {
|
||||
fill: none;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.forecast-chart .forecast-band {
|
||||
fill: rgba(37, 123, 80, 0.12);
|
||||
}
|
||||
|
||||
.methodology-block strong {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.methodology-block ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.warnings {
|
||||
margin-top: 14px;
|
||||
color: #8a5a00;
|
||||
}
|
||||
|
||||
.warnings div {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.topbar,
|
||||
.signal-band {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.decision-foot {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grid,
|
||||
.details-grid,
|
||||
.methodology-grid,
|
||||
.macro-grid,
|
||||
.optimizer-ranking,
|
||||
.audit-values,
|
||||
.summary-strip {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.signal-numbers {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.gauge-row {
|
||||
grid-template-columns: 44px 1fr 38px;
|
||||
}
|
||||
|
||||
.backtest-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.history-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user