/* dom_ladder.css — CK Live DOM Ladder Styles Light and dark theme support via :root.dark class on . All DOM column widths, colours, bar charts, signal badges. */ /* ── Root variables ─────────────────────────────────────────────────────────── */ :root, [data-mantine-color-scheme="light"] { --dom-bg: #ffffff; --dom-bg-alt: #f8f9fa; --dom-border: #e5e7eb; --dom-text: #111827; --dom-text-dim: #6b7280; --dom-header-bg: #f3f4f6; --dom-last-px: #b8912a; --dom-bid-bar: rgba(37, 99, 235, 0.18); --dom-ask-bar: rgba(220, 38, 38, 0.18); --dom-bid-text: #1d4ed8; --dom-ask-text: #dc2626; --dom-pos: #16a34a; --dom-neg: #dc2626; --dom-flash: rgba(250, 204, 21, 0.35); --dom-calc-entry: rgba(16, 185, 129, 0.15); --dom-calc-stop: rgba(220, 38, 38, 0.15); --dom-calc-target: rgba(99, 102, 241, 0.15); } [data-mantine-color-scheme="dark"] { --dom-bg: #0f1117; --dom-bg-alt: #161b22; --dom-border: #30363d; --dom-text: #e6edf3; --dom-text-dim: #7d8590; --dom-header-bg: #161b22; --dom-last-px: #d4a843; --dom-bid-bar: rgba(59, 130, 246, 0.22); --dom-ask-bar: rgba(239, 68, 68, 0.22); --dom-bid-text: #60a5fa; --dom-ask-text: #f87171; --dom-pos: #34d399; --dom-neg: #f87171; --dom-flash: rgba(250, 204, 21, 0.45); --dom-calc-entry: rgba(16, 185, 129, 0.18); --dom-calc-stop: rgba(239, 68, 68, 0.18); --dom-calc-target: rgba(129, 140, 248, 0.18); } /* ── Root mount ─────────────────────────────────────────────────────────────── */ .ck-dom-root { display: flex; flex-direction: column; height: 100%; background: var(--dom-bg); color: var(--dom-text); font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace; font-size: 12px; overflow: hidden; user-select: none; } /* ── Header bar ─────────────────────────────────────────────────────────────── */ .ck-dom-header { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--dom-header-bg); border-bottom: 1px solid var(--dom-border); flex-shrink: 0; } .ck-dom-product { font-weight: 700; letter-spacing: 0.04em; font-size: 13px; } .ck-dom-last { color: var(--dom-last-px); font-weight: 600; margin-left: 4px; min-width: 72px; } .ck-dom-scrolllock, .ck-dom-detach { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--dom-text-dim); font-size: 14px; padding: 2px 4px; border-radius: 4px; line-height: 1; transition: color 0.15s; } .ck-dom-scrolllock[aria-pressed="true"] { color: #f59e0b; } .ck-dom-scrolllock:hover, .ck-dom-detach:hover { color: var(--dom-text); background: var(--dom-border); } .ck-dom-detach { margin-left: 0; } /* ── Status bar ─────────────────────────────────────────────────────────────── */ .ck-dom-status { padding: 6px 8px; font-size: 11px; color: var(--dom-text-dim); background: var(--dom-bg-alt); text-align: center; flex-shrink: 0; } /* ── Table wrapper (overflow hidden — translateY scrolling via JS) ─────────── */ .ck-dom-table-wrap { flex: 1 1 auto; overflow: hidden; position: relative; } /* ── DOM table ──────────────────────────────────────────────────────────────── */ .ck-dom-table { width: 100%; border-collapse: collapse; table-layout: fixed; will-change: transform; transition: transform 0.08s ease; } .ck-dom-table thead tr { background: var(--dom-header-bg); position: sticky; top: 0; z-index: 2; } .ck-dom-table th { padding: 2px 4px; font-size: 10px; font-weight: 600; text-align: center; color: var(--dom-text-dim); border-bottom: 1px solid var(--dom-border); white-space: nowrap; } /* Column widths */ .col-vol { width: 44px; } .col-bdelta { width: 22px; } .col-bid { width: 60px; position: relative; } .col-px { width: 68px; text-align: center; } .col-cum { width: 36px; text-align: center; } .col-ask { width: 60px; position: relative; } .col-adelta { width: 22px; } .col-bardelta { width: 36px; } .col-badge { width: 14px; } /* ── Rows ───────────────────────────────────────────────────────────────────── */ .ck-dom-row { height: 20px; border-bottom: 1px solid var(--dom-border); transition: background 0.1s; } .ck-dom-row:hover { background: var(--dom-bg-alt); cursor: pointer; } .ck-dom-row td { padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; line-height: 18px; } /* ── Price column ───────────────────────────────────────────────────────────── */ .col-px { font-weight: 500; font-size: 11.5px; color: var(--dom-text); } .col-px.last-px { color: var(--dom-last-px); font-weight: 700; background: rgba(184, 145, 42, 0.10); } [data-mantine-color-scheme="dark"] .col-px.last-px { background: rgba(212, 168, 67, 0.12); } /* ── Bid / Ask bar cells ────────────────────────────────────────────────────── */ .col-bid { text-align: right; color: var(--dom-bid-text); } .col-ask { text-align: left; color: var(--dom-ask-text); } .ck-bar { position: absolute; top: 1px; bottom: 1px; max-width: 100%; pointer-events: none; } .ck-bar-bid { right: 0; background: var(--dom-bid-bar); } .ck-bar-ask { left: 0; background: var(--dom-ask-bar); } /* ── Positive / negative colouring (delta columns) ─────────────────────────── */ .col-bdelta.pos, .col-adelta.pos { color: var(--dom-pos); } .col-bdelta.neg, .col-adelta.neg { color: var(--dom-neg); } .col-cum.pos, .col-bardelta.pos { color: var(--dom-pos); } .col-cum.neg, .col-bardelta.neg { color: var(--dom-neg); } /* ── Trade flash ────────────────────────────────────────────────────────────── */ .ck-dom-row.traded-flash { background: var(--dom-flash) !important; transition: background 0s; } /* ── Calculator row highlights ──────────────────────────────────────────────── */ .ck-dom-row.calc-entry { background: var(--dom-calc-entry); } .ck-dom-row.calc-stop { background: var(--dom-calc-stop); } .ck-dom-row.calc-target { background: var(--dom-calc-target); } /* ── Signal badges ──────────────────────────────────────────────────────────── */ .ck-sig-badge { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; } .ck-sig-bull.ck-sig-high { background: #00dc50; box-shadow: 0 0 4px #00dc50; } .ck-sig-bear.ck-sig-high { background: #f43f5e; box-shadow: 0 0 4px #f43f5e; } .ck-sig-neut.ck-sig-high { background: #facc15; box-shadow: 0 0 4px #facc15; } .ck-sig-bull.ck-sig-normal { background: #4ade80; opacity: 0.55; } .ck-sig-bear.ck-sig-normal { background: #fb7185; opacity: 0.55; } .ck-sig-neut.ck-sig-normal { background: #fde047; opacity: 0.55; } /* ── Inline Calculator panel ────────────────────────────────────────────────── */ .ck-dom-calc { flex-shrink: 0; background: var(--dom-bg-alt); border-top: 1px solid var(--dom-border); padding: 6px 8px; font-size: 11px; } .ck-calc-row1, .ck-calc-row2, .ck-calc-row3, .ck-calc-row4 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .ck-calc-row2 { flex-wrap: nowrap; gap: 8px; } .ck-calc-row2 label { display: flex; align-items: center; gap: 3px; white-space: nowrap; color: var(--dom-text-dim); } .ck-calc-row2 input { width: 72px; padding: 2px 4px; border: 1px solid var(--dom-border); border-radius: 3px; background: var(--dom-bg); color: var(--dom-text); font-size: 11px; font-family: inherit; } .ck-calc-row2 input:focus { outline: none; border-color: #6b7280; } .ck-calc-warn, .ck-calc-twarn { color: #f59e0b; font-size: 12px; } .ck-calc-label { color: var(--dom-text-dim); font-size: 10px; } .ck-calc-contracts button { background: none; border: 1px solid var(--dom-border); border-radius: 3px; color: var(--dom-text-dim); cursor: pointer; font-size: 11px; padding: 1px 6px; transition: background 0.1s, color 0.1s; } .ck-calc-contracts button.active { background: #374151; color: #f9fafb; border-color: #4b5563; } [data-mantine-color-scheme="dark"] .ck-calc-contracts button.active { background: #4b5563; color: #f9fafb; } .ck-calc-clear { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--dom-text-dim); font-size: 13px; padding: 0 4px; } .ck-calc-risk { color: var(--dom-neg); font-weight: 600; } .ck-calc-reward { color: var(--dom-pos); font-weight: 600; } .ck-calc-rr { color: var(--dom-text-dim); } .ck-calc-specs { font-size: 10px; color: var(--dom-text-dim); border-top: 1px solid var(--dom-border); padding-top: 4px; margin-top: 2px; } /* ── Scrollbar style (table wrap) ──────────────────────────────────────────── */ .ck-dom-table-wrap::-webkit-scrollbar { width: 4px; } .ck-dom-table-wrap::-webkit-scrollbar-track { background: transparent; } .ck-dom-table-wrap::-webkit-scrollbar-thumb { background: var(--dom-border); border-radius: 2px; }