2361 lines
41 KiB
CSS
2361 lines
41 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;
|
|
--surface-strong: rgba(0, 0, 0, 0.35);
|
|
--surface-soft: rgba(0, 0, 0, 0.18);
|
|
--line-soft: rgba(255, 255, 255, 0.06);
|
|
--line-base: rgba(255, 255, 255, 0.08);
|
|
--line-strong: rgba(255, 255, 255, 0.10);
|
|
--line-bold: rgba(255, 255, 255, 0.12);
|
|
--interactive-bg: rgba(255, 255, 255, 0.03);
|
|
--interactive-bg-strong: rgba(255, 255, 255, 0.06);
|
|
--interactive-bg-active: rgba(255, 255, 255, 0.08);
|
|
--interactive-border: rgba(255, 255, 255, 0.10);
|
|
--interactive-border-strong: rgba(255, 255, 255, 0.18);
|
|
--interactive-border-active: rgba(255, 255, 255, 0.22);
|
|
--field-bg: rgba(0, 0, 0, 0.20);
|
|
--overlay-surface: rgba(17, 19, 28, 0.92);
|
|
--overlay-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
|
|
--elevated-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
|
|
--backdrop: rgba(0, 0, 0, 0.6);
|
|
--accent-soft: rgba(168, 85, 247, 0.18);
|
|
--accent-border: rgba(168, 85, 247, 0.35);
|
|
--accent-hover: rgba(168, 85, 247, 0.26);
|
|
--switch-thumb-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.34), rgba(59, 130, 246, 0.22));
|
|
--switch-thumb-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
:root[data-theme='day'] {
|
|
color-scheme: light;
|
|
--bg0: #f6f2ea;
|
|
--bg1: #e5edf8;
|
|
--panel: rgba(255, 255, 255, 0.72);
|
|
--panel2: rgba(255, 255, 255, 0.54);
|
|
--border: rgba(17, 32, 54, 0.10);
|
|
--border2: rgba(17, 32, 54, 0.16);
|
|
--text: #112036;
|
|
--muted: rgba(17, 32, 54, 0.68);
|
|
--surface-strong: rgba(255, 255, 255, 0.78);
|
|
--surface-soft: rgba(255, 255, 255, 0.62);
|
|
--line-soft: rgba(17, 32, 54, 0.08);
|
|
--line-base: rgba(17, 32, 54, 0.10);
|
|
--line-strong: rgba(17, 32, 54, 0.14);
|
|
--line-bold: rgba(17, 32, 54, 0.18);
|
|
--interactive-bg: rgba(255, 255, 255, 0.68);
|
|
--interactive-bg-strong: rgba(17, 32, 54, 0.06);
|
|
--interactive-bg-active: rgba(17, 32, 54, 0.10);
|
|
--interactive-border: rgba(17, 32, 54, 0.12);
|
|
--interactive-border-strong: rgba(17, 32, 54, 0.18);
|
|
--interactive-border-active: rgba(17, 32, 54, 0.24);
|
|
--field-bg: rgba(255, 255, 255, 0.76);
|
|
--overlay-surface: rgba(255, 255, 255, 0.94);
|
|
--overlay-shadow: 0 18px 60px rgba(15, 23, 42, 0.16);
|
|
--elevated-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
|
|
--backdrop: rgba(15, 23, 42, 0.22);
|
|
--accent-soft: rgba(168, 85, 247, 0.10);
|
|
--accent-border: rgba(168, 85, 247, 0.22);
|
|
--accent-hover: rgba(168, 85, 247, 0.16);
|
|
--switch-thumb-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
|
|
--switch-thumb-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
|
|
}
|
|
|
|
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));
|
|
}
|
|
|
|
:root[data-theme='day'] body {
|
|
background: radial-gradient(1200px 700px at 18% 12%, rgba(245, 158, 11, 0.14), transparent 62%),
|
|
radial-gradient(900px 640px at 80% 18%, rgba(37, 99, 235, 0.10), transparent 58%),
|
|
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);
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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: var(--surface-strong);
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 18px;
|
|
padding: 18px;
|
|
box-shadow: var(--elevated-shadow);
|
|
}
|
|
|
|
.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 var(--line-bold);
|
|
}
|
|
|
|
.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%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loginForm__error {
|
|
color: var(--neg);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.loginForm__actions {
|
|
margin-top: 6px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.shellHeader {
|
|
background: var(--surface-strong);
|
|
border-bottom: 1px solid var(--line-strong);
|
|
padding: 10px 14px;
|
|
position: relative;
|
|
z-index: 2101;
|
|
}
|
|
|
|
.shellTop {
|
|
background: var(--surface-soft);
|
|
border-bottom: 1px solid var(--line-base);
|
|
padding: 8px 14px;
|
|
position: relative;
|
|
z-index: 2100;
|
|
}
|
|
|
|
.shellBody {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 352px 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 var(--line-soft);
|
|
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: var(--accent-soft);
|
|
border-color: var(--accent-border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.uiButton--primary:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.uiButton--ghost {
|
|
background: transparent;
|
|
border-color: var(--interactive-border);
|
|
color: var(--text);
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.uiButton--ghost:hover {
|
|
opacity: 1;
|
|
border-color: var(--interactive-border-strong);
|
|
background: var(--interactive-bg-strong);
|
|
}
|
|
|
|
.uiButton:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.tickerBar {
|
|
display: flex;
|
|
gap: 18px;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tickerBar--toolbar {
|
|
gap: 12px;
|
|
padding-right: 8px;
|
|
margin-right: 4px;
|
|
border-right: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.ticker {
|
|
display: inline-flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
letter-spacing: 0.2px;
|
|
padding: 0;
|
|
}
|
|
|
|
.ticker__label {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.ticker__pct {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.ticker--active {
|
|
padding: 5px 10px;
|
|
border-radius: 999px;
|
|
background: var(--interactive-bg-strong);
|
|
border: 1px solid var(--interactive-border);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 var(--line-bold);
|
|
}
|
|
|
|
.topNav__brandText {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.topNav__brandName {
|
|
font-size: 14px;
|
|
font-weight: 950;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.topNav__brandMeta {
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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: var(--interactive-bg-strong);
|
|
}
|
|
|
|
.topNav__link--active {
|
|
color: var(--text);
|
|
background: var(--interactive-bg-active);
|
|
}
|
|
|
|
.topNav__right {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.authStatus {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.authStatus__clock {
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
background: var(--interactive-bg);
|
|
border: 1px solid var(--interactive-border);
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--text);
|
|
}
|
|
|
|
.authStatus__user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border-radius: 12px;
|
|
background: var(--interactive-bg);
|
|
border: 1px solid var(--interactive-border);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.authStatus__userLabel {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.authStatus__userName {
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.topNav__iconBtn {
|
|
background: var(--interactive-bg);
|
|
border: 1px solid var(--interactive-border);
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topNav__iconBtn:hover {
|
|
border-color: var(--interactive-border-strong);
|
|
background: var(--interactive-bg-strong);
|
|
}
|
|
|
|
.topNav__account {
|
|
background: var(--interactive-bg);
|
|
border: 1px solid var(--interactive-border);
|
|
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: center;
|
|
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: var(--field-bg);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 10px;
|
|
padding: 9px 10px;
|
|
color: var(--text);
|
|
min-width: 160px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.inlineField {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.inlineField__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.inlineField__input {
|
|
background: var(--field-bg);
|
|
border: 1px solid var(--border2);
|
|
border-radius: 10px;
|
|
padding: 9px 10px;
|
|
color: var(--text);
|
|
min-width: 110px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.statsRow {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.stat {
|
|
min-width: 0;
|
|
}
|
|
|
|
.stat__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.stat__value {
|
|
margin-top: 4px;
|
|
font-weight: 800;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.stat__sub {
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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 var(--line-soft);
|
|
}
|
|
|
|
.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 var(--line-soft);
|
|
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 var(--interactive-border);
|
|
background: var(--interactive-bg);
|
|
color: var(--text);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chartToolBtn:hover {
|
|
border-color: var(--interactive-border-strong);
|
|
background: var(--interactive-bg-strong);
|
|
}
|
|
|
|
.chartToolBtn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.chartToolBtn--active {
|
|
background: var(--interactive-bg-active);
|
|
border-color: var(--interactive-border-active);
|
|
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: var(--overlay-surface);
|
|
border: 1px solid var(--interactive-border);
|
|
border-radius: 14px;
|
|
box-shadow: var(--overlay-shadow);
|
|
backdrop-filter: blur(14px);
|
|
overflow: hidden;
|
|
z-index: 50;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.chartToolMenu__top {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--line-base);
|
|
}
|
|
|
|
.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 var(--line-soft);
|
|
}
|
|
|
|
.chartToolMenu__sectionTitle {
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.12em;
|
|
color: var(--muted);
|
|
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: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chartToolMenuItem:hover {
|
|
background: var(--interactive-bg-strong);
|
|
}
|
|
|
|
.chartToolMenuItem__icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.chartToolMenuItem__label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: left;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.chartToolMenuItem__shortcut {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
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: var(--overlay-surface);
|
|
border: 1px solid var(--interactive-border);
|
|
border-radius: 14px;
|
|
box-shadow: var(--overlay-shadow);
|
|
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 var(--line-base);
|
|
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 var(--interactive-border);
|
|
background: transparent;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chartLayersPanel__close:hover {
|
|
border-color: var(--interactive-border-strong);
|
|
background: var(--interactive-bg-strong);
|
|
color: var(--text);
|
|
}
|
|
|
|
.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%;
|
|
outline: none;
|
|
}
|
|
|
|
.tradingChart:focus,
|
|
.tradingChart:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.chartBackdrop {
|
|
position: fixed;
|
|
top: var(--shell-top-offset, 0px);
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--backdrop);
|
|
z-index: 1999;
|
|
}
|
|
|
|
.chartCard--fullscreen {
|
|
position: fixed;
|
|
top: calc(var(--shell-top-offset, 0px) + 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;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.chartToolbar__group {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.chartToolbar__meta {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
padding-left: 6px;
|
|
text-align: left;
|
|
}
|
|
|
|
.themeSwitch {
|
|
position: relative;
|
|
width: 108px;
|
|
min-width: 108px;
|
|
border: 1px solid var(--interactive-border);
|
|
border-radius: 999px;
|
|
background: var(--interactive-bg);
|
|
display: inline-grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: center;
|
|
padding: 3px;
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
isolation: isolate;
|
|
}
|
|
|
|
.themeSwitch:hover {
|
|
border-color: var(--interactive-border-strong);
|
|
}
|
|
|
|
.themeSwitch__label {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 5px 0;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.01em;
|
|
transition: color 140ms ease;
|
|
}
|
|
|
|
.themeSwitch__thumb {
|
|
position: absolute;
|
|
inset: 3px auto 3px 3px;
|
|
width: calc(50% - 3px);
|
|
border-radius: 999px;
|
|
background: var(--switch-thumb-bg);
|
|
border: 1px solid var(--accent-border);
|
|
box-shadow: var(--switch-thumb-shadow);
|
|
transition: transform 180ms ease;
|
|
}
|
|
|
|
.themeSwitch--night .themeSwitch__thumb {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.themeSwitch--day .themeSwitch__label--day,
|
|
.themeSwitch--night .themeSwitch__label--night {
|
|
color: var(--text);
|
|
}
|
|
|
|
.uiTabs__bar {
|
|
display: flex;
|
|
gap: 10px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.botDash {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.botDash--empty {
|
|
justify-content: center;
|
|
min-height: 180px;
|
|
}
|
|
|
|
.botDash__emptyTitle {
|
|
font-weight: 900;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.botDash__note {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.botDash__layout {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 0.9fr;
|
|
gap: 12px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.botPanel {
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
background: rgba(255, 255, 255, 0.025);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.botPanel__head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.botPanel__title {
|
|
font-weight: 900;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.botPanel__empty {
|
|
padding: 8px 2px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.botGateGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.botGate {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--interactive-border);
|
|
background: var(--interactive-bg);
|
|
}
|
|
|
|
.botGate--ok {
|
|
background: rgba(34, 197, 94, 0.12);
|
|
border-color: rgba(34, 197, 94, 0.25);
|
|
}
|
|
|
|
.botGate--bad {
|
|
background: rgba(239, 68, 68, 0.12);
|
|
border-color: rgba(239, 68, 68, 0.25);
|
|
}
|
|
|
|
.botGate__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.botGate__value {
|
|
font-weight: 800;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.botFeatureList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.botFeatureRow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
padding: 7px 8px;
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.botFeatureRow__label {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.botFeatureRow__value {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-align: right;
|
|
}
|
|
|
|
.botEventList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
overflow: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.botEvent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.botEvent--decision {
|
|
border-color: rgba(34, 197, 94, 0.18);
|
|
}
|
|
|
|
.botEvent--skip {
|
|
border-color: rgba(245, 158, 11, 0.2);
|
|
}
|
|
|
|
.botEvent--error {
|
|
border-color: rgba(239, 68, 68, 0.24);
|
|
}
|
|
|
|
.botEvent__head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.botEvent__type {
|
|
font-weight: 900;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.botEvent__summary {
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.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: 13px;
|
|
}
|
|
|
|
.orderbook__toolbar {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.orderbook__toolbarRight {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.orderbookToolbarSwitch {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.orderbookToolbarSwitch__btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--interactive-border);
|
|
background: var(--interactive-bg);
|
|
color: var(--muted);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.orderbookToolbarSwitch__btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.orderbookToolbarSwitch__btn.is-active {
|
|
color: var(--text);
|
|
border-color: var(--accent-border);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.orderbook__grouping {
|
|
min-width: 118px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.orderbook__grouping .marketSelect__label {
|
|
font-size: 10px;
|
|
letter-spacing: 0.01em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.orderbook__groupingInput {
|
|
min-width: 118px;
|
|
padding: 6px 28px 6px 10px;
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
border-color: var(--interactive-border);
|
|
background: var(--interactive-bg);
|
|
color: var(--text);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.orderbook__groupingInput:hover {
|
|
border-color: var(--interactive-border-strong);
|
|
background: var(--interactive-bg-strong);
|
|
}
|
|
|
|
.orderbook__groupingInput:focus {
|
|
outline: none;
|
|
border-color: rgba(194, 159, 255, 0.28);
|
|
box-shadow: 0 0 0 3px rgba(194, 159, 255, 0.08);
|
|
}
|
|
|
|
.orderbook__header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 0.9fr 0.9fr;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
padding: 2px 2px 8px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.orderbook__header--ladder {
|
|
grid-template-columns: 0.95fr 0.8fr 0.8fr 0.95fr;
|
|
align-items: end;
|
|
}
|
|
|
|
.orderbookLadderHead__side {
|
|
grid-column: 1 / 2;
|
|
}
|
|
|
|
.orderbookLadderHead__side--right {
|
|
grid-column: 4 / 5;
|
|
text-align: right;
|
|
}
|
|
|
|
.orderbookLadderHead__price {
|
|
grid-column: 2 / 4;
|
|
text-align: center;
|
|
}
|
|
|
|
.orderbook__num {
|
|
text-align: right;
|
|
}
|
|
|
|
.orderbook__rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.orderbook__rows--ladder {
|
|
gap: 0;
|
|
}
|
|
|
|
.orderbookRow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 0.9fr 0.9fr;
|
|
gap: 10px;
|
|
padding: 2px 2px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-variant-numeric: tabular-nums;
|
|
position: relative;
|
|
overflow: hidden;
|
|
animation: orderbookRowPulse 520ms ease-out;
|
|
}
|
|
|
|
.orderbookRow > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.orderbookRow::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 1px 0;
|
|
border-radius: 4px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
transform: scaleX(var(--ob-bar-scale, 0));
|
|
transition: transform 220ms ease-out;
|
|
will-change: transform;
|
|
}
|
|
|
|
.orderbookRow--ask::after {
|
|
transform-origin: left center;
|
|
background: rgba(239, 68, 68, 0.26);
|
|
}
|
|
|
|
.orderbookRow--bid::after {
|
|
transform-origin: left center;
|
|
background: rgba(34, 197, 94, 0.26);
|
|
}
|
|
|
|
.orderbookRow__num {
|
|
text-align: right;
|
|
color: var(--muted);
|
|
}
|
|
|
|
@keyframes orderbookRowPulse {
|
|
0% {
|
|
filter: brightness(1.22);
|
|
}
|
|
100% {
|
|
filter: brightness(1);
|
|
}
|
|
}
|
|
|
|
.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 var(--line-soft);
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.orderbookMid--ladder {
|
|
display: grid;
|
|
grid-template-columns: 0.95fr 0.74fr 0.74fr 0.95fr;
|
|
align-items: baseline;
|
|
padding: 8px 2px 8px;
|
|
margin: 2px 0 4px;
|
|
}
|
|
|
|
.orderbookMid--ladder .orderbookMid__label {
|
|
grid-column: 1 / 2;
|
|
justify-self: start;
|
|
}
|
|
|
|
.orderbookMid--ladder .orderbookMid__price {
|
|
grid-column: 2 / 4;
|
|
justify-self: center;
|
|
}
|
|
|
|
.orderbookMid__price {
|
|
font-weight: 950;
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 28px;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.orderbookMid__label {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.orderbookMid--up .orderbookMid__price {
|
|
color: var(--pos);
|
|
}
|
|
|
|
.orderbookMid--down .orderbookMid__price {
|
|
color: var(--neg);
|
|
}
|
|
|
|
.orderbookPair {
|
|
display: grid;
|
|
grid-template-columns: 0.95fr 0.74fr 0.74fr 0.95fr;
|
|
gap: 6px;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.orderbookPair__price,
|
|
.orderbookPair__num {
|
|
position: relative;
|
|
padding: 1px 4px;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.orderbookPair__price {
|
|
font-weight: 800;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.orderbookPair__price--bid {
|
|
text-align: right;
|
|
color: var(--pos);
|
|
background: rgba(34, 197, 94, 0.14);
|
|
}
|
|
|
|
.orderbookPair__price--ask {
|
|
text-align: left;
|
|
color: var(--neg);
|
|
background: rgba(239, 68, 68, 0.14);
|
|
}
|
|
|
|
.orderbookPair__num {
|
|
color: var(--muted);
|
|
isolation: isolate;
|
|
font-size: 13px;
|
|
border-radius: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.orderbookPair__num--bid {
|
|
text-align: left;
|
|
}
|
|
|
|
.orderbookPair__num--ask {
|
|
text-align: right;
|
|
}
|
|
|
|
.orderbookPair__num::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
transform: scaleX(var(--ob-bar-scale, 0));
|
|
transition: transform 220ms ease-out;
|
|
}
|
|
|
|
.orderbookPair__num--bid::after {
|
|
transform-origin: right center;
|
|
background: rgba(34, 197, 94, 0.18);
|
|
}
|
|
|
|
.orderbookPair__num--ask::after {
|
|
transform-origin: left center;
|
|
background: rgba(239, 68, 68, 0.18);
|
|
}
|
|
|
|
.orderbookMeta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 2px 2px;
|
|
border-top: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.orderbookLayoutSwitch {
|
|
align-self: flex-end;
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.orderbookLayoutSwitch__btn {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 7px;
|
|
border: 1px solid var(--interactive-border);
|
|
background: var(--interactive-bg);
|
|
color: var(--muted);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.orderbookLayoutSwitch__btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.orderbookLayoutSwitch__btn.is-active {
|
|
color: var(--text);
|
|
border-color: var(--accent-border);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.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: var(--interactive-bg-strong);
|
|
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 var(--line-soft);
|
|
}
|
|
|
|
.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: var(--muted);
|
|
}
|
|
|
|
.tradeRow__price,
|
|
.tradeRow__num {
|
|
text-align: right;
|
|
}
|
|
|
|
.tradeRow__num {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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: var(--field-bg);
|
|
border: 1px solid var(--interactive-border);
|
|
border-radius: 10px;
|
|
padding: 7px 10px;
|
|
color: var(--text);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chipBtn:hover {
|
|
border-color: var(--interactive-border-strong);
|
|
}
|
|
|
|
.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 var(--interactive-border);
|
|
background: var(--field-bg);
|
|
}
|
|
|
|
.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 var(--interactive-border);
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
color: var(--muted);
|
|
font-weight: 850;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tradeTabs__btn--active {
|
|
background: var(--interactive-bg-strong);
|
|
color: var(--text);
|
|
border-color: var(--interactive-border-strong);
|
|
}
|
|
|
|
.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: var(--field-bg);
|
|
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 var(--line-soft);
|
|
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;
|
|
}
|
|
|
|
.tradeBotSummary {
|
|
margin-top: auto;
|
|
border-top: 1px solid var(--line-soft);
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.botSummaryCard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.botSummaryCard__head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.botSummaryCard__title {
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.botSummaryCard__subtitle {
|
|
margin-top: 3px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.botSummaryCard__side {
|
|
border-radius: 999px;
|
|
border: 1px solid var(--interactive-border);
|
|
background: var(--interactive-bg);
|
|
padding: 5px 10px;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.botSummaryCard__note,
|
|
.botSummaryCard__footer,
|
|
.botSummaryCard__empty,
|
|
.botSummaryCard__emptyTitle {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.botSummaryCard__emptyTitle {
|
|
font-weight: 800;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.botSummaryCard__error {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.botStateRail {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.botStateRail__node {
|
|
border-radius: 10px;
|
|
border: 1px solid var(--interactive-border);
|
|
background: var(--interactive-bg);
|
|
padding: 7px 6px;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.botStateRail__node--active {
|
|
border-color: var(--interactive-border-strong);
|
|
background: var(--interactive-bg-active);
|
|
color: var(--text);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.botStateRail__node--panic.botStateRail__node--active {
|
|
border-color: rgba(239, 68, 68, 0.35);
|
|
background: rgba(239, 68, 68, 0.15);
|
|
color: #fecaca;
|
|
}
|
|
|
|
.botSummaryStats {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px 12px;
|
|
}
|
|
|
|
.botSummaryStats__row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.botSummaryStats__label {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.botSummaryStats__value {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.botGatePills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.botGatePill {
|
|
border-radius: 999px;
|
|
border: 1px solid var(--interactive-border);
|
|
background: var(--interactive-bg);
|
|
padding: 4px 8px;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.botGatePill--ok {
|
|
border-color: rgba(34, 197, 94, 0.26);
|
|
background: rgba(34, 197, 94, 0.12);
|
|
color: #bbf7d0;
|
|
}
|
|
|
|
.botGatePill--bad {
|
|
border-color: rgba(239, 68, 68, 0.26);
|
|
background: rgba(239, 68, 68, 0.12);
|
|
color: #fecaca;
|
|
}
|
|
|
|
.botGatePill--muted {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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(3, minmax(0, 1fr));
|
|
}
|
|
}
|