/* 仪表盘皮肤 —— 日内终端和主站的仪表盘型页面(新闻等)**共用这一份**。 * * 为什么要抽出来(2026-08-08 用户提):在这之前是两边各抄一半 —— dash.html 里手抄了 * 主站的站点头部(那段注释自己写着「改主站头部时这段要跟着改,否则两边会漂」), * 而新闻页又用 Tailwind 照着 dash.html 的数值抄了一遍面板。抄两次就是漂两次, * 而且每加一个页面还要再抄一遍。现在改这一个文件,两边一起变。 * * ⚠️ 所有规则都收在 .dash-skin 作用域里。原文里有 header{} / table{} / th,td{} * 这种**元素选择器**,不加作用域直接给主站用会把整站的表格和按钮一起改掉。 * 用法: * 日内 backend/intraday/dash.html * 主站仪表盘型页面的最外层容器加 className="dash-skin" * 两边都通过 URL /intraday/dash-skin.css 引这一份(生产是同源单体)。 */ .dash-skin, .dash-skin * { box-sizing: border-box; } .dash-skin{--bg:#0b0e11;--ink:#cdd6e0;--muted:#7d8a99;--line:#1c2530;--good:#22c55e;--bad:#ef4444; /* 字体也属于皮肤。日内是 body{font:12px/1.4 ui-monospace...},抽皮肤时漏了它, 结果主站那边字形字号全不一样(用户 2026-08-08:"横幅里面的字体样式和日内的都不一样")。数字等宽是刚需 —— 时钟、价格、条数跳动时不能左右晃。 */ font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--ink);} .dash-skin header{height:36px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--bg);} .dash-skin header b{letter-spacing:.05em;} .dash-skin header .sp{flex:1;} .dash-skin header button{background:#16202b;border:1px solid #2a3543;border-radius:6px;color:var(--ink);font-size:11px;padding:5px 10px;cursor:pointer;} .dash-skin header button:hover{filter:brightness(1.25);} .dash-skin header button.tgl{color:var(--muted);} .dash-skin header button.tgl.on{color:var(--ink);border-color:#3b82f6;background:#152232;} .dash-skin header .muted{color:var(--muted);font-size:11px;} .dash-skin .grid-stack{background:#06080a;} /* 高度由 gridstack 按行数自己撑,页面整体滚动 */ .dash-skin .grid-stack::-webkit-scrollbar{display:none;} .dash-skin .grid-stack-item-content{background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;scrollbar-width:none;} .dash-skin .grid-stack-item-content::-webkit-scrollbar{display:none;} /* gridstack forces overflow-y:auto here; keep scroll, hide the bar */ .dash-skin .whead{flex:0 0 auto;height:22px;display:flex;align-items:center;gap:8px;padding:0 8px;font-size:11px;color:var(--muted);cursor:move;border-bottom:1px solid var(--line);background:#0e141b;} .dash-skin .whead .t{color:var(--ink);font-weight:600;} .dash-skin .whead .ohlc{flex:1;color:var(--muted);overflow:hidden;white-space:nowrap;} .dash-skin .whead .x,.dash-skin .whead .e,.dash-skin .whead .cb{cursor:pointer;color:var(--muted);padding:0 4px;position:relative;z-index:30;display:inline-flex;align-items:center;} .dash-skin .whead .cb svg{display:block;} .dash-skin .whead .x:hover{color:var(--bad);}.dash-skin .whead .e:hover{color:var(--ink);} .dash-skin .whead .pct{font-weight:600;} .dash-skin .wnum{position:absolute;left:4px;bottom:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:rgba(22,32,43,.85);border:1px solid #2a3543;color:var(--muted);font-size:10px;line-height:15px;text-align:center;cursor:pointer;z-index:40;} .dash-skin .wnum:hover{color:var(--ink);border-color:#3b82f6;} .dash-skin table{width:100%;border-collapse:collapse;font-size:10px;} .dash-skin th,.dash-skin td{padding:2px 4px;text-align:right;white-space:nowrap;} .dash-skin th:first-child,.dash-skin td:first-child{text-align:left;} .dash-skin th{color:var(--muted);cursor:pointer;position:sticky;top:0;background:var(--bg);} /* 逐列左对齐(文字列:策略/代码/信号/状态…)。表格默认右对齐是给数字用的, 只有第一列自动靠左 —— 多文字列的表(量化持仓/买卖记录)需要这个。 */ .dash-skin th.l,.dash-skin td.l{text-align:left;} /* 表格里的涨绿跌红不跟 .good/.warnc 的 11px 走 —— 表格是 10px,混着会一格大一格小 */ .dash-skin td.good,.dash-skin td.badc,.dash-skin td .good,.dash-skin td .warnc{font-size:inherit;} .dash-skin tbody tr{cursor:pointer;}.dash-skin tbody tr:hover{background:#161f2b;} /* .sel 要写在 :hover **之后** —— 两者特异度相同,后写的赢。原来顺序反了, 鼠标停在选中行上时 #1b2735 被 hover 的 #161f2b 盖掉,反而变暗、像没选中。 */ .dash-skin tbody tr.sel,.dash-skin tbody tr.sel:hover{background:#1b2735;} /* ⚠️ lightweight-charts 内部也是

装每个分格的 —— 上面这条「表格行手型 + hover 变色」会**漏进图表里**:鼠标划过主图那一格,整格背景变亮,量那格没变, 看着就是"一张图两个背景色",光标还变成手(用户 2026-08-10/11 反复提)。图表里的行一律恢复默认。 ⚠️ 这里是 **inherit 不是 default**(2026-08-21 改):cursor 是可继承属性,写成 default 会把 tr→td→div→canvas 整条链钉死,于是 R:R 量尺设在 .chartbox 上的 grab(进场线)/ns-resize(目标·止损线)/ew-resize(左边缘)**一个都传不下来** —— 划到哪儿都是普通箭头(用户 2026-08-21:"以前是会变成手的" / "都是箭头")。 inherit 同样能压掉表格那条 pointer(往上继承到 .chartbox,平时就是默认光标), 又不挡住量尺临时设的光标。 */ .dash-skin .tv-lightweight-charts tr{cursor:inherit;} .dash-skin .tv-lightweight-charts tr:hover{background:transparent;} /* 「和量化那张自动持仓表一样」的紧凑表格(用户 2026-08-11: "把基本面和选股的收藏和筛选表单改成和股票里面的自动持仓的表格那样的统一样式")。那些表是主站老组件,单元格上挂满了 Tailwind 的字号/内距 —— 逐个删几百处不现实也容易删漏。给表加一个 .qtbl,在这里统一压回皮肤口径:10px、2×4 内距、表头灰字贴顶。颜色和对齐仍旧由组件自己决定(涨绿跌红那些不动)。 */ .dash-skin .qtbl{font-size:10px;} .dash-skin .qtbl th,.dash-skin .qtbl td{padding:2px 4px!important;font-size:10px!important;line-height:1.55;} .dash-skin .qtbl thead th{color:var(--muted);background:var(--bg);position:sticky;top:0;z-index:5;} .dash-skin .qtbl thead{background:var(--bg);} /* 第一列常常是 sticky 的代码列,底色要跟着表格走,别露出下面滚过去的内容。 ⚠️ 但 hover 时它必须**跟着整行一起变**,否则那一列静止不动,看着就是 "多了一条背景色带"(用户 2026-08-11:"多了背景色吧,持仓里面好像没有")。 */ .dash-skin .qtbl td.sticky,.dash-skin .qtbl th.sticky{background:var(--bg)!important;} .dash-skin .qtbl tbody tr:hover td.sticky{background:#161f2b!important;} /* ⚠️ 这些表外面还包着一层主站的 Card(bg-surface = 更亮的 #151a23),而 sticky 第一列刷的是 --bg(#0b0e11) —— 两个色一对比,左边就是一条明显发暗的带子 (用户 2026-08-11:"那不是还有吗,和左边的背景不一样")。量化那张自动持仓没有卡片、直接坐在面板上,所以从来没这问题。这里把卡片本身透明掉,整张表直接坐在面板的 --bg 上,第一列自然就融进去了。 */ .dash-skin .qtbl-card{background:transparent!important;border:none!important;border-radius:0!important;} /* 「当前 ★ 代码跟踪 · 公司名 …… [搜索]」这一行:窄屏放不下时,**公司名整条挪到第二行**,搜索框留在第一行最右边(用户 2026-08-12:"移动版把搜索放到当前的行的最右边")。order 排到最后 + flex-basis:100% 就是"我自己占一整行"。桌面不动:一行装得下三样东西,公司名仍夹在中间。 */ @media (max-width:639px), (max-height:500px) and (pointer:coarse){ .dash-skin .curmeta{flex-basis:100%;order:9;} } /* 鼠标点完**不留焦点环**。深色底上浏览器默认画一圈,点过的那颗 pill 就一直亮着, 比真正的选中态还显眼 —— 选股页和跟踪页并排看就像两套样式(用户 2026-08-12: "这 2 个头部 pill 的样式不一样吧")。键盘 Tab 过来仍然看得见,可访问性不丢。 */ .dash-skin .dbtn:focus{outline:none;} .dash-skin .dbtn:focus-visible{outline:2px solid #3b82f6;outline-offset:1px;} /* 弹窗按钮。和 header button 同一套配色,只是不在 header 里,单独给个类。 */ .dash-skin .dbtn{background:#16202b;border:1px solid #2a3543;border-radius:6px;color:var(--ink); font-size:11px;padding:6px 10px;cursor:pointer;font-family:inherit;} .dash-skin .dbtn:hover{filter:brightness(1.25);} .dash-skin .dbtn.ghost{color:var(--muted);} /* 页签(股票/期权那种)。日内原来写在自己的