fix: unify instance header panel layout for toolbar and stats
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -76,8 +76,22 @@
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.instance-toolbar-filter.list-window-bar {
|
||||
flex-basis: auto;
|
||||
.instance-header-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.instance-header-toolbar-filter {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.instance-header-theme {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.instance-header-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.stat-strip-inner {
|
||||
@@ -511,14 +525,17 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── 顶栏：状态 + 列表筛选 同一行 ── */
|
||||
.instance-toolbar-row {
|
||||
/* ── 统一顶栏面板：状态/筛选 + 统计条 ── */
|
||||
.instance-header-panel {
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.instance-header-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.instance-toolbar-status {
|
||||
@@ -529,59 +546,88 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.instance-toolbar-filter.list-window-bar {
|
||||
flex: 1 1 320px;
|
||||
margin-bottom: 0;
|
||||
.instance-header-toolbar-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px 10px;
|
||||
flex: 1 1 200px;
|
||||
min-width: 0;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.instance-header-toolbar-filter label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #9aa;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.instance-header-theme {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.list-window-label {
|
||||
color: #cfd3ef;
|
||||
font-size: 0.82rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-window-hint {
|
||||
color: #8892b0;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.72rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-window-apply {
|
||||
padding: 6px 12px;
|
||||
padding: 5px 12px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
/* ── 单行统计卡 ── */
|
||||
.stat-strip {
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.stat-strip-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
.instance-header-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--border-soft, #2a3150);
|
||||
}
|
||||
|
||||
.stat-strip-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
min-width: 72px;
|
||||
flex: 1 1 0;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
padding: 0 12px;
|
||||
border-right: 1px solid var(--border-soft, #2a3150);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.stat-strip-item:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.stat-strip-item:last-child {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.stat-strip-item .label {
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.7rem;
|
||||
color: #8892b0;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stat-strip-item .value {
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
color: #e8ecff;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stat-strip-item--pnl .value.pnl-pos {
|
||||
@@ -592,10 +638,61 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
|
||||
color: #ff6b7a;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.instance-header-stats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.stat-strip-item {
|
||||
border-right: none;
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.stat-strip-item:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 旧片段兼容（若仍被引用） */
|
||||
.instance-toolbar-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.instance-toolbar-filter.list-window-bar {
|
||||
flex: 1 1 320px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.stat-strip {
|
||||
margin-bottom: 12px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.stat-strip-inner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .stat-strip-item .value {
|
||||
color: #142232;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .instance-header-stats {
|
||||
border-top-color: #c8d4e0;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .stat-strip-item {
|
||||
border-right-color: #d8e2ec;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .list-window-label {
|
||||
color: #1a2838;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user