becomes a self-contained card. Each | becomes a row
with the label (via ::before from data-label) on the left and the
value on the right.
═════════════════════════════════════════════════════════════════ */
#positions-table, #positions-table thead, #positions-table tbody,
#positions-table tr, #positions-table td,
#perpair-table, #perpair-table thead, #perpair-table tbody, #perpair-table tfoot,
#perpair-table tr, #perpair-table td,
#cycles-table, #cycles-table thead, #cycles-table tbody,
#cycles-table tr, #cycles-table td,
#signals-table, #signals-table thead, #signals-table tbody,
#signals-table tr, #signals-table td {
display: block;
width: 100%;
box-sizing: border-box;
}
#positions-table thead,
#perpair-table thead,
#cycles-table thead,
#signals-table thead { display: none; }
/* Each row = a card */
#positions-table tbody tr,
#perpair-table tbody tr,
#perpair-table tfoot tr,
#cycles-table tbody tr.expandable,
#signals-table tbody tr {
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-card);
padding: 12px 14px;
margin-bottom: 8px;
}
/* Each cell = label-on-left, value-on-right, baseline aligned. flex-wrap
is enabled so a sub-line (e.g., "1 closed · 1 open" under Trades, or
"live · vs $X" under live trade PnL) can take its own row below the
headline value without compressing label/value widths. */
#positions-table tbody td,
#perpair-table tbody td,
#perpair-table tfoot td,
#cycles-table tbody td,
#signals-table tbody td {
padding: 5px 0;
border: none;
text-align: left !important;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 4px 12px;
font-size: 12.5px;
line-height: 1.4;
color: var(--amber);
}
/* Mobile: preserve PnL up/dn coloring (overrides the amber default above).
Without these, mobile card cells inherit amber and lose the green/red
PnL signal that desktop carries via td.up / td.dn. */
#positions-table tbody td.up,
#perpair-table tbody td.up,
#perpair-table tfoot td.up,
#cycles-table tbody td.up,
#signals-table tbody td.up { color: var(--green); }
#positions-table tbody td.dn,
#perpair-table tbody td.dn,
#perpair-table tfoot td.dn,
#cycles-table tbody td.dn,
#signals-table tbody td.dn { color: var(--red); }
/* Generic sub-line behavior in mobile card cells — takes its own
full-width row below the headline value. */
#positions-table tbody td .sub,
#perpair-table tbody td .sub,
#perpair-table tfoot td .sub,
#cycles-table tbody td .sub,
#signals-table tbody td .sub {
flex-basis: 100%;
width: 100%;
display: block;
text-align: right;
color: var(--grey-light);
font-size: 10px;
font-weight: 500;
margin-top: 0;
}
/* Generic label rendering — driven by data-label attr */
td[data-label]::before {
content: attr(data-label);
color: var(--grey-light);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 600;
flex: 0 0 auto;
line-height: 1.55;
}
/* First cell in each card = title (symbol / date) — no label, larger, amber */
#positions-table tbody tr td:first-child,
#perpair-table tbody tr td:first-child,
#perpair-table tfoot tr td:first-child,
#signals-table tbody tr td:first-child {
font-size: 15px;
font-weight: 700;
color: var(--amber-bright) !important;
padding: 0 0 9px 0;
margin-bottom: 7px;
border-bottom: 1px solid var(--border);
display: block;
}
/* Active Positions: FLAT row (colspan>1) renders centered, no label */
#positions-table tbody td[colspan] {
text-align: center !important;
color: var(--grey);
font-style: italic;
padding: 8px 0;
display: block;
}
#positions-table tbody td[colspan]::before { content: none; }
/* Per-Pair: ensure value-side preserves its sub-line ($X closed · $Y open) */
#perpair-table tbody td .sub,
#perpair-table tfoot td .sub {
text-align: right;
display: block;
width: 100%;
}
/* Lifetime P&L cell flex-wraps so sub-line drops below the headline */
#perpair-table tbody td:nth-child(3),
#perpair-table tfoot td:nth-child(3) {
flex-wrap: wrap;
}
#perpair-table tbody td:nth-child(3) > *:not(::before):not(.sub),
#perpair-table tfoot td:nth-child(3) > *:not(::before):not(.sub) {
text-align: right;
}
/* Per-Pair TOTAL footer: accent border + slight tint */
#perpair-table tfoot tr {
border-color: var(--amber-dim);
background: rgba(255,153,51,0.05);
margin-top: 10px;
}
#perpair-table tfoot tr td:first-child {
color: var(--white) !important;
letter-spacing: 1.2px;
}
/* ─── Trading Days (cycles.html) cards ───────────────────────────── */
/* Hide the expand-arrow column on mobile; date row gets ::after indicator */
#cycles-table tbody tr.expandable td.expand-arrow { display: none; }
#cycles-table tbody tr.expandable td.sym {
/* Date becomes the card title with an expand chevron on the right */
font-size: 15px;
font-weight: 700;
color: var(--amber-bright) !important;
padding: 0 0 9px 0;
margin-bottom: 7px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
#cycles-table tbody tr.expandable td.sym::after {
content: "▸";
color: var(--amber);
font-size: 13px;
transition: transform 0.15s ease;
}
#cycles-table tbody tr.expandable.expanded td.sym::after { content: "▾"; }
/* Drill-down row: stack details vertically (was 3-col grid on desktop) */
#cycles-table tbody tr.cycle-detail-row {
border: none;
background: transparent;
padding: 0;
margin: -4px 0 10px 0;
}
#cycles-table tbody tr.cycle-detail-row > td {
padding: 0;
background: transparent;
border: none;
display: block;
}
.cycle-detail {
padding: 6px 0 0 0 !important;
background: transparent !important;
border-top: none !important;
}
.cycle-detail .detail-grid {
display: flex !important;
flex-direction: column;
overflow: visible !important;
gap: 8px !important;
background: transparent !important;
}
.cycle-detail .detail-cell {
min-width: 0 !important;
background: var(--bg-panel) !important;
padding: 10px 12px !important;
border: 1px solid var(--border) !important;
border-radius: 4px;
}
.cycle-detail .detail-cell .pair-id {
font-size: 14px;
color: var(--amber-bright);
padding-bottom: 5px;
border-bottom: 1px solid var(--border);
margin-bottom: 6px;
}
.cycle-detail .detail-cell .line {
padding: 3px 0;
}
/* ─── Recent Activity (stays a table on mobile per CEO).
Desktop CSS sets `.cycles-table th.pair-col { width: 18% }`. With
table-layout: fixed that gave 3 × 18% = 54% to pair cols, leaving
only ~15% (~54px on 360px viewport) for Date / Δ% / NAV After.
"NAV After" header (~52px at 10px font) + padding overflowed the
column → text-overflow:ellipsis clipped it to "NAV Aft…".
Fix: explicit per-column widths via :nth-child (higher specificity
than `.pair-col` due to the #id), and allow header text to wrap
to two lines so "Δ% vs prior" / "NAV After" fit cleanly. */
#recent-cycles-table {
font-size: 10px;
table-layout: fixed;
width: 100%;
}
#recent-cycles-table th {
padding: 4px 2px;
white-space: normal; /* allow header wrap (e.g., "NAV / After") */
line-height: 1.15;
vertical-align: bottom;
font-size: 9.5px;
}
#recent-cycles-table td {
padding: 5px 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#recent-cycles-table td.sym { font-size: 10px; }
/* Balanced widths — pair badges get breathable room, no big gap before NAV.
Sum = 100%. Tuned for 360-414px viewports. */
#recent-cycles-table th:nth-child(1),
#recent-cycles-table td:nth-child(1) { width: 19%; } /* Date */
#recent-cycles-table th:nth-child(2),
#recent-cycles-table td:nth-child(2),
#recent-cycles-table th:nth-child(3),
#recent-cycles-table td:nth-child(3),
#recent-cycles-table th:nth-child(4),
#recent-cycles-table td:nth-child(4) {
width: 16%; /* BTC / ETH / SOL — aéré */
padding: 5px 2px;
}
#recent-cycles-table th:nth-child(5),
#recent-cycles-table td:nth-child(5) { width: 14%; } /* Δ% vs prior (header wraps) */
#recent-cycles-table th:nth-child(6),
#recent-cycles-table td:nth-child(6) { width: 19%; } /* NAV After — just enough */
#recent-cycles-table .action-badge {
font-size: 8.5px;
padding: 1px 3px;
letter-spacing: 0.2px;
}
/* ─── Side cell: live-dot + direction text wrapped in one span so they
stay adjacent on the right side of the card row (otherwise flex
space-between scatters them apart). */
#positions-table tbody td .side-value {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
}
#positions-table tbody td .side-value .live-dot { margin: 0; }
/* ─── Pair detail: position-card 2-col, position-grid stacked ─────── */
.position-card { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px; }
.position-card .field .val { font-size: 14px; }
.position-grid { grid-template-columns: 1fr; gap: 1px; }
/* ─── Footer: stacked, smaller ────────────────────────────────────── */
.footer {
flex-direction: column;
height: auto;
padding: 6px 10px;
gap: 2px;
align-items: flex-start;
font-size: 9.5px;
}
}
|