/* 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 digit font — wired to numeric cells in P4 (DataTables 2.x dt-type-numeric) */ --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); } /* ---- mono digit font for numeric cells (P4) ---- `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. Digits are already tabular (theme-numeric.css); this is the mono-font polish. */ table.dataTable td.tbl-num, table.dataTable td.dt-type-numeric, table.table td.tbl-num { font-family: var(--tbl-f-mono); } /* ---- 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; }