/* @astock/trend-template v0.40.1 — 内置样式表（由 tools/emit_css.mjs 生成，勿手改） */ /* ===== 主题变量（0.28.0，审核意见 P1-9）===== 'auto'（默认）**一条都不定义** —— 站点的 shadcn/HSL 变量照旧生效， 模板不去覆盖别人的配色（这正是「变量对不上」最稳的解法：不抢方向盘）。 传 theme:'dark' / 'light' 时模板自己补一套，站点没定义变量也有可读的配色。 ⚠️ 只用**最常见的变量名**（--text-1/2/3/--surface/--up/--down）， 站点若已定义，同名变量在本类上会赢（选择器更具体）。 */ .tt-page.tt-dark{ --text-1:#E6E8EB;--text-2:#B4BAC4;--text-3:#8A929E;--text-4:#5C636E; --surface:#161A1F;--surface-2:#1C2128;--surface-3:#242A32; --line:#2A3038;--line-2:#333A44;--brand:#4C9AFF; --up:#F0524B;--down:#1FBF8F; } .tt-page.tt-light{ --text-1:#1F2329;--text-2:#4E5969;--text-3:#86909C;--text-4:#C9CDD4; --surface:#FFFFFF;--surface-2:#FAFAFA;--surface-3:#F2F3F5; --line:#EEEFF1;--line-2:#E0E1E5;--brand:#409EFF; --up:#E04A4A;--down:#0F9E6E; } /* 键盘可达（审核意见 P1-8）：图表可聚焦，聚焦时给一圈明确的焦点环 */ .tt-page .lc-body svg:focus,.tt-page .lc-body svg:focus-visible{ outline:2px solid var(--brand,#409EFF);outline-offset:2px} .tt-page :focus-visible{outline:2px solid var(--brand,#409EFF);outline-offset:2px} /* 读屏用的状态播报区（aria-live），视觉上不可见但对辅助技术可读 */ .tt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .tt-page{box-sizing:border-box} .tt-page *, .tt-page *::before, .tt-page *::after{box-sizing:border-box} .tt-page .page-hd h1{font-size:20px;margin:0 0 4px;font-weight:600;color:var(--text-1,#222)} .tt-page .page-hd p{color:var(--text-3,#999);margin:0 0 16px;font-size:13px} .tt-btn{border:1px solid var(--line-2,#E0E0E0);border-radius:6px;background:transparent; padding:4px 11px;font-size:12px;color:var(--text-2,#555);cursor:pointer; font-family:inherit;white-space:nowrap} .tt-btn:hover{background:var(--surface-3,#F0F0F0)} .tt-btn:disabled{color:var(--text-4,#C8C8C8);cursor:not-allowed} .tt-hd{display:flex;align-items:center;justify-content:space-between;gap:12px} .tt-legend{display:flex;gap:16px;font-size:12px;color:var(--text-2,#666); margin:2px 0 4px;flex-wrap:wrap} .tt-params{background:var(--surface-2,#FAFAFA);border:1px solid var(--line,#EEE); border-radius:8px;padding:10px 14px;margin-bottom:16px;display:flex;flex-wrap:wrap; gap:8px 26px;align-items:center} .tt-prow{display:flex;align-items:center;gap:10px;font-size:13px} .tt-plabel{color:var(--text-3,#999);white-space:nowrap} .tt-segbox{display:inline-flex;border:1px solid var(--line-2,#E0E0E0); border-radius:6px;overflow:hidden} .tt-seg{background:transparent;border:0;border-right:1px solid var(--line-2,#E0E0E0); padding:4px 11px;font-size:12px;color:var(--text-2,#555);cursor:pointer; font-family:inherit;line-height:1.5} .tt-seg:last-child{border-right:0} .tt-seg:hover:not(:disabled){background:var(--surface-3,#F0F0F0)} .tt-seg.on{background:var(--brand,#409EFF);color:#fff} .tt-seg:disabled{color:var(--text-4,#C8C8C8);cursor:not-allowed} /* 多选按钮前面加一个方框：互斥（单选）是「一组里只有一个亮」，并列（多选）是 「可以同时亮好几个」。光靠颜色分不出这两种语义 —— 用户会以为点一下能取消、 或者以为第二个能把第一个顶掉。方框是唯一能一眼看出来的记号。 */ .tt-seg[data-multi]::before{content:"";display:inline-block;width:8px;height:8px; margin-right:5px;border:1px solid currentColor;border-radius:2px; vertical-align:1px;opacity:.5} .tt-seg[data-multi].on::before{background:currentColor;opacity:1} .tt-select{border:1px solid var(--line-2,#E0E0E0);border-radius:6px;padding:4px 8px; font-size:12px;background:var(--surface,#fff);color:var(--text-1,#222); font-family:inherit} /* ================= rail 版式（paramsLayout:'rail'） ================= 左栏只回答「这里能做什么」：纯图标、不写值、不打数字。 值在上方 #tt-sum，实际看到的数据在 #tt-view —— 三处各说一件事。 */ .tt-railmode .tt-body{display:flex;align-items:stretch;gap:0} .tt-railmode .tt-main{flex:1 1 auto;min-width:0} /* 左栏工具列（0.16.0）：上半截 = 「能选什么」（维度图标行）， 下半截 = 「能做什么」（坐标系 / 导出）。两个容器住在同一列 ⇒ 图标与图对齐。 */ .tt-railmode .tt-railcol{flex:0 0 46px;width:46px;display:flex;flex-direction:column; background:var(--surface-2,#FAFAFA);border-right:1px solid var(--line-2,#E0E0E0)} .tt-railmode .tt-params{display:flex;flex-direction:column; flex-wrap:nowrap;gap:2px;padding:6px 0;margin:0; background:transparent;border:0;border-radius:0;overflow:visible} .tt-railmode .tt-tools{display:flex;flex-direction:column;align-items:center;gap:2px; padding:6px 0;border-top:1px solid var(--line,#EEE)} .tt-railmode .tt-toolrow{display:flex;flex-direction:column;align-items:center;gap:2px; width:100%} .tt-railmode .tt-toolbtn{display:flex;align-items:center;justify-content:center; width:100%;height:36px;padding:0;border:0;background:transparent;cursor:pointer; color:var(--text-2,#666);font-family:inherit} .tt-railmode .tt-toolbtn:hover{background:var(--surface-3,#F0F0F0);color:var(--text-1,#222)} /* 右轴刻度开关（0.18.0）：.on = 现在刻度是**收起**的。 左栏是纯图标工具条，没有文字可改 ⇒ 状态只能靠颜色/形状表达。 */ .tt-railmode .tt-toolbtn.on{background:var(--surface-3,#F0F0F0);color:var(--brand,#409EFF)} .tt-railmode .tt-toolbtn:disabled{color:var(--text-4,#C8C8C8);cursor:not-allowed} .tt-railmode .tt-toolbtn.busy{opacity:.45;cursor:progress} .tt-railmode .tt-toolbtn.err{color:var(--up,#E04A4A)} /* 自定义悬浮提示（替代原生 title）：深色小条，钉在图标右上方，不压鼠标。 挂到 document.body 上（fixed）⇒ 不受左栏窄列/裁剪影响；选择器不加 .tt-railmode 前缀，因为它不在 host 内部。 */ .tt-rail-tip{position:fixed;z-index:90;pointer-events:none; background:rgba(17,17,17,.92);color:#fff;font-size:11.5px;line-height:1.45; padding:4px 9px;border-radius:6px;white-space:nowrap;font-family:inherit; box-shadow:0 4px 14px rgba(0,0,0,.22); opacity:0;visibility:hidden;transition:opacity .12s ease} .tt-rail-tip.show{opacity:1;visibility:visible} .tt-railmode .tt-prow{position:relative;display:block;padding:0} /* 标签留在 DOM 里只为了「按文本找行」的断言和读屏；视觉上必须不可见， 但它不能 display:none —— 那样行内结构就塌了，也会让祖先尺寸判据失真 */ .tt-railmode .tt-plabel{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .tt-railmode .tt-railbtn{display:flex;align-items:center;justify-content:center; width:100%;height:36px;padding:0;border:0;background:transparent;cursor:pointer; color:var(--text-2,#666);border-radius:0;font-family:inherit} .tt-railmode .tt-railbtn:hover{background:var(--surface-3,#F0F0F0);color:var(--text-1,#222)} .tt-railmode .tt-prow.expanded .tt-railbtn{background:var(--surface-3,#F0F0F0); color:var(--brand,#409EFF)} /* 偏离出厂值时左侧一道细条：只表示「这里动过」，值是什么由摘要负责 —— 左栏一旦开始写值，它就不再是工具条，而是第二块参数区了 */ .tt-railmode .tt-prow.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px; width:2px;background:var(--brand,#409EFF);border-radius:0 2px 2px 0;opacity:.7} .tt-railmode .tt-segbox{display:none} .tt-railmode .tt-prow.expanded .tt-segbox{display:flex;flex-direction:column; align-items:stretch;gap:2px;position:fixed;z-index:80; max-width:min(260px,82vw);max-height:70vh;overflow:auto; padding:8px 10px;background:var(--surface,#fff);border:1px solid var(--line-2,#E0E0E0); border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:12px} /* 顶部标题：取 data-label（维度名）独占一行 */ .tt-railmode .tt-prow.expanded .tt-segbox::before{content:attr(data-label); display:block;font-size:11px;color:var(--text-3,#999);margin:0 0 4px; padding-bottom:5px;border-bottom:1px solid var(--line,#EEE)} /* 分组头（如 长周期/短周期/全部）：rail 下由 segInner 注入 */ .tt-railmode .tt-prow.expanded .tt-seg-group{font-size:11px;color:var(--text-3,#999); padding:5px 4px 2px;margin-top:2px} .tt-railmode .tt-prow.expanded .tt-seg{display:block;width:100%;text-align:left; border:0;border-right:0;border-radius:5px;padding:5px 10px; background:transparent;color:var(--text-2,#555);font-family:inherit;line-height:1.5} .tt-railmode .tt-prow.expanded .tt-seg:hover:not(:disabled){ background:var(--surface-3,#F0F0F0)} .tt-railmode .tt-prow.expanded .tt-seg.on{background:var(--brand,#409EFF);color:#fff} /* 顶部摘要：我选了什么。整条都可点，点哪项就开哪项的浮层 */ .tt-sum{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:12.5px; color:var(--text-2,#666);margin:0 0 10px;line-height:1.9} .tt-sum[style*="display: none"]{margin:0} .tt-sitem{cursor:pointer;border-radius:5px;padding:1px 5px;white-space:nowrap} .tt-sitem:hover{background:var(--surface-3,#F0F0F0)} .tt-sitem i{font-style:normal;color:var(--text-3,#999);margin-right:4px} .tt-sitem b{font-weight:500;color:var(--text-2,#666)} .tt-sitem.on b{color:var(--brand,#409EFF)} .tt-sdot{color:var(--text-4,#C8C8C8)} /* 图内状态栏：0.16.0 起**已删除**。「全量 N 根 · 当前档显示 N 根 · 蜡烛」 在图上一眼看得出来（x 轴有日期、K 线还是折线一眼分得出）， 留着只是同一句话说两遍 —— 要看当前坐标轴的读数直接看轴。 */ .tt-notes{font-size:12px;color:var(--text-3,#999);margin-top:8px;line-height:1.6} /* ================= 窄屏（手机）适配（0.19.0）================= 没有断点的模板在手机上会退化成「桌面版缩小」：左栏图标小到点不准、 图例挤成一行、卡片内边距吃掉本就不多的宽度。 断点取 560px —— 覆盖绝大多数手机竖屏（375~430px）与小平板。 ⚠️ 触屏的最小可点尺寸是 44px（Apple HIG / Material 都这么要求）， 桌面 36px 的图标在手机上要放大，否则用户点不准（点了没反应 = 功能坏了）。 */ @media (max-width:560px){ .tt-page .page-hd h1{font-size:17px} .tt-page .page-hd p{font-size:12px} /* 图例：一行放不下就换行，别让它把图挤下去 */ .tt-legend{gap:10px 14px;font-size:12px} /* 参数区：手机上横向空间少，段按钮要能点得中 */ .tt-params{padding:8px 10px;gap:8px 14px} .tt-seg{padding:6px 12px;min-height:30px;display:inline-flex;align-items:center} /* 左栏图标放大到 44px 触控尺寸；左栏本身也留宽一点（44 + 边距） */ .tt-railmode .tt-railcol{flex:0 0 52px;width:52px} .tt-railmode .tt-railbtn,.tt-railmode .tt-toolbtn{height:44px} .tt-railmode .tt-params,.tt-railmode .tt-tools{padding:8px 0} /* 浮层在窄屏上要贴边、占满可用宽，否则选项点不到 */ .tt-railmode .tt-prow.expanded .tt-segbox{max-width:min(320px,88vw)} /* 🔴 档位按钮要能换行（0.19.0 补）：横栏版式在手机上最容易横向溢出 —— 「1月/3月/6月/1年/3年/5年/10年/20年/所有」9 个药丸排一行 = 336px， 比手机屏还宽 ⇒ **整页被撑出横向滚动条**（连带图表被推走、右侧被裁）。 判据是「.tt-prow（一行 = 一个维度）」撑宽 ⇒ 行内药丸组也得能折行。 ⚠️ 这段注释在 JS 模板字符串里，**不许出现反引号** —— 一个反引号就把 整个模板字符串截断了，后面的 CSS 全被当成 JS 解析（报 prow is not defined）。 */ .tt-prow{flex-wrap:wrap;max-width:100%} .tt-segbox{flex-wrap:wrap;max-width:100%} .tt-seg{flex:0 0 auto} }