모의투자 화면수정
This commit is contained in:
Macbook
@@ -113,6 +113,42 @@
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
/* 타이틀·우측 버튼 사이 중앙 안내 (텍스트만, 1줄) */
|
||||
.bps-header--between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 18px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.bps-header--between .bps-header-left {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bps-header--between .bps-header-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bps-header--between .bps-header-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bps-header-status-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: #fbbf24;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.bps-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
@@ -138,6 +138,48 @@
|
||||
color: var(--text2, var(--se-text-muted));
|
||||
border-bottom: 1px solid var(--sep, var(--se-border));
|
||||
}
|
||||
|
||||
/* 모의투자 좌측(전략·자산 / 보유 종목 등): 우측 매수·매도 타이틀바와 동일 높이·연한 그라데이션 */
|
||||
.ptd-split-panel--left .ptd-split-card--top {
|
||||
border-color: color-mix(in srgb, var(--gc-trade-buy) 35%, var(--border));
|
||||
}
|
||||
|
||||
.ptd-split-panel--left .ptd-split-card--bottom {
|
||||
border-color: color-mix(in srgb, var(--gc-trade-sell) 35%, var(--border));
|
||||
}
|
||||
|
||||
.ptd-split-panel--left .ptd-split-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 42px;
|
||||
padding: 12px 14px 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ptd-split-panel--left .ptd-split-card--top .ptd-split-card-head {
|
||||
color: var(--gc-trade-buy);
|
||||
border-bottom-color: color-mix(in srgb, var(--gc-trade-buy) 30%, var(--border));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--gc-trade-buy) 24%, var(--bg2)) 0%,
|
||||
color-mix(in srgb, var(--gc-trade-buy) 10%, var(--bg2)) 50%,
|
||||
var(--bg2) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.ptd-split-panel--left .ptd-split-card--bottom .ptd-split-card-head {
|
||||
color: var(--gc-trade-sell);
|
||||
border-bottom-color: color-mix(in srgb, var(--gc-trade-sell) 30%, var(--border));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--gc-trade-sell) 24%, var(--bg2)) 0%,
|
||||
color-mix(in srgb, var(--gc-trade-sell) 10%, var(--bg2)) 50%,
|
||||
var(--bg2) 100%
|
||||
);
|
||||
}
|
||||
.ptd-split-card-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
@@ -232,26 +274,279 @@
|
||||
}
|
||||
.ptd-left-hint {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: var(--accent);
|
||||
}
|
||||
.ptd-left-status {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
color: var(--text3);
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
background: var(--bg3);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: var(--text2);
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
.ptd-left-status--on {
|
||||
color: #22c55e;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-left-hint,
|
||||
.bps-page--ptd .ptd-left-status {
|
||||
font-size: 13px;
|
||||
}
|
||||
/* 모의투자 — 보유·투자금 카드 목록 */
|
||||
.ptd-item-card-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ptd-item-card-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.ptd-item-card-list {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.ptd-item-card-empty {
|
||||
margin: 0;
|
||||
padding: 12px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.ptd-item-card-metrics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.ptd-item-card-metrics .vtd-target-strategy-field {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ptd-alloc-card-section {
|
||||
flex: 1 1 0;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.ptd-holdings-card-section {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.ptd-split-panel--left .ptd-split-card-body:has(.ptd-holdings-card-section) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px 10px 10px;
|
||||
}
|
||||
|
||||
.ptd-alloc-card--inactive {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.ptd-alloc-card--inactive .vtd-target-ko {
|
||||
color: var(--text3);
|
||||
}
|
||||
|
||||
.ptd-holding-card .vtd-target-item-actions .vtd-target-price {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 모의투자 목록 — 행·글자 약간 확대 (보유 종목·투자금 표/카드) */
|
||||
.bps-page--ptd .ptd-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-table th,
|
||||
.bps-page--ptd .ptd-table td {
|
||||
padding: 10px 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-table--compact {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-table--compact th,
|
||||
.bps-page--ptd .ptd-table--compact td {
|
||||
padding: 9px 11px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-split-panel--left .ptd-split-card-body > .ptd-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-split-panel--left .ptd-split-card-body > .ptd-table th,
|
||||
.bps-page--ptd .ptd-split-panel--left .ptd-split-card-body > .ptd-table td {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-section .vtd-target-list-head {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-section .vtd-target-count {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-list.vtd-target-list {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-list .vtd-target-item {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-list .vtd-target-ko {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-list .vtd-target-en {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-metrics {
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-metrics .vtd-target-strategy-field {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-metrics .vtd-target-strategy-label,
|
||||
.bps-page--ptd .ptd-item-card-metrics .vtd-trade-meta-value {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-metrics .vtd-trade-meta-value {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-holding-card .vtd-target-item-actions .vtd-target-price {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-alloc-toggle {
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-item-card-empty {
|
||||
font-size: 12px;
|
||||
padding: 14px 6px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-invest-card .ptd-alloc-card-section {
|
||||
flex: 1 1 auto;
|
||||
min-height: 200px;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.ptd-left-reset {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 설정 탭 — 보유 목록 카드와 동일 라벨·값 박스 행 */
|
||||
.ptd-settings-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ptd-settings-panel--account {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ptd-settings-link {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ptd-settings-card {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ptd-settings-card .ptd-item-card-metrics {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ptd-settings-card .vtd-target-strategy-field {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ptd-settings-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.ptd-settings-input:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ptd-settings-value-box--check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ptd-settings-value-box--check input[type='checkbox'] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent, #3f7ef5);
|
||||
}
|
||||
|
||||
.ptd-settings-reset {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ptd-split-panel--left .ptd-split-card-body:has(.ptd-settings-panel) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px 10px 10px;
|
||||
}
|
||||
|
||||
.bps-page--ptd .ptd-settings-card .vtd-target-strategy-label,
|
||||
.bps-page--ptd .ptd-settings-card .ptd-settings-input {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bps-right-body .ptd-right-body,
|
||||
.trade-right-panel .bps-right-body .ptd-right-body {
|
||||
flex: 1 1 0;
|
||||
|
||||
@@ -95,6 +95,8 @@
|
||||
.trade-right-panel .ptd-split-panel--right .ptd-split-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
min-height: 42px;
|
||||
padding: 12px 14px 11px;
|
||||
font-size: 13px;
|
||||
@@ -103,6 +105,28 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.trade-right-panel .ptd-split-panel--right .ptd-split-card-head-label {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trade-right-panel .ptd-split-panel--right .ptd-split-card-head-hint {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--text3);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.trade-right-panel .ptd-split-panel--right .ptd-split-card--top .ptd-split-card-head {
|
||||
color: var(--gc-trade-buy);
|
||||
border-bottom-color: color-mix(in srgb, var(--gc-trade-buy) 30%, var(--border));
|
||||
|
||||
@@ -2807,7 +2807,17 @@
|
||||
}
|
||||
.ptd-tabs--center {
|
||||
flex-shrink: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ptd-tabs--center .ptd-tab {
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
padding: 8px 18px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ptd-invest-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -2860,40 +2870,49 @@
|
||||
gap: 8px;
|
||||
}
|
||||
.ptd-invest-kpi-cell {
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
background: var(--gc-surface-2, rgba(255,255,255,0.04));
|
||||
min-width: 0;
|
||||
}
|
||||
.ptd-invest-kpi-cell--up .ptd-invest-kpi-value { color: var(--gc-trade-buy, #ef5350); }
|
||||
.ptd-invest-kpi-cell--down .ptd-invest-kpi-value { color: var(--gc-trade-sell, #4dabf7); }
|
||||
.ptd-invest-kpi-label {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
font-weight: 600;
|
||||
opacity: 0.75;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ptd-invest-kpi-value {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ptd-alloc-table-wrap {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.ptd-alloc-row--selected {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* 투자금 관리: PaperAllocationTable 카드 목록 — paperDashboard.css .ptd-alloc-card-section */
|
||||
.ptd-alloc-toggle {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
background: transparent;
|
||||
border: 1px solid color-mix(in srgb, var(--gc-trade-buy, #ef5350) 50%, transparent);
|
||||
background: color-mix(in srgb, var(--gc-trade-buy, #ef5350) 12%, transparent);
|
||||
color: var(--gc-trade-buy, #ef5350);
|
||||
cursor: pointer;
|
||||
}
|
||||
.ptd-alloc-toggle--on {
|
||||
border-color: var(--gc-trade-buy, #ef5350);
|
||||
color: var(--gc-trade-buy, #ef5350);
|
||||
border-color: color-mix(in srgb, #b8f397 65%, var(--se-border, var(--border)));
|
||||
color: #b8f397;
|
||||
background: color-mix(in srgb, #a3e635 20%, transparent);
|
||||
}
|
||||
.ptd-footer-stack {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user