dekun/crypto_okx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add BTC/ETH spot tickers on nav, anchored to Beijing 08:00 open.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-08-17 11:42:19 +08:00
parent 960565482f
commit 08029ccb15
9 changed files with 472 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/instance_theme.css
+153 -6
View File
@@ -54,21 +54,43 @@ html[data-theme="light"] {
.top-nav {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: stretch;
overflow-x: auto !important;
overflow-y: hidden;
align-items: stretch !important;
overflow: visible !important;
width: 100%;
max-width: 100%;
gap: 8px !important;
margin-bottom: 12px !important;
padding: 2px 2px 6px;
}
.top-nav-links {
display: flex;
flex-wrap: nowrap;
overflow-x: auto !important;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
gap: 6px !important;
margin-bottom: 12px !important;
padding: 2px 2px 6px;
gap: 6px;
scroll-padding-inline: 10px;
touch-action: pan-x;
min-width: 0;
}
.top-nav-links::-webkit-scrollbar {
display: none;
}
.top-nav-spot-tickers {
justify-self: stretch;
align-self: stretch;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.top-nav::-webkit-scrollbar {
@@ -633,6 +655,131 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
font-size: 0.82rem;
}
/* 导航右侧 BTC/ETH 现货(相对北京 08:00 开盘) */
.top-nav-links {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
min-width: 0;
}
.top-nav-spot-tickers {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
font-variant-numeric: tabular-nums;
}
.nav-spot-row {
display: grid;
grid-template-columns: 3px 16px minmax(4.2em, auto) minmax(4.5em, auto) minmax(3.2em, auto) minmax(3.4em, auto);
align-items: center;
column-gap: 6px;
padding: 2px 8px 2px 4px;
border: 1px solid transparent;
border-radius: 6px;
background: rgba(16, 22, 36, 0.72);
line-height: 1.15;
white-space: nowrap;
font-size: 0.72rem;
}
.nav-spot-row:hover {
border-color: #3a4568;
}
.nav-spot-ribbon {
width: 3px;
height: 14px;
border-radius: 1px 2px 2px 1px;
background: #e24b6a;
justify-self: center;
}
.nav-spot-icon {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.62rem;
font-weight: 700;
color: #fff;
}
.nav-spot-icon--eth {
background: #627eea;
}
.nav-spot-icon--btc {
background: #f2a900;
color: #1a1200;
}
.nav-spot-sym {
color: var(--inst-text, #e8ecff);
font-weight: 600;
letter-spacing: 0.01em;
}
.nav-spot-last,
.nav-spot-chg,
.nav-spot-pct {
text-align: right;
font-weight: 600;
}
.nav-spot--up .nav-spot-last,
.nav-spot--up .nav-spot-chg,
.nav-spot--up .nav-spot-pct {
color: #2dd4a8;
}
.nav-spot--down .nav-spot-last,
.nav-spot--down .nav-spot-chg,
.nav-spot--down .nav-spot-pct {
color: #ff6b7a;
}
.nav-spot--flat .nav-spot-last,
.nav-spot--flat .nav-spot-chg,
.nav-spot--flat .nav-spot-pct {
color: #9aa3bf;
}
html[data-theme="light"] .nav-spot-row {
background: rgba(255, 255, 255, 0.85);
border-color: #d5e0ec;
}
html[data-theme="light"] .nav-spot-row:hover {
border-color: #9bb4cc;
}
html[data-theme="light"] .nav-spot--up .nav-spot-last,
html[data-theme="light"] .nav-spot--up .nav-spot-chg,
html[data-theme="light"] .nav-spot--up .nav-spot-pct {
color: #0a8f6c;
}
html[data-theme="light"] .nav-spot--down .nav-spot-last,
html[data-theme="light"] .nav-spot--down .nav-spot-chg,
html[data-theme="light"] .nav-spot--down .nav-spot-pct {
color: #d12b3a;
}
@media (max-width: 1100px) {
.nav-spot-row {
grid-template-columns: 3px 14px minmax(3.6em, auto) minmax(3.8em, auto) minmax(2.8em, auto) minmax(3em, auto);
column-gap: 4px;
font-size: 0.66rem;
padding: 2px 6px 2px 3px;
}
}
.instance-header-stats-wrap {
margin-top: 12px;
padding-top: 12px;