/* ============================================================ AI 工具导航 · 模板样式（nav.css） ------------------------------------------------------------ 三个页面共用：首页 index.html 详情页 detail.html 分类列表页 category.html 分区导航： 1. 设计变量与基础（约 1 - 145 行） 2. 骨架：背景 / 左侧栏 / 顶栏 / 内容区 3. 首页：报头、分类板块、卡片网格 4. 通用组件：面包屑 / 页脚 / 回到顶部 / 遮罩 5. 响应式 6. 详情页 .dt-* 7. 分类列表页 .ct-* 风格：石墨冷灰 + 品牌靛蓝。配色取自站点 favicon 的蓝紫家族，但界面一律用**实色**，渐变只留给 logo / 进度条 / 眉线三处，避免落入「到处蓝紫渐变」的通用 AI 观感。性能约定（别改回去）： · 不使用 backdrop-filter —— 盖在动画层上会触发逐帧全屏重采样 · 不使用 mix-blend-mode —— 同上 · 吸顶 / 固定层用高不透明度底色（--veil / --veil-strong） · 慢速装饰动画用 steps() 降频 ============================================================ */ /* ---------- 设计变量 ---------- */ :root{ --paper:#F1F4F6; --paper-2:#FFFFFF; --tile:#E8EEF1; --ink:#0C1316; --ink-2:#56656D; --ink-3:#8B999F; --line:#DEE6EA; --line-2:#C5D1D8; --accent:#4955D4; --accent-soft:rgba(73,85,212,.09); /* 品牌渐变（仅用于 logo / 进度条 / 眉线） */ --brand-1:#5BA8F5; --brand-2:#7F77DD; --brand-grad:linear-gradient(135deg,var(--brand-1),var(--brand-2)); --bg-gradient: linear-gradient(180deg, #eef1fb 0%, #f6f4fb 30%, #f6f7f9 72%); /* 环境背景层 */ --ring-ink:#4955D4; --ring-op:.09; --wash-1:rgba(91,168,245,.18); --wash-2:rgba(127,119,221,.15); --veil:rgba(241,244,246,.86); --veil-strong:#F3F3FB; --shadow:0 1px 2px rgba(12,19,22,.05), 0 10px 26px -14px rgba(12,19,22,.24); --shadow-lg:0 2px 6px rgba(12,19,22,.07), 0 22px 48px -22px rgba(12,19,22,.34); --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; --nav-w:272px; --r:11px; --pad-x:34px; } [data-theme="dark"]{ --paper:#080C0E; --paper-2:#101719; --tile:#151D20; --ink:#E8F0F0; --ink-2:#8FA0A6; --ink-3:#637277; --line:#1D282C; --line-2:#2A373C; --accent:#7C88FF; --accent-soft:rgba(124,136,255,.13); /* 环境背景层 */ --ring-ink:#8C96FF; --ring-op:.13; --wash-1:rgba(91,168,245,.14); --wash-2:rgba(127,119,221,.14); --veil:rgba(8,12,14,.84); --veil-strong:#1f1e28; --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.8); --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 22px 48px -22px rgba(0,0,0,.9); --bg-gradient: linear-gradient(180deg, #1a1e2b 0%, #1e1c28 30%, #202227 72%); } /* ---------- 基础 ---------- */ *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--ink); /* 底纹与晕染放在 body 上：静态绘制一次，不参与逐帧合成 */ /*background-color:var(--paper);*/ background-image:var(--bg-gradient); overflow:hidden; /*transition:background-color .3s ease, color .3s ease;*/ } h1,h2,p,ul,li{margin:0;padding:0} ul{list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} svg{display:block} ::selection{background:var(--accent);color:var(--paper-2)} /* 图标统一描边风格 */ .icon-btn svg,.search-ic,.search-clear svg,.to-top svg,.fab svg{ fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } .fab-ic.moon{fill:currentColor;stroke:none} /* 滚动条 */ .nav-scroll::-webkit-scrollbar,.content::-webkit-scrollbar{width:9px;height:9px} .nav-scroll::-webkit-scrollbar-track,.content::-webkit-scrollbar-track{background:transparent} .nav-scroll::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb{ background:var(--line-2);border-radius:99px;border:3px solid var(--paper); } .nav-scroll::-webkit-scrollbar-thumb:hover,.content::-webkit-scrollbar-thumb:hover{background:var(--ink-3)} /* Firefox */ .nav-scroll,.content{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent} /* 键盘焦点 */ .nav-item:focus-visible,.fab:focus-visible,.icon-btn:focus-visible, .search-clear:focus-visible,.to-top:focus-visible,.sec-more:focus-visible,.topnav a:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:8px; } /* ============================================================ 环境背景层思路参考 https://app-egukzowihmv5.miaoda.online/ ：大尺寸、极低透明度的线稿图形，用 4~5 分钟一圈的极慢自转做「呼吸感」，再叠一层品牌色晕染和纸纹噪点。动静要小，不能干扰阅读。 ============================================================ */ .bg{ position:fixed;inset:0;z-index:0; pointer-events:none; overflow:hidden; } /* 缓慢自转的线稿圆环（只有 transform 变化，交给合成器，不触发重绘） */ .bg-ring{ /* 圆心精确压在视口右上角：偏移量取尺寸的一半（带尺寸上限也不会跑偏） */ --ring-size:min(58vw, 960px); position:absolute; top:calc(var(--ring-size) / -2); right:calc(var(--ring-size) / -2); width:var(--ring-size); height:var(--ring-size); fill:none; stroke:var(--ring-ink); stroke-linecap:round; opacity:var(--ring-op); will-change:transform; /* 关键：300s 转一圈 = 1.2°/秒，逐帧（60fps）渲染完全看不出差别，却要合成器每帧重绘一次大图层。用 steps 量化到 30 步/秒 —— 每步 0.04°（最外圈不到 0.35px），肉眼无感，帧率直接回满。 */ animation:bg-spin 300s steps(9000,end) infinite reverse; } .bg-fill{fill:var(--ring-ink);stroke:none} @keyframes bg-spin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} } /* ============================================================ 骨架：全屏铺满 ============================================================ */ .app{ position:relative; z-index:1; display:flex; height:100vh; height:100dvh; overflow:hidden; } /* ---------- 左侧栏 ---------- */ .sidebar{ flex:0 0 var(--nav-w); width:var(--nav-w); display:flex; flex-direction:column; min-height:0; background:transparent; border-right:1px solid var(--line); transition:background-color .3s ease, border-color .3s ease; } /* logo 板块 —— 固定在顶部 */ .brand{ flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:19px 20px 17px; border-bottom:1px solid var(--line); } .brand-mark{ width:32px;height:32px;flex:0 0 auto; display:grid;place-items:center; border-radius:9px; background:var(--brand-grad); color:#fff; box-shadow:0 3px 10px -4px rgba(73,85,212,.5); } .brand-mark svg{width:17px;height:17px;fill:currentColor} .brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.15} .brand-name{font-size:16px;font-weight:700;letter-spacing:-.015em} .brand-sub{ font-family:var(--serif);font-style:italic;font-size:12.5px; color:var(--ink-3);letter-spacing:.02em; } .brand .brand-close{display:none;margin-left:auto} /* 分类列表 —— 占满剩余高度，溢出滚动 */ .nav-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 12px 22px; } .nav-label{ display:flex;align-items:center;justify-content:space-between; padding:4px 9px 10px; font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-3); } .nav-label-n{ font-family:var(--serif);font-size:13px;letter-spacing:0;color:var(--ink-3); border:1px solid var(--line-2);border-radius:99px;padding:0 7px;line-height:17px; } .nav-list{display:flex;flex-direction:column;gap:1px} .nav-item{ position:relative; display:flex;align-items:baseline; width:100%;text-align:left; padding:7px 9px 7px 12px; border-radius:8px; color:var(--ink-2); transition:background-color .16s ease, color .16s ease; } .nav-item::before{ content:"";position:absolute;left:0;top:50%; width:2px;height:0;border-radius:99px; background:var(--accent); transform:translateY(-50%); transition:height .2s cubic-bezier(.4,0,.2,1); } .nav-item:hover{background:var(--accent-soft);color:var(--ink)} /* 分类序号样式：预留未启用（app.js 里 .nav-no / .sec-no 那两行是注释状态）。想恢复编号，把 app.js 里对应两行的注释去掉即可。 */ .nav-no{ font-family:var(--serif);font-size:12.5px;color:var(--ink-3); flex:0 0 auto;width:19px;letter-spacing:.01em; transition:color .16s ease; } .nav-ic{ flex:0 0 auto;font-size:14.5px;line-height:1; color:var(--ink-3);margin:0 7px 0 1px; transition:color .16s ease; } .nav-item:hover .nav-ic{color:var(--ink-2)} .nav-name{ flex:0 1 auto;min-width:0; font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .nav-leader{ flex:1 1 auto;min-width:10px;margin:0 7px; border-bottom:1px dotted var(--line-2); transform:translateY(-3px); } .nav-count{ flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums; color:var(--ink-3);transition:color .16s ease; } .nav-item.is-active{background:var(--accent-soft);color:var(--ink);font-weight:600} .nav-item.is-active::before{height:17px} .nav-item.is-active .nav-no{color:var(--accent)} .nav-item.is-active .nav-ic{color:var(--accent)} .nav-item.is-active .nav-count{color:var(--accent)} .nav-item.is-empty{opacity:.32;pointer-events:none} .nav-hint{ display:flex;align-items:center;gap:5px; padding:16px 10px 0;font-size:11px;color:var(--ink-3); } .nav-hint kbd{ font-family:var(--sans);font-size:10px;line-height:1; padding:3px 5px;border:1px solid var(--line-2);border-radius:4px; color:var(--ink-3); } /* ---------- 右侧主区 ---------- */ .main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0; } /* 顶部搜索 —— 固定 */ .topbar{ position:relative; flex:0 0 auto; display:flex;align-items:center;gap:14px; padding:13px var(--pad-x); border-bottom:1px solid var(--line); background:var(--veil); z-index:20; } .icon-btn.only-sm{display:none} /* 阅读进度（贴在 topbar 下沿） */ .progress{ position:absolute;left:0;bottom:-1px; height:2px;width:0;border-radius:0 2px 2px 0; background:var(--brand-grad); transition:width .12s linear; } .search{ position:relative; flex:1 1 auto;min-width:0;max-width:600px; display:flex;align-items:center; background:var(--paper-2); border:1px solid var(--line-2); border-radius:9px; transition:border-color .18s ease, box-shadow .18s ease, background-color .3s ease; } .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .search-ic{ flex:0 0 auto;width:16px;height:16px;margin-left:12px; color:var(--ink-3);transition:color .18s ease; } .search:focus-within .search-ic{color:var(--accent)} .search input{ flex:1 1 auto;min-width:0; padding:9px 8px 9px 9px; font:inherit;font-size:13.5px;color:var(--ink); background:none;border:0;outline:none; -webkit-appearance:none;appearance:none; } .search input::placeholder{color:var(--ink-3)} .search input::-webkit-search-decoration, .search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none} .search-clear{ flex:0 0 auto;display:grid;place-items:center; width:22px;height:22px;margin-right:2px;border-radius:50%; color:var(--ink-3);transition:background-color .15s ease,color .15s ease; } .search-clear svg{width:13px;height:13px} .search-clear:hover{background:var(--tile);color:var(--ink)} .search-clear[hidden]{display:none} .search-kbd{ flex:0 0 auto;margin-right:9px; font-family:var(--sans);font-size:10.5px;line-height:1; padding:3px 6px;border:1px solid var(--line-2);border-radius:4px;color:var(--ink-3); } .search:focus-within .search-kbd{opacity:0} .topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto} .hit{ font-size:12px;color:var(--ink-3);white-space:nowrap; font-variant-numeric:tabular-nums; } .hit b{color:var(--accent);font-weight:600} /* 顶栏站内导航（首页 / 工具 / AI导航 / 文章） */ .topnav{display:flex;align-items:center;gap:2px;flex:0 0 auto} .topnav a{ position:relative; padding:6px 11px;border-radius:7px; font-size:13px;font-weight:500;line-height:1.3; color:var(--ink-2);white-space:nowrap; transition:color .16s ease, background-color .16s ease; } .topnav a:hover{color:var(--ink);background:var(--tile)} .topnav a.is-current{color:var(--accent)} .topnav a.is-current::after{ content:"";position:absolute;left:11px;right:11px;bottom:1px; height:2px;border-radius:2px;background:var(--accent); } .icon-btn{ flex:0 0 auto;display:grid;place-items:center; width:34px;height:34px;border-radius:8px; border:1px solid var(--line-2);color:var(--ink-2); transition:background-color .15s ease,color .15s ease; } .icon-btn svg{width:18px;height:18px} .icon-btn:hover{background:var(--tile);color:var(--ink)} /* ---------- 内容滚动区 ---------- */ .content{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--pad-x) 60px; scroll-behavior:smooth; } /* 面包屑（详情页 / 分类页共用；首页不渲染该元素，留着不冲突） */ .crumbs{ display:flex;align-items:center;flex-wrap:wrap;gap:7px; padding:20px 0 0; font-size:12px;color:var(--ink-3); min-width:0; } .crumbs a{ color:var(--ink-3); transition:color .16s ease; max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .crumbs a:hover{color:var(--accent)} .crumbs .cr-sep{ flex:0 0 auto;width:11px;height:11px; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; opacity:.6; } .crumbs .cr-cur{color:var(--ink-2);font-weight:500;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 报头 */ .masthead{padding:40px 0 34px;max-width:760px} .mh-eyebrow{ display:flex;align-items:center;gap:10px; font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-3);margin-bottom:14px; } .mh-line{display:block;width:26px;height:2px;border-radius:2px;background:var(--brand-grad)} .mh-title{ font-size:clamp(30px,3.3vw,44px); font-weight:700;letter-spacing:-.03em;line-height:1.1; margin-bottom:12px; } .mh-sub{font-size:14px;color:var(--ink-2);max-width:56ch} .mh-stats{ display:flex;flex-wrap:wrap;gap:0; margin-top:26px; border-top:1px solid var(--line); padding-top:16px; } .mh-stats li{ display:flex;flex-direction:column;gap:2px; padding-right:34px;margin-right:34px; border-right:1px solid var(--line); } .mh-stats li:last-child{border-right:0;padding-right:0;margin-right:0} .mh-stats b{ font-family:var(--serif);font-size:26px;font-weight:400; letter-spacing:.01em;color:var(--accent);line-height:1.1; } .mh-stats span{font-size:11.5px;color:var(--ink-3)} /* ---------- 分类板块 ---------- */ .cat-section{margin-bottom:26px;scroll-margin-top:6px} /* 与 goto() 的 -6px 对齐：浏览器原生 #sec-N 锚点跳转也留同样呼吸感 */ .cat-section.is-hidden{display:none} .sec-head{ position:sticky;top:0;z-index:5; display:flex;align-items:baseline; padding:16px 0 13px; /*background: ;*/ background:var(--veil-strong); /*transition:background-color .3s ease;*/ } .sec-no{ font-family:var(--serif);font-size:24px;line-height:1; color:var(--ink-3);flex:0 0 auto;margin-right:10px; transition:color .3s ease; } .cat-section.is-current .sec-no{color:var(--accent)} /* lucide 字体图标 */ .sec-ic{ flex:0 0 auto;font-size:19px;line-height:1; color:var(--ink-3);margin-right:11px; transition:color .3s ease; } .cat-section.is-current .sec-ic{color:var(--accent)} .sec-name{ font-size:18px;font-weight:650;letter-spacing:-.02em; flex:0 0 auto;margin-right:13px; } .sec-desc{ flex:0 1 auto;min-width:0; font-size:12px;color:var(--ink-3); padding-left:12px;border-left:1px solid var(--line-2); margin-right:13px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .sec-rule{flex:1 1 auto;height:1px;background:var(--line);transform:translateY(-4px);min-width:16px} .sec-more{ flex:0 0 auto;display:inline-flex;align-items:center;gap:4px; font-size:12px;color:var(--ink-3); transition:color .16s ease; } .sec-more svg{ width:12px;height:12px; fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round; transition:transform .16s ease; } .sec-more:hover{color:var(--accent)} .sec-more:hover svg{transform:translateX(2px)} /* 卡片网格：一行最多 5 个，窄屏逐级降列（断点见下方响应式） */ .cards{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:15px; } .card{ display:flex;align-items:center;gap:10px; min-width:0; padding:8px 11px 8px 8px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .3s ease; } .card.is-hidden{display:none} .card:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow); } .card:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .thumb{ flex:0 0 auto; position:relative; display:grid;place-items:center; width:40px;height:40px; border-radius:8px; background:var(--tile); border:1px solid var(--line); overflow:hidden; transition:background-color .3s ease,border-color .3s ease; } .thumb img{ width:100%;height:100%; padding:6px; object-fit:contain; opacity:0; transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .3s ease; } .thumb img.is-loaded{opacity:1} .card:hover .thumb img{transform:scale(1.07)} .thumb-fb{ font-size:14px;font-weight:700;color:var(--ink-2);text-transform:uppercase; } .card-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} .card-title{ font-size:13px;font-weight:600;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color .16s ease; } .card:hover .card-title{color:var(--accent)} .card-desc{ font-size:11.5px;color:var(--ink-2);line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* 空态 & 页脚 */ .empty{padding:80px 0;text-align:center} .empty-t{font-size:16px;font-weight:600;margin-bottom:6px} .empty-s{font-size:13px;color:var(--ink-3)} .page-foot{ display:flex;align-items:center;gap:9px; margin-top:44px;padding-top:20px; border-top:1px solid var(--line); font-size:11.5px;color:var(--ink-3); } .page-foot .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)} /* ---------- 右下角悬浮按钮组：问题反馈 / 明暗主题 / 回到顶部 ---------- */ .fab-stack{ position:fixed;right:24px;bottom:24px;z-index:40; display:flex;flex-direction:column;align-items:center;gap:9px; } .fab,.to-top{ flex:0 0 auto;display:grid;place-items:center; width:38px;height:38px;border-radius:50%; background:var(--paper-2);border:1px solid var(--line-2); color:var(--ink-2);box-shadow:var(--shadow); transition:opacity .22s ease, transform .22s ease, color .16s ease, border-color .16s ease, background-color .16s ease; } .fab svg,.to-top svg{width:17px;height:17px} .fab:hover,.to-top:hover{color:var(--accent);border-color:var(--accent)} /* 明暗主题：只显示「当前主题」的图标（与主站悬浮条口径一致） */ .fab-ic{display:none} [data-theme="dark"] .fab-ic.moon{display:block} [data-theme="light"] .fab-ic.sun, html:not([data-theme="dark"]) .fab-ic.sun{display:block} /* 回到顶部：滚动 480px 后出现。保留占位，上面两个按钮不会跳动 */ .to-top{opacity:0;transform:translateY(10px);pointer-events:none} .to-top.show{opacity:1;transform:none;pointer-events:auto} /* 遮罩（移动端） */ .scrim{ position:fixed;inset:0;z-index:60; background:rgba(8,12,14,.52); opacity:0;pointer-events:none; transition:opacity .28s ease; } .scrim.show{opacity:1;pointer-events:auto} /* ============================================================ 响应式 ============================================================ */ /* 卡片列数：一行最多 5 个，随视口逐级降列 */ @media (max-width:1580px){ .cards{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:1330px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:1180px){ :root{--pad-x:26px} } @media (max-width:1090px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:860px){ .sec-desc{display:none} } /* 平板 / 手机：侧栏抽屉化 */ @media (max-width:960px){ :root{--pad-x:18px} .sidebar{ position:fixed;top:0;left:0;bottom:0;z-index:70; width:284px;flex-basis:284px; transform:translateX(-102%); background:var(--veil-strong); transition:transform .3s cubic-bezier(.4,0,.2,1), background-color .3s ease; box-shadow:var(--shadow-lg); } .sidebar.open{transform:none} .brand .brand-close{display:grid} .icon-btn.only-sm{display:grid} .masthead{padding:28px 0 24px} .mh-stats li{padding-right:24px;margin-right:24px} .search-kbd{display:none} .content{scroll-behavior:auto} .topnav a{padding:6px 9px;font-size:12.5px} .fab-stack{right:16px;bottom:16px} } @media (max-width:620px){ .cards{grid-template-columns:1fr} .topnav{gap:0} .topnav a{padding:6px 7px;font-size:12px} } @media (max-width:560px){ .mh-stats{gap:18px 0} .mh-stats li{padding-right:18px;margin-right:18px} .mh-stats b{font-size:22px} .sec-name{font-size:16.5px} .sec-no{font-size:20px} .hit{display:none} .topbar{gap:10px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important} .bg-ring{animation:none !important} .content{scroll-behavior:auto !important} } /* ============================================================ 详情页（body[data-page="detail"]） ============================================================ */ /* 面包屑 .crumbs 定义在 style.css（详情页 / 分类页共用） */ /* ---------- ① 详情头部 ---------- */ .dt-hero{ display:flex;align-items:flex-start;gap:22px; padding:26px 0 30px; border-bottom:1px solid var(--line); } /* 大缩略图 */ .dt-thumb{ flex:0 0 auto; position:relative; display:grid;place-items:center; width:96px;height:96px; border-radius:16px; background:var(--paper-2); border:1px solid var(--line-2); box-shadow:var(--shadow); overflow:hidden; transition:background-color .3s ease,border-color .3s ease; } .dt-thumb img{ width:100%;height:100%; padding:15px; object-fit:contain; opacity:0; transition:opacity .3s ease; } .dt-thumb img.is-loaded{opacity:1} .dt-thumb .thumb-fb{font-size:34px;font-weight:700;color:var(--ink-2);text-transform:uppercase} .dt-meta{flex:1 1 auto;min-width:0;padding-top:2px} /* 分类标签（点击回首页对应板块） */ .dt-cat{ display:inline-flex;align-items:center;gap:6px; padding:3px 10px 3px 8px; border-radius:99px; background:var(--accent-soft); color:var(--accent); font-size:11.5px;font-weight:600;letter-spacing:.01em; margin-bottom:11px; transition:background-color .16s ease; } .dt-cat:hover{background:var(--accent);color:#fff} .dt-cat i{font-size:13px;line-height:1} .dt-name{ font-size:clamp(25px,2.9vw,35px); font-weight:700;letter-spacing:-.032em;line-height:1.14; margin-bottom:9px; word-break:break-word; } .dt-desc{ font-size:15px;line-height:1.62;color:var(--ink-2); max-width:64ch; margin-bottom:18px; } /* 操作区 */ .dt-actions{ display:flex;align-items:center;flex-wrap:wrap;gap:10px; } .dt-visit{ display:inline-flex;align-items:center;gap:8px; height:38px;padding:0 17px; border-radius:9px; background:var(--accent); color:#fff; font-size:13.5px;font-weight:600;letter-spacing:-.005em; box-shadow:0 3px 12px -5px rgba(73,85,212,.65); transition:transform .16s ease,box-shadow .16s ease,background-color .3s ease; } .dt-visit:hover{ transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(73,85,212,.7); } .dt-visit:active{transform:none} .dt-visit svg{ width:14px;height:14px; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; } .dt-visit .vt-arrow{transition:transform .18s ease} .dt-visit:hover .vt-arrow{transform:translateX(2px)} .dt-btn{ display:inline-flex;align-items:center;gap:7px; height:38px;padding:0 14px; border-radius:9px; border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink-2); font-size:13px;font-weight:500; transition:border-color .16s ease,color .16s ease,background-color .3s ease; } .dt-btn:hover{border-color:var(--ink-3);color:var(--ink)} .dt-btn svg{ width:14px;height:14px; fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round; } .dt-btn.is-done{color:var(--accent);border-color:var(--accent)} /* 官网域名 */ .dt-domain{ font-size:12px;color:var(--ink-3); font-variant-numeric:tabular-nums; padding-left:2px; } /* ---------- 区块通用 ---------- */ .dt-block{margin-top:38px} .dt-head{ display:flex;align-items:baseline; padding-bottom:14px; } .dt-h2{ font-size:18px;font-weight:650;letter-spacing:-.02em; flex:0 0 auto;margin-right:13px; } .dt-note{ flex:0 0 auto;font-size:12px;color:var(--ink-3); padding-left:12px;border-left:1px solid var(--line-2); margin-right:13px; } .dt-rule{flex:1 1 auto;height:1px;background:var(--line);transform:translateY(-4px);min-width:16px} /* ---------- ② 介绍正文 ---------- */ .dt-prose p{ font-size:14.5px;line-height:1.8; color:var(--ink-2); max-width:76ch; margin-bottom:15px; } .dt-prose p:last-child{margin-bottom:0} /* 首段：工具的一句话定位（来自 data.js 的 intro，属真实数据） */ .dt-prose .dt-lead{ position:relative; font-size:16px;line-height:1.68; color:var(--ink); padding-left:15px; margin-bottom:20px; } .dt-prose .dt-lead::before{ content:"";position:absolute;left:0;top:.34em;bottom:.34em; width:3px;border-radius:2px; background:var(--brand-grad); } /* 口径说明：内容性质必须写清楚，别让人误当成官方口径 */ .dt-src{ margin-top:24px;padding-top:15px; border-top:1px dashed var(--line-2); font-size:12px !important;line-height:1.7 !important; color:var(--ink-3) !important; max-width:76ch; } .dt-src b{color:var(--ink-2);font-weight:600} /* ---------- ③ 同类产品 ---------- */ .dt-block .cards{margin-top:2px} /* ---------- 空态补充 ---------- */ .empty-link{color:var(--accent);border-bottom:1px solid var(--accent-soft)} .empty-link:hover{border-bottom-color:var(--accent)} /* 找不到工具时把两个区块一起收起来。注意：不能只靠 [hidden] —— .dt-hero{display:flex} 会盖掉 UA 的 [hidden]{display:none}。 */ body.is-missing .crumbs, body.is-missing #hero, body.is-missing #introBlock, body.is-missing #sameBlock{display:none} /* ============================================================ 响应式 ============================================================ */ @media (max-width:1180px){ .dt-hero{gap:19px} .dt-thumb{width:86px;height:86px;border-radius:14px} .dt-thumb img{padding:13px} .dt-thumb .thumb-fb{font-size:30px} } @media (max-width:960px){ .crumbs{padding-top:16px} .dt-hero{padding:20px 0 24px} .dt-thumb{width:74px;height:74px;border-radius:12px} .dt-thumb img{padding:11px} .dt-thumb .thumb-fb{font-size:26px} .dt-block{margin-top:30px} .dt-note{display:none} .dt-back{display:none} /* 窄屏用系统返回手势 / 浏览器返回，省出横向空间 */ } @media (max-width:620px){ .dt-hero{gap:15px} .dt-thumb{width:62px;height:62px;border-radius:11px} .dt-thumb img{padding:9px} .dt-thumb .thumb-fb{font-size:22px} .dt-meta{padding-top:0} .dt-name{margin-bottom:7px} .dt-desc{font-size:14px;margin-bottom:15px} .dt-visit,.dt-btn{height:36px;font-size:13px} .dt-domain{display:none} .dt-prose .dt-lead{font-size:15px} .dt-prose p{font-size:14px} } @media (max-width:420px){ .dt-visit{flex:1 1 100%;justify-content:center} .dt-btn{flex:1 1 auto;justify-content:center} } /* 减少动效偏好 */ @media (prefers-reduced-motion:reduce){ .dt-visit,.dt-btn,.dt-thumb img{transition:none} .dt-visit:hover{transform:none} } /* ============================================================ 分类列表页（body[data-page="category"]） ============================================================ */ /* ---------- 分类头部 ---------- */ .ct-hero{ display:flex;align-items:flex-start;gap:18px; padding:24px 0 26px; border-bottom:1px solid var(--line); } /* 分类图标方块（lucide 字体图标） */ .ct-ic-wrap{ flex:0 0 auto; display:grid;place-items:center; width:58px;height:58px; border-radius:16px; background:var(--accent-soft); color:var(--accent); transition:background-color .3s ease; } .ct-ic-wrap i{font-size:27px;line-height:1} .ct-meta{flex:1 1 auto;min-width:0;padding-top:2px} .ct-name{ font-size:clamp(25px,2.9vw,35px); font-weight:700;letter-spacing:-.032em;line-height:1.14; margin-bottom:7px; word-break:break-word; } .ct-desc{ font-size:14.5px;line-height:1.6;color:var(--ink-2); max-width:64ch; margin-bottom:13px; } /* 统计：共 N 个工具 · 第 x / y 页 */ .ct-stats{ display:flex;flex-wrap:wrap;align-items:center; font-size:12px;color:var(--ink-3); } .ct-stats li{ display:flex;align-items:baseline;gap:5px; padding-left:15px;border-left:1px solid var(--line-2); margin-left:15px; } .ct-stats li:first-child{padding-left:0;border-left:0;margin-left:0} .ct-stats b{ font-family:var(--serif);font-size:16px;font-weight:400; letter-spacing:.01em;color:var(--accent);line-height:1.1; } /* ---------- 卡片列表 ---------- */ #list{margin-top:20px} /* ---------- 分页 ---------- */ .pager{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:6px; margin-top:36px;padding-top:26px; border-top:1px solid var(--line); } .pager:empty{display:none} /* 只有 1 页时不占位置 */ .pg-btn{ display:inline-flex;align-items:center;justify-content:center;gap:5px; min-width:34px;height:34px;padding:0 10px; border-radius:8px; border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink-2); font-size:13px;font-variant-numeric:tabular-nums; transition:border-color .16s ease, color .16s ease, background-color .16s ease; } .pg-btn:hover{border-color:var(--ink-3);color:var(--ink)} .pg-btn.is-cur{ background:var(--accent);border-color:var(--accent); color:#fff;font-weight:600; } .pg-btn.is-cur:hover{color:#fff} .pg-btn.is-off{ opacity:.38;pointer-events:none; } .pg-btn svg{ width:13px;height:13px; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; } .pg-gap{ padding:0 2px; color:var(--ink-3); font-size:13px; user-select:none; } /* ---------- 兜底 ---------- */ /* .ct-hero 与 .cards 都是 flex/grid，会盖掉 UA 的 [hidden]{display:none}，用 body 类收起 */ body.is-missing .crumbs, body.is-missing #hero, body.is-missing #list, body.is-missing #pager{display:none} .empty-link{color:var(--accent);border-bottom:1px solid var(--accent-soft)} .empty-link:hover{border-bottom-color:var(--accent)} /* ============================================================ 响应式 ============================================================ */ @media (max-width:1180px){ .ct-hero{gap:15px} .ct-ic-wrap{width:52px;height:52px;border-radius:14px} .ct-ic-wrap i{font-size:24px} } @media (max-width:960px){ .crumbs{padding-top:16px} .ct-hero{padding:20px 0 22px} .ct-ic-wrap{width:46px;height:46px;border-radius:12px} .ct-ic-wrap i{font-size:21px} .ct-back{display:none} /* 窄屏用系统返回手势 / 浏览器返回 */ .pager{margin-top:28px;padding-top:22px} } @media (max-width:620px){ .ct-hero{gap:12px} .ct-ic-wrap{width:40px;height:40px;border-radius:10px} .ct-ic-wrap i{font-size:19px} .ct-desc{font-size:13.5px;margin-bottom:11px} .ct-stats li{padding-left:12px;margin-left:12px} .pg-btn{min-width:32px;height:32px;padding:0 8px;font-size:12.5px} /* 页码太多时窄屏容易挤成两行，隐藏中间的省略号段 */ .pg-gap{display:none} } @media (max-width:420px){ /* 只保留上一页 / 当前页 / 下一页 */ .pg-num:not(.is-cur){display:none} } /* 减少动效偏好 */ @media (prefers-reduced-motion:reduce){ .pg-btn{transition:none} } /* ============================================================ 8. 接入 FasTool.cn 后的扩展（2026-09-26） ------------------------------------------------------------ 与「服务端渲染」配合新增的三块： · .nav-home 侧栏「返回主站」入口 · .dt-prose markdown 正文排版（mdToHtml 输出 h2/ul/table…，而全局 reset 里 ul 是无序列表、标题无外边距，必须补回来） · .dt-badge 「国内需代理」标记 ============================================================ */ /* ---------- 侧栏：返回主站 ---------- */.nav-home{ display:flex;align-items:center;gap:7px; margin:12px 10px 8px;padding:9px 11px; border:1px solid var(--line);border-radius:var(--r); background:var(--paper-2); font-size:12.5px;color:var(--ink-2); transition:border-color .18s ease,color .18s ease,background-color .3s ease; } .nav-home:hover{border-color:var(--accent);color:var(--accent)} .nav-home svg{ width:13px;height:13px;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } /* ---------- 详情页：markdown 正文排版 ---------- */ .dt-prose > :first-child{margin-top:0} .dt-prose h2{ font-size:17px;font-weight:700;letter-spacing:-.01em; color:var(--ink); margin:30px 0 12px;max-width:76ch; } .dt-prose h3{ font-size:15px;font-weight:600;color:var(--ink); margin:22px 0 9px;max-width:76ch; } .dt-prose h4{ font-size:14px;font-weight:600;color:var(--ink); margin:18px 0 8px;max-width:76ch; } .dt-prose strong{color:var(--ink);font-weight:600} .dt-prose em{font-style:italic} .dt-prose a{color:var(--accent);border-bottom:1px solid var(--accent-soft)} .dt-prose a:hover{border-bottom-color:var(--accent)} .dt-prose ul,.dt-prose ol{ margin:0 0 15px;padding-left:20px;max-width:76ch; font-size:14.5px;line-height:1.8;color:var(--ink-2); } .dt-prose ul{list-style:disc} .dt-prose ol{list-style:decimal} .dt-prose li{margin-bottom:6px} .dt-prose li::marker{color:var(--ink-3)} .dt-prose li > ul,.dt-prose li > ol{margin:6px 0 0} .dt-prose blockquote{ margin:0 0 15px;padding:2px 0 2px 15px; border-left:3px solid var(--line-2); font-size:14px;line-height:1.75;color:var(--ink-2);max-width:76ch; } .dt-prose blockquote p{font-size:inherit;margin-bottom:8px} .dt-prose hr{border:0;border-top:1px dashed var(--line-2);margin:26px 0;max-width:76ch} .dt-prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;padding:1px 5px;border-radius:5px; background:var(--tile);color:var(--ink); } .dt-prose pre{ margin:0 0 15px;padding:13px 15px;overflow-x:auto; background:var(--tile);border:1px solid var(--line);border-radius:var(--r); max-width:76ch; } .dt-prose pre code{background:none;padding:0;font-size:12.5px;line-height:1.7} .dt-prose .md-table{ width:100%;max-width:76ch;margin:0 0 15px; border-collapse:collapse;font-size:13.5px;color:var(--ink-2); } .dt-prose .md-table th,.dt-prose .md-table td{ padding:8px 11px;border:1px solid var(--line);text-align:left; } .dt-prose .md-table th{background:var(--tile);color:var(--ink);font-weight:600} /* ---------- 详情页：访问受限标记 ---------- */ .dt-badge{ display:inline-flex;align-items:center;gap:5px; height:26px;padding:0 9px;border-radius:999px; border:1px solid var(--line-2); font-size:11.5px;color:var(--ink-2);white-space:nowrap; } .dt-badge i{font-size:11px;line-height:1} /* ---------- 首页报头：搜索结果态 ---------- */ .mh-link{color:var(--accent);border-bottom:1px solid var(--accent-soft);font-weight:500} .mh-link:hover{border-bottom-color:var(--accent)} .page-foot a:hover{color:var(--accent)} /* ---------- 无 JS 兜底 ---------- .thumb img / .dt-thumb img 默认 opacity:0，靠 JS 加载完成后加 .is-loaded 淡入。没 JS 时必须直接可见 —— html:not(.js) 的优先级 (0,2,1) 高于 .thumb img (0,1,1)，不依赖规则先后顺序。html 上的 js 类由模板里的内联脚本第一时间加上。 */ html:not(.js) .thumb img, html:not(.js) .dt-thumb img{opacity:1}