/* ============================================================ 市場日報設計稿 · flow.css（資金流頁籤專屬樣式） ------------------------------------------------------------ 規則（_plans/redesign_daily_comp_brief.md §0）： - 所有選擇器一律 .flow- 前綴，只作用在 #tab-flow 內（抽屜內容例外， 那是 openDrawer 共用機制，但抽屜相關樣式一樣只用 .flow- 前綴） - 不覆寫 daily.css 的 token 與共用 class（.row／.panel／.page-head…）， 沿用既有 class 做版面，這裡只補資金流特有的視覺（泡泡圖顏色、 象限 chip、今日重點欄位、頁尾資源列） - 不掛疊層順序屬性（層疊由 DOM 順序＋position:fixed 解決，本頁完全不需要） - 色彩只用 daily.css 既有 token，綠漲紅跌、靛藍只做強調 ============================================================ */ /* ---------- 狀態提醒條（快照時效，DESIGN.md §8） ---------- */ .flow-stale-bar { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn); border-radius: var(--r-md); font-size: 13px; line-height: 1.6; padding: 10px 16px; } /* ---------- 泡泡圖上方時窗切換（沿用 .page-filters／.chip，這裡只調間距） ---------- */ .flow-win-chips { margin-left: auto; } /* ---------- 泡泡圖本體（沿用 daily.css 的 .sc-grid／.sc-axis／.sc-zero／.sc-tick／.sc-alab／.sc-lab） ---------- */ .flow-bubble-host { padding: 4px 12px 4px; } .flow-bubble { fill-opacity: 0.82; stroke: var(--surface); stroke-width: 1; transition: fill-opacity 150ms linear; } .flow-bubble.flow-q-buy { fill: var(--up); } .flow-bubble.flow-q-cover { fill: var(--indigo); } .flow-bubble.flow-q-sell { fill: var(--down); } .flow-bubble.flow-q-close { fill: var(--ink-3); fill-opacity: 0.55; } .flow-bubble:hover { fill-opacity: 1; } .flow-bubble.flow-bubble-dim { fill-opacity: 0.12; } .flow-bubble-label { fill: var(--ink-2); } .flow-bubble-label.flow-bubble-dim { fill-opacity: 0.25; } /* ---------- 象限計數列（沿用 .chip／.dot，補四色圓點與計數樣式） ---------- */ .flow-quad-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px; } .flow-quad-chip { display: inline-flex; align-items: center; gap: 6px; } .flow-quad-n { font-variant-numeric: tabular-nums; } .flow-quad-legend { padding: 0 20px 16px; margin: 0; } .flow-dot-buy { background: var(--up); } .flow-dot-cover { background: var(--indigo); } .flow-dot-sell { background: var(--down); } .flow-dot-close { background: var(--ink-3); opacity: 0.55; } /* ---------- 排行榜（沿用 .table／.row，補欄位模板） ---------- */ /* 欄序：板塊｜龍頭權重｜淨買賣 1D/5D/20D｜報酬 1D/5D｜OI 1D/5D｜象限｜連續天數 */ .flow-rank-table .row { grid-template-columns: minmax(0, 1.15fr) 92px 100px 100px 100px 78px 78px 72px 72px 84px 74px; } .flow-sort-head { cursor: pointer; user-select: none; } .flow-sort-head:hover { color: var(--ink); } .flow-sort-head.is-on { color: var(--indigo); font-weight: 600; } .flow-c-leader.flat { color: var(--ink-3); } .flow-quad-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-sm); font-size: 13px; white-space: nowrap; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink-2); } .flow-quad-badge.flow-q-buy { color: var(--up); background: var(--up-soft); border-color: var(--up-soft); } .flow-quad-badge.flow-q-cover { color: var(--indigo); background: var(--indigo-soft); border-color: var(--indigo-soft); } .flow-quad-badge.flow-q-sell { color: var(--down); background: var(--down-soft); border-color: var(--down-soft); } .flow-quad-badge.flow-q-close { color: var(--ink-2); } /* ---------- 今日重點（四欄小表） ---------- */ .flow-digest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); } .flow-digest-col { padding: 16px 20px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; min-width: 0; } .flow-digest-col:first-child { border-left: 0; } .flow-digest-h { font-size: 15px; font-weight: 600; margin: 0; } .flow-digest-note { font-size: 13px; color: var(--ink-2); margin: 0; } .flow-digest-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; } .flow-digest-sub { font-size: 13px; color: var(--ink-2); } .flow-digest-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flow-digest-val { font-variant-numeric: tabular-nums; white-space: nowrap; } .flow-digest-row.row { padding-inline: 0; min-height: 40px; border-top: 1px solid var(--rule); gap: 8px; grid-template-columns: minmax(0, 1fr) auto auto; } .flow-digest-row.row:first-of-type { border-top: 0; } .flow-contrarian { margin: 0; } /* ---------- 抽屜：板塊詳情頂部龍頭資訊行 ---------- */ .flow-leader-line { margin: 0; padding: 0 20px 12px; font-size: 15px; color: var(--ink-2); } /* ---------- 抽屜：板塊詳情內的成分幣清單（沿用 .c-id／.c-sym／.c-meta／.c-num／.tag／.dsec） ---------- */ .flow-member-list { display: flex; flex-direction: column; } .flow-member-row { display: grid; /* 2026-09-13 修：原本四個數值欄寫死 92/88/108/58px，加間距後把 420px 抽屜裡的識別欄擠成 0px， ticker 與交易對整格看不見。改為數值欄依內容自適應、識別欄吃剩餘空間並保底 96px。 */ grid-template-columns: minmax(96px, 1fr) auto auto auto auto; align-items: center; gap: 8px; min-height: 56px; border-top: 1px solid var(--rule); cursor: pointer; } .flow-member-row .c-id { min-width: 0; } .flow-member-row .c-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .flow-member-row .c-num { white-space: nowrap; } .flow-member-row:first-child { border-top: 0; } .flow-member-row:hover { background: var(--hover); } .flow-badge-note { color: var(--warn); } /* 頁尾改掛全域