Skip to content

style(app): use the standard src/index.css #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daggerok merged 1 commit into from
Oct 7, 2026
Merged

style(app): use the standard src/index.css #65

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 41 additions & 29 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,51 +103,60 @@
html.dark .busy-overlay{background:rgba(15,23,42,.7);color:#cbd5e1}
@media (prefers-reduced-motion:reduce){.busy-spinner{animation-duration:2.4s}}


/*
* Horizontally pinned catalog columns (Use + Ticker). Sticky positioning is
* applied directly to the pinned <th>/<td> cells (see .catalog-sticky-col
* below) -- never to a wrapper nested inside an otherwise-static cell. A
* sticky element can't move past the bounds of its own containing block; if
* that block were a static parent cell instead of the cell itself, the pin
* would silently vanish once the row scrolled past the viewport edge. Verify
* by actually scrolling all the way to the right, not just by reading this
* CSS.
* Horizontal pinning for the catalog table: the Use checkbox and the
* Ticker stay visible while the remaining columns (including the row
* number) move horizontally. `position:sticky` is applied directly to the
* `th`/`td` — NOT to a nested wrapper. A sticky element can never move
* past the bounds of its own containing block, so a sticky *child* inside
* a plain `position:static` cell stops being visible the moment that
* cell's own (unscrolled) position scrolls past the viewport edge: the pin
* silently stops working exactly when it matters most. The same direct-cell
* rule pins the Watchlist Ticker column at the left edge.
*
* The colors are this repo's own Tailwind tokens, pre-blended to solid
* values: a sticky cell repaints on top of whatever column has scrolled
* behind it, so a translucent fill (this repo's `.selected-row` uses
* rgba(30,64,175,.22) in dark mode) would let that column's text show
* through. Base #172033 = slate-800/50 over slate-900, hover #1f2a3d =
* slate-700/30 over that, selected #19274e = rgba(30,64,175,.22) over
* that; light-mode #f8fafc / #eff6ff are already opaque.
*/
#table-scroll table{min-width:max-content;border-collapse:separate;border-spacing:0;isolation:isolate}
#table-scroll table{border-collapse:separate;border-spacing:0;isolation:isolate}
#table-scroll tbody{position:relative;z-index:0}
#table-scroll tbody tr{position:relative;z-index:0}
#table-scroll .catalog-sticky-col{position:sticky;background:#fff;background-clip:padding-box}
#table-scroll thead .catalog-sticky-col{top:0;z-index:30;background:#f8fafc}
#table-scroll tbody .catalog-sticky-col{z-index:20}
#table-scroll .catalog-sticky-use{left:0;width:5rem;min-width:5rem}
#table-scroll .catalog-sticky-ticker{left:5rem;width:7rem;min-width:7rem;box-shadow:4px 0 6px -6px rgba(15,23,42,.7)}
.dark #table-scroll .catalog-sticky-col{background:#162032}
.dark #table-scroll thead .catalog-sticky-col{background:#0f172a}
#table-scroll tbody tr:hover .catalog-sticky-col{background:#f8fafc}
#table-scroll tbody tr.selected-row .catalog-sticky-col{background:#eff6ff}
.dark #table-scroll tbody tr:hover .catalog-sticky-col{background:#1f2a3c}
.dark #table-scroll tbody tr.selected-row .catalog-sticky-col{background:#18274e}

/* Horizontally pinned Watchlist Ticker column at the left edge.
Same opaque-background + z-index discipline as the catalog pins so
scrolled cells never bleed through while scrolling horizontally. */
#table-scroll .catalog-sticky-ticker{left:5rem;width:6rem;min-width:6rem;box-shadow:4px 0 6px -6px rgba(15,23,42,.7)}
/*
* Watchlist Ticker: the first data column there holds an exchange ticker
* for equities but a CUSIP/ISIN (or, for a few private/crypto positions,
* a longer provider code) for bonds and cash, so the pin gets a fixed
* width with defensive truncation instead of a ticker-sized column.
*/
#table-scroll .watchlist-sticky-col{position:sticky;background:#fff;background-clip:padding-box}
#table-scroll thead .watchlist-sticky-col{top:0;z-index:30;background:#f8fafc}
#table-scroll tbody .watchlist-sticky-col{z-index:20}
#table-scroll .watchlist-sticky-ticker{left:0;min-width:6rem;box-shadow:4px 0 6px -6px rgba(15,23,42,.7)}
.dark #table-scroll .watchlist-sticky-col{background:#162032}
.dark #table-scroll thead .watchlist-sticky-col{background:#0f172a}
#table-scroll tbody tr:hover .watchlist-sticky-col{background:#f8fafc}
.dark #table-scroll tbody tr:hover .watchlist-sticky-col{background:#1f2a3c}
#table-scroll .watchlist-sticky-ticker{left:0;width:10rem;min-width:10rem;max-width:10rem;overflow:hidden;text-overflow:ellipsis;box-shadow:4px 0 6px -6px rgba(15,23,42,.7)}
.dark #table-scroll .catalog-sticky-col,.dark #table-scroll .watchlist-sticky-col{background:#172033}
.dark #table-scroll thead .catalog-sticky-col,.dark #table-scroll thead .watchlist-sticky-col{background:#0f172a}
#table-scroll tbody tr:hover .catalog-sticky-col,#table-scroll tbody tr:hover .watchlist-sticky-col{background:#f8fafc}
#table-scroll tbody tr.selected-row .catalog-sticky-col{background:#eff6ff}
.dark #table-scroll tbody tr:hover .catalog-sticky-col,.dark #table-scroll tbody tr:hover .watchlist-sticky-col{background:#1f2a3d}
.dark #table-scroll tbody tr.selected-row .catalog-sticky-col{background:#19274e}

/* Detail navigation expands into place after an ETF is selected. */
main.space-y-6 > #selected-tabs-panel{margin-top:1.5rem;padding-top:1rem;padding-bottom:1rem;border-color:rgb(226 232 240)}
.dark main.space-y-6 > #selected-tabs-panel{border-color:rgb(51 65 85)}

/* Blacklist manager panel: same smooth expand/collapse contract as the
detail nav above (max-height is set inline by JS from scrollHeight
since the chip list, unlike the detail tabs, has no bounded height). */
/*
* Blacklist manager: same smooth expand/collapse contract as the detail
* nav above. Its max-height is set inline by JS from scrollHeight, not by
* a fixed rem value, because the chip list (unlike the detail tabs) has no
* bounded height.
*/
main.space-y-6 > #blacklist-panel{max-height:0;margin-top:0;overflow:hidden;opacity:0;transform:translateY(-10px);padding-top:0;padding-bottom:0;border-color:transparent;transition:max-height .32s ease,margin-top .32s ease,padding .32s ease,opacity .22s ease,transform .32s ease,border-color .22s ease}
main.space-y-6 > #blacklist-panel.is-visible{margin-top:1.5rem;padding-top:1rem;padding-bottom:1rem;opacity:1;transform:translateY(0);border-color:rgb(226 232 240)}
.dark main.space-y-6 > #blacklist-panel.is-visible{border-color:rgb(51 65 85)}
Expand Down Expand Up @@ -297,3 +306,6 @@
box-shadow: 0 12px 30px rgb(15 23 42 / .2);
}
.dark #app-summary { background: #0f172a; color: #cbd5e1; border-color: #475569; }

/* WisdomTree only: 24 columns must keep their content width (the table scrolls horizontally) */
#table-scroll table{min-width:max-content}
Loading