/* ============================================================================ TipSeek theme.css — 双主题设计 token 体系 v1（M1 地基，2026-08-27） ---------------------------------------------------------------------------- 用法： 1. 切换主题（默认夜间 dark） 2. 本文件以 CSS 变量 + 语义类（ts-*）驱动双主题 3. 新增/改造页面优先使用 ts-* 语义类；存量 Tailwind 深色类由 「过渡兼容层」在白天主题下自动覆盖（M2-M4 逐页迁移后逐步移除） ---------------------------------------------------------------------------- 品牌基线（用户确认，不许丢）： · 主色 深空科技蓝 #3D6FF0 | 夜间底 #0B1220 系 | 白天浅灰底 #F4F6FB 系 · 玻璃拟态（半透明面 + blur + 细边框） · 顶栏工具按钮：扁平纯图标 36px、细边框、hover 品牌色 · 动效统一缓动 cubic-bezier(0.22,1,0.36,1)；尊重 prefers-reduced-motion ============================================================================ */ /* ============ 1. Primitive tokens（原始值，两主题共用） ============ */ :root { /* 品牌蓝（与 tailwind.config brand 色板一致） */ --ts-brand-50: #EEF3FF; --ts-brand-100: #D9E6FF; --ts-brand-200: #B3CCFF; --ts-brand-300: #85ABFA; --ts-brand-400: #5B8BF5; --ts-brand-500: #3D6FF0; --ts-brand-600: #2B54C9; --ts-brand-700: #1F3E9E; --ts-brand-800: #152C72; --ts-brand-900: #0D1D4C; /* 圆角 / 缓动 / 时长 */ --ts-radius-sm: 0.5rem; /* 8px 小元素 */ --ts-radius-md: 0.75rem; /* 12px 常规卡片 */ --ts-radius-lg: 1rem; /* 16px 大卡片 */ --ts-radius-xl: 1.5rem; /* 24px 容器级 */ --ts-ease: cubic-bezier(0.22, 1, 0.36, 1); /* 统一缓动（滚动显现/悬浮/过渡） */ --ts-dur: 0.3s; /* 常规过渡时长 */ --ts-dur-slow: 0.5s; /* 大元素过渡 */ /* 字体层级 */ --ts-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif; } /* ============ 2. Semantic tokens — 夜间主题（默认） ============ */ :root, [data-theme="dark"] { --ts-bg: #0B1220; /* 页面底 */ --ts-bg-soft: #0E1626; /* 次级底（分区交替） */ --ts-surface: #111A2E; /* 卡片面 */ --ts-elevated: #1A2740; /* 悬浮层 / hover 底 */ --ts-glass-bg: rgba(17, 26, 46, 0.78); /* 玻璃面（顶栏/抽屉/浮层） */ --ts-glass-border: rgba(255, 255, 255, 0.10); --ts-text: #E2E8F0; /* 主文字（slate-200） */ --ts-text-strong: #FFFFFF; /* 强调文字/标题 */ --ts-text-secondary: #94A3B8; /* 次级文字（slate-400） */ --ts-text-muted: #64748B; /* 弱化文字（slate-500） */ --ts-border: rgba(255, 255, 255, 0.10); --ts-hover: rgba(255, 255, 255, 0.05); --ts-hover-strong: rgba(255, 255, 255, 0.10); --ts-shadow: 0 10px 30px rgba(2, 6, 23, 0.45); --ts-shadow-brand: 0 8px 24px rgba(61, 111, 240, 0.30); --ts-accent-soft: rgba(61, 111, 240, 0.15); /* 品牌色低透明度面 */ --ts-scrollbar: rgba(148, 163, 184, 0.30); /* 链接 / 代码 / 表格（文章排版用） */ --ts-link: var(--ts-brand-400); --ts-code-bg: rgba(0, 0, 0, 0.35); --ts-code-color: #A5B4FC; /* hero 专属 */ --ts-hero-orb-a: rgba(61, 111, 240, 0.42); --ts-hero-orb-b: rgba(91, 139, 245, 0.22); --ts-hero-grid: rgba(255, 255, 255, 0.16); } /* ============ 2b. Semantic tokens — 白天主题（浅色玻璃拟态） ============ */ [data-theme="light"] { --ts-bg: #F4F6FB; /* 页面底：浅灰 */ --ts-bg-soft: #EDF1F8; /* 次级底 */ --ts-surface: #FFFFFF; /* 卡片面：白 */ --ts-elevated: #F7F9FD; /* 悬浮层 */ --ts-glass-bg: rgba(255, 255, 255, 0.72); /* 玻璃面（浅色半透白） */ --ts-glass-border: rgba(13, 29, 76, 0.12); --ts-text: #1E293B; /* 主文字（slate-800） */ --ts-text-strong: #0F172A; /* 标题（slate-900） */ --ts-text-secondary: #475569; /* 次级（slate-600） */ --ts-text-muted: #94A3B8; /* 弱化（slate-400） */ --ts-border: rgba(13, 29, 76, 0.12); --ts-hover: rgba(13, 29, 76, 0.05); --ts-hover-strong: rgba(13, 29, 76, 0.09); --ts-shadow: 0 10px 30px rgba(13, 29, 76, 0.10); --ts-shadow-brand: 0 8px 24px rgba(61, 111, 240, 0.25); --ts-accent-soft: rgba(61, 111, 240, 0.10); --ts-scrollbar: rgba(71, 85, 105, 0.30); /* 链接 / 代码 / 表格（文章排版用，白天深蓝更清晰） */ --ts-link: var(--ts-brand-600); --ts-code-bg: rgba(13, 29, 76, 0.06); --ts-code-color: #4338CA; /* hero 专属（浅色下光晕更淡） */ --ts-hero-orb-a: rgba(61, 111, 240, 0.28); --ts-hero-orb-b: rgba(91, 139, 245, 0.16); --ts-hero-grid: rgba(13, 29, 76, 0.10); } /* ============ 3. 全局基础 ============ */ html { scroll-behavior: smooth; touch-action: manipulation; /* 防双击缩放延迟（web-design-guidelines） */ -webkit-tap-highlight-color: transparent; /* 移动端点按去掉灰闪 */ } :root { color-scheme: dark; } /* 滚动条/原生控件跟随夜间主题 */ [data-theme="light"] { color-scheme: light; } /* 白天主题原生控件配色 */ body { font-family: var(--ts-font-sans); background-color: var(--ts-bg); color: var(--ts-text); /* 主题切换的平滑过渡（仅壳层/文字，避免全站重绘闪烁） */ transition: background-color var(--ts-dur) var(--ts-ease), color var(--ts-dur) var(--ts-ease); } /* 细滚动条（两主题自适应） */ * { scrollbar-width: thin; scrollbar-color: var(--ts-scrollbar) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--ts-scrollbar); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* ============ 4. 壳层语义类（布局骨架，两主题由变量驱动） ============ */ /* 基础底色/文字（body 与复用元素） */ .ts-bg { background-color: var(--ts-bg); } .ts-text { color: var(--ts-text); } .ts-text-strong { color: var(--ts-text-strong); } .ts-text-secondary { color: var(--ts-text-secondary); } .ts-text-muted { color: var(--ts-text-muted); } /* 顶栏：玻璃面 + 细底边框 */ .ts-topbar { background-color: var(--ts-glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ts-glass-border); transition: background-color var(--ts-dur) var(--ts-ease), border-color var(--ts-dur) var(--ts-ease); } /* 左侧固定导航 / 移动抽屉 */ .ts-sidenav { background-color: var(--ts-glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--ts-glass-border); transition: background-color var(--ts-dur) var(--ts-ease), border-color var(--ts-dur) var(--ts-ease); } /* 页脚 */ .ts-footer { border-top: 1px solid var(--ts-border); background-color: var(--ts-bg-soft); transition: background-color var(--ts-dur) var(--ts-ease), border-color var(--ts-dur) var(--ts-ease); } /* 顶栏工具按钮：36px 扁平纯图标、细边框、hover 品牌色（用户偏好） */ .ts-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ts-border); background: transparent; color: var(--ts-text-secondary); font-size: 16px; line-height: 1; cursor: pointer; transition: color var(--ts-dur) var(--ts-ease), border-color var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease), transform 0.15s var(--ts-ease); } .ts-icon-btn:hover { color: var(--ts-brand-400); border-color: var(--ts-brand-500); background-color: var(--ts-accent-soft); } .ts-icon-btn:active { transform: scale(0.94); } .ts-icon-btn:focus-visible { outline: 2px solid var(--ts-brand-500); outline-offset: 2px; } /* 顶栏占位图标 hover（文字标签偏好：保留 emoji 占位，hover 提亮） */ .ts-icon-hover { transition: color var(--ts-dur) var(--ts-ease); cursor: pointer; } .ts-icon-hover:hover { color: var(--ts-text-strong); } /* 搜索框 */ .ts-search { width: 100%; background-color: var(--ts-hover); border: 1px solid var(--ts-border); border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--ts-text); transition: border-color var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease); } .ts-search::placeholder { color: var(--ts-text-muted); } .ts-search:focus { outline: none; border-color: var(--ts-brand-500); } /* ============ 5. 通用组件（新增/改造页面复用） ============ */ /* 玻璃卡片 */ .ts-card { background-color: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow); transition: border-color var(--ts-dur) var(--ts-ease), transform var(--ts-dur) var(--ts-ease), box-shadow var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease); } .ts-card:hover { border-color: var(--ts-brand-400); transform: translateY(-2px); box-shadow: var(--ts-shadow-brand); } /* 主按钮（品牌蓝） */ .ts-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 9999px; background-color: var(--ts-brand-500); color: #fff; font-size: 0.875rem; font-weight: 600; transition: background-color var(--ts-dur) var(--ts-ease), transform 0.15s var(--ts-ease), box-shadow var(--ts-dur) var(--ts-ease); box-shadow: 0 6px 16px rgba(61, 111, 240, 0.28); } .ts-btn-primary:hover { background-color: var(--ts-brand-400); box-shadow: 0 8px 20px rgba(61, 111, 240, 0.38); } .ts-btn-primary:active { transform: scale(0.97); } .ts-btn-primary:focus-visible { outline: 2px solid var(--ts-brand-500); outline-offset: 2px; } /* 次按钮（描边） */ .ts-btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 9999px; background: transparent; border: 1px solid var(--ts-border); color: var(--ts-text); font-size: 0.875rem; font-weight: 500; transition: border-color var(--ts-dur) var(--ts-ease), color var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease), transform 0.15s var(--ts-ease); } .ts-btn-ghost:hover { border-color: var(--ts-brand-500); color: var(--ts-brand-400); background-color: var(--ts-accent-soft); } .ts-btn-ghost:active { transform: scale(0.97); } .ts-btn-ghost:focus-visible { outline: 2px solid var(--ts-brand-500); outline-offset: 2px; } /* Eyebrow 标签（hero/区块标题上方小胶囊） */ .ts-eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: 9999px; background-color: var(--ts-accent-soft); border: 1px solid var(--ts-brand-500); color: var(--ts-brand-400); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; } /* ============ 6. Hero（首页签名区） ============ */.ts-hero { position: relative; overflow: hidden; border-radius: var(--ts-radius-xl); padding: 2.5rem 2rem; margin-bottom: 1.5rem; background-color: var(--ts-surface); border: 1px solid var(--ts-border); box-shadow: var(--ts-shadow); isolation: isolate; } /* 背景：品牌蓝径向光晕 ×2（打破均匀渐变，避免 AI 俗套线性渐变） */ .ts-hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: -1; } .ts-hero-orb--a { width: 420px; height: 420px; top: -160px; right: -80px; background: var(--ts-hero-orb-a); } .ts-hero-orb--b { width: 300px; height: 300px; bottom: -140px; left: -60px; background: var(--ts-hero-orb-b); } /* 背景：点阵网格 */ .ts-hero-grid { position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: radial-gradient(circle at 1px 1px, var(--ts-hero-grid) 1px, transparent 0); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); } .ts-hero-title { margin-top: 0.75rem; font-size: 2rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ts-text-strong); text-wrap: balance; } @media (min-width: 768px) { .ts-hero-title { font-size: 2.5rem; } } .ts-hero-sub { margin-top: 0.625rem; font-size: 0.9375rem; color: var(--ts-text-secondary); max-width: 34rem; } /* 签名元素：AI 剧 10 步链路条（纯位置展示，不做链接） */ .ts-flow-strip { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--ts-border); display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; align-items: center; } .ts-flow-step { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--ts-text-secondary); padding: 0.25rem 0.625rem; border-radius: 9999px; border: 1px solid transparent; transition: color var(--ts-dur) var(--ts-ease), border-color var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease); } .ts-flow-step .ts-flow-num { color: var(--ts-brand-400); font-weight: 700; font-variant-numeric: tabular-nums; } .ts-flow-step:hover { color: var(--ts-text-strong); border-color: var(--ts-brand-500); background-color: var(--ts-accent-soft); } .ts-flow-arrow { color: var(--ts-text-muted); font-size: 0.625rem; } /* ============ 6b. M2 组件：新手引导条 / 10 步工作流 / 精选案例区 ============ */ /* 新手引导条：玻璃条 + hover 品牌边框 + 箭头右移（纯锚点跳转） */ .ts-guide-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; margin-bottom: 1.5rem; border-radius: var(--ts-radius-lg); background-color: var(--ts-glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--ts-glass-border); color: var(--ts-text); font-size: 0.875rem; transition: border-color var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease), box-shadow var(--ts-dur) var(--ts-ease); } .ts-guide-bar:hover { border-color: var(--ts-brand-500); background-color: var(--ts-surface); box-shadow: var(--ts-shadow-brand); } .ts-guide-bar .ts-guide-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 0.625rem; background-color: var(--ts-accent-soft); border: 1px solid var(--ts-brand-500); font-size: 1rem; } .ts-guide-bar .ts-guide-arrow { margin-left: auto; flex-shrink: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ts-brand-400); transition: transform var(--ts-dur) var(--ts-ease); } .ts-guide-bar:hover .ts-guide-arrow { transform: translateX(4px); } /* 10 步工作流卡片 */ .ts-workflow-step { position: relative; display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem; border-radius: var(--ts-radius-md); background-color: var(--ts-surface); border: 1px solid var(--ts-border); transition: border-color var(--ts-dur) var(--ts-ease), transform var(--ts-dur) var(--ts-ease), box-shadow var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease); } .ts-workflow-step:hover { border-color: var(--ts-brand-500); transform: translateY(-2px); box-shadow: var(--ts-shadow-brand); background-color: var(--ts-elevated); } .ts-workflow-num { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background-color: var(--ts-accent-soft); border: 1px solid var(--ts-brand-500); color: var(--ts-brand-400); font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .ts-workflow-name { font-size: 0.8125rem; font-weight: 500; color: var(--ts-text-strong); line-height: 1.4; } .ts-workflow-badge { align-self: flex-start; font-size: 0.625rem; color: var(--ts-text-muted); border: 1px dashed var(--ts-border); border-radius: 9999px; padding: 0.0625rem 0.5rem; } /* 精选案例卡 */ .ts-case-card { display: block; padding: 1rem; border-radius: var(--ts-radius-lg); background-color: var(--ts-surface); border: 1px solid var(--ts-border); transition: border-color var(--ts-dur) var(--ts-ease), transform var(--ts-dur) var(--ts-ease), box-shadow var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease); } .ts-case-card:hover { border-color: var(--ts-brand-500); transform: translateY(-2px); box-shadow: var(--ts-shadow-brand); background-color: var(--ts-elevated); } .ts-case-img { display: block; width: 100%; border-radius: var(--ts-radius-sm); background-color: var(--ts-elevated); } .ts-case-label { margin-top: 0.375rem; font-size: 0.75rem; color: var(--ts-text-secondary); line-height: 1.4; text-wrap: pretty; } /* ============ 7. 白天主题 — 存量深色 Tailwind 类过渡兼容层 ============ 说明：现有页面大量硬编码夜间 Tailwind 类（bg-surface / text-slate-* / border-white/10 等）。白天主题下由本层自动覆盖为浅色语义值，保证 「壳 + 内容」整体可读。M2-M4 逐页迁移为 ts-* 语义类后，逐步删除本层。 （类名含特殊字符时属性选择器按字面匹配，无需转义） */ [data-theme="light"] body.bg-ink, [data-theme="light"] [class*="bg-ink"] { background-color: var(--ts-bg); } [data-theme="light"] [class*="bg-surface"] { background-color: var(--ts-surface); } [data-theme="light"] [class*="bg-elevated"] { background-color: var(--ts-elevated); } [data-theme="light"] [class*="text-slate-200"], [data-theme="light"] [class*="text-slate-300"] { color: var(--ts-text); } [data-theme="light"] [class*="text-slate-400"], [data-theme="light"] [class*="text-slate-500"], [data-theme="light"] [class*="text-slate-600"] { color: var(--ts-text-secondary); } /* 品牌浅色文字在浅底上对比不足 → 提深 */ [data-theme="light"] [class*="text-brand-300"], [data-theme="light"] [class*="text-brand-200"] { color: var(--ts-brand-500); } [data-theme="light"] [class*="border-white/"] { border-color: var(--ts-border); } /* 浅色面上的"微白"底 → 浅灰 */ [data-theme="light"] [class*="bg-white/5"] { background-color: var(--ts-hover); } [data-theme="light"] [class*="bg-white/10"] { background-color: var(--ts-hover-strong); } [data-theme="light"] [class*="hover:bg-white/5"]:hover, [data-theme="light"] [class*="hover:bg-white/10"]:hover { background-color: var(--ts-hover-strong); } /* 浅底上 hover 白字看不见 → 深字 */ [data-theme="light"] [class*="hover:text-white"]:hover { color: var(--ts-text-strong); } /* placeholder */ [data-theme="light"] [class*="placeholder-slate-500"]::placeholder { color: var(--ts-text-muted); } /* ============ 8. 主题切换按钮图标显隐 ============ */ [data-theme="dark"] [data-icon="dark"] { display: none; } /* 夜间：显示 ☀️（点击切白天） */ [data-theme="light"] [data-icon="light"] { display: none; } /* 白天：显示 🌙（点击切夜间） */ /* ============ 8b. M3 品牌与体验 ============ */ /* 品牌 Logo 徽章（顶栏/页脚统一） */ .ts-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: linear-gradient(135deg, var(--ts-brand-400), var(--ts-brand-600)); color: #fff; font-weight: 800; font-size: 0.9375rem; line-height: 1; box-shadow: 0 2px 8px rgba(61, 111, 240, 0.35); flex-shrink: 0; } /* 区块标题统一规范（文章/页面标题层级） */ .ts-section-title { font-weight: 700; letter-spacing: -0.01em; color: var(--ts-text-strong); } .ts-section-sub { font-size: 0.875rem; color: var(--ts-text-secondary); } /* 页面加载淡入过渡（服务端渲染一次性动画；reduced-motion 在第 9 节全局关闭） */ @keyframes ts-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } body { animation: ts-page-in 0.4s var(--ts-ease); } /* 统一复制成功态（.copied 加在按钮上） */ .copy-btn { transition: background-color var(--ts-dur) var(--ts-ease), color var(--ts-dur) var(--ts-ease); } .copy-btn.copied { background-color: var(--ts-brand-600) !important; color: #fff !important; } /* 统一卡片 hover 上浮（交互一致性：border 高亮 + 轻微上浮） */ .ts-hover-card { transition: border-color var(--ts-dur) var(--ts-ease), transform var(--ts-dur) var(--ts-ease), box-shadow var(--ts-dur) var(--ts-ease), background-color var(--ts-dur) var(--ts-ease); } .ts-hover-card:hover { border-color: var(--ts-brand-400); transform: translateY(-2px); box-shadow: var(--ts-shadow-brand); } /* ============ 8c. 文章正文 markdown 排版（教程/文章统一规范，双主题自适应） ============ */ .markdown-body { overflow-x: auto; color: var(--ts-text); font-size: 15px; line-height: 1.75; word-break: break-word; } .markdown-body h1 { font-size: 1.6rem; font-weight: 700; color: var(--ts-text-strong); margin: 1.6rem 0 .8rem; line-height: 1.35; letter-spacing: -0.01em; } .markdown-body h2 { font-size: 1.3rem; font-weight: 700; color: var(--ts-text-strong); margin: 1.8rem 0 .7rem; padding-bottom: .45rem; border-bottom: 1px solid var(--ts-border); } .markdown-body h3 { font-size: 1.1rem; font-weight: 600; color: var(--ts-text-strong); margin: 1.3rem 0 .5rem; } .markdown-body h4 { font-size: 1rem; font-weight: 600; color: var(--ts-text-strong); margin: 1.1rem 0 .4rem; } .markdown-body p { margin: .6rem 0; color: var(--ts-text); } .markdown-body strong { color: var(--ts-text-strong); font-weight: 600; } .markdown-body ul, .markdown-body ol { margin: .6rem 0; padding-left: 1.4rem; } .markdown-body li { margin: .3rem 0; } .markdown-body a { color: var(--ts-link); text-decoration: underline; text-underline-offset: 2px; transition: color var(--ts-dur) var(--ts-ease); } .markdown-body a:hover { color: var(--ts-brand-400); } .markdown-body blockquote { border-left: 3px solid var(--ts-brand-500); background: var(--ts-hover); padding: .6rem 1rem; margin: .8rem 0; border-radius: 0 .5rem .5rem 0; color: var(--ts-text-secondary); } .markdown-body code { background: var(--ts-code-bg); color: var(--ts-code-color); padding: .1rem .4rem; border-radius: .3rem; font-size: .9em; } .markdown-body pre { background: var(--ts-code-bg); padding: 1rem; border-radius: .6rem; overflow-x: auto; margin: .8rem 0; border: 1px solid var(--ts-border); } .markdown-body pre code { background: none; padding: 0; color: inherit; } .markdown-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 14px; line-height: 1.65; } .markdown-body thead th { background: var(--ts-accent-soft); color: var(--ts-code-color); font-weight: 600; text-align: left; padding: .65rem .8rem; border: 1px solid var(--ts-border); white-space: nowrap; } .markdown-body tbody td { padding: .65rem .8rem; border: 1px solid var(--ts-border); color: var(--ts-text); vertical-align: top; word-break: break-word; } .markdown-body tbody tr:nth-child(even) { background: var(--ts-hover); } .markdown-body tbody tr:hover { background: var(--ts-accent-soft); } .markdown-body hr { border-color: var(--ts-border); margin: 1.2rem 0; } .markdown-body img { max-width: 100%; border-radius: var(--ts-radius-md); } /* ============ 8d. 缺失 Tailwind 类补丁 ============ 服务器 app.css 为旧 vite 构建产物，M1-M3 新增的 Tailwind 工具类 （w-5/h-5/md:grid-cols-5/任意值类等）不在其中 → 用自建类兜底。 下次全量 vite build 后此节可删（保留也无害，会被同名 Tailwind 类覆盖）。 */ /* 图标尺寸（侧栏/顶栏 SVG） */ .ts-nav-icon, .ts-top-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .ts-top-icon-lg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .ts-divider { width: 1px; height: 1.25rem; flex-shrink: 0; } /* 10px 微字（徽章/角标） */ .ts-text-10 { font-size: 0.625rem; line-height: 1rem; } /* 触摸目标 ≥32px */ .ts-min-touch { min-height: 2rem; } /* 单行截断 */ .ts-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* 页脚三列网格（原 md:grid-cols-[1.5fr_1fr_1fr]） */ .ts-footer-grid { display: grid; gap: 2rem; } @media (min-width: 768px) { .ts-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } } /* 10 步工作流网格（原 md:grid-cols-5，移动 2 列） */ .ts-workflow-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .ts-workflow-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* 案例区两列网格（原 md:grid-cols-2） */ .ts-case-grid { display: grid; gap: 1rem; } @media (min-width: 768px) { .ts-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============ 9. 无障碍：尊重系统减弱动态 ============ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }