/* 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-vol-bar: rgba(148, 163, 184, 0.18); --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-vol-bar: rgba(148, 163, 184, 0.22); --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 { 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 { color: var(--dom-text); background: var(--dom-border); } /* ── 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; } /* ── Canvas (fills remaining space after status + calc) ────────────────────── */ .ck-dom-canvas { flex: 1 1 auto; display: block; width: 100%; cursor: crosshair; touch-action: none; } /* ── Signal badges (canvas draws dots directly; these remain for any HTML fallback) ── */ .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; }