1105 lines
18 KiB
CSS
1105 lines
18 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: 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: 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;
|
|
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 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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(3, minmax(0, 1fr));
|
|
}
|
|
}
|