/* ============================================================ MyStonks — "Atelier" StonkBoard (the standalone full-screen wall board) ------------------------------------------------------------ Ported from StonkBoardAtelier.jsx (the `.sba` block) and adapted: - scoped under `.sba` - colors read from :root tokens (tokens.css), so the graphite dark theme flips automatically via — the prototype's hand-written .sba.dark overrides are unnecessary here. - the prototype's fixed 1920x1080 canvas is dropped; the board is fluid and fills the viewport, with an auto-fill tile grid that reflows by width (container queries). The board keeps jQuery + ApexCharts (its live refresh engine); this sheet only owns presentation. Bootstrap is not loaded on the board. ============================================================ */ .sba, .sba *, .sba *::before, .sba *::after { box-sizing: border-box; } html.sba-root, body.sba-body { margin: 0; padding: 0; } body.sba-body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } .sba { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--paper); /* ambient field — Tron grid / FutureStonk glow; none in light themes */ background-image: var(--app-bg-image); background-size: var(--app-bg-size, auto); background-attachment: fixed; color: var(--ink); font-family: var(--font-ui); container-type: inline-size; } .sba .serif { font-family: var(--font-serif); } .sba .num { font-variant-numeric: tabular-nums; } .sba a { text-decoration: none; color: inherit; } /* ---- top bar ---- */ .sba .top { display: flex; align-items: center; gap: 18px; padding: 16px 30px 12px; flex-wrap: wrap; row-gap: 11px; } .sba .top .brand-logo { display: inline-flex; align-items: center; line-height: 0; } .sba .top .brand-logo img { height: 30px; width: auto; display: block; } .sba .top .brand-logo .bl-dark { display: none; } /* dark languages (graphite dark / Slate / Tron / FutureStonk) show the white mark */ html[data-theme="dark"] .sba .top .brand-logo .bl-light, html[data-theme="slate"] .sba .top .brand-logo .bl-light, html[data-theme="tron"] .sba .top .brand-logo .bl-light, html[data-theme="future"] .sba .top .brand-logo .bl-light { display: none; } html[data-theme="dark"] .sba .top .brand-logo .bl-dark, html[data-theme="slate"] .sba .top .brand-logo .bl-dark, html[data-theme="tron"] .sba .top .brand-logo .bl-dark, html[data-theme="future"] .sba .top .brand-logo .bl-dark { display: block; } .sba .psel { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--card); padding: 8px 15px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; } .sba .right { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 13px; } .sba .vsel { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--card); padding: 6px 13px; border-radius: 9px; color: var(--ink); font-weight: 500; } .sba .vsel select { border: none; background: none; font-family: inherit; font-size: 13px; color: var(--ink); outline: none; cursor: pointer; } /* premium design-language quick-switch (mirrors the app shell picker) */ .sba .theme-pick { position: relative; margin-left: auto; } .sba .theme-pick .tp-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-md); color: var(--muted); cursor: pointer; transition: background var(--t-fast); } .sba .theme-pick .tp-btn:hover { background: var(--gainBg); color: var(--gain); } .sba .theme-pick .theme-menu { position: absolute; top: 48px; right: 0; width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lift); z-index: 200; overflow: hidden; display: none; padding: 6px; } .sba .theme-pick.open .theme-menu { display: block; } .sba .theme-pick .tm-head { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px 6px; } .sba .theme-pick .tm-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: none; border: none; border-radius: var(--r-md); padding: 9px 10px; color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 500; transition: background var(--t-fast); } .sba .theme-pick .tm-opt:hover { background: var(--gainBg); } .sba .theme-pick .tm-sw { width: 18px; height: 18px; border-radius: var(--r-sm); flex: none; border: 1px solid var(--line); } .sba .theme-pick .tm-name { flex: 1; } .sba .theme-pick .tm-check { color: var(--accent); flex: none; opacity: 0; } .sba .theme-pick .tm-opt.active .tm-check { opacity: 1; } .sba .theme-pick .tm-opt.active { font-weight: 600; } .sba .go { background: var(--accent-gradient); color: var(--on-accent); box-shadow: var(--glow-accent); border: none; padding: 9px 17px; border-radius: var(--r-button); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .sba .disc { padding: 0 30px; color: var(--muted); font-size: 11.5px; line-height: 1.55; } .sba .disc b { color: var(--ink); font-weight: 600; } /* ---- aggregates ---- */ .sba .agg { margin: 12px 30px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 30px; padding: 14px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-card); } .sba .agg .cell { display: flex; flex-direction: column; gap: 3px; } .sba .agg .k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .sba .agg .v { font-family: var(--font-serif); font-size: 25px; font-weight: 500; letter-spacing: -.01em; } /* full-height divider: bleed through the row's 14px vertical padding so the rule touches the top/bottom borders (no gaps — reads cleanly in sharp themes) */ .sba .agg .div { width: 1px; align-self: stretch; background: var(--line); margin-block: -14px; } .sba .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; } .sba .pill.up { background: var(--gainBg); color: var(--gain); } .sba .pill.down { background: var(--lossBg); color: var(--loss); } .sba .agg .pillrow { display: flex; align-items: center; gap: 8px; margin-top: 1px; } /* ---- allocation ---- */ .sba .alloc { margin: 12px 30px 0; display: flex; align-items: center; gap: 24px; padding: 13px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-card); } .sba .alloc-donut { width: 50px; flex: none; } .sba .alloc-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; flex: 1; } .sba .alloc a, .sba .alloc .alloc-reset { color: var(--gain); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; } .sba .alloc-reset.hide { display: none; } /* allocation beside totals (one combined row when wide) */ .sba .aggwrap { display: flex; align-items: stretch; gap: 14px; margin: 12px 30px 0; } .sba .aggwrap > .agg, .sba .aggwrap > .alloc { margin: 0; } .sba .aggwrap > .agg { flex: 1 1 0; min-width: 0; } .sba .aggwrap > .alloc { flex: 0 0 auto; align-items: center; gap: 20px; } .sba .aggwrap > .alloc .legend { max-width: 380px; } /* ---- tile grid ---- */ .sba .grid { flex: 1; margin: 11px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; align-content: start; min-height: 0; } .sba .tile { --c: var(--gain); --cb: var(--gainBg); --cbd: var(--gainBd); background: var(--cb); border: 1px solid var(--cbd); border-radius: var(--r-tile); padding: 11px 12px 10px; display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow-card); } .sba .tile.loss { --c: var(--loss); --cb: var(--lossBg); --cbd: var(--lossBd); } /* left accent rail — Slate / Tron / Stux only. The thicker left border tracks the gain/loss colour (--c) and curves into the top/bottom corners by each theme's --r-tile (Slate 9px, Tron 5px); Stux (0px) stays square. padding-left drops 2px so the inner content stays aligned with the 1px-border themes. */ html[data-theme="slate"] .sba .tile, html[data-theme="tron"] .sba .tile, html[data-theme="stux"] .sba .tile { border-left-width: 3px; border-left-color: var(--c); padding-left: 10px; } .sba .tile .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sba .tile .sym { font-family: var(--font-serif); font-size: 21px; font-weight: 600; letter-spacing: -.01em; } .sba .tile .sym a { color: inherit; } .sba .tile .pc { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--c); white-space: nowrap; } .sba .tile .co { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* when the day chart is off, the chart's margin no longer separates the company name from the data lines — give the name its own breathing room instead */ .sba .tile .co:has(+ .day-chart-slot.hide) { margin-bottom: 9px; } .sba .tile .spark, .sba .tile .day-chart-slot { height: 50px; margin: 7px 0 8px; } .sba .st { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1.74; white-space: nowrap; } .sba .st.hide { display: none; } .sba .st .k { color: var(--muted); } .sba .st .v { font-variant-numeric: tabular-nums; } .sba .st .v.acc { color: var(--c); font-weight: 600; } .sba .st .v .ar { font-size: 8px; margin-left: 2px; } .sba .ar.up { color: var(--gain); } .sba .ar.down { color: var(--loss); } .sba .pf { margin-top: auto; padding-top: 7px; font-size: 11.5px; font-weight: 600; color: var(--c); } /* utility */ .sba .hide { display: none !important; } /* aggregate change values rendered as pills (JS adds change_plus/minus) */ .sba .agg .pill { background: transparent; } .sba .agg .pill.change_plus { background: var(--gainBg); color: var(--gain); } .sba .agg .pill.change_minus { background: var(--lossBg); color: var(--loss); } .sba .agg .pill .aggregate_amount { font-weight: 600; } /* ---- portfolio selector ---- */ .sba .portfolio-selector-wrapper { position: relative; } .sba #portfolio-selector-btn { font-family: inherit; } .sba #portfolio-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; min-width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lift); padding: 10px; } .sba #portfolio-dropdown.open { display: block; } .sba .portfolio-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 8px; border-radius: 8px; } .sba .portfolio-toggle-row:hover { background: rgba(31,75,56,.05); } .sba .portfolio-toggle-name { font-size: 13px; color: var(--ink); cursor: pointer; } .sba .toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer; } .sba .toggle-switch input { opacity: 0; width: 0; height: 0; } .sba .toggle-slider { position: absolute; inset: 0; background: var(--line); border-radius: 100px; transition: background var(--t-fast); } .sba .toggle-slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--card); border-radius: 50%; transition: transform var(--t-fast); box-shadow: 0 1px 2px rgba(0,0,0,.25); } .sba .toggle-switch input:checked + .toggle-slider { background: var(--accent); } .sba .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); } .sba .portfolio-save-wrap { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .sba #portfolio-save-btn { background: var(--accent-gradient); color: var(--on-accent); box-shadow: var(--glow-accent); border: none; border-radius: var(--r-button); padding: 8px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } /* ---- viewing-as (admin) ---- */ .sba .viewas-form { display: flex; align-items: center; gap: 11px; } .sba .viewas-label { color: var(--muted); font-size: 13px; } /* ---- allocation widget ---- */ .sba #alloc-legend .alloc-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; border-radius: 7px; padding: 2px 6px; } .sba #alloc-legend .alloc-legend-item:hover, .sba #alloc-legend .alloc-legend-item.alloc-active { background: var(--gainBg); } .sba #alloc-legend .dot { width: 11px; height: 11px; border-radius: 3px; flex: none; } .sba #alloc-legend .pct { color: var(--muted); font-variant-numeric: tabular-nums; } .sba .chart-unavail { height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .sba .chart-unavail-title { font-size: 11px; color: var(--muted); font-weight: 600; } .sba .chart-unavail-sub { font-size: 9.5px; color: var(--faint); } .sba .alloc-empty-note { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); font-size: 14px; } /* ---- empty board ---- */ .sba .board-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 60px 20px; } .sba .board-empty-title { font-size: 34px; font-weight: 600; } .sba .board-empty p { color: var(--muted); font-size: 14px; max-width: 46ch; } /* ============================================================ BOTTOM TICKER DOCK — Stonk Tickler (price crawl) + News Tickler Fixed at the bottom; body padding synced by JS (syncDockPadding). Marquee: JS adds .is-marquee and sets animationDuration inline. ============================================================ */ #ticker-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--rail); border-top: 1px solid var(--line); font-family: var(--font-sans); } #ticker-dock a, #ticker-dock a:hover { text-decoration: none; color: inherit; } #news-tickler, #stonk-tickler { display: flex; align-items: center; gap: 12px; padding: 7px 22px; overflow: hidden; } #news-tickler { border-bottom: 1px solid var(--line); } #news-tickler.news-empty, #stonk-tickler.tickler-empty { display: none; } .news-label { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--font-serif); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); } .news-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gain); } #news-track, #tickler-track { flex: 1; overflow: hidden; white-space: nowrap; } /* let the stonk tickler's full-height separators bleed past the line; the row (#stonk-tickler, overflow:hidden) clips them to its padding box instead. Safe because the stonk tickler has no left label to overlap. */ #tickler-track { overflow: visible; } #news-inner, #tickler-inner { display: inline-block; white-space: nowrap; will-change: transform; } #news-inner.is-marquee, #tickler-inner.is-marquee { animation: sba-marquee linear infinite; } #news-tickler:hover #news-inner.is-marquee, #stonk-tickler:hover #tickler-inner.is-marquee { animation-play-state: paused; } @keyframes sba-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* news items */ .news-item { display: inline-flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 0 4px; } .news-source { color: var(--ink); font-weight: 600; } .news-title { color: var(--muted); } .news-age { color: var(--faint); font-size: 11px; } .news-age.news-new { color: var(--gain); font-weight: 700; } .news-sep { color: var(--gainBd); margin: 0 10px; } /* stonk tickler pills */ .tickler-pill { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 4px; font-size: 12.5px; color: var(--ink); } .tickler-name { color: var(--muted); } .tickler-data { display: inline-flex; align-items: baseline; gap: 6px; } .tickler-symbol { font-family: var(--font-serif); font-weight: 600; } .tickler-price { font-variant-numeric: tabular-nums; } .tickler-pill.green .tickler-change { color: var(--gain); font-weight: 600; } .tickler-pill.red .tickler-change { color: var(--loss); font-weight: 600; } /* full-height vertical rule between index entries. Taller than the 34px row and centered; the net layout height is zero (margin cancels height) so it doesn't grow the row, and #stonk-tickler's overflow:hidden clips it to the padding box → touches top/bottom with no gaps, robust across themes/fonts. */ .tickler-sep { display: inline-block; width: 1px; height: 60px; margin: -30px 10px; vertical-align: middle; background: var(--line-board); color: transparent; overflow: hidden; } /* ---- refresh status ---- */ .sba .refresh-status { padding: 0 30px 12px; color: var(--muted); font-size: 11.5px; } .sba .refresh-status b { color: var(--ink); font-weight: 600; } /* dark theme: lift the chrome panels a touch more so they read off the graphite board */ html[data-theme="dark"] .sba .agg, html[data-theme="dark"] .sba .alloc, html[data-theme="dark"] .sba .tile { box-shadow: 0 8px 24px -14px rgba(0,0,0,.6); } /* Stux: a fully sharp (0-radius) design language. Token-driven radii on the board already resolve to 0 via themes.css; these surfaces use LITERAL radii, so square them off too — Stux only, every other theme keeps its rounding. */ html[data-theme="stux"] .sba .psel, html[data-theme="stux"] .sba .vsel, html[data-theme="stux"] .sba .agg, html[data-theme="stux"] .sba .alloc, html[data-theme="stux"] .sba .portfolio-toggle-row, html[data-theme="stux"] .sba #alloc-legend .alloc-legend-item, html[data-theme="stux"] .sba #alloc-legend .dot, html[data-theme="stux"] .sba .toggle-slider, html[data-theme="stux"] .sba .toggle-slider::before, html[data-theme="stux"] .sba .news-dot { border-radius: 0; } /* ============================================================ RESPONSIVE — totals/indices wrap, board collapses to one column. ============================================================ */ /* Small-tablet / iPad-portrait band (e.g. iPad 13" portrait = 1024px): the 5-cell totals row overflowed and pushed the viewport. Keep it on ONE row by tightening the gaps/margins/padding and the small Unrealized/Day pills (the hero figures stay 25px). Verified to fit 8-figure values with ~90px headroom at 1024px; the base flex-wrap is the safety net for anything still too wide. */ @container (max-width: 1366px) and (min-width: 981px) { .sba .agg { gap: 16px; margin: 12px 18px 0; padding: 14px 18px; } .sba .aggwrap { margin: 12px 18px 0; } .sba .agg .pill { font-size: 13px; } } @container (max-width: 980px) { .sba .agg { flex-wrap: wrap; gap: 12px 26px; } .sba .agg .div { display: none; } .sba .aggwrap { flex-direction: column; gap: 12px; } .sba .aggwrap > .alloc { align-self: stretch; } } @container (max-width: 620px) { .sba .top { padding: 16px 16px 10px; } .sba .top .right { margin-left: 0; flex-basis: 100%; } .sba .disc, .sba .refresh-status { padding-left: 16px; padding-right: 16px; } .sba .agg, .sba .alloc { margin: 12px 16px 0; } .sba .agg { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 11px; padding: 16px 18px; } .sba .agg .cell { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; } .sba .grid { grid-template-columns: 1fr; margin: 12px 16px; gap: 12px; } .sba .tile { padding: 15px 17px 14px; } .sba .tile .sym { font-size: 25px; } .sba .tile .pc { font-size: 24px; } .sba .tile .spark, .sba .tile .day-chart-slot { height: 54px; margin: 9px 0 10px; } .sba .st { font-size: 13.5px; line-height: 1.95; } .sba .top .right { margin-left: 0; } .sba .viewas-form.right { margin-left: 0; flex-basis: 100%; } #news-tickler, #stonk-tickler { padding-left: 16px; padding-right: 16px; } /* Allocation: chart on the left, each sector a full-width row beside it (label left, % right), with the links centered on their own line below. */ .sba .alloc { flex-wrap: wrap; align-items: center; gap: 14px 18px; } .sba .alloc-legend { flex-direction: column; gap: 7px; min-width: 0; } .sba #alloc-legend .alloc-legend-item { width: 100%; } .sba #alloc-legend .alloc-pct { margin-left: auto; padding-left: 14px; } .sba .alloc > a { flex-basis: 100%; text-align: center; } }