2189 lines
36 KiB
CSS
2189 lines
36 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
|
|
--bg0: #0a0b10;
|
|
--bg1: #0b0f1a;
|
|
--panel: rgba(255, 255, 255, 0.05);
|
|
--panel2: rgba(255, 255, 255, 0.03);
|
|
--border: rgba(255, 255, 255, 0.08);
|
|
--border2: rgba(255, 255, 255, 0.12);
|
|
--text: #e6e9ef;
|
|
--muted: rgba(230, 233, 239, 0.72);
|
|
--pos: #22c55e;
|
|
--neg: #ef4444;
|
|
--accent: #a855f7;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--text);
|
|
background: radial-gradient(1200px 700px at 20% 10%, rgba(168, 85, 247, 0.12), transparent 60%),
|
|
radial-gradient(900px 600px at 70% 30%, rgba(59, 130, 246, 0.12), transparent 60%),
|
|
linear-gradient(180deg, var(--bg0), var(--bg1));
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
a:hover {
|
|
opacity: 1;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.pos {
|
|
color: var(--pos);
|
|
}
|
|
|
|
.neg {
|
|
color: var(--neg);
|
|
}
|
|
|
|
.shell {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loginScreen {
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loginCard {
|
|
width: min(420px, 100%);
|
|
background: rgba(0, 0, 0, 0.35);
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
border-radius: 18px;
|
|
padding: 18px;
|
|
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.loginCard__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.loginCard__mark {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 6px;
|
|
background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(59, 130, 246, 0.9));
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.loginCard__title {
|
|
font-weight: 900;
|
|
font-size: 16px;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.loginCard__subtitle {
|
|
margin-top: 10px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.loginForm {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.loginForm__input {
|
|
width: 100%;
|
|
}
|
|
|
|
.loginForm__error {
|
|
color: var(--neg);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.loginForm__actions {
|
|
margin-top: 6px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.shellHeader {
|
|
background: rgba(0, 0, 0, 0.35);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
|
|
padding: 10px 14px;
|
|
}
|
|
|
|
.shellTop {
|
|
background: rgba(0, 0, 0, 0.18);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
padding: 8px 14px;
|
|
}
|
|
|
|
.shellBody {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 320px 360px;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.shellMain,
|
|
.shellSidebar,
|
|
.shellRightbar {
|
|
min-height: 0;
|
|
}
|
|
|
|
.tradeMain {
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr) 280px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.uiCard {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.uiCard__head {
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.uiCard__title {
|
|
flex: 1;
|
|
}
|
|
|
|
.uiCard__body {
|
|
padding: 14px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.uiTabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.uiTabs__content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.uiError {
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
background: rgba(239, 68, 68, 0.14);
|
|
border: 1px solid rgba(239, 68, 68, 0.25);
|
|
color: #fecaca;
|
|
font-size: 13px;
|
|
line-height: 1.25;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.uiButton {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.uiButton--md {
|
|
padding: 9px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.uiButton--sm {
|
|
padding: 7px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.uiButton--primary {
|
|
background: rgba(168, 85, 247, 0.18);
|
|
border-color: rgba(168, 85, 247, 0.35);
|
|
color: var(--text);
|
|
}
|
|
|
|
.uiButton--primary:hover {
|
|
background: rgba(168, 85, 247, 0.26);
|
|
}
|
|
|
|
.uiButton--ghost {
|
|
background: transparent;
|
|
border-color: rgba(255, 255, 255, 0.10);
|
|
color: var(--text);
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.uiButton--ghost:hover {
|
|
opacity: 1;
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.uiButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tickerBar {
|
|
display: flex;
|
|
gap: 18px;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ticker {
|
|
display: inline-flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.ticker__label {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.ticker__pct {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.topNav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.topNav__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.topNav__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 950;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.topNav__brandMark {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 6px;
|
|
background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(59, 130, 246, 0.9));
|
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.topNav__brandName {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.topNav__menu {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.topNav__link {
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--muted);
|
|
font-weight: 850;
|
|
padding: 7px 10px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topNav__link:hover {
|
|
color: var(--text);
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.topNav__link--active {
|
|
color: var(--text);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.topNav__right {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.authStatus {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.authStatus__user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.authStatus__userLabel {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.authStatus__userName {
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.topNav__iconBtn {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topNav__iconBtn:hover {
|
|
border-color: rgba(255, 255, 255, 0.20);
|
|
}
|
|
|
|
.topNav__account {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 12px;
|
|
padding: 8px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.topNav__accountName {
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.topNav__accountSub {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.marketHeader {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
}
|
|
|
|
.marketHeader__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 280px;
|
|
}
|
|
|
|
.marketHeader__mid {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.marketHeader__right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.marketHeader__actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.marketSelect {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.marketSelect__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.marketSelect__input {
|
|
background: rgba(0, 0, 0, 0.20);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 10px;
|
|
padding: 9px 10px;
|
|
color: var(--text);
|
|
min-width: 160px;
|
|
}
|
|
|
|
.inlineField {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.inlineField__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.inlineField__input {
|
|
background: rgba(0, 0, 0, 0.20);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 10px;
|
|
padding: 9px 10px;
|
|
color: var(--text);
|
|
min-width: 110px;
|
|
}
|
|
|
|
.statsRow {
|
|
display: grid;
|
|
/* 7 stat tiles by default (Last/Oracle/Bid/Ask/Spread/DLOB/L2), but keep it responsive. */
|
|
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
|
|
column-gap: 14px;
|
|
row-gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.stat {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.stat__value {
|
|
margin-top: 4px;
|
|
font-weight: 800;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.stat__sub {
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.chartCard {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.chartCard .uiCard__body {
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.chartCard__toolbar {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.chartCard__content {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 44px 1fr;
|
|
min-height: 0;
|
|
}
|
|
|
|
.chartTools {
|
|
position: relative;
|
|
z-index: 10;
|
|
min-height: 0;
|
|
}
|
|
|
|
.chartSideToolbar {
|
|
padding: 10px 6px;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.chartToolBtn__spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.chartToolBtn {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
background: rgba(0, 0, 0, 0.10);
|
|
color: rgba(230, 233, 239, 0.88);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chartToolBtn:hover {
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.chartToolBtn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.chartToolBtn--active {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.22);
|
|
color: var(--text);
|
|
}
|
|
|
|
.chartToolBtn__icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chartToolMenuBackdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 52px;
|
|
right: -9999px;
|
|
background: transparent;
|
|
z-index: 40;
|
|
}
|
|
|
|
.chartToolMenu {
|
|
position: absolute;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
left: 52px;
|
|
width: 320px;
|
|
background: rgba(17, 19, 28, 0.92);
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
border-radius: 14px;
|
|
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
|
|
backdrop-filter: blur(14px);
|
|
overflow: hidden;
|
|
z-index: 50;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.chartToolMenu__top {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.chartToolMenu__tf {
|
|
font-weight: 900;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.chartToolMenu__body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.chartToolMenu__section {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.chartToolMenu__section + .chartToolMenu__section {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.chartToolMenu__sectionTitle {
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.12em;
|
|
color: rgba(230, 233, 239, 0.55);
|
|
padding: 0 8px 8px;
|
|
}
|
|
|
|
.chartToolMenu__items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.chartToolMenuItem {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 10px;
|
|
border-radius: 12px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: rgba(230, 233, 239, 0.92);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chartToolMenuItem:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.chartToolMenuItem__icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(230, 233, 239, 0.82);
|
|
}
|
|
|
|
.chartToolMenuItem__label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: left;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.chartToolMenuItem__shortcut {
|
|
font-size: 11px;
|
|
color: rgba(230, 233, 239, 0.55);
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chartLayersBackdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: transparent;
|
|
z-index: 60;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 140ms ease;
|
|
}
|
|
|
|
.chartLayersBackdrop--open {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.chartLayersPanel {
|
|
position: absolute;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
left: 8px;
|
|
width: 420px;
|
|
max-width: calc(100% - 16px);
|
|
background: rgba(17, 19, 28, 0.92);
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
border-radius: 14px;
|
|
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
|
|
backdrop-filter: blur(14px);
|
|
overflow: hidden;
|
|
z-index: 70;
|
|
display: flex;
|
|
flex-direction: column;
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
pointer-events: none;
|
|
transition: opacity 140ms ease, transform 140ms ease;
|
|
}
|
|
|
|
.chartLayersPanel--open {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.chartLayersPanel__head {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.chartLayersPanel__title {
|
|
font-weight: 900;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.chartLayersPanel__close {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
background: transparent;
|
|
color: rgba(230, 233, 239, 0.85);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chartLayersPanel__close:hover {
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: rgba(230, 233, 239, 0.92);
|
|
}
|
|
|
|
.chartLayersTable {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.chartLayersRow {
|
|
display: grid;
|
|
grid-template-columns: 34px 34px minmax(0, 1fr) 150px 40px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.chartLayersRow--head {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background: rgba(17, 19, 28, 0.92);
|
|
color: rgba(230, 233, 239, 0.60);
|
|
font-size: 11px;
|
|
font-weight: 850;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.chartLayersRow--layer {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.chartLayersRow--object {
|
|
cursor: pointer;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.chartLayersRow--object:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.chartLayersRow--selected {
|
|
background: rgba(168, 85, 247, 0.12);
|
|
}
|
|
|
|
.chartLayersCell {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chartLayersCell--icon {
|
|
justify-content: center;
|
|
}
|
|
|
|
.chartLayersCell--name {
|
|
min-width: 0;
|
|
}
|
|
|
|
.chartLayersCell--opacity {
|
|
min-width: 0;
|
|
}
|
|
|
|
.chartLayersCell--actions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.layersBtn {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
background: rgba(0, 0, 0, 0.10);
|
|
color: rgba(230, 233, 239, 0.88);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.layersBtn:hover {
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.layersBtn--active {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.22);
|
|
color: var(--text);
|
|
}
|
|
|
|
.layersBtn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.layersName {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.layersName--layer {
|
|
font-weight: 900;
|
|
}
|
|
|
|
.layersName--object {
|
|
font-weight: 800;
|
|
color: rgba(230, 233, 239, 0.92);
|
|
}
|
|
|
|
.layersName__meta {
|
|
opacity: 0.65;
|
|
font-weight: 800;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.layersOpacity {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 44px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.layersOpacity__range {
|
|
width: 100%;
|
|
}
|
|
|
|
.layersOpacity__pct {
|
|
font-size: 12px;
|
|
color: rgba(230, 233, 239, 0.70);
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.chartCard__chart {
|
|
min-height: 0;
|
|
height: 100%;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tradingChart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.chartBackdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
z-index: 1999;
|
|
}
|
|
|
|
.chartCard--fullscreen {
|
|
position: fixed;
|
|
top: 10px;
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
z-index: 2000;
|
|
min-height: 0;
|
|
}
|
|
|
|
body.chartFullscreen {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chartToolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.chartToolbar__group {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.chartToolbar__meta {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.uiTabs__bar {
|
|
display: flex;
|
|
gap: 10px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
padding-bottom: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.uiTab {
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--muted);
|
|
font-weight: 800;
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.uiTab--active {
|
|
color: var(--text);
|
|
border-bottom: 2px solid var(--accent);
|
|
}
|
|
|
|
.placeholder {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
padding: 10px 2px;
|
|
}
|
|
|
|
.dlobDash {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.dlobDash__head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dlobDash__title {
|
|
font-weight: 950;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.dlobDash__meta {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dlobDash__market {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.dlobDash__statuses {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px 14px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dlobStatus {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.dlobStatus__label {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.dlobDash__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.dlobKpi {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.dlobKpi__label {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.dlobKpi__value {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.dlobKpi__sub {
|
|
margin-top: 2px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dlobDash__panes {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.dlobDash__pane {
|
|
min-height: 0;
|
|
}
|
|
|
|
.costsPanel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.costsPanel--stack {
|
|
height: 100%;
|
|
}
|
|
|
|
.costsPanel--stack .costsPanel__grid {
|
|
height: 100%;
|
|
}
|
|
|
|
.costsPanel__toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.costsPanel__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.costsPanel__grid--single {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.costsCard {
|
|
background: rgba(0, 0, 0, 0.20);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.costsCard--new {
|
|
gap: 8px;
|
|
}
|
|
|
|
.costsCard--new .costsCard__subhead {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.costsCard__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.costsCard__title {
|
|
font-weight: 950;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.costsCard__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.costsCard__subhead {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.costsForm {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.costsForm--new {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.costsForm--newSide {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.costsKpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.costsKpis--new {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
.costsKpis--newSide {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.costsNewLayout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 420px;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.costsNewCharts {
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.costsNewSide {
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.costKpi {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.costsCard--new .costKpi {
|
|
padding: 8px;
|
|
}
|
|
|
|
.costsCard--new .costKpi__label {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.costsCard--new .costKpi__value {
|
|
margin-top: 3px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.costKpi__label {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.costKpi__value {
|
|
margin-top: 4px;
|
|
font-weight: 900;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.costsMeta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px 14px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.costsMeta--new {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.costsClose {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.costsClose__row {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.costCharts {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.costCharts--new {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-areas:
|
|
"price price"
|
|
"bps usd";
|
|
}
|
|
|
|
.costChart {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.costChart--big {
|
|
padding: 12px;
|
|
}
|
|
|
|
.costChart--price {
|
|
grid-area: price;
|
|
}
|
|
.costChart--costBps {
|
|
grid-area: bps;
|
|
}
|
|
.costChart--costUsd {
|
|
grid-area: usd;
|
|
}
|
|
|
|
.costChart__canvas {
|
|
height: 280px;
|
|
min-height: 180px;
|
|
}
|
|
|
|
.costChart--price .costChart__canvas {
|
|
height: 240px;
|
|
}
|
|
|
|
.costChart--costBps .costChart__canvas,
|
|
.costChart--costUsd .costChart__canvas {
|
|
height: 180px;
|
|
min-height: 160px;
|
|
}
|
|
|
|
.costChart__canvas canvas {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.costChart__head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.costChart__title {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.costChart__value {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.costChart__svg {
|
|
width: 100%;
|
|
height: 84px;
|
|
}
|
|
|
|
.costChart__scroll {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.costChart__svg--time {
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.costsPanel__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.costCharts {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.costsForm--new {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.costsKpis--new {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
.costCharts--new {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"price"
|
|
"bps"
|
|
"usd";
|
|
}
|
|
.costChart--price .costChart__canvas {
|
|
height: 220px;
|
|
}
|
|
|
|
.costsNewLayout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.dlobDepth {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.dlobDepth__head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dlobDepth__title {
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dlobDepth__meta {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dlobDepth__table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.dlobDepthRow {
|
|
display: grid;
|
|
grid-template-columns: 0.9fr 1fr 1fr 0.7fr;
|
|
gap: 10px;
|
|
padding: 6px 8px;
|
|
border-radius: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.dlobDepthRow > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dlobDepthRow::before,
|
|
.dlobDepthRow::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dlobDepthRow::before {
|
|
transform: scaleX(var(--ask-scale, 0));
|
|
transform-origin: left center;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(239, 68, 68, 0.18) 0%,
|
|
rgba(239, 68, 68, 0.06) 60%,
|
|
rgba(239, 68, 68, 0) 100%
|
|
);
|
|
}
|
|
|
|
.dlobDepthRow::after {
|
|
transform: scaleX(var(--bid-scale, 0));
|
|
transform-origin: right center;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(34, 197, 94, 0) 0%,
|
|
rgba(34, 197, 94, 0.06) 40%,
|
|
rgba(34, 197, 94, 0.18) 100%
|
|
);
|
|
}
|
|
|
|
.dlobDepthRow--head {
|
|
padding: 0 8px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dlobDepthRow--head::before,
|
|
.dlobDepthRow--head::after {
|
|
display: none;
|
|
}
|
|
|
|
.dlobDepthRow__num {
|
|
text-align: right;
|
|
}
|
|
|
|
.dlobDepth__empty {
|
|
padding: 8px 2px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dlobSlippage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.dlobSlippage__head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dlobSlippage__title {
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dlobSlippage__chartWrap {
|
|
height: 220px;
|
|
min-height: 180px;
|
|
}
|
|
|
|
.dlobSlippageChart {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.dlobSlippage__empty {
|
|
padding: 8px 2px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.bottomCard .uiCard__body {
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.orderbookCard,
|
|
.tradeFormCard {
|
|
height: 100%;
|
|
}
|
|
|
|
.orderbookCard .uiCard__body {
|
|
padding: 10px 12px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.tradeFormCard .uiCard__body {
|
|
padding: 10px 12px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.orderbookCard .uiTabs {
|
|
flex: 1;
|
|
}
|
|
|
|
.orderbook {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-height: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.orderbook__header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 0.9fr 0.9fr;
|
|
gap: 10px;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
padding: 2px 2px 8px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.orderbook__num {
|
|
text-align: right;
|
|
}
|
|
|
|
.orderbook__rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.orderbookRow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 0.9fr 0.9fr;
|
|
gap: 10px;
|
|
padding: 2px 2px;
|
|
border-radius: 8px;
|
|
font-variant-numeric: tabular-nums;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.orderbookRow > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.orderbookRow::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
opacity: 0.35;
|
|
transform: scaleX(var(--ob-total-scale, 0));
|
|
transition: transform 220ms ease-out;
|
|
will-change: transform;
|
|
}
|
|
|
|
.orderbookRow::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
transform: scaleX(var(--ob-level-scale, 0));
|
|
transition: transform 220ms ease-out;
|
|
will-change: transform;
|
|
}
|
|
|
|
.orderbookRow--ask::before {
|
|
transform-origin: left center;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(239, 68, 68, 0.24) 0%,
|
|
rgba(239, 68, 68, 0.09) 60%,
|
|
rgba(239, 68, 68, 0) 100%
|
|
);
|
|
}
|
|
|
|
.orderbookRow--bid::before {
|
|
transform-origin: right center;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(34, 197, 94, 0) 0%,
|
|
rgba(34, 197, 94, 0.09) 40%,
|
|
rgba(34, 197, 94, 0.24) 100%
|
|
);
|
|
}
|
|
|
|
.orderbookRow--ask::after {
|
|
transform-origin: left center;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(239, 68, 68, 0.36) 0%,
|
|
rgba(239, 68, 68, 0.12) 55%,
|
|
rgba(239, 68, 68, 0) 100%
|
|
);
|
|
}
|
|
|
|
.orderbookRow--bid::after {
|
|
transform-origin: right center;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(34, 197, 94, 0) 0%,
|
|
rgba(34, 197, 94, 0.12) 45%,
|
|
rgba(34, 197, 94, 0.36) 100%
|
|
);
|
|
}
|
|
|
|
.orderbookRow__num {
|
|
text-align: right;
|
|
color: rgba(230, 233, 239, 0.75);
|
|
}
|
|
|
|
.orderbookRow--ask .orderbookRow__price {
|
|
color: var(--neg);
|
|
}
|
|
|
|
.orderbookRow--bid .orderbookRow__price {
|
|
color: var(--pos);
|
|
}
|
|
|
|
.orderbookMid {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding: 10px 2px;
|
|
margin: 4px 0;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.orderbookMid__price {
|
|
font-weight: 950;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.orderbookMid__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.orderbookMeta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 2px 2px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.orderbookMeta__row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.orderbookMeta__val {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.liquidityBar {
|
|
position: relative;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1px;
|
|
}
|
|
|
|
.liquidityBar::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
transform: translateX(-0.5px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.liquidityBar__bid,
|
|
.liquidityBar__ask {
|
|
height: 100%;
|
|
transform: scaleX(0);
|
|
transform-origin: center;
|
|
transition: transform 180ms ease-out;
|
|
}
|
|
|
|
.liquidityBar__bid {
|
|
background: linear-gradient(90deg, rgba(34, 197, 94, 0.0) 0%, rgba(34, 197, 94, 0.35) 55%, rgba(34, 197, 94, 0.85) 100%);
|
|
transform-origin: right center;
|
|
transform: scaleX(var(--liq-bid, 0));
|
|
}
|
|
|
|
.liquidityBar__ask {
|
|
background: linear-gradient(90deg, rgba(239, 68, 68, 0.85) 0%, rgba(239, 68, 68, 0.35) 45%, rgba(239, 68, 68, 0.0) 100%);
|
|
transform-origin: left center;
|
|
transform: scaleX(var(--liq-ask, 0));
|
|
}
|
|
|
|
.trades {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
min-height: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trades__header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
padding: 2px 2px 8px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.trades__num {
|
|
text-align: right;
|
|
}
|
|
|
|
.trades__rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.tradeRow {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
padding: 2px 2px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.tradeRow__time {
|
|
color: rgba(230, 233, 239, 0.75);
|
|
}
|
|
|
|
.tradeRow__price,
|
|
.tradeRow__num {
|
|
text-align: right;
|
|
}
|
|
|
|
.tradeRow__num {
|
|
color: rgba(230, 233, 239, 0.75);
|
|
}
|
|
|
|
.tradeFormHead {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.tradeFormHead__left {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.tradeFormHead__right {
|
|
color: var(--muted);
|
|
font-weight: 850;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.chipBtn {
|
|
background: rgba(0, 0, 0, 0.22);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 10px;
|
|
padding: 7px 10px;
|
|
color: var(--text);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chipBtn:hover {
|
|
border-color: rgba(255, 255, 255, 0.20);
|
|
}
|
|
|
|
.tradeForm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.segmented {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
background: rgba(0, 0, 0, 0.20);
|
|
}
|
|
|
|
.segmented__btn {
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--muted);
|
|
padding: 10px 12px;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.segmented__btn--activeLong {
|
|
background: rgba(34, 197, 94, 0.18);
|
|
color: rgba(220, 252, 231, 0.95);
|
|
}
|
|
|
|
.segmented__btn--activeShort {
|
|
background: rgba(239, 68, 68, 0.18);
|
|
color: rgba(254, 226, 226, 0.95);
|
|
}
|
|
|
|
.tradeTabs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tradeTabs__btn {
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
color: var(--muted);
|
|
font-weight: 850;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tradeTabs__btn--active {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: var(--text);
|
|
border-color: rgba(255, 255, 255, 0.20);
|
|
}
|
|
|
|
.tradeFields {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.formField {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.formField__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.formField__input {
|
|
background: rgba(0, 0, 0, 0.20);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 10px;
|
|
padding: 10px 10px;
|
|
color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.formField__input:disabled {
|
|
opacity: 0.65;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tradeCta {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tradeMeta {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
padding-top: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tradeMeta__row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
color: rgba(230, 233, 239, 0.9);
|
|
}
|
|
|
|
.tradeMeta__label {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.tradeMeta__value {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.sideHead {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.sideHead__title {
|
|
font-weight: 900;
|
|
}
|
|
|
|
.sideHead__subtitle {
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--muted);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.shellBody {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.shellSidebar {
|
|
display: none;
|
|
}
|
|
.shellRightbar {
|
|
display: none;
|
|
}
|
|
.statsRow {
|
|
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
|
|
}
|
|
}
|
|
|
|
body.stackMode {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stackBackdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1990;
|
|
background: rgba(0, 0, 0, var(--stack-backdrop-opacity, 0.55));
|
|
}
|
|
|
|
.stackDrawerHotspot {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 10px;
|
|
height: 96px;
|
|
z-index: 4050;
|
|
background: transparent;
|
|
}
|
|
|
|
.stackDrawer {
|
|
position: fixed;
|
|
top: 12px;
|
|
left: 12px;
|
|
bottom: 12px;
|
|
width: min(460px, calc(100vw - 24px));
|
|
z-index: 4000;
|
|
transform: translateX(0);
|
|
transition: transform 180ms ease;
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.stackDrawer--closed {
|
|
transform: translateX(calc(-100% - 20px));
|
|
opacity: 0;
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.stackDrawer.uiCard {
|
|
box-shadow: 0 30px 120px rgba(0, 0, 0, 0.55);
|
|
pointer-events: auto;
|
|
background: rgba(10, 11, 16, var(--stack-drawer-opacity, 0.92));
|
|
border-color: rgba(255, 255, 255, 0.10);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.stackPanel__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.stackPanel__sliders {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stackPanel__sliderRow {
|
|
display: grid;
|
|
grid-template-columns: 68px 1fr 46px;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.stackPanel__slider {
|
|
width: 100%;
|
|
}
|
|
|
|
.stackPanel__sliderValue {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.stackPanel__layerOpacity {
|
|
margin-left: 8px;
|
|
width: 160px;
|
|
}
|
|
|
|
.stackPanel__layerOpacityValue {
|
|
width: 42px;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.stackPanel__layerBrightness {
|
|
margin-left: 8px;
|
|
width: 110px;
|
|
}
|
|
|
|
.stackPanel__layerBrightnessValue {
|
|
width: 46px;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.stackPanel__iconBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 26px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
background: rgba(0, 0, 0, 0.18);
|
|
color: rgba(230, 233, 239, 0.9);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.stackPanel__iconBtn:hover {
|
|
border-color: rgba(255, 255, 255, 0.16);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.stackPanel__item--locked {
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.stackPanel__item--hidden .stackPanel__label {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.stackPanel__hint {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.stackPanel__sub {
|
|
font-size: 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stackPanel__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.stackPanel__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
background: rgba(0, 0, 0, 0.22);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.stackPanel__item:hover {
|
|
border-color: rgba(255, 255, 255, 0.16);
|
|
background: rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
.stackPanel__item--active {
|
|
border-color: rgba(168, 85, 247, 0.45);
|
|
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12), 0 18px 50px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.stackPanel__drag {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.stackPanel__label {
|
|
font-weight: 900;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.stackPanel__badge {
|
|
margin-left: auto;
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(168, 85, 247, 0.14);
|
|
border: 1px solid rgba(168, 85, 247, 0.25);
|
|
color: rgba(230, 233, 239, 0.92);
|
|
}
|
|
|
|
.stackLayer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2500;
|
|
background: transparent;
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.stackLayer__body {
|
|
height: 100%;
|
|
display: flex;
|
|
min-height: 0;
|
|
}
|
|
|
|
.stackLayer__card {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|