매매 시그널 디테일 팝업 기능 적용
This commit is contained in:
Macbook
@@ -2353,19 +2353,20 @@
|
||||
padding: 8px 12px 16px;
|
||||
}
|
||||
|
||||
.arp-timeline-split-track {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.arp-timeline-split-axis {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
width: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(201, 162, 39, 0.75),
|
||||
rgba(201, 162, 39, 0.15)
|
||||
);
|
||||
border-radius: 2px;
|
||||
background: rgba(201, 162, 39, 0.58);
|
||||
border-radius: 1px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -2389,6 +2390,7 @@
|
||||
}
|
||||
|
||||
.arp-timeline-split-col--center {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -2581,12 +2583,12 @@
|
||||
}
|
||||
|
||||
.arp-timeline-axis-zone--top {
|
||||
padding-bottom: 12px;
|
||||
padding-bottom: 0;
|
||||
min-height: 148px;
|
||||
}
|
||||
|
||||
.arp-timeline-axis-zone--bottom {
|
||||
padding-top: 12px;
|
||||
padding-top: 0;
|
||||
min-height: 148px;
|
||||
}
|
||||
|
||||
@@ -2643,14 +2645,6 @@
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.arp-timeline-axis-zone--top .arp-timeline-axis-col-stack {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.arp-timeline-axis-zone--bottom .arp-timeline-axis-col-stack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.arp-timeline-axis-connector {
|
||||
width: 0;
|
||||
border-left: 2px dashed rgba(255, 255, 255, 0.34);
|
||||
@@ -2666,6 +2660,10 @@
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.arp-timeline-axis-connector--to-rail {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.arp-timeline-axis-connector--sell {
|
||||
border-left-color: rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
@@ -2818,3 +2816,287 @@
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 매매 시그널 상세 (타임라인 카드 버튼 · 팝업) ── */
|
||||
.arp-timeline-signal-card-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-btn {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
z-index: 3;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border-radius: 7px;
|
||||
border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
|
||||
background: color-mix(in srgb, var(--bg2) 88%, transparent);
|
||||
color: color-mix(in srgb, var(--text) 78%, transparent);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-btn:hover {
|
||||
background: color-mix(in srgb, #c9a227 18%, var(--bg2));
|
||||
border-color: color-mix(in srgb, #c9a227 45%, transparent);
|
||||
color: #c9a227;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-card-wrap.btd-timeline-card,
|
||||
.arp-timeline-signal-card-wrap.arp-timeline-split-card,
|
||||
.arp-timeline-signal-card-wrap.arp-timeline-axis-card {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-popup .app-popup-body.arp-timeline-signal-detail-popup__body {
|
||||
max-height: min(88vh, 860px);
|
||||
overflow-y: auto;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-summary {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-summary .tsd-body {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-summary .tsd-detail-matrix {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-summary .tsd-detail-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-height: 56px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
|
||||
background: color-mix(in srgb, var(--bg2) 72%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-summary .tsd-detail-cell-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: color-mix(in srgb, var(--text) 52%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-summary .tsd-detail-cell-value {
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
color: color-mix(in srgb, var(--text) 90%, transparent);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-summary .tsd-detail-cell-value--highlight {
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.arp-timeline-signal-detail-summary .tsd-detail-matrix {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.arp-timeline-signal-detail-summary .tsd-detail-matrix {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-chart {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: color-mix(in srgb, var(--bg1) 92%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: color-mix(in srgb, var(--text) 62%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-body {
|
||||
position: relative;
|
||||
min-height: 320px;
|
||||
height: min(52vh, 420px);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-stack {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: color-mix(in srgb, var(--bg1) 94%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane--candle .arp-timeline-signal-chart-pane-body {
|
||||
min-height: 240px;
|
||||
height: min(38vh, 300px);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane--aux .arp-timeline-signal-chart-pane-body {
|
||||
min-height: 180px;
|
||||
height: min(28vh, 220px);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
|
||||
background: color-mix(in srgb, var(--bg2) 55%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane-label {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
color: color-mix(in srgb, var(--text) 78%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane-meta {
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
color: color-mix(in srgb, var(--text) 52%, transparent);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane-body {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane-body .tv-chart-wrap {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-pane-body--aux .tv-chart-wrap {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-loading,
|
||||
.arp-timeline-signal-chart-error {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: color-mix(in srgb, var(--text) 55%, transparent);
|
||||
background: color-mix(in srgb, var(--bg1) 72%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-chart-error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-reason {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
|
||||
background: color-mix(in srgb, var(--bg2) 70%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-reason-head h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-reason-head p {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
color: color-mix(in srgb, var(--text) 72%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-muted {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
color: color-mix(in srgb, var(--text) 55%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-checklist {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-checklist li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
color: color-mix(in srgb, var(--text) 86%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-check {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
color: #22c55e;
|
||||
background: color-mix(in srgb, #22c55e 16%, transparent);
|
||||
}
|
||||
|
||||
.arp-timeline-signal-detail-strategy .scv-root {
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user