/* ============================================================================ 液压文库（一级栏目 /tech）专属样式 ---------------------------------------------------------------------------- 本文件**刻意只写 ms-news.css 里没有的东西**。理由： 1) ms-news.css 已在 view/{pc,m}/head.html 里被**全站加载**，它提供的 .msn-scope（整页深蓝渐变）/ .msn-hero / .msn-tabs / .msn-cols / .msn-aside / .msn-card / .msn-hot / .msn-promo / .msn-search / .msn-stats / .msn-chip / .msn-tag / .msn-pager / .msn-empty / .msn-art* / .msn-prose（深色正文排版） 等组件，在 /tech 页面上**开箱可用**。抄一份到这里 = 同一套视觉有两条真源， 以后改一处忘一处，必然分叉。 2) 同理，".msn-scope 覆盖 site.css 浅色组件" 与 "≤1023.98px 响应式" 这两节 已经在 ms-news.css 里写过，本文件不再重复。 所以这里只有三块：① 栏目首页的检索带与六专题网格；② 纯文字资料卡与列表行 （客户明确要求技术知识库不要用大图配文字，故全部走底色 + 描边）； ③ 文章页的页内目录与检索高亮。 引用方式：只在 view/{pc,m}/tech_*.html 里各自 ，**不动 head.html**， 其它页面不会多下一次请求。 ========================================================================== */ /* ───────────────────────── 1. 检索带（栏目首页 / 列表页 / 检索页共用） ───────────────────────── 本栏目的检索范围只有 /tech 自己（不与新闻/产品混检），所以这是一条独立的 "栏目内检索"带，视觉上比侧栏的小搜索框更重，明确告诉用户"你在搜的是技术资料"。 */ .mst-searchband{ position:relative; padding:18px 0 20px; border-bottom:1px solid var(--msn-line,#12293F); background:linear-gradient(180deg,rgba(255,255,255,.03),transparent); } .mst-search{ display:flex;align-items:center;gap:10px; height:54px;padding:0 6px 0 16px; border:1px solid var(--msn-line-strong,#235580);border-radius:12px; background:rgba(255,255,255,.055); box-shadow:0 12px 30px -22px rgba(0,0,0,.9); transition:border-color .2s var(--msn-ease),background-color .2s var(--msn-ease); } .mst-search:focus-within{border-color:var(--msn-link,#8FC4EC);background:rgba(255,255,255,.075)} .mst-search-ico{display:grid;place-items:center;flex:0 0 auto;color:var(--msn-link,#8FC4EC)} .mst-search input{ flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none; font-size:15px;color:var(--msn-title,#EAF2FA); /* 关掉 Safari/Chrome 给 type=search 自带的圆角与清除按钮， 否则在深色底上会出现一个刺眼的浅色方块 */ -webkit-appearance:none;appearance:none; } .mst-search input::-webkit-search-decoration, .mst-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .mst-search input::placeholder{color:rgba(234,242,250,.38)} .mst-search button{ flex:0 0 auto;height:42px;padding:0 22px;border:0;border-radius:9px;cursor:pointer; background:var(--msn-brand,#C81E2D);color:#fff;font-size:14.5px;font-weight:700; transition:background-color .18s var(--msn-ease); } .mst-search button:hover{background:var(--msn-brand2,#DF3543)} .mst-search-kw{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px} .mst-search-kw>span{font-size:12.5px;color:var(--msn-mute,rgba(234,242,250,.5));margin-right:2px} .mst-search-kw .msn-chip{height:30px;padding:0 12px;font-size:12.5px} /* ───────────────────── 2.（K11 已删除）六专题卡片网格 ───────────────────── 原先这里是「按专题查阅」大卡片（.mst-topics / .mst-topic*）的样式块。 六大专题自 K10 起改由吸顶条承载，这块样式在 K10 就再无模板引用（K10 只写了 "样式暂留"）；K11 正式删除。判据：全站模板 grep `mst-topic` 命中 0。 */ .mst-topic-n em{ font-style:normal;font-weight:800;font-size:15px; color:var(--msn-title,#EAF2FA);font-variant-numeric:tabular-nums;margin-right:2px; } /* ───────────────────────── 3. 资料卡（纯文字，两列网格） ───────────────────────── */ .mst-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .mst-card{ display:flex;flex-direction:column; padding:17px 19px 15px; border:1px solid var(--msn-line,#12293F);border-radius:12px; background:var(--msn-surface,rgba(255,255,255,.04)); transition:border-color .2s var(--msn-ease),background-color .2s var(--msn-ease), box-shadow .28s var(--msn-ease),transform .25s var(--msn-ease); } .mst-card:hover{ border-color:var(--msn-line-strong,#235580); background:var(--msn-surface-h,rgba(255,255,255,.065)); box-shadow:var(--msn-shadow-h);transform:translateY(-2px); } .mst-card-flags{display:flex;flex-wrap:wrap;align-items:center;gap:7px} .mst-card-t{ display:block;margin-top:10px;font-size:15.5px;font-weight:700;line-height:1.55; color:var(--msn-title,#EAF2FA); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; transition:color .18s var(--msn-ease); } .mst-card:hover .mst-card-t{color:var(--msn-brand-l,#FF8089)} .mst-card-d{ margin-top:9px;font-size:13px;line-height:1.85; color:var(--msn-body,rgba(234,242,250,.78)); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .mst-card-m{ display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:12px; font-size:12px;color:var(--msn-mute,rgba(234,242,250,.5)); } .mst-card-m em{font-style:normal;font-variant-numeric:tabular-nums} .mst-card-m b{ margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:700; color:var(--msn-link,#8FC4EC);transition:color .18s var(--msn-ease); } .mst-card-m b svg{transition:transform .2s var(--msn-ease)} .mst-card:hover .mst-card-m b{color:var(--msn-brand-l,#FF8089)} .mst-card:hover .mst-card-m b svg{transform:translateX(3px)} /* ───────────────────────── 4. 资料列表行（专题列表 / 检索结果共用） ───────────────────────── */ .mst-list{display:flex;flex-direction:column;gap:12px} .mst-row{ padding:17px 20px 15px; border:1px solid var(--msn-line,#12293F);border-radius:12px; background:var(--msn-surface,rgba(255,255,255,.04)); transition:border-color .2s var(--msn-ease),background-color .2s var(--msn-ease), box-shadow .28s var(--msn-ease),transform .25s var(--msn-ease); } .mst-row:hover{ border-color:var(--msn-line-strong,#235580); background:var(--msn-surface-h,rgba(255,255,255,.065)); box-shadow:var(--msn-shadow-h);transform:translateY(-2px); } .mst-row-flags{display:flex;flex-wrap:wrap;align-items:center;gap:7px} .mst-row-t{ display:block;margin-top:9px;font-size:17px;font-weight:700;line-height:1.5; color:var(--msn-title,#EAF2FA);transition:color .18s var(--msn-ease); } .mst-row-t:hover{color:var(--msn-brand-l,#FF8089)} .mst-row-d{ margin:9px 0 0;font-size:13.5px;line-height:1.85; color:var(--msn-body,rgba(234,242,250,.78)); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .mst-row-meta{ display:flex;align-items:center;gap:16px;margin-top:12px; font-size:12.5px;color:var(--msn-mute,rgba(234,242,250,.5)); } .mst-row-meta em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-variant-numeric:tabular-nums} .mst-row-meta b{ margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:700; color:var(--msn-link,#8FC4EC);transition:color .18s var(--msn-ease); } .mst-row-meta b svg{transition:transform .2s var(--msn-ease)} .mst-row:hover .mst-row-meta b{color:var(--msn-brand-l,#FF8089)} .mst-row:hover .mst-row-meta b svg{transform:translateX(3px)} /* 排序切换（推荐优先 / 最新发布 / 阅读最多） */ .mst-sorts{display:flex;align-items:center;gap:6px;margin:0 0 16px} .mst-sort{ display:inline-flex;align-items:center;height:31px;padding:0 14px;border-radius:7px; border:1px solid var(--msn-line,#12293F);background:rgba(255,255,255,.03); font-size:13px;font-weight:600;color:var(--msn-mute,rgba(234,242,250,.5)); transition:all .16s var(--msn-ease); } .mst-sort:hover{border-color:var(--msn-line-strong,#235580);color:var(--msn-title,#EAF2FA)} .mst-sort.is-on{ border-color:rgba(200,30,45,.42);background:rgba(200,30,45,.14); color:var(--msn-brand-l,#FF8089); } /* ───────────────────────── 5. 侧栏零碎 ───────────────────────── */ /* 胶囊里的篇数（专题条上，用来一眼看出哪个专题资料多） */ .msn-chip-n{ margin-left:6px;font-style:normal;font-size:11.5px;font-weight:700; color:var(--msn-link,#8FC4EC);opacity:.85;font-variant-numeric:tabular-nums; } .msn-chip.is-on .msn-chip-n{color:rgba(255,255,255,.85)} /* 目录列表右侧的篇数 */ .mst-n{ margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700; color:var(--msn-mute,rgba(234,242,250,.5));font-variant-numeric:tabular-nums; } /* 目录里当前所在的专题高亮：客户要求"浏览到哪个栏目就高亮哪一项"。 注意 .msn-kb-list a 是 flex（::before 是那颗小红点），这里只改颜色与底色。 */ .msn-kb-list a.is-on{ background:rgba(200,30,45,.13);color:var(--msn-brand-l,#FF8089);font-weight:700; } .msn-kb-list a.is-on .mst-n{color:var(--msn-brand-l,#FF8089)} .msn-kb-list a.is-on::before{background:var(--msn-brand-l,#FF8089)} /* 热门关键词标签墙 */ .mst-kws{display:flex;flex-wrap:wrap;gap:8px;padding:14px 15px} .mst-kws .msn-chip{height:30px;padding:0 12px;font-size:12.5px} /* 检索说明（讲清"只搜本栏目 / 匹配哪些字段"） */ .mst-note{padding:14px 17px} .mst-note p{margin:0 0 10px;font-size:12.5px;line-height:1.85;color:var(--msn-mute,rgba(234,242,250,.5))} .mst-note p:last-child{margin-bottom:0} .mst-note b{color:var(--msn-body,rgba(234,242,250,.78));font-weight:700} /* 分节之间的间距（首节不顶头） */ .mst-sec{margin-top:34px} .mst-sec:first-child{margin-top:0} /* ───────────────────────── 6. 文章页：页内目录 ───────────────────────── 只在正文确有 2 个以上小标题时渲染（控制器给数量，模板判断）， 所以不会出现"只有一个条目的目录"这种噪声。 */ .mst-tocbox{ margin-top:26px;padding:15px 19px; border:1px solid var(--msn-line,#12293F);border-radius:12px; background:rgba(255,255,255,.035); } .mst-tocbox-h{ display:flex;align-items:center;gap:9px; font-size:13.5px;font-weight:800;color:var(--msn-title,#EAF2FA); } .mst-tocbox-h::before{ content:"";display:block;width:3px;height:14px;border-radius:2px; background:var(--msn-brand,#C81E2D); } .mst-toc{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 22px; margin:12px 0 0;padding:0;list-style:none; counter-reset:msttoc; } .mst-toc-i2,.mst-toc-i3{list-style:none;border-top:1px solid var(--msn-line2,#0E2438)} .mst-toc-i2 a,.mst-toc-i3 a{ display:block;padding:9px 2px;font-size:13px;line-height:1.6; color:var(--msn-body,rgba(234,242,250,.78));transition:color .16s var(--msn-ease); } .mst-toc-i2 a::before{ counter-increment:msttoc;content:counter(msttoc) ". "; color:var(--msn-link,#8FC4EC);font-weight:700; } .mst-toc-i3 a{padding-left:20px;font-size:12.5px;color:var(--msn-mute,rgba(234,242,250,.5))} .mst-toc a:hover{color:var(--msn-link,#8FC4EC)} /* 文章正文里的小标题加锚点后，浏览器跳转时会顶到吸顶的栏目条下面 —— 这里把 锚点定位整体上抬，并把被吸顶条挡住的标题补回可见。 */ .msn-scope .ms-prose h2[id^="kb-h"], .msn-scope .ms-prose h3[id^="kb-h"]{scroll-margin-top:110px} /* ───────────────────────── 7. 检索关键词高亮 ───────────────────────── hl() 已经先 htmlspecialchars 再插 mark，所以这里只管配色， 不需要也不允许再动 HTML 结构。 */ .mst-row-t mark,.mst-row-d mark, .msn-scope .ms-prose mark{ background:rgba(200,30,45,.28);color:#FFC2C7;border-radius:3px; padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone; } /* 深底上品牌红(#C81E2D)对比度只有 2.97:1，做文字色不合格； 高亮块的文字色一律用它的浅色档 #FFC2C7（≈7:1），既醒目又可读。 */ /* ───────────────────────── 8. 响应式（只写与 .msn-* 不同的部分） ───────────────────────── */ @media (max-width:1023.98px){ .mst-searchband{padding:14px 0 16px} .mst-search{height:48px;padding:0 5px 0 13px;gap:8px} .mst-search input{font-size:14px} .mst-search button{height:38px;padding:0 17px;font-size:14px} .mst-search-kw{margin-top:11px} .mst-topic-b{font-size:15px;margin-top:7px} .mst-topic-n{margin-top:9px} .mst-topic-n em{font-size:14px} .mst-cards{grid-template-columns:minmax(0,1fr);gap:11px} .mst-card{padding:14px 16px 13px} .mst-card-t{font-size:14.5px} .mst-row{padding:14px 16px 13px} .mst-row-t{font-size:15.5px} .mst-row-d{-webkit-line-clamp:3;font-size:13px} .mst-row-meta{gap:13px} .mst-sorts{gap:5px} .mst-sort{height:29px;padding:0 11px;font-size:12.5px} .mst-sec{margin-top:26px} .mst-toc{grid-template-columns:minmax(0,1fr)} .mst-tocbox{margin-top:22px;padding:13px 15px} .mst-note{padding:13px 15px} } /* ═══════════════════════════════════════════════════════════════════════════ 6. 六大专题置顶条（2026-09-26） --------------------------------------------------------------------------- 位置：页头（导航栏）之下、紧跟版头；栏目首页 / 专题列表 / 文章详情 / 检索结果 四套页同一位置，模板里统一 include view/{pc,m}/_tech_topics.html。 吸顶：PC 与旧 .msn-tabs 同口径 top:76px；手机端贴在 56px 的移动页头下面。 **必须用实底背景**：整页是深蓝渐变，半透明会让正文从条下透出来。 高亮：当前所在专题红底（.is-cur）—— 用户要求"当前页在哪个类别，哪个类别就 红色显示背景"。 旧类 .mst-topics / .mst-topic*（按专题查阅大卡片）已随模板删除，样式暂留。 ═══════════════════════════════════════════════════════════════════════════ */ .mst-topbar{ position:sticky;top:76px;z-index:45; background:#0A1B2E; border-top:1px solid var(--msn-line,#12293F); border-bottom:1px solid var(--msn-line-strong,#235580); box-shadow:0 12px 26px -20px rgba(0,0,0,.95); } /* ── 六大类「图形按钮」网格：K11 起统一 3 列 × 2 行 ───────────────────────── 用户 2026-09-26：「做成图形按钮形式的，且改为 2 行 3 列排（现在是 3 行 2 列）， 每个类后面还是带文章的总数字，置顶固定」。三个列表页（栏目首页 / 专题列表 / 检索结果）的吸顶条，与内容页的「按专题查阅」弹出面板，共用这一套网格。 ⚠ 单元格高度用 `.mst-tb-grid .mst-tb-cell` 给默认值、`.mst-tb-grid--m` 覆盖， 双类选择器 (0,3,0) 保证与书写顺序无关。 */ .mst-tb-t{flex:0 0 auto;margin:0;font-size:12.5px;font-weight:800;letter-spacing:.05em; color:var(--msn-link,#8FC4EC);white-space:nowrap} .mst-tb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; margin:0;padding:0;list-style:none} .mst-tb-cell{border:1px solid var(--msn-line,#12293F);border-radius:9px; background:rgba(255,255,255,.035);overflow:hidden; transition:border-color .18s var(--msn-ease),background-color .18s var(--msn-ease)} .mst-tb-cell:hover{border-color:var(--msn-line-strong,#235580);background:rgba(255,255,255,.065)} .mst-tb-cell.is-cur{border-color:rgba(200,30,45,.55);background:rgba(200,30,45,.16)} .mst-tb-grid .mst-tb-cell{height:44px} .mst-tb-a{display:flex;align-items:center;gap:9px;height:100%;padding:0 11px; color:var(--msn-title,#EAF2FA);text-decoration:none} .mst-tb-tx{display:flex;align-items:center;gap:9px;flex:1;min-width:0} .mst-tb-ico{display:grid;place-items:center;flex:0 0 auto;width:27px;height:27px; border-radius:7px;border:1px solid rgba(122,168,214,.2);background:rgba(94,160,217,.13); color:var(--msn-link,#8FC4EC)} .mst-tb-a b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .mst-tb-a em{font-style:normal;font-size:11.5px;font-weight:700;margin-left:auto; color:var(--msn-link,#8FC4EC);font-variant-numeric:tabular-nums;white-space:nowrap} .mst-tb-a i{font-style:normal;font-size:9.5px;margin-left:1px;opacity:.75} .mst-tb-cell.is-cur .mst-tb-a{color:#fff} .mst-tb-cell.is-cur .mst-tb-a em{color:#FFC2C7} .mst-tb-cell.is-cur .mst-tb-ico{border-color:rgba(255,194,199,.35); background:rgba(200,30,45,.22);color:#FFC2C7} .mst-tb-n{flex:0 0 auto;font-size:12.5px;color:var(--msn-mute,rgba(234,242,250,.5));white-space:nowrap} /* —— PC 置顶条：左「按专题查阅」+ 中 3×2 图形按钮 + 右总数 —— */ .mst-topbar .mst-tb-in{display:flex;align-items:center;gap:16px;padding-block:9px} .mst-tb-in .mst-tb-grid{flex:1;min-width:0} /* —— 手机端置顶条：标题行（含 ⓘ 简介、总数）+ 3×2 图形按钮 —— */ .mst-topbar--m{top:56px} .mst-tb-hd{display:flex;align-items:center;gap:8px;padding:9px 16px 0} .mst-tb-hd .mst-tb-t{font-size:12px} .mst-tb-hd .mst-tb-n{margin-left:auto;font-size:11.5px} .mst-tb-info{display:grid;place-items:center;flex:0 0 auto;width:19px;height:19px;padding:0; border:1px solid rgba(143,196,236,.45);border-radius:9999px;background:transparent; color:var(--msn-link,#8FC4EC);cursor:pointer} .mst-tb-info:hover{border-color:var(--msn-link,#8FC4EC);background:rgba(143,196,236,.12)} .mst-tb-note{margin:9px 16px 0;padding:9px 11px;border-radius:8px; border:1px solid var(--msn-line,#12293F);background:rgba(94,160,217,.09); font-size:12px;line-height:1.85;color:var(--msn-body,rgba(234,242,250,.78))} .mst-topbar--m .mst-tb-grid{padding:7px 16px 10px;gap:7px} .mst-tb-grid.mst-tb-grid--m .mst-tb-cell{height:48px} .mst-tb-grid.mst-tb-grid--m .mst-tb-a{flex-direction:column;gap:2px;padding:6px 5px; justify-content:center} .mst-tb-grid.mst-tb-grid--m .mst-tb-tx{flex:0 0 auto;gap:3px;justify-content:center} .mst-tb-grid.mst-tb-grid--m .mst-tb-ico{width:auto;height:auto;border:0;background:transparent} .mst-tb-grid.mst-tb-grid--m .mst-tb-a b{font-size:12px;line-height:1.2} .mst-tb-grid.mst-tb-grid--m .mst-tb-a em{font-size:10px;line-height:1.1;margin-left:0} .mst-tb-grid.mst-tb-grid--m .mst-tb-a i{font-size:8.5px} /* ═══════════════════════════════════════════════════════════════════════════ 7. 统计条移到页尾 + 检索词红闪 + 结果定位（2026-09-26） --------------------------------------------------------------------------- 统计条：原先在版头里，手机端是 2 列栅格 ⇒ 第三格独占一行、右侧留一大片底色 空白（用户："还没看到内容就先给统计，而且右边背景空白太宽"）。移到页尾后 改成等宽 3 列，不再有空白格。 ═══════════════════════════════════════════════════════════════════════════ */ .msn-stats--tail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 22px;padding:0;border:1px solid var(--msn-line,#12293F);border-radius:10px; background:rgba(255,255,255,.04);overflow:hidden} .msn-stats--tail .msn-stat{padding:15px 6px;border:0;border-right:1px solid var(--msn-line,#12293F); background:transparent;text-align:center} .msn-stats--tail .msn-stat:last-child{border-right:0} .msn-stats--tail .msn-stat b{font-size:20px} .msn-stats--tail .msn-stat b em{font-size:11.5px} .msn-stats--tail .msn-stat span{margin-top:5px;font-size:11.5px;white-space:normal} /* 检索框红闪：点检索词后"输入框红色显示、红闪几次"，让人知道可以按检索了 */ @keyframes mst-flash{ 0%,100%{border-color:var(--msn-line-strong,#235580);box-shadow:0 0 0 0 rgba(200,30,45,0)} 50%{border-color:#DF3543;box-shadow:0 0 0 3px rgba(200,30,45,.3)} } .mst-search.is-flash{animation:mst-flash .42s ease-in-out 4} .mst-search.is-flash input{color:#FFC2C7} .mst-search.is-flash button{background:#DF3543} /* 「检索」按下后光标落到结果区：吸顶条高度 + 一点余量，避免被盖住 */ #mstResults{scroll-margin-top:186px} /* ═══ K10 修正（2026-09-26，真机实测后定稿） ═══════════════════════════════ 实测数据（_pw_k10_pc3.txt，playwright 真机）： ≥1024px：页头吸顶后底边 = 79px（自然高 127 − top:-48px 的偏移） <1024px：页头吸顶后底边 = 67px（该断点没有 -48px 偏移） 原 `.mst-topbar{top:76px}` 两处都不对：宽屏被页头压住 3px、窄屏留 9px 缝隙 （缝隙里会漏出滚动的正文）。故在 PC 修饰类上给准确值。 ⚠ 若页头结构/高度有变，须重跑 `_pw_k10_pc3.js` 复测这两个数。 */ .mst-topbar--pc{top:79px} @media (max-width:1023px){.mst-topbar--pc{top:67px}} /* K11：原先此处是 `.mst-tb-grid{align-items:start}`，用来修「展开子选题时同排 另一格被 stretch 撑成空框」。K11 取消了子选题下拉、格子也改成固定高 （PC/面板 44px、m 48px），该规则已无作用，随之删除。 */ /* ═══ K10 修正 2：统计条项数不固定，改 flex 等分 ═════════════════════════════ 索引页 stats 有 3 项（篇/个/条），列表页只有 2 项（本专题资料/液压文库专题） ⇒ 固定 repeat(3,minmax(0,1fr)) 在 2 项页面会留一个空轨道、右侧一片空白。 flex:1 1 0 让任意项数都均分，且分隔线（border-right）逻辑不变。 */ .msn-stats--tail{display:flex} .msn-stats--tail>.msn-stat{flex:1 1 0;min-width:0} /* ═══ K11（2026-09-26）新增 ══════════════════════════════════════════════════ 1) 内容页「按专题查阅」触发器 + 弹出面板（替代原先常驻的置顶条） 2) 「相关主题」标签盒（原先的 64 条二级选题改 tag 形态） 3) 搜索框聚焦不再出现品牌红环 ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. 内容页的折叠入口 ──────────────────────────────────────────────────── 原来内容页也挂 `_tech_topics.html`，那条 sticky 高 110px（m 端 ~150px）， 滚动时一直盖住正文。用户要求「内容页把六大类的置顶取消，点开'按专题查阅' 再弹出来」⇒ 改成下面这个 44px 的触发条 + 绝对定位浮层。 */ .mst-tbs{position:relative;z-index:44;background:#0A1B2E; border-bottom:1px solid var(--msn-line-strong,#235580)} .mst-tbs-bar{display:flex;align-items:center;gap:12px;padding:9px 0} .mst-tbs-btn{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;height:34px;padding:0 13px; border:1px solid var(--msn-line,#12293F);border-radius:8px;background:rgba(255,255,255,.04); color:var(--msn-title,#EAF2FA);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer; transition:border-color .18s var(--msn-ease),background-color .18s var(--msn-ease)} .mst-tbs-btn:hover{border-color:var(--msn-line-strong,#235580);background:rgba(255,255,255,.07)} .mst-tbs-btn.is-open{border-color:rgba(200,30,45,.6);background:rgba(200,30,45,.18);color:#fff} .mst-tbs-car{transition:transform .22s var(--msn-ease)} .mst-tbs-btn.is-open .mst-tbs-car{transform:rotate(180deg)} .mst-tbs-n{font-size:12.5px;color:var(--msn-mute,rgba(234,242,250,.5));white-space:nowrap} .mst-tbs-panel{position:absolute;left:0;right:0;top:100%;z-index:44; padding:10px 0 12px;background:#0A1B2E; border-bottom:1px solid var(--msn-line-strong,#235580); box-shadow:0 20px 36px -22px rgba(0,0,0,.95)} /* ── 2. 「相关主题」标签盒：**已删除**（K12-①） ────────────────────────────── 用户 2026-09-26：「液压文库板块，全部去掉相关主题的列表！」 选题（ms_know_keyword 64 条）**仍留在库里**、仍可被站内检索命中， 只是不再以标签盒形式出现在列表页尾部与详情页正文之后。 原规则（.mst-tagbox / .mst-tagbox-t / .mst-tagbox-l）已随模板一并清除。 */ /* ── 3. 搜索框聚焦：去掉 site.css 全局 :focus-visible 的品牌红环 ────────────── 【成因】site.css（Tailwind 产物）里有一条**无修饰符**的 `:focus-visible{outline:2px solid transparent;outline-offset:2px; --tw-ring-offset-shadow:…;--tw-ring-shadow:…;box-shadow:…; --tw-ring-opacity:1;--tw-ring-color:rgb(223 53 67/var(--tw-ring-opacity,1))}` ⇒ 全站**每个**可聚焦元素在 focus-visible 时都被套上「白 2px + 品牌红 4px」 的双层 box-shadow 环。真机实测（_k11_focus_pc.txt / _k11_focus_m.txt）输入框的 computed box-shadow = `rgb(255,255,255) 0 0 0 2px, rgb(223,53,67) 0 0 0 4px`。 用户 2026-09-26：「搜索框点中，或者输入内容时，不要加红色框，就原本的样式！」 【做法】只在本栏目覆盖（ms-tech.css 仅被 8 个 /tech 模板引用，不动全站 site.css）。 容器 `.mst-search:focus-within` 的浅蓝描边是**改造前就有**的样式，保留 ⇒ 键盘 可达性不受影响（焦点仍有可见反馈，只是不再是红色）。 */ .mst-search input:focus, .mst-search input:focus-visible, .mst-search button:focus, .mst-search button:focus-visible, .msn-search input:focus, .msn-search input:focus-visible, .msn-search button:focus, .msn-search button:focus-visible{outline:none;box-shadow:none} /* ── 4. 键盘焦点环治理：栏目内「全部」可聚焦元素 ────────────────────────────── 用户 2026-09-26 就 K11 三项待拍板裁定：第 2 项「要」—— 把 /tech 栏目内**所有**可聚焦元素的键盘焦点红环一并收敛。第 3 节只处理了检索框， 本节做整栏目兜底。 【一条就够的原因】`
` 是双端（PC / m）每一个 /tech 页面的 统一作用域根，且六大专题置顶条、检索带、正文、分页、相关主题盒**全部在它内部** ⇒ `.msn-scope :focus-visible` 覆盖栏目内所有可聚焦元素，不必逐个枚举类名。 【稳赢的原因】特异性 0,1,1 > site.css 那条无修饰符 `:focus-visible` 的 0,1,0， 与两张样式表的加载顺序无关 ⇒ **不需要 !important**。 【为什么换成浅蓝而不是直接删掉】只把环删干净会让键盘用户完全失去焦点反馈（反模式）。 `:focus-visible` 的语义恰好就是「只在键盘导航时命中」⇒ 鼠标点击/输入时零外框 （完全符合「点中或输入时不要加框」），只有 Tab 时才出现这圈栏目浅蓝提示。 【为什么零外溢】ms-tech.css 只被 8 个 /tech 模板加载（已 grep 证实）； 即便别的栏目也用了 .msn-scope，也读不到这张表。 【边界】页头 / 页脚是**全站公共组件**且在
之外 ⇒ 本规则**不碰**它们， 以免同一个页头在不同页面出现两种焦点色。 【与第 3 节的关系】检索框 input/button 由第 3 节以 0,2,1 的特异性压住 ⇒ 仍是零外框， 键盘可达性由容器 `.mst-search:focus-within` 的浅蓝描边提供（改造前既有）。 */ .msn-scope :focus-visible{ outline:2px solid var(--msn-link,#8FC4EC); outline-offset:2px; box-shadow:none; } /* ═════════════════ 7. 分页：页码与统计压到同一行（K12-②） ═════════════════ 用户 2026-09-26：「分页，做成一行显示。」 【成因】ms-news.css 里 `.msn-pager` 只写了 `margin-top`，是一个**纯 block**； 它下面的第一个孩子 `