/* table-skin.css — Modern DataTable skin (2026-07-14). ------------------------------------------------------------------ The "Modern" table look & typography from the signed-off Summary-revamp mock (visual source of truth: doc/summary-tab-mock-tables.html). Plan: doc/atweb-table-skin-plan.md. USER-SELECTABLE — Modern vs Classic: • Every rule is gated by html[data-table-skin="modern"] (the attribute is set before paint by the FOUC script in fragments/header/header-common.html and toggled by assets/js/table-skin-toggle.js). Attribute absent or "classic" ⇒ the app renders exactly as before this file existed. • Default is MODERN (inverted vs the theme toggle): a first-time visitor with no saved key gets the modern look; anyone can switch back to Classic from the Look & Feel hub (/setting/appearance) or the in-table quick toggle. P1 SCOPE — Portfolio V2 only: • Rules are additionally scoped to body.tbl-skin-scope , a class present (in P1) only on trading/portfolio-v2.html's . It lives on (not the table container) so the FixedHeader / FixedColumns clones the DataTables plugins append to are still matched. • P3 (app-wide) removes ".tbl-skin-scope" from the selectors below — one mechanical change, no per-table logic. LOAD ORDER: linked LAST in fragments/header/style-css.html, AFTER modernize.css (which styles `table.dataTable tbody td` and was previously the last sheet). Combined with the +2 selectors of the scope prefix, these rules win the cascade over modernize.css, theme-tables.css, table.css and per-page CSS at equal specificity — so we avoid !important except where an existing !important must be beaten (the pastel band classes; see the P2 section). Self-sufficient tokens: --tbl-* are defined here (light :root + dark override) and do NOT depend on the page-scoped --sp-* (portfolio only) or --atn-* (chrome) token sets. ================================================================== */ /* ---------------------------------------------------------------- * * Tokens — light (default) * * ---------------------------------------------------------------- */ :root { --tbl-f-sans: Verdana, Geneva, "DejaVu Sans", sans-serif; /* Mono font — CODE and RAW PAYLOAD only. Currently unreferenced, on purpose: as of 2026-07-27 nothing in the app renders a *value* in a coding font, because they all mark the zero (dotted in Cascadia, slashed in Consolas) and users read the mark as an 8. The five screens that used to reach for this token via var(--tbl-f-mono, …) — activity/search, instrument/search, setting/general, setting/security, setting/my-proxies — now use --tbl-f-sans for their ids, IPs, times and amounts. Kept defined so a future code/JSON block has a correct token to use. Do NOT wire it to anything a user reads as a number. See the .tbl-num rule below and doc/atweb-table-skin-plan.md §4. */ --tbl-f-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; --tbl-surface: #ffffff; --tbl-surface-2: #f8fafc; --tbl-surface-3: #f1f4f9; --tbl-hover: rgba(15, 23, 42, .045); --tbl-border: #e5e7eb; --tbl-border-strong: #d1d5db; --tbl-divider: #eef0f3; --tbl-text: #0f172a; --tbl-text-muted: #64748b; --tbl-text-faint: #94a3b8; --tbl-pos: #15803d; --tbl-neg: #b91c1c; /* band-group tints (P2) */ --tbl-accent: #1d4ed8; --tbl-accent-bg: #eff6ff; --tbl-warning: #b45309; --tbl-warning-bg: #fffbeb; --tbl-pos-bg: #ecfdf5; --tbl-cat-2: #0891b2; /* teal — "day" / identifier-adjacent group */ --tbl-cat-3: #a855f7; /* violet — "margin" group */ } /* ---------------------------------------------------------------- * * Tokens — dark (mirrors the summary-panels dark palette) * * ---------------------------------------------------------------- */ [data-theme="dark"] { --tbl-surface: #11151c; --tbl-surface-2: #161b25; --tbl-surface-3: #1c2230; --tbl-hover: rgba(231, 234, 240, .05); --tbl-border: #232a36; --tbl-border-strong: #2f3744; --tbl-divider: #232a36; --tbl-text: #e7eaf0; --tbl-text-muted: #8a93a3; --tbl-text-faint: #5f6776; --tbl-pos: #34d399; --tbl-neg: #f87171; --tbl-accent: #60a5fa; --tbl-accent-bg: #0e1d36; --tbl-warning: #fbbf24; --tbl-warning-bg: #2a1c08; --tbl-pos-bg: #04231a; --tbl-cat-2: #22b8cf; --tbl-cat-3: #c084fc; } /* ---------------------------------------------------------------- * * Density / text size (theme-independent) * * ---------------------------------------------------------------- * * User-selectable via the Look & Feel hub → data-table-size on * (compact | default | comfortable), set pre-paint by the * FOUC block in header-common.html and driven by table-skin-toggle.js. * DEFAULT = 13px body — the comfortable floor for all-day (8h) viewing * with Verdana. Only the Modern skin consumes these vars, so the * control pairs with the Modern table style. * Body size drives header + padding proportionally so the row rhythm * scales, not just the glyphs. */ :root { --tbl-fs-body: 13px; /* Default */ --tbl-fs-head: 9.5px; --tbl-pad-y: 4px; --tbl-pad-x: 8px; } html[data-table-size="compact"] { --tbl-fs-body: 12px; /* fit more rows; density-first */ --tbl-fs-head: 9px; --tbl-pad-y: 3px; --tbl-pad-x: 8px; } html[data-table-size="comfortable"] { --tbl-fs-body: 14px; /* least eye-strain; fewer rows on screen */ --tbl-fs-head: 10px; --tbl-pad-y: 6px; --tbl-pad-x: 9px; } /* ================================================================ * * MODERN SKIN * * Scope prefix = html[data-table-skin="modern"] * * (uses CSS nesting, as theme-tables.css does) * * * * P3 (app-wide): the P1 dev-sequencing guard `body.tbl-skin-scope` * * has been dropped from this prefix, so the Modern skin now applies * * to EVERY table when the user has Modern selected. To re-narrow to * * portfolio-v2 only, re-insert `body.tbl-skin-scope` here (and in * * the quick-toggle block at the bottom). The body class itself is * * still emitted on portfolio-v2 (harmless). * * ================================================================ */ html[data-table-skin="modern"] { /* ---- table shell: sans body, compact rhythm ---- */ table.dataTable, table.table { font-family: var(--tbl-f-sans); font-size: var(--tbl-fs-body); color: var(--tbl-text); } /* ---- header row: small UPPERCASE, muted, tracked (scales w/ density) ---- */ table.dataTable thead th, table.dataTable thead td, table.table thead th, table.table thead td { font-size: var(--tbl-fs-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tbl-text-muted); padding: calc(var(--tbl-pad-y) + 1px) var(--tbl-pad-x); } /* ---- body + foot cells: compact, density-driven ---- */ table.dataTable tbody td, table.dataTable tbody th, table.table tbody td, table.table tbody th { padding: var(--tbl-pad-y) var(--tbl-pad-x); } table.dataTable tfoot td, table.dataTable tfoot th, table.table tfoot td, table.table tfoot th { padding: calc(var(--tbl-pad-y) + 1px) var(--tbl-pad-x); font-weight: 700; background-color: var(--tbl-surface-2); } /* ---- borders: soften to a hairline divider tone ---- * We retint the divider borders the existing sheets already paint (theme-tables.css .table-clean bottom dividers, and the summary tables' table-bordered grid) rather than re-declaring border presence — least conflict, faithful "hairline" feel from the mock. */ table.dataTable tbody td, table.dataTable tbody th, table.table tbody td, table.table tbody th { border-color: var(--tbl-divider); } /* header underline a touch stronger than the row dividers */ table.dataTable thead th, table.dataTable thead td, table.table thead th, table.table thead td { border-color: var(--tbl-border); } table.dataTable tfoot td, table.dataTable tfoot th, table.table tfoot td, table.table tfoot th { border-color: var(--tbl-border); } /* ---- hover row (mock: hover instead of loud stripes) ---- */ table.dataTable tbody tr:hover, table.dataTable tbody tr:hover > td, table.dataTable tbody tr:hover > th, table.table tbody tr:hover, table.table-clean tbody tr:hover { background-color: var(--tbl-hover); } /* ---- optional P&L heat shading (opt-in via render callbacks) ---- */ table td.heat-pos { background-color: color-mix(in srgb, var(--tbl-pos) 12%, transparent); } table td.heat-neg { background-color: color-mix(in srgb, var(--tbl-neg) 12%, transparent); } /* ---- numeric cells keep the table's SANS font (P4 revision) ---- `tbl-num` is stamped by the central hook in data-table-defaults.js (the fallback); `dt-type-numeric` is what a future DataTables 2.x auto-stamps — styling both means the v2 upgrade needs no CSS change here. These cells used to take var(--tbl-f-mono). Reverted: every mainstream coding font decorates its zero, so a quantity like "1 lot (30)" rendered with a marked-up 0 that traders misread as an 8 — while the neighbouring Id / Trd Acc / Update Time columns (string-typed, so never stamped) showed a plain 0. Measured in headless Chromium on Windows: the stack resolved to Cascadia Mono → DOTTED zero; without Cascadia installed it falls to Consolas → SLASHED zero. There is no OpenType feature that turns either off, so font choice is the only lever. Digit alignment — the actual reason numeric cells were singled out — comes from font-variant-numeric: tabular-nums (theme-numeric.css), not from the mono face, so columns stay anchored on every tick without it. Declared explicitly rather than deleted so a numeric cell can never inherit a decorated-zero face from elsewhere. Do NOT reintroduce a mono font here. var(--tbl-f-mono) is still correct for identifier text (IP addresses, API keys, order ids) where a marked zero disambiguates 0 from O. */ table.dataTable td.tbl-num, table.dataTable td.dt-type-numeric, table.table td.tbl-num { font-family: var(--tbl-f-sans); } /* ---- DataTables wrapper chrome (v1.13 class names; P4's v2 hop renames these to .dt-container etc. — revisit then) ---- */ .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length { font-size: 10.5px; color: var(--tbl-text-muted); } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { font-family: var(--tbl-f-sans); font-size: 10.5px; border: 1px solid var(--tbl-border); border-radius: 6px; padding: 3px 8px; } /* export / action button row (buttons extension) */ .dt-buttons .dt-button { font-size: 10.5px; border-radius: 6px; } /* ---- FixedHeader floating clone: same header treatment ---- The clone is appended to (hence the body-level scope) and carries the same thead class hooks. Style by class, never position. */ table.fixedHeader-floating thead th, table.fixedHeader-floating thead td { font-size: var(--tbl-fs-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tbl-text-muted); padding: calc(var(--tbl-pad-y) + 1px) var(--tbl-pad-x); } /* ================================================================ * * P2 — Band-header re-map * * ---------------------------------------------------------------- * * The summary tables (accSumTable / symbolSumTable) group columns * under a band carrying a legacy pastel class. Re-skin * each band to the mock's token TINT (dark-safe via color-mix), and * retint the P3.1 leftmost accent rail to match so band + rail agree. * * Group → class → mock band (fragments/portfolio/summary.html): * Account/Symbol color-identifier → neutral surface * Position [NET] color-highlight(-low) → accent (blue) * Margin color-lavender → violet (cat-3) * Orders color-old-lace → warning (amber) * Holdings color-mint-green → positive (green) * Position [DAY] color-azure → teal (cat-2) * * !important is required on background/color to beat the existing * !important band rules (theme-tables.css P3.1 + theme-colors.css). * Selectors are class-based, so the body-appended FixedHeader clones * (table.fixedHeader-floating, which keep the color-* classes) are * covered by the same rules — no position-specific selectors. */ /* — header band: background + label colour — */ table thead th.color-identifier { background-color: var(--tbl-surface-3) !important; color: var(--tbl-text-muted) !important; } table thead th.color-highlight, table thead th.color-highlight-low { background-color: var(--tbl-accent-bg) !important; color: var(--tbl-accent) !important; } table thead th.color-lavender { background-color: color-mix(in srgb, var(--tbl-cat-3) 12%, transparent) !important; color: var(--tbl-cat-3) !important; } table thead th.color-old-lace { background-color: var(--tbl-warning-bg) !important; color: var(--tbl-warning) !important; } table thead th.color-mint-green { background-color: var(--tbl-pos-bg) !important; color: var(--tbl-pos) !important; } table thead th.color-azure { background-color: color-mix(in srgb, var(--tbl-cat-2) 12%, transparent) !important; color: var(--tbl-cat-2) !important; } /* — leftmost accent rail retint (P3.1 sets the width; we only recolour). border-left-color on every color-X cell is harmless where P3.1 drew no rail (no border-left-style), and recolours the ones it did. Higher specificity than P3.1's rail rules, so no !important needed. — */ table :is(thead, tbody, tfoot) :is(th, td).color-highlight, table :is(thead, tbody, tfoot) :is(th, td).color-highlight-low { border-left-color: var(--tbl-accent); } table :is(thead, tbody, tfoot) :is(th, td).color-lavender { border-left-color: var(--tbl-cat-3); } table :is(thead, tbody, tfoot) :is(th, td).color-old-lace { border-left-color: var(--tbl-warning); } table :is(thead, tbody, tfoot) :is(th, td).color-mint-green { border-left-color: var(--tbl-pos); } table :is(thead, tbody, tfoot) :is(th, td).color-azure { border-left-color: var(--tbl-cat-2); } } /* ================================================================ * * Quick-toggle chrome — the shared table-card header button * * (fragments/table/table-card.html). * * UNGATED by data-table-skin: it must be visible + styled in BOTH * * Modern and Classic so a Classic user can switch INTO Modern. * * P3 (app-wide): the P1 `body.tbl-skin-scope` visibility guard has * * been dropped, so the toggle shows on every headered table-card. * * (The portfolio-v2 in-place toggle uses .btn styling, not this.) * * ================================================================ */ .tbl-skin-quick { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 16px; right: 46px; /* sits left of .card-header-right (maximize) */ width: 26px; height: 26px; padding: 0; border: 1px solid var(--tbl-border); border-radius: 6px; background: transparent; color: var(--tbl-text-muted); cursor: pointer; transition: color .13s, border-color .13s, background-color .13s; z-index: 1; } .tbl-skin-quick:hover { color: var(--tbl-text); border-color: var(--tbl-border-strong); background-color: var(--tbl-hover); } .tbl-skin-quick > i { font-size: 14px; line-height: 1; }