style: tighten options page typography and spacing
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -2402,6 +2402,43 @@ html[data-theme="light"] .settings-export-link {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* OKX 期权页 */
|
/* OKX 期权页 */
|
||||||
|
.options-page-wrap {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-page-wrap .card {
|
||||||
|
padding: 12px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-page-wrap .card h2,
|
||||||
|
.options-page-wrap .options-order-card h2,
|
||||||
|
.options-page-wrap .options-pos-card-wrap h2,
|
||||||
|
.options-page-wrap .options-pos-head h2 {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-page-wrap .options-hint,
|
||||||
|
.options-page-wrap #opt-index-line {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-page-wrap .options-chain-toolbar .btn-secondary,
|
||||||
|
.options-page-wrap .options-chain-toolbar select {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
padding: 4px 8px;
|
||||||
|
min-height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-page-wrap .options-pos-head .btn-secondary {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
padding: 3px 10px;
|
||||||
|
min-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
.options-funds-grid {
|
.options-funds-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
@@ -2444,14 +2481,24 @@ html[data-theme="light"] .settings-export-link {
|
|||||||
.options-strike-table {
|
.options-strike-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 0.85rem;
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
.options-page-wrap .options-strike-table {
|
||||||
|
font-size: 0.74rem;
|
||||||
}
|
}
|
||||||
.options-strike-table th,
|
.options-strike-table th,
|
||||||
.options-strike-table td {
|
.options-strike-table td {
|
||||||
padding: 8px 6px;
|
padding: 6px 5px;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
.options-page-wrap .options-strike-table th,
|
||||||
|
.options-page-wrap .options-strike-table td {
|
||||||
|
padding: 5px 4px;
|
||||||
|
}
|
||||||
|
.options-page-wrap .options-strike-table code {
|
||||||
|
font-size: 0.66rem;
|
||||||
|
}
|
||||||
.options-chain-toolbar .btn-secondary.active,
|
.options-chain-toolbar .btn-secondary.active,
|
||||||
.opt-uly-btn.active,
|
.opt-uly-btn.active,
|
||||||
.opt-type-btn.active {
|
.opt-type-btn.active {
|
||||||
@@ -2482,10 +2529,13 @@ html[data-theme="light"] .settings-export-link {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
.opt-order-panel-inner .opt-order-title {
|
.opt-order-panel-inner .opt-order-title {
|
||||||
margin: 0 0 10px;
|
margin: 0 0 8px;
|
||||||
font-size: 1rem;
|
font-size: 0.85rem;
|
||||||
color: #9ec0ff;
|
color: #9ec0ff;
|
||||||
}
|
}
|
||||||
|
.options-page-wrap .opt-order-panel-inner .opt-order-title {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
.opt-order-panel-host {
|
.opt-order-panel-host {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -2497,12 +2547,34 @@ html[data-theme="light"] .settings-export-link {
|
|||||||
}
|
}
|
||||||
.options-order-grid .k {
|
.options-order-grid .k {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.78rem;
|
font-size: 0.68rem;
|
||||||
color: #8892b0;
|
color: #8892b0;
|
||||||
}
|
}
|
||||||
|
.options-page-wrap .options-order-grid .v {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
.options-hint {
|
.options-hint {
|
||||||
font-size: 0.85rem;
|
font-size: 0.75rem;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.options-page-wrap .options-order-mode-row {
|
||||||
|
font-size: 0.74rem;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.options-page-wrap .options-order-mode-row input[type="number"],
|
||||||
|
.options-page-wrap .options-order-mode-row input[type="text"] {
|
||||||
|
font-size: 0.74rem;
|
||||||
|
padding: 3px 6px;
|
||||||
|
}
|
||||||
|
.options-page-wrap .options-order-mode-row .btn-primary {
|
||||||
|
font-size: 0.74rem;
|
||||||
|
padding: 4px 10px;
|
||||||
|
}
|
||||||
|
.options-page-wrap .opt-row-actions .btn-primary,
|
||||||
|
.options-page-wrap .opt-row-actions .btn-secondary {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 3px 7px;
|
||||||
|
min-height: 24px;
|
||||||
}
|
}
|
||||||
#opt-order-msg.opt-error,
|
#opt-order-msg.opt-error,
|
||||||
.opt-error {
|
.opt-error {
|
||||||
@@ -2517,9 +2589,9 @@ html[data-theme="light"] .settings-export-link {
|
|||||||
}
|
}
|
||||||
.opt-moneyness {
|
.opt-moneyness {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 2px 8px;
|
padding: 1px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 0.78rem;
|
font-size: 0.68rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.opt-moneyness-itm {
|
.opt-moneyness-itm {
|
||||||
@@ -2557,19 +2629,24 @@ html[data-theme="light"] .settings-export-link {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
.options-pos-subcard {
|
.options-pos-subcard {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
padding: 8px 10px;
|
||||||
}
|
}
|
||||||
.options-pos-subcard h3 {
|
.options-pos-subcard h3 {
|
||||||
margin: 0 0 8px;
|
margin: 0 0 6px;
|
||||||
font-size: 0.95rem;
|
font-size: 0.8rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
.options-page-wrap .options-pos-subcard h3 {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #b8c0dc;
|
||||||
|
}
|
||||||
.options-pos-live-pane {
|
.options-pos-live-pane {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
@@ -2582,25 +2659,51 @@ html[data-theme="light"] .settings-export-link {
|
|||||||
.options-stats-grid {
|
.options-stats-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 16px 24px;
|
gap: 8px 14px;
|
||||||
}
|
}
|
||||||
.options-stat-item {
|
.options-stat-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 2px;
|
||||||
|
min-width: 52px;
|
||||||
}
|
}
|
||||||
.options-stat-item .k {
|
.options-stat-item .k {
|
||||||
font-size: 0.78rem;
|
font-size: 0.66rem;
|
||||||
opacity: 0.7;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
.options-stat-item .v {
|
.options-stat-item .v {
|
||||||
font-size: 1.1rem;
|
font-size: 0.82rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
.options-page-wrap .options-stat-item .v {
|
||||||
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
.options-history-table-wrap .opt-history-del {
|
.options-history-table-wrap .opt-history-del {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
padding: 2px 7px;
|
||||||
|
min-height: 22px;
|
||||||
|
}
|
||||||
|
.options-page-wrap .opt-pos-card {
|
||||||
|
font-size: 0.76rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.options-page-wrap .opt-pos-card .pos-card-symbol strong {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
.options-page-wrap .opt-pos-card .pos-label,
|
||||||
|
.options-page-wrap .opt-pos-card .pos-meta-item {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
.options-page-wrap .opt-pos-card .pos-value {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
.options-page-wrap .pos-empty {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
.options-page-wrap #opt-order-msg {
|
||||||
font-size: 0.72rem;
|
font-size: 0.72rem;
|
||||||
padding: 2px 8px;
|
|
||||||
min-height: 24px;
|
|
||||||
}
|
}
|
||||||
.options-pos-history-card {
|
.options-pos-history-card {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -2620,7 +2723,7 @@ html[data-theme="light"] .settings-export-link {
|
|||||||
}
|
}
|
||||||
.options-order-card h2,
|
.options-order-card h2,
|
||||||
.options-pos-card-wrap h2 {
|
.options-pos-card-wrap h2 {
|
||||||
margin: 0 0 10px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
.options-pos-head {
|
.options-pos-head {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
|
<link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
|
||||||
<link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
|
<link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
|
||||||
<link rel="stylesheet" href="/static/instance_page.css?v=3">
|
<link rel="stylesheet" href="/static/instance_page.css?v=3">
|
||||||
<link rel="stylesheet" href="/static/instance_theme.css?v=63">
|
<link rel="stylesheet" href="/static/instance_theme.css?v=64">
|
||||||
<script src="/static/account_risk_badge.js?v=4"></script>
|
<script src="/static/account_risk_badge.js?v=4"></script>
|
||||||
<meta name="theme-color" content="#0b0d14">
|
<meta name="theme-color" content="#0b0d14">
|
||||||
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
|
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
<link rel="manifest" href="/static/icons/manifest.webmanifest">
|
<link rel="manifest" href="/static/icons/manifest.webmanifest">
|
||||||
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
|
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
|
||||||
<link rel="stylesheet" href="/static/instance_page.css?v=1">
|
<link rel="stylesheet" href="/static/instance_page.css?v=1">
|
||||||
<link rel="stylesheet" href="/static/instance_theme.css?v=63">
|
<link rel="stylesheet" href="/static/instance_theme.css?v=64">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
|
|||||||
Reference in New Issue
Block a user