/* sidebar.css — persistent active-trades sidebar styles * * The slot-card / slot-row / slot-chart styles live in style.css; * this file owns the *position* of the parent

only. */ /* ─── Persistent floating right-rail ───────────────────────────────── * Injected by sidebar.js into on every page that should host * the panel. position: fixed so it stays put while the user scrolls. */ #persistent-sidebar { position: fixed; /* Top edge sits at where main's content actually starts (60px header + 20px main padding-top = 80px). This box-aligns the Active Trades panel with the first content box in the middle column (the Time Range panel on /profile, the page-head on /market). */ top: 80px; right: var(--s-4, 16px); /* 300px matches the left rail on /profile for symmetry. The body.has-persistent-sidebar main padding-right is 340px (300 panel + 16 viewport margin + 24 gap) in lockstep. */ width: 300px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface-1, var(--surface)); border: 1px solid var(--rule, var(--border)); border-radius: var(--r-2, 8px); padding: var(--s-3, 12px) var(--s-4, 16px); z-index: 10; } .persistent-sidebar-popout-btn { margin-left: auto; background: transparent; color: var(--text-muted); border: 1px solid var(--rule, var(--border)); border-radius: var(--r-1, 4px); padding: 2px 8px; font-size: var(--t-micro, 11px); cursor: pointer; transition: color 0.15s var(--easeOut), border-color 0.15s var(--easeOut); } .persistent-sidebar-popout-btn:hover { color: var(--text); border-color: var(--accent); } /* When the persistent sidebar is mounted, offset main content. */ body.has-persistent-sidebar main { padding-right: 340px; /* sidebar 300px + 16px right margin + 24px gap */ } /* /market is a two-column layout that hosts the inline active-trades aside as a grid child. The page-head spans both columns at the top; the scan panel sits in column 1 and the aside in column 2 (300px). The aside is sticky inside its grid cell so the panel stays parked at the top edge as the user scrolls the scan table. The column is 300px (matching the panel) — the 24px gap is owned by gap: var(--s-5) below, so it sits between columns rather than padding the column. */ body.market-page main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head head" "scan slots"; gap: var(--s-5); align-items: start; } body.market-page #page-head { grid-area: head; } body.market-page #scan-panel { grid-area: scan; min-width: 0; } body.market-page #slots { grid-area: slots; } /* Inline aside on /market — chrome mirrors the floating #persistent-sidebar on every other authenticated page (same surface-1 ground, same hairline border, same r-2 corner, same internal padding) but it sits in the grid rather than position:fixed. position:sticky keeps the panel at the top of its cell as the scan-panel scrolls below it. */ .market-inline-slots { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface-1); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); } /* Below 1100px, fold the aside under the scan panel so the page reflows to a single column. Mobile layout is deferred — this just stops things breaking catastrophically when /market is opened on a narrow window. */ @media (max-width: 1100px) { body.market-page main { grid-template-columns: 1fr; grid-template-areas: "head" "scan" "slots"; } .market-inline-slots { position: static; max-height: none; } } .slot-name-link { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; transition: color 0.15s var(--easeOut), border-bottom-color 0.15s var(--easeOut); } .slot-name-link:hover { color: var(--accent); border-bottom-color: var(--accent); } body.active-popout { background: var(--bg); } body.active-popout .active-popout-shell { padding: var(--s-3, 12px) var(--s-4, 16px) var(--s-5, 24px); max-width: 100%; } body.active-popout #slots { background: var(--surface-1, var(--surface)); border: 1px solid var(--rule, var(--border)); border-radius: var(--r-2, 8px); padding: var(--s-3, 12px) var(--s-4, 16px); } /* ─── Mobile collapse stub ──────────────────────────────────────────── * Mobile collapse-to-toggle behaviour is deferred. Below 720px we hide * the persistent sidebar entirely so it doesn't overlap a narrow * viewport, and `body.has-persistent-sidebar main` drops its right * padding so the now-hidden sidebar doesn't leave a phantom gap. */ @media (max-width: 720px) { #persistent-sidebar { display: none; } body.has-persistent-sidebar main { padding-right: inherit; } } /* ─── Warning system on slot cards ───────────────────────────────────── * - quiet coloured pill in the slot header next to the status badge * - click the pill to toggle an expand panel under the kalman row * - expand state persists per-position in sessionStorage * - card chrome stays clean (no border tints) * * Server-side algorithm at Webapp/algorithms/warnings.js. Thresholds at * Webapp/config/warnings.js. The badge + expand DOM is built in * Webapp/public/app.js (renderWarningBadge / applyWarningToCard). */ .slot-warning-badge { margin-left: 6px; padding: 1px 8px; border-radius: 10px; border: 1px solid transparent; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; background: transparent; font-family: inherit; } .slot-warning-badge:hover { filter: brightness(1.15); } /* Three-tier warning palette. Advisory uses the soft amber ramp; warning sits between (warm orange, between amber and red); critical uses the soft red ramp. All three at the same intensity so the row stays balanced when a warning rides next to a scenario tag or a BE badge. */ .slot-warning-advisory { background: var(--amber-soft); color: var(--amber); border-color: oklch(0.82 0.13 75 / 0.40); } .slot-warning-warning { background: oklch(0.82 0.14 55 / 0.18); color: oklch(0.78 0.14 55); border-color: oklch(0.78 0.14 55 / 0.40); } .slot-warning-critical { background: var(--red-soft); color: var(--red); border-color: oklch(0.66 0.20 25 / 0.40); } /* Expand panel — sits directly under the kalman row in card flow. * Hidden by default; revealed when [data-expanded="true"]. The * empty state ([data-empty="true"]) hides the element entirely so a * card with no warnings doesn't reserve layout space. */ /* Expand panel ground uses the canonical --bg ramp via surface tokens. */ .slot-warning-expand { display: none; margin-top: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-1); background: var(--bg); border: 1px solid var(--rule); font-size: 0.78rem; line-height: 1.35; } .slot-warning-expand[data-expanded="true"]:not([data-empty="true"]) { display: block; } .slot-warning-reason { padding: 3px 0; border-bottom: 1px solid var(--rule-soft); color: var(--text); } .slot-warning-reason:last-child { border-bottom: none; } /* Reason-line text colours match their badge counterparts above. */ .slot-warning-reason-advisory { color: var(--amber); } .slot-warning-reason-warning { color: oklch(0.78 0.14 55); } .slot-warning-reason-critical { color: var(--red); } /* Sell-row badges * * Two small, quiet pills that ride alongside the recommended sell price: * * - .slot-scenario-tag : "Fast" or "MaxProfit" — algorithm-transparency * surface so the trader can see which sub-scenario * won the gp/hr auto-pick. * - .slot-be-badge : "Break Even" — appears only when the user's * never-sell-at-loss pref raised the recommended * price to post-tax breakeven. A loud-enough hint * that the long sell time is the user's pref doing * its job, not a market problem. * * Sizing matches .slot-warning-badge so the row stays balanced when both a * warning pill and a sell-row tag/badge are present. */ .slot-scenario-tag, .slot-be-badge { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 8px; border: 1px solid transparent; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } /* Subdued grey — algorithm transparency, not a state alert. */ .slot-scenario-tag { background: var(--surface-2); color: var(--text-muted); border-color: var(--rule); } /* Both scenario sub-tones use the same intensity envelope as the BE * badge below: a faint surface tint at the accent's chroma + the * accent text colour. Fast = indigo (--accent / --accent-soft); * MaxProfit = amber (--amber / --amber-soft). Balanced two-accent * vocabulary rather than two ad-hoc palettes. */ .slot-scenario-fast { background: var(--accent-soft); color: var(--accent); border-color: oklch(0.62 0.16 255 / 0.30); } .slot-scenario-max { background: var(--amber-soft); color: var(--amber); border-color: oklch(0.82 0.13 75 / 0.30); } /* Break-Even badge uses the canonical --accent-soft ramp. The trader * reads "BE floor active" as a meaningful state marker. */ .slot-be-badge { background: var(--accent-soft); color: var(--accent); border-color: oklch(0.62 0.16 255 / 0.40); } /* ─── Slot-card sell affordances ────────────────────────────────────── * * Visible affordances on the slot card: * - Min-profit-price line on the BUY/Bought row (.slot-min-price) * - Partial-sell running totals on the BUY/Bought row (.slot-partial-status) * - "at a loss" badge on the SELL row when the listed price is below * post-tax breakeven (.slot-below-min-badge) * - Active sell-price displayed on the top SELL row when * current_sell_price is set, with (was Xgp) annotation * (.slot-sell-was) for historical context * * Visual treatment is intentionally quiet. The colours borrow from the * warning palette and the BE badge palette so the affordances feel like * family. */ /* Min-profit-price — subdued grey, sits beside the qty × price. Reads as * a passive readout, not an alert; the louder "at a loss" badge handles * the alert case. */ .slot-min-price { color: var(--text-muted); font-size: 0.85em; } /* "(was Xgp)" annotation — inline historical reference on the SELL row * after a relist has shifted the displayed price away from the original * Mark-Bought-time recommendation. Same subdued treatment as * .slot-min-price so it reads as a quiet footnote, not a competing label. */ .slot-sell-was { color: var(--text-muted); font-size: 0.85em; } /* Partial-sell running totals — same subdued tone as min-price. The * trader's eye reads "5,000 sold so far at ~308gp avg" as part of the * BUY row's status, not as a separate event. */ .slot-partial-status { color: var(--text-muted); font-size: 0.85em; } /* "at a loss" badge — loud red so the trader cannot miss it. * Uses the canonical --red-soft ramp (matches .slot-warning-critical * above). Sized to match .slot-warning-badge so the row stays balanced. */ .slot-below-min-badge { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 8px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; background: var(--red-soft); color: var(--red); border: 1px solid oklch(0.66 0.20 25 / 0.40); } /* The displayed sell price switches to current_sell_price directly, * with a small `(was Xgp)` annotation when it differs from the original * Mark-Bought-time recommendation. The trader's active reference IS the * operational listed price, not a footnote. */ /* Refresh-sell-estimate affordance: a small ↻ icon (.slot-refresh-icon) * on the right edge of the SELLING row that opens a popover. The styles * live in style.css under the refresh-icon and slot-popover sections. */ /* ─── Three-section slot card layout (Predicted / Current / Trend) ──── * * Three labelled sections share a 3-column grid (gutter / low / high). * Times sit on a second row directly below the prices in the same two * columns, so "low" prices align vertically with "fill" times and * "high" prices align with "sell" times across all three sections. * * Predicted and Trend each have a chevron in the gutter that toggles * whether the timing row is shown. The chevron rotates -90° in the * collapsed state. Current has no timing row, so it carries no chevron * and never collapses. * * Color rule (applied to .slot-cell-value via the .slot-trend-* helpers): * .slot-trend-flat → white (unchanged from previous poll) * .slot-trend-good → green (price polled higher OR time got shorter) * .slot-trend-bad → red (price polled lower OR time got longer) */ .slot-card { /* Tight inner padding so the three-section stack doesn't overflow the card. */ padding: 8px 10px; gap: 2px; } /* Order row + listed-at row — the lines above the section block. */ .slot-order-row, .slot-listed-row { font-size: 0.82rem; color: var(--text); line-height: 1.4; margin-bottom: 1px; } .slot-listed-row { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 3px; } .slot-verb { color: var(--text-muted); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 5px; } /* ─── Section grid ─────────────────────────────────────────────────── */ .slot-section { display: grid; grid-template-columns: 64px 1fr 1fr; /* gutter, low, high */ grid-template-areas: "header low high" "header fill sell"; column-gap: 6px; row-gap: 0; align-items: center; border-top: 1px solid var(--rule); padding: 4px 0 5px 0; } /* Current — single grid row, no timing line, no chevron. */ .slot-section-current { grid-template-areas: "header low high"; padding: 3px 0; } /* Collapsed Predicted / Trend — drop the timing row entirely. */ .slot-section.collapsed { grid-template-areas: "header low high"; } .slot-section.collapsed .slot-cell-time { display: none; } /* ─── Section header (label + optional chevron) ────────────────────── */ .slot-section-header { grid-area: header; display: flex; align-items: center; gap: 3px; background: transparent; border: 0; color: var(--text-muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0; margin: 0; cursor: pointer; text-align: left; width: 100%; font-family: inherit; align-self: center; line-height: 1.2; } .slot-section-header:not(.slot-section-header-static):hover { color: var(--text); } .slot-section-header-static { cursor: default; /* Match the chevron's width so the static "Current" label aligns with "Predicted ▼" / "Trend ▼" horizontally. */ padding-left: 12px; } .slot-chevron { display: inline-block; width: 9px; text-align: center; color: var(--text-muted); transition: transform 120ms ease; font-size: 0.62rem; flex: 0 0 auto; } .slot-section.collapsed .slot-chevron { transform: rotate(-90deg); } .slot-section-label { flex: 1 1 auto; } /* ─── Cells ────────────────────────────────────────────────────────── */ .slot-cell { display: flex; align-items: baseline; gap: 3px; min-width: 0; font-size: 0.8rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slot-cell-low { grid-area: low; } .slot-cell-high { grid-area: high; } .slot-cell-fill { grid-area: fill; font-size: 0.72rem; } .slot-cell-sell { grid-area: sell; font-size: 0.72rem; } .slot-cell-label { color: var(--text-muted); font-size: 0.65rem; text-transform: lowercase; letter-spacing: 0.02em; flex: 0 0 auto; } .slot-cell-value { font-variant-numeric: tabular-nums; } .slot-cell-sub { color: var(--text-muted); font-size: 0.65rem; margin-left: 3px; } .slot-cell-sub-overdue { color: var(--red); } /* ─── Trend coloring ───────────────────────────────────────────────── */ /* * Trend coloring rule: * white = unchanged from the previous poll (.slot-trend-flat) * red = price polled lower OR time got longer (.slot-trend-bad) * green = price polled higher OR time got shorter (.slot-trend-good) * * Applied directly on .slot-cell-value. Predicted row always uses * .slot-trend-flat (those values don't change between polls); Current * colors the price values against the previous tick; Trend colors the * arrows + the live sell-time. */ .slot-trend-flat { color: var(--text); } .slot-trend-good { color: var(--green); } .slot-trend-bad { color: var(--red); }