/* ============================================================ Language Studio 官网 — 全站样式 ⚠️ 生成物，勿手改。改样式请改源文件后重跑： python3 scripts/build-website-css.py 来源（按此顺序拼接，与浏览器里的层叠顺序一致）： 1. src/client/website/src/styles/{{tokens,base,chrome,components,sections,docs}}.css 2. src/client/website/src/app/**/*.scss（组件级，实测全部是纯 CSS，无 SCSS 特性） 与后台的 admin.css 是**两份独立样式**：两边各自定义 --bg/--surface/--text 等同名变量， 但没有任何页面同时加载两份，故不冲突。切勿合并。 ============================================================ */ /* ---------- src/styles/tokens.css ---------- */ /* ========================================================================== tokens.css — 设计令牌 颜色 / 字体 / 字号 / 间距 / 圆角 / 阴影 / 动效 / 主题（浅色 · 深色） 主题由 theme.js 在 上切换 .theme-light / .theme-dark ========================================================================== */ :root { color-scheme: light; /* ---------------- 字体 ---------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---------------- 字号（流式） ---------------- */ --fs-display: clamp(38px, 5.6vw, 80px); --fs-h1: clamp(32px, 4.2vw, 56px); --fs-h2: clamp(27px, 3.1vw, 44px); --fs-h3: clamp(22px, 2.1vw, 32px); --fs-h4: clamp(19px, 1.5vw, 24px); --fs-lead: clamp(17px, 1.35vw, 21px); --fs-body: clamp(15px, 1.02vw, 17px); --fs-sm: 14px; --fs-xs: 12px; /* 全局导航专用：比 --fs-xs 大一档，保证 12 个主项的可读性 */ --fs-nav: 14px; --lh-display: 1.06; --lh-tight: 1.12; --lh-snug: 1.22; --lh-body: 1.55; --ls-display: -0.018em; --ls-tight: -0.012em; /* ---------------- 布局 ---------------- */ --nav-h: 44px; --nav-h-mobile: 48px; /* 导航内容区最大宽度（同 apple.com：内容居中收束，不铺满整屏）； 主项字号上调后相应放宽，避免多语言（英文 / 日文）下挤压 */ --nav-max: 1120px; /* 正文内容区最大宽度（与导航条同理：居中收束，不铺满整屏）。 取值 1440px 是为了让 ≤1440px 的视口保持原有版式不变， 只在更宽的屏幕上停止拉伸——超宽屏下正文单行可长达 89 个汉字， 远超 CJK 舒适行宽（约 30–45 字）。 */ --content-max: 1440px; --localnav-h: 52px; --gutter: clamp(20px, 4.4vw, 72px); --section-y: clamp(56px, 7.5vw, 120px); --grid-gap: clamp(12px, 1.4vw, 24px); /* ---------------- 圆角 ---------------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 36px; --r-pill: 980px; /* ---------------- 动效 ---------------- */ --ease: cubic-bezier(0.28, 0.11, 0.32, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-1: 0.18s; --dur-2: 0.32s; --dur-3: 0.56s; --dur-4: 0.9s; /* ---------------- 浅色主题 ---------------- */ --c-bg: #ffffff; --c-bg-alt: #fbfbfd; --c-fill: #f5f5f7; --c-fill-2: #ececef; --c-fill-3: #e3e3e6; --c-elevated: #ffffff; --c-text: #1d1d1f; /* 次级 / 三级文本：明度需在「最浅的浅色渐变磁贴」上也满足 WCAG AA（4.5:1）。 原先的 #6e6e73 / #8e8e93 在 --grad-warm 等浅渐变上只有 4.30 / 2.77，已下调。 */ --c-text-2: #4a4a4f; --c-text-3: #6a6a6f; --c-line: #d2d2d7; --c-line-soft: rgba(0, 0, 0, 0.08); --c-link: #0066cc; /* 图标：中性灰，状态靠明度变化表达，不靠颜色 */ --c-icon: #6e6e73; --c-icon-strong: #1d1d1f; /* 供伪元素使用的矢量图形（mask 遮罩，颜色由 background-color 决定） */ --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); --c-accent: #0071e3; --c-accent-2: #42a4ff; /* 强调色作「文字」时的专用值：与作背景的 --c-accent 分开。 --c-accent 在深色底上仅 3.1–4.5，作正文色不合格； 而直接调亮 --c-accent 会让白字按钮从 4.70 掉到 3.02，故拆成两个令牌。 */ --c-accent-text: #0066cc; --c-accent-ink: #ffffff; --c-accent-soft: rgba(0, 113, 227, 0.1); --c-success: #12854b; --c-warn: #a35b00; --c-danger: #d70015; --c-mark: rgba(255, 214, 0, 0.36); /* 徽标：前景需在自己的浅色底上达标，深色主题另给一套更亮的前景色。 底色是半透明色，实际观感会随页面底色变化，故按「叠加在最浅与最深的 页面底色上」两种极端核算，取最差值 ≥4.5。 */ --c-badge-blue-fg: #0058b8; --c-badge-blue-bg: rgba(0, 113, 227, 0.12); --c-badge-green-fg: #0e6d3d; --c-badge-green-bg: rgba(18, 133, 75, 0.14); --c-badge-orange-fg: #8a4c00; --c-badge-orange-bg: rgba(163, 91, 0, 0.14); --c-badge-red-fg: #b8000f; --c-badge-red-bg: rgba(215, 0, 21, 0.12); --c-badge-purple-fg: #4b49c9; --c-badge-purple-bg: rgba(94, 92, 230, 0.14); --c-badge-teal-fg: #00666b; --c-badge-teal-bg: rgba(0, 137, 143, 0.14); --c-nav-bg: rgba(251, 251, 253, 0.72); --c-nav-bg-solid: rgba(251, 251, 253, 0.94); --c-nav-text: rgba(29, 29, 31, 0.88); --c-nav-text-hover: #1d1d1f; --c-nav-line: rgba(0, 0, 0, 0.08); --c-nav-panel: rgba(251, 251, 253, 0.82); --c-scrim: rgba(0, 0, 0, 0.32); --c-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.05); --c-shadow-2: 0 10px 34px rgba(0, 0, 0, 0.09); --c-shadow-3: 0 26px 64px rgba(0, 0, 0, 0.14); /* 蓝色渐变上叠白色文字：终点原本是亮蓝 #42a4ff，白字只有 2.63:1。 改为「深蓝 → 标准蓝」的同色系深浅过渡，白字全程 ≥4.70。 */ /* 两端均压到深蓝：保证渐变上最小白字(12px)也 ≥4.5:1（浅端 #0066cc 仅 5.06， 且实测裸渐变上 12px 元信息低至 4.25，故统一压深至 #0058b8 起） */ --grad-blue: linear-gradient(92deg, #0050a8 0%, #0058b8 100%); --grad-ink: linear-gradient(92deg, #1d1d1f 0%, #4a4a4f 100%); --grad-warm: linear-gradient(120deg, #fff3e0 0%, #ffe6ef 48%, #e8f0ff 100%); --grad-cool: linear-gradient(120deg, #eef4ff 0%, #f3eeff 52%, #e8fbff 100%); --grad-mint: linear-gradient(120deg, #e9fbf2 0%, #eaf4ff 60%, #f4efff 100%); } /* ---------------- 深色主题 ---------------- */ .theme-dark { color-scheme: dark; --c-bg: #000000; --c-bg-alt: #060607; --c-fill: #1d1d1f; --c-fill-2: #26262a; --c-fill-3: #33333a; --c-elevated: #1d1d1f; --c-text: #f5f5f7; --c-text-2: #a1a1a6; --c-text-3: #86868b; --c-line: #3a3a3d; --c-line-soft: rgba(255, 255, 255, 0.09); --c-link: #2997ff; --c-icon: #98989d; --c-icon-strong: #f5f5f7; --c-accent: #0071e3; --c-accent-2: #57b2ff; /* 深色底上需要更亮的强调文字色（--c-accent 在此仅 3.1–4.5，不达标） */ --c-accent-text: #2997ff; --c-accent-ink: #ffffff; --c-accent-soft: rgba(41, 151, 255, 0.16); --c-success: #30d158; --c-warn: #ffd60a; --c-danger: #ff453a; --c-mark: rgba(255, 214, 0, 0.28); /* 徽标：深色主题下前景需提亮，否则压在自己的浅色底上不足 3.5:1 */ --c-badge-blue-fg: #5eb0ff; --c-badge-blue-bg: rgba(0, 113, 227, 0.18); --c-badge-green-fg: #30d158; --c-badge-green-bg: rgba(48, 209, 88, 0.16); --c-badge-orange-fg: #ffd60a; --c-badge-orange-bg: rgba(255, 214, 10, 0.16); --c-badge-red-fg: #ff6b60; --c-badge-red-bg: rgba(255, 69, 58, 0.16); --c-badge-purple-fg: #a99bff; --c-badge-purple-bg: rgba(94, 92, 230, 0.2); --c-badge-teal-fg: #4fd1c5; --c-badge-teal-bg: rgba(0, 137, 143, 0.22); --c-nav-bg: rgba(22, 22, 23, 0.72); --c-nav-bg-solid: rgba(22, 22, 23, 0.94); --c-nav-text: rgba(245, 245, 247, 0.86); --c-nav-text-hover: #f5f5f7; --c-nav-line: rgba(255, 255, 255, 0.1); --c-nav-panel: rgba(28, 28, 30, 0.86); --c-scrim: rgba(0, 0, 0, 0.55); --c-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.42); --c-shadow-2: 0 12px 38px rgba(0, 0, 0, 0.55); --c-shadow-3: 0 28px 70px rgba(0, 0, 0, 0.66); --grad-warm: linear-gradient(120deg, #2a2118 0%, #30202a 48%, #1b2436 100%); --grad-cool: linear-gradient(120deg, #16202f 0%, #1f1a30 52%, #12262b 100%); --grad-mint: linear-gradient(120deg, #14251d 0%, #172334 60%, #211c30 100%); } /* ========================================================================== 主题切换过渡 1) 支持 View Transitions 时按方向走不同动画，两个方向互为逆过程： · 浅 → 深（白变黑）vt-reveal 正向揭示：新主题从点击处扩散铺满， 新主题在上层 —— 视觉上「黑色从按钮涌出，覆盖白色」 · 深 → 浅（黑变白）vt-circle 反向揭示：旧主题收缩进点击处， 旧主题在上层 —— 视觉上「黑色被收回按钮，露出白色」 切换点坐标由 theme.js 写入 --vt-x / --vt-y / --vt-r（视口坐标） 2) 不支持或触发点未知时：交叉淡入淡出 3) 完全不支持时：临时挂上全局过渡类，切换结束后移除，避免长期占用合成器 ========================================================================== */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 2; } ::view-transition-new(root) { z-index: 1; } /* 深 → 浅：反向，旧主题（深）收缩进按钮 */ html.vt-circle::view-transition-old(root) { z-index: 2; animation: vt-circle var(--dur-3) var(--ease) both; } html.vt-circle::view-transition-new(root) { z-index: 1; } /* 浅 → 深：正向，新主题（深）从按钮扩散铺满 */ html.vt-reveal::view-transition-new(root) { z-index: 2; animation: vt-reveal var(--dur-3) var(--ease) both; } html.vt-reveal::view-transition-old(root) { z-index: 1; } html.vt-fade::view-transition-old(root) { animation: vt-fade-out var(--dur-2) var(--ease) both; } html.vt-fade::view-transition-new(root) { animation: vt-fade-in var(--dur-2) var(--ease) both; } @keyframes vt-circle { from { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0%)); } to { clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 0%)); } } @keyframes vt-reveal { from { clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 0%)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0%)); } } @keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } } html.theme-anim, html.theme-anim body, html.theme-anim body * { transition: background-color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease), fill var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease) !important; transition-delay: 0s !important; } /* ---------- src/styles/base.css ---------- */ /* ========================================================================== base.css — 重置 / 排版 / 通用布局 / 动效基类 / 可访问性 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* 带 hidden 属性的元素必须真的不显示。 浏览器默认样式表里的 [hidden] { display: none } 会输给任何作者样式 —— 本站在 .rf-card / .rf__grid 这类元素上写了 display: flex / grid， 于是给它们加 hidden 完全没用（列表筛选、目录空态都靠这个属性切换）。 */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* 平滑滚动保持开启（锚点跳转需要），固定导航的落点由下面的 scroll-padding-top 让出。 （Angular 版还要靠 core/viewport-scroller.ts 把「首屏那次」滚动强制成瞬时， 那是 SPA 特有的补偿；整页导航下浏览器自己就把位置定好了，不需要它。） */ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); } body { margin: 0; padding-top: var(--nav-h); background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; text-rendering: optimizeLegibility; /* 长单词 / 网址 / 代码串在窄列中自动断行， 避免被上面的 overflow-x: hidden 直接裁掉导致内容缺失 */ overflow-wrap: break-word; } body.is-locked { overflow: hidden; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } a { color: var(--c-link); text-decoration: none; transition: color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); } /* 全站默认不给链接加下划线；需要时显式挂 .link-underline， 正文里的行内链接由 .prose a 单独保留静态下划线 */ a:hover { text-decoration: none; } .link-underline, .link-underline:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------------- 矢量图标 ---------------- */ /* 图标统一由官方 @tabler/icons-angular 的 渲染（模板里写 ``），要用的图标在 src/app/app.config.ts 的 provideTablerIcons 里注册。 宿主元素 transparent 掉（display: contents）是这里的关键：组件会给宿主写死 24×24 的行内宽高，而全站的图标尺寸靠 `.icon` 的 1em 决定，宿主一旦成盒就会把 24px 带进来（行内样式压过样式表）。去掉宿主的盒模型后，内层 直接顶上来当 父级的布局参与者，与迁移前「容器里就地放一个 」的盒模型完全一致。 尺寸 = 1em，颜色 = currentColor，描边按上下文覆盖（如表内对勾 2.4）。 */ tabler-icon { display: contents; } .icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } :focus-visible { outline: 3px solid var(--c-accent-2); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--c-mark); color: var(--c-text); } /* 允许正常选中文字：禁用链接/图片的默认可拖拽，避免靠近链接选词时松手触发 「拖链接 / 拖图」而取消文本选区（表现为「拖拽能选、松手即没」）。 */ a, img, svg { -webkit-user-drag: none; user-drag: none; } /* ---------------- 标题与正文 ---------------- */ h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: var(--ls-tight); line-height: var(--lh-snug); } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); } p { margin: 0; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } hr { border: 0; border-top: 1px solid var(--c-line); margin: 0; } code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; } kbd { padding: 2px 7px; border: 1px solid var(--c-line); border-bottom-width: 2px; border-radius: 6px; background: var(--c-fill); font-size: 12px; white-space: nowrap; } mark { background: var(--c-mark); color: inherit; border-radius: 3px; padding: 0 2px; } /* ---------------- 布局工具 ---------------- */ .section { width: 100%; padding-block: var(--section-y); } .section--tight { padding-block: clamp(36px, 4.5vw, 72px); } .section--fill { background: var(--c-bg-alt); } .section--surface { background: var(--c-fill); } /* 通栏内容容器：保留响应式安全边距，并在超宽屏收束居中。 背景色挂在父级 .section 上，因此限制本元素宽度不会截断背景。 */ .wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { padding-inline: clamp(20px, 8vw, 140px); } .wrap--tight { padding-inline: var(--grid-gap); } .stack { display: grid; gap: var(--grid-gap); } .stack--xs { gap: 8px; } .stack--sm { gap: 14px; } .stack--md { gap: 24px; } .stack--lg { gap: clamp(28px, 3.6vw, 56px); } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--center { justify-content: center; } .row--tight { gap: 10px; } .grid { display: grid; gap: var(--grid-gap); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } /* ---------------- 文本工具 ---------------- */ .eyebrow { font-size: clamp(13px, 1.05vw, 17px); font-weight: 600; letter-spacing: 0.01em; color: var(--c-text-2); } .display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 700; } .display--sm { font-size: clamp(30px, 3.4vw, 52px); } .lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--c-text-2); font-weight: 400; } .muted { color: var(--c-text-2); } .dim { color: var(--c-text-3); } .tiny { font-size: var(--fs-xs); line-height: 1.45; } .small { font-size: var(--fs-sm); } .strong { font-weight: 600; } .gradient-text { background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; } .center { text-align: center; margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 10px 16px; border-radius: var(--r-sm); background: var(--c-accent); color: #fff; font-size: var(--fs-sm); transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out); } .skip-link:focus { transform: none; text-decoration: none; } /* ---------------- 滚动渐显 ---------------- */ /* 入场揭示：元素初始隐藏并下移，进入视口（app.ts 的 IntersectionObserver 加 .is-in） 后淡入归位。初始隐藏仅在 html.js 下生效 —— 无 JS 时内容直接可见，保证可访问性与 SEO。 首屏已在视口内的元素在 afterEveryRender 中同步加 .is-in（不闪、不淡），视口外的元素 滚动到位再触发，彻底规避 SPA 导航「先不可见再出现」的抖动。 */ html.js .reveal { opacity: 0; transform: translate3d(0, 26px, 0); will-change: opacity, transform; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } html.js .reveal.is-in { opacity: 1; transform: none; will-change: auto; } html.js .reveal--fade { transform: none; } html.js .reveal--scale { transform: scale(0.96); } html.js .reveal--scale.is-in { transform: none; } html.js .reveal--left { transform: translate3d(-32px, 0, 0); } html.js .reveal--right { transform: translate3d(32px, 0, 0); } /* 入场延迟档次：替代原本写在 HTML 上的 --reveal-delay 内联样式 */ html.js .reveal--d1 { --reveal-delay: 60ms; } html.js .reveal--d2 { --reveal-delay: 80ms; } html.js .reveal--d3 { --reveal-delay: 120ms; } html.js .reveal--d4 { --reveal-delay: 160ms; } html.js .reveal--d5 { --reveal-delay: 180ms; } html.js .reveal--d6 { --reveal-delay: 240ms; } html.js .reveal--d7 { --reveal-delay: 300ms; } /* ---------------- 间距工具类 ---------------- */ .mt-10 { margin-top: 10px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-22 { margin-top: 22px; } .mt-26 { margin-top: 26px; } .mt-section { margin-top: clamp(28px, 3.4vw, 52px); } .mt-section-lg { margin-top: clamp(32px, 4vw, 64px); } .mb-20 { margin-bottom: 20px; } /* ---------------- 语言待应用：避免闪现 ---------------- */ /* 目标语言词典尚未就绪时（首访非内置语言，见 index.html 的 i18n-pending）， 先隐藏待翻译文本，就绪后由 TranslationsService 摘掉 上的 i18n-pending。 用 visibility 而非 display：保留占位，就绪后不会出现布局跳动。 */ html.i18n-pending [data-i18n] { visibility: hidden; } /* ---------------- 减弱动效 ---------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.js .reveal { opacity: 1 !important; transform: none !important; } } /* ---------------- 移动端调优 ---------------- */ /* 窄屏：滚动渐显幅度收敛，避免大位移在方块屏上显得生硬 */ @media (max-width: 734px) { html.js .reveal { transform: translate3d(0, 14px, 0); } html.js .reveal--scale { transform: scale(0.97); } html.js .reveal--left { transform: translate3d(-16px, 0, 0); } /* 两列网格退化为单列：窄屏上并排会把内容压成细长条 */ .grid--2 { grid-template-columns: 1fr; } } /* 超窄屏（小屏手机竖屏）：多列网格一律单列，保证每行仍有可读宽度 */ @media (max-width: 480px) { .grid--3, .grid--4 { grid-template-columns: 1fr; } /* 首尾呼应的行动区在窄屏纵向铺开，按钮更易点 */ .phero__actions { gap: 12px; } } /* ---------------- 触屏：消除粘滞 hover ---------------- */ /* 触屏设备上 :hover 会在点击后残留，凡带位移/阴影的悬停效果一律停用 */ @media (hover: none) { .card:hover, .rf-card:hover, .plan:hover, .dl-card:hover, .support-card:hover, .doc__nav a:hover, .hnews article:hover, .hwm__card:hover, .mock__card:hover, .opt:hover, .kbd-row:hover, .mcard:hover, .search-result:hover, .logo-wall div:hover, .switcher__btn:hover, .gnav__icon:hover, .tabs__btn:hover, .chip:hover { transform: none; } .doc__toc a:hover, .gnav__panel-col a:hover { transform: none; } .feature-row:hover .feature-row__media, .shot:hover, .rf-card:hover .rf-card__cover { transform: none; } } /* ---------------- 触屏：补足可点区域 ---------------- */ /* WCAG 2.5.8 要求非内联目标不小于 24×24。站点里这些「独立链接」实测只有 19–23px 高，拇指容易点空；内联在正文里的链接按规范豁免，故只补这几类。 这些元素本就是 inline-flex / block，加 min-height 不会改变既有排版。 */ @media (pointer: coarse) { .ftr__legal-links a, .doc__crumbs a, .rf-card__link, .rf-card__title a, .contact__info a, .link-arrow { display: inline-flex; align-items: center; min-height: 26px; } .search-overlay__close { min-height: 28px; padding-inline: 10px; } } /* ---------------- 打印 ---------------- */ @media print { .gnav, .lnav, .ftr, .toast, .search-overlay { display: none !important; } } /* ---------- src/styles/chrome.css ---------- */ /* ========================================================================== chrome.css — 全局导航 / 局部导航 / 移动端抽屉 / 搜索浮层 / 页脚 视觉规格对齐 apple.com.cn：44px 导航、saturate(180%) blur(20px) 毛玻璃、 14px 导航字号、0.8 默认透明度、导航内容 1120px 居中收束、常驻不隐藏、 52px 局部导航、#f5f5f7 页脚 ========================================================================== */ /* ---------------------------------------------------------------- 全局导航 */ /* 常驻显示：不做「下滑隐藏 / 上滑重现」，与 apple.com 一致 */ .gnav { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--nav-h); background: var(--c-nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; color: var(--c-nav-text); transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .gnav.is-stuck { border-bottom-color: var(--c-nav-line); } .gnav__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: var(--grad-blue); opacity: 0; transition: opacity var(--dur-2) var(--ease); } .gnav.is-stuck .gnav__progress { opacity: 1; } .gnav__inner { display: flex; align-items: center; height: 100%; width: 100%; max-width: var(--nav-max); margin-inline: auto; padding-inline: clamp(16px, 2.6vw, 40px); } /* 品牌标识：hover 只做透明度变化，不缩放旋转（同 apple.com） */ .gnav__brand { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--c-nav-text-hover); padding: 0 8px; opacity: 0.8; transition: opacity var(--dur-2) var(--ease); } .gnav__brand:hover { opacity: 1; text-decoration: none; } .gnav__brand-icon { display: block; width: 26px; height: 26px; border-radius: 7px; } .gnav__brand-text { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .gnav__list { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; margin: 0; /* 导航项较多，内边距随视口收紧，避免溢出 */ padding: 0 clamp(4px, 1vw, 16px); height: 100%; } .gnav__item { height: 100%; display: flex; align-items: center; } .gnav__link { position: relative; display: inline-flex; align-items: center; height: 100%; /* 中文两字 ≈ 28px；字号上调后内边距上限同步收窄，保证 12 个主项在多语言下都不溢出 */ padding: 0 clamp(5px, 0.5vw, 8px); font-size: var(--fs-nav); line-height: 1; letter-spacing: -0.01em; color: var(--c-nav-text); opacity: 0.8; white-space: nowrap; transition: opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .gnav__link:hover, .gnav__link[aria-current="page"] { opacity: 1; color: var(--c-nav-text-hover); text-decoration: none; } .gnav__link::after { content: ""; position: absolute; left: clamp(5px, 0.5vw, 10px); right: clamp(5px, 0.5vw, 10px); bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--dur-2) var(--ease-out); } .gnav__link[aria-current="page"]::after { transform: scaleX(1); } .gnav__actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .gnav__icon { display: grid; place-items: center; position: relative; width: 32px; height: 32px; border-radius: 50%; color: var(--c-nav-text); opacity: 0.85; transition: opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .gnav__icon:hover { opacity: 1; background: var(--c-line-soft); transform: scale(1.06); } .gnav__icon:active { transform: scale(0.94); } .gnav__icon .icon { width: 17px; height: 17px; } /* 触屏：图标视觉尺寸不变，但把可点区域撑到 44×44， 低于这个尺寸拇指很难稳定命中（WCAG 2.5.5 建议值） */ @media (pointer: coarse) { .gnav__icon::after, .gnav__burger::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } .gnav__icon--spin .icon { transition: transform var(--dur-3) var(--ease-spring); } .theme-dark .gnav__icon--spin .icon { transform: rotate(180deg); } /* ---------------------------------------------------------------- 账号（右上角） 未登录：主色胶囊「登录」按钮；已登录：圆形头像 + 向下展开的下拉菜单。 注意 .switcher__menu 是**向上**弹的（它在页脚与抽屉里用），这里要向下，故不复用。 */ .gnav__account { position: relative; margin-left: 6px; } .gnav__login { margin-left: 6px; } .gnav__avatar { display: grid; place-items: center; position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; /* --ah 是后端按展示名散列出的稳定色相 0–359，同一账号恒为同一个底色 */ background: hsl(var(--ah, 210) 62% 88%); color: hsl(var(--ah, 210) 48% 28%); font-size: var(--fs-sm); font-weight: 600; line-height: 1; box-shadow: 0 0 0 1px var(--c-line-soft); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); } .theme-dark .gnav__avatar { background: hsl(var(--ah, 210) 42% 32%); color: hsl(var(--ah, 210) 70% 86%); } .gnav__avatar:hover { transform: scale(1.06); box-shadow: 0 0 0 2px var(--c-accent-soft), 0 0 0 3px var(--c-accent); } .gnav__avatar:active { transform: scale(0.94); } .gnav__avatar img { width: 100%; height: 100%; object-fit: cover; } .gnav__avatar.is-static { cursor: default; } .gnav__account-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 196px; padding: 6px; border-radius: var(--r-md); background: var(--c-elevated); border: 1px solid var(--c-line-soft); box-shadow: var(--c-shadow-3); opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0) scale(0.97); transform-origin: 100% 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2) var(--ease); z-index: 20; } .gnav__account-menu.is-open { opacity: 1; visibility: visible; transform: none; } .gnav__account-head { display: grid; gap: 2px; padding: 8px 12px 10px; border-bottom: 1px solid var(--c-line-soft); margin-bottom: 6px; } .gnav__account-name { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gnav__account-mail { font-size: var(--fs-xs); color: var(--c-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gnav__account-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-text); transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .gnav__account-item:hover { background: var(--c-fill); transform: translateX(2px); text-decoration: none; } .gnav__account-item .icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.7; } .gnav__account-item.is-danger { color: var(--c-danger); } .gnav__account-item.is-danger .icon { opacity: 1; } /* 抽屉里的账号入口（移动端）：头像 + 名字一行，下面是两个动作 */ .gnav__drawer-account { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--c-line-soft); background: var(--c-elevated); color: var(--c-text); } .gnav__drawer-account:hover { text-decoration: none; border-color: var(--c-line); } .gnav__drawer-account-name { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gnav__drawer-act { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--c-line-soft); background: var(--c-elevated); color: var(--c-text); font-size: var(--fs-sm); } .gnav__drawer-act .icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.7; } .gnav__drawer-act.is-danger { color: var(--c-danger); } .gnav__drawer-login { width: 100%; } /* 账号块与下面的语言 / 主题切换器之间留出一行的间距（抽屉工具区是 flex-wrap 的） */ .gnav__drawer-tools > .gnav__drawer-account, .gnav__drawer-tools > .gnav__drawer-act, .gnav__drawer-tools > .gnav__drawer-login { margin-bottom: 4px; } .gnav__drawer-tools > .gnav__drawer-act.is-danger, .gnav__drawer-tools > .gnav__drawer-login { margin-bottom: 14px; } /* ------------------------------------------------------------------- 大面板 */ .gnav__panel { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 999; padding: clamp(20px, 3vw, 44px) clamp(16px, 2.6vw, 40px) clamp(28px, 3.4vw, 52px); background: var(--c-nav-panel); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-bottom: 1px solid var(--c-nav-line); box-shadow: var(--c-shadow-2); opacity: 0; visibility: hidden; transform: translate3d(0, -12px, 0); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease); } /* 顶部隐形桥：保证从导航移动到面板时命中区域连续 */ .gnav__panel::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .gnav__panel.is-open { opacity: 1; visibility: visible; transform: none; } .gnav__panel-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(20px, 3vw, 56px); width: 100%; max-width: var(--nav-max); margin-inline: auto; } .gnav__panel-col h5 { font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 600; margin-bottom: 12px; letter-spacing: 0.01em; } .gnav__panel-col a { display: block; padding: 7px 0; font-size: var(--fs-sm); color: var(--c-text); transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .gnav__panel-col a:hover { color: var(--c-link); transform: translateX(4px); text-decoration: none; } .gnav__panel-col a.is-current { color: var(--c-link); font-weight: 600; } .gnav__panel-foot { margin-top: clamp(10px, 1.2vw, 16px); padding-top: 10px; border-top: 1px solid var(--c-line-soft); display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-text-2); line-height: 1.4; } .gnav__panel-foot .link-arrow { font-size: var(--fs-sm); gap: 4px; } .gnav__panel-foot .link-arrow:hover { gap: 7px; } /* --------------------------------------------------------------- 移动端汉堡 */ .gnav__burger { display: none; width: 34px; height: 34px; position: relative; border-radius: 50%; transition: background-color var(--dur-1) var(--ease); } .gnav__burger:hover { background: var(--c-line-soft); } .gnav__burger span { position: absolute; left: 9px; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease); } .gnav__burger span:nth-child(1) { top: 13px; } .gnav__burger span:nth-child(2) { top: 20px; } .gnav.is-menu-open .gnav__burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .gnav.is-menu-open .gnav__burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } .gnav__drawer { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 998; background: var(--c-bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px clamp(16px, 4vw, 40px) 64px; opacity: 0; visibility: hidden; transform: translate3d(0, -10px, 0); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease); } /* 抽屉渲染在 header 之后（兄弟节点），用 ~ 兄弟选择器联动 */ .gnav.is-menu-open ~ .gnav__drawer { opacity: 1; visibility: visible; transform: none; } .gnav__drawer-group { border-bottom: 1px solid var(--c-line-soft); padding: 14px 0; } .gnav__drawer-group > a { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 600; color: var(--c-text); padding: 6px 0; } .gnav__drawer-group > a:hover { text-decoration: none; color: var(--c-link); } .gnav__drawer-sub a { display: block; padding: 9px 0 9px 14px; font-size: 15px; color: var(--c-text-2); border-left: 2px solid var(--c-line-soft); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), padding-left var(--dur-2) var(--ease-out); } .gnav__drawer-sub a:hover { color: var(--c-text); border-color: var(--c-accent); padding-left: 20px; text-decoration: none; } /* 抽屉分组的入场错峰：序号由结构位置决定，脚本只输出骨架 */ .gnav__drawer-group:nth-child(1) { --i: 0; } .gnav__drawer-group:nth-child(2) { --i: 1; } .gnav__drawer-group:nth-child(3) { --i: 2; } .gnav__drawer-group:nth-child(4) { --i: 3; } .gnav__drawer-group:nth-child(5) { --i: 4; } .gnav__drawer-group:nth-child(6) { --i: 5; } .gnav__drawer-group:nth-child(7) { --i: 6; } .gnav__drawer-group:nth-child(8) { --i: 7; } .gnav__drawer-group:nth-child(9) { --i: 8; } .gnav__drawer-group:nth-child(10) { --i: 9; } .gnav__drawer-group:nth-child(11) { --i: 10; } .gnav__drawer-group:nth-child(12) { --i: 11; } .gnav.is-menu-open .gnav__drawer-group { animation: drawer-in var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes drawer-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } .gnav__drawer-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 24px; } /* ----------------------------------------------------------------- 搜索浮层 */ .search-overlay { position: fixed; inset: 0 0 auto 0; z-index: 1001; background: var(--c-nav-bg-solid); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-bottom: 1px solid var(--c-nav-line); box-shadow: var(--c-shadow-2); transform: translate3d(0, -100%, 0); transition: transform var(--dur-3) var(--ease-out); will-change: transform; } .search-overlay.is-open { transform: none; } .search-overlay__inner { width: 100%; max-width: var(--nav-max); margin-inline: auto; padding: clamp(16px, 2.4vw, 28px) clamp(16px, 2.6vw, 40px) clamp(20px, 2.6vw, 32px); } .search-overlay__field { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--c-line); padding-bottom: 10px; transition: border-color var(--dur-2) var(--ease); } .search-overlay__field:focus-within { border-color: var(--c-accent); } .search-overlay__field .icon { width: 20px; height: 20px; color: var(--c-text-3); flex: 0 0 auto; } .search-overlay__input { /* flex 子项默认 min-width:auto，输入框的固有宽度会把「关闭」挤出容器； 显式允许收缩，极窄屏下输入框才会让位 */ min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: clamp(19px, 2.2vw, 28px); letter-spacing: var(--ls-tight); padding: 4px 0; } .search-overlay__close { font-size: var(--fs-sm); color: var(--c-link); white-space: nowrap; } .search-overlay__results { margin-top: 18px; max-height: min(56vh, 480px); overflow-y: auto; display: grid; gap: 2px; } .search-overlay__hint { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .search-result { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); color: var(--c-text); transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .search-result:hover, .search-result:focus-visible { background: var(--c-fill); text-decoration: none; transform: translateX(3px); } .search-result h6 { margin: 0; font-size: 15px; font-weight: 600; } .search-result p { font-size: 13px; color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result span.kind { margin-left: auto; font-size: 11px; color: var(--c-text-3); white-space: nowrap; } /* ----------------------------------------------------------------- 局部导航 */ .lnav { position: sticky; top: var(--nav-h); z-index: 900; height: var(--localnav-h); background: var(--c-nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--c-nav-line); } .lnav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100%; width: 100%; padding-inline: clamp(16px, 2.6vw, 40px); } .lnav__title { font-size: 21px; font-weight: 600; letter-spacing: var(--ls-tight); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lnav__list { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 28px); overflow-x: auto; scrollbar-width: none; } .lnav__list::-webkit-scrollbar { display: none; } .lnav__list a { font-size: var(--fs-xs); color: var(--c-text); opacity: 0.82; white-space: nowrap; transition: opacity var(--dur-1) var(--ease); } .lnav__list a:hover, .lnav__list a.is-current { opacity: 1; text-decoration: none; } .lnav__list a.is-current { font-weight: 600; } .lnav__cta { flex: 0 0 auto; } /* --------------------------------------------------------------------- 页脚 */ .ftr { background: var(--c-fill); color: var(--c-text-2); font-size: var(--fs-xs); line-height: 1.6; margin-top: 0; } .ftr__inner { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: clamp(28px, 3.4vw, 48px) clamp(16px, 2.6vw, 40px) 24px; } .ftr__note { padding-bottom: 18px; border-bottom: 1px solid var(--c-line); color: var(--c-text-3); max-width: 100%; } .ftr__note p { margin-bottom: 6px; } .ftr__note a { color: var(--c-link); } .ftr__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: clamp(18px, 2.4vw, 44px); padding: 22px 0 20px; border-bottom: 1px solid var(--c-line); } .ftr__col h6 { margin: 0 0 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text); } .ftr__col a { display: block; padding: 4px 0; color: var(--c-text-2); transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .ftr__col a:hover { color: var(--c-text); } .ftr__legal { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; padding: 16px 0 8px; } .ftr__legal-links { display: flex; flex-wrap: wrap; gap: 6px 16px; } .ftr__legal-links a { color: var(--c-text-2); } .ftr__legal-links a:hover { color: var(--c-text); } /* ------------------------------------------------------- 语言 / 主题切换控件 */ .switcher { position: relative; } .switcher__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-elevated); color: var(--c-text-2); font-size: var(--fs-xs); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); } .switcher__btn:hover { color: var(--c-text); border-color: var(--c-text-3); transform: translateY(-1px); box-shadow: var(--c-shadow-1); } .switcher__btn:active { transform: translateY(0) scale(0.97); } .switcher__btn .icon { width: 13px; height: 13px; transition: transform var(--dur-2) var(--ease); } .switcher__btn[aria-expanded="true"] .icon { transform: rotate(180deg); } .switcher__menu { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 168px; padding: 6px; border-radius: var(--r-md); background: var(--c-elevated); border: 1px solid var(--c-line-soft); box-shadow: var(--c-shadow-3); opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0) scale(0.97); transform-origin: 0 100%; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2) var(--ease); z-index: 20; } .switcher__menu.is-open { opacity: 1; visibility: visible; transform: none; } .switcher__menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-text); transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .switcher__menu button:hover { background: var(--c-fill); transform: translateX(2px); } .switcher__menu button[aria-pressed="true"] { color: var(--c-link); font-weight: 600; } .switcher__menu button[aria-pressed="true"]::after { content: ""; margin-left: auto; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; } /* 主题切换器按钮上显示的「当前值」。 当前主题只存在于 localStorage（服务端看不见），故两个标签都渲染出来， 由 上的 .theme-light / .theme-dark 决定显示哪个 —— 纯 CSS 决定， 深色用户在首次绘制时就直接看到「深色」，不会先闪一下「浅色」。 ⚠️ 这段是 Mvc 化新增的：Angular 版由 JS 在渲染后回填，页脚那处存在同样的闪烁。 */ .theme-light [data-theme-value="dark"], .theme-dark [data-theme-value="light"] { display: none; } /* ------------------------------------------------------------------- 响应式 */ /* 主项由 6 个增加到 12 个，桌面断点相应从 1069px 提高到 1140px */ @media (max-width: 1139px) { .gnav__list { display: none; } .gnav__burger { display: block; } .gnav__inner { justify-content: space-between; } .gnav__brand { margin-right: auto; } .gnav__panel { display: none; } .lnav__title { font-size: 18px; } } @media (max-width: 734px) { :root { --nav-h: var(--nav-h-mobile); } .lnav__list { display: none; } .ftr__cols { gap: 18px; } .ftr__col { grid-column: 1 / -1; border-bottom: 1px solid var(--c-line-soft); padding-bottom: 12px; } .ftr__col:last-child { border-bottom: 0; } /* 语言 / 主题切换器独占一行并靠左： 它们的弹出菜单以按钮左沿定位，靠右时会被窄屏裁掉 */ .ftr__legal .row--tight { width: 100%; justify-content: flex-start; } .switcher__menu { min-width: 0; max-width: calc(100vw - 2 * var(--gutter)); } .ftr__col h6 { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .ftr__col h6::after { content: ""; width: 15px; height: 15px; flex: 0 0 auto; background-color: var(--c-text-3); -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat; transition: transform var(--dur-2) var(--ease); } .ftr__col.is-open h6::after { transform: rotate(90deg); } .ftr__col > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); } .ftr__col.is-open > div { grid-template-rows: 1fr; } .ftr__col > div > ul { overflow: hidden; } } /* ---------------- 极窄屏（≤380px）---------------- */ /* 320px 宽下「品牌文字 + 四个操作图标」会挤出视口： 隐藏品牌文字、保留图标，既留住品牌标识也确保操作区完整可见 */ @media (max-width: 380px) { .gnav__brand-text { display: none; } .gnav__brand { padding: 0 2px; } .gnav__actions { gap: 0; } } /* 页脚并排的两个切换器：靠右那个的弹出菜单改为右对齐， 否则在 1024–1139px 区间菜单会越过视口右缘 */ .ftr__legal .row--tight .switcher:last-child .switcher__menu { left: auto; right: 0; } /* 无毛玻璃支持时降级为实色，保证可读性 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gnav, .lnav, .gnav__panel, .search-overlay { background: var(--c-nav-bg-solid); } } /* --------------------------------------------------- 主题切换 View Transitions */ /* 圆形揭示：白→黑时新主题从按钮位置扩散；黑→白时旧主题收缩回按钮。 变量 --vt-x / --vt-y / --vt-r 由 ThemeService 在切换时按按钮位置写入 。 legacy 的 theme.js 引用了 vt-* 类但未提供对应 CSS，此处补齐。 */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html.vt-reveal::view-transition-new(root) { animation: vt-grow var(--dur-3) var(--ease-out); } html.vt-circle::view-transition-old(root) { animation: vt-shrink var(--dur-3) var(--ease-out); } @keyframes vt-grow { from { clip-path: circle(0px at var(--vt-x) var(--vt-y)); } to { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); } } @keyframes vt-shrink { from { clip-path: circle(var(--vt-r) at var(--vt-x) var(--vt-y)); } to { clip-path: circle(0px at var(--vt-x) var(--vt-y)); } } /* --------------------------------------- 移动端抽屉开启（与 .gnav.is-menu-open 联动） 说明：SPA 把 .gnav 包进了 .gnav-shell，legacy 的 `.gnav.is-menu-open ~ .gnav__drawer` 兄弟选择器失效，故改为直接给抽屉本身加 .is-open 来开启。 */ .gnav__drawer.is-open { opacity: 1; visibility: visible; transform: none; } /* ------------------------------------------------ 搜索浮层：快速访问提示 chip */ .search-overlay__hint .chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill, 999px); border: 1px solid var(--c-line); background: var(--c-elevated); color: var(--c-text-2); font-size: var(--fs-xs); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); } .search-overlay__hint .chip:hover { color: var(--c-text); border-color: var(--c-text-3); transform: translateY(-1px); box-shadow: var(--c-shadow-1); text-decoration: none; } /* 浮层 / 抽屉开启时锁定背景滚动（legacy nav.js 的 is-locked） */ body.is-locked { overflow: hidden; } /* ---------- src/styles/components.css ---------- */ /* ========================================================================== components.css — 通用组件 按钮 / 链接 / 磁贴 / 卡片 / 数据 / 步骤 / 手风琴 / 标签页 / 表格 / 提示条 / 进度 / 时间线 / 画廊 / 引述 / 提示气泡 ========================================================================== */ /* ------------------------------------------------------------------ 按钮 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 26px; border-radius: var(--r-pill); font-size: var(--fs-body); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transition: transform var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); } .btn:hover { text-decoration: none; } .btn:active { transform: scale(0.972); } .btn--primary { background: var(--c-accent); color: var(--c-accent-ink); } .btn--primary:hover { background: #0077ed; box-shadow: 0 6px 20px rgba(0, 113, 227, 0.28); } .btn--secondary { border: 1px solid var(--c-line-2, var(--c-line)); color: var(--c-text); } .btn--secondary:hover { border-color: var(--c-text-3); background: var(--c-fill); } .btn--ghost { color: var(--c-link); padding-inline: 8px; } .btn--ghost:hover { opacity: 0.72; } .btn--sm { min-height: 36px; padding: 8px 18px; font-size: var(--fs-sm); } .btn--lg { min-height: 54px; padding: 15px 34px; font-size: var(--fs-lead); } .btn--block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } /* 箭头链接 */ .link-arrow { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-body); color: var(--c-link); transition: gap var(--dur-2) var(--ease-out); } .link-arrow::after { content: ""; width: 0.95em; height: 0.95em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat; transition: transform var(--dur-2) var(--ease-out); } .link-arrow:hover { text-decoration: none; gap: 9px; } .link-arrow:hover::after { transform: translateX(2px); } .link-arrow--block:hover { opacity: 0.78; } /* ------------------------------------------------------------- 磁贴（主页） */ .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; } .tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--c-bg); padding: clamp(28px, 4vw, 72px) clamp(22px, 3vw, 56px); display: flex; flex-direction: column; gap: 18px; min-height: clamp(340px, 38vw, 560px); transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); } .tile--full { grid-column: 1 / -1; } .tile--fill { background: var(--c-fill); } .tile--alt { background: var(--c-bg-alt); } .tile--warm { background: var(--grad-warm); } .tile--cool { background: var(--grad-cool); } .tile--mint { background: var(--grad-mint); } .tile--center { align-items: center; text-align: center; justify-content: center; } .tile:hover { box-shadow: var(--c-shadow-2); } .tile__kicker { font-size: clamp(13px, 1.05vw, 19px); font-weight: 600; color: var(--c-text-2); letter-spacing: 0.01em; } .tile__title { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: 700; } .tile__sub { font-size: var(--fs-lead); line-height: 1.42; color: var(--c-text-2); } .tile__media { margin-top: auto; width: 100%; padding-top: 8px; } .tile__links { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; } /* ------------------------------------------------------------------ 卡片 */ .card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 32px); border-radius: var(--r-md); background: var(--c-elevated); border: 1px solid var(--c-line-soft); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease); will-change: transform; } .card:hover { transform: translateY(-4px); box-shadow: var(--c-shadow-2); border-color: var(--c-line); } .card--fill { background: var(--c-fill); border-color: transparent; } .card--plain { background: transparent; border-color: var(--c-line-soft); } .card__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 24px; color: var(--c-icon); background: var(--c-fill); transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .card:hover .card__icon { transform: scale(1.06); color: var(--c-icon-strong); background: var(--c-fill-2); } .card h3, .card h4 { letter-spacing: -0.01em; } .card p { color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.55; } .card__foot { margin-top: auto; padding-top: 8px; } /* ------------------------------------------------------------------ 数据 */ .stat { display: flex; flex-direction: column; gap: 6px; } .stat__num { font-size: clamp(34px, 4.4vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stat__unit { font-size: 0.5em; font-weight: 600; margin-left: 4px; color: var(--c-text-2); } .stat__label { font-size: var(--fs-sm); color: var(--c-text-2); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(20px, 3vw, 48px); } /* ------------------------------------------------------------------ 步骤 */ .steps { display: grid; gap: clamp(18px, 2.4vw, 34px); counter-reset: step; } .step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; } .step__num { counter-increment: step; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 15px; font-weight: 600; flex: 0 0 auto; transition: transform var(--dur-2) var(--ease-spring); } .step:hover .step__num { transform: scale(1.12); } .step__num::before { content: counter(step); } .step h4 { margin-bottom: 6px; } .step p { color: var(--c-text-2); font-size: var(--fs-sm); } /* -------------------------------------------------------------- 手风琴 */ .acc { border-top: 1px solid var(--c-line); } .acc__item { border-bottom: 1px solid var(--c-line); } .acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(16px, 1.8vw, 24px) 4px; text-align: left; font-size: var(--fs-h4); font-weight: 600; color: var(--c-text); transition: color var(--dur-1) var(--ease); } .acc__head:hover { color: var(--c-link); } .acc__icon { position: relative; width: 18px; height: 18px; flex: 0 0 auto; } .acc__icon::before, .acc__icon::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; border-radius: 2px; background: currentColor; transform: translateY(-50%); transition: transform var(--dur-2) var(--ease-out); } .acc__icon::after { transform: translateY(-50%) rotate(90deg); } .acc__item.is-open .acc__icon::after { transform: translateY(-50%) rotate(0deg); } .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); } .acc__item.is-open .acc__panel { grid-template-rows: 1fr; } .acc__panel > div { overflow: hidden; } .acc__body { padding: 0 4px clamp(18px, 2vw, 26px); color: var(--c-text-2); opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); } .acc__item.is-open .acc__body { opacity: 1; transform: none; } /* ---------------------------------------------------------------- 标签页 */ .tabs { display: flex; gap: 6px; padding: 5px; border-radius: var(--r-pill); background: var(--c-fill); overflow-x: auto; scrollbar-width: none; width: fit-content; max-width: 100%; } .tabs::-webkit-scrollbar { display: none; } .tabs__btn { position: relative; padding: 9px 20px; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--c-text-2); white-space: nowrap; transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .tabs__btn:hover { color: var(--c-text); } .tabs__btn.is-active { background: var(--c-elevated); color: var(--c-text); font-weight: 600; box-shadow: var(--c-shadow-1); } .tabs__btn:active { transform: scale(0.97); } .tabs__count { margin-left: 7px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text-3); transition: color var(--dur-2) var(--ease); } .tabs__btn.is-active .tabs__count { color: var(--c-accent-text); } .tabs__panel { display: none; animation: panel-in var(--dur-3) var(--ease-out) both; } .tabs__panel.is-active { display: block; } @keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ 表格 */ .table-wrap { width: 100%; overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--c-line-soft); background: var(--c-elevated); } .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 620px; } .tbl th, .tbl td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--c-line-soft); vertical-align: top; } .tbl thead th { position: sticky; top: 0; background: var(--c-fill); font-weight: 600; color: var(--c-text); white-space: nowrap; } .tbl tbody tr { transition: background-color var(--dur-1) var(--ease); } .tbl tbody tr:hover { background: var(--c-fill); } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl td:first-child { font-weight: 600; color: var(--c-text); } .tbl .yes, .tbl .no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 14px; } .tbl .yes { background: rgba(18, 133, 75, 0.14); /* 用徽标绿而非 --c-success：后者在自身浅绿底上只有 4.15:1 */ color: var(--c-badge-green-fg); } .tbl .no { background: var(--c-fill-2); color: var(--c-text-3); } .tbl .yes .icon, .tbl .no .icon { stroke-width: 2.4; } /* -------------------------------------------------------------- 徽标/标签 */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--c-fill); color: var(--c-text-2); } .badge--blue { background: var(--c-badge-blue-bg); color: var(--c-badge-blue-fg); } .badge--green { background: var(--c-badge-green-bg); color: var(--c-badge-green-fg); } .badge--orange { background: var(--c-badge-orange-bg); color: var(--c-badge-orange-fg); } .badge--red { background: var(--c-badge-red-bg); color: var(--c-badge-red-fg); } .badge--purple { background: var(--c-badge-purple-bg); color: var(--c-badge-purple-fg); } .badge--teal { background: var(--c-badge-teal-bg); color: var(--c-badge-teal-fg); } .chip { padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: transparent; color: var(--c-text); font-size: var(--fs-sm); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .chip:hover { border-color: var(--c-text-3); transform: translateY(-2px); } .chip.is-active { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); } /* ---------------------------------------------------------------- 提示条 */ .callout { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px 22px; border-radius: var(--r-md); background: var(--c-fill); border: 1px solid var(--c-line-soft); border-left: 4px solid var(--c-text-3); } .callout__ic { display: grid; place-items: center; font-size: 20px; line-height: 1; } .callout p { font-size: var(--fs-sm); color: var(--c-text-2); } .callout strong { display: block; color: var(--c-text); margin-bottom: 4px; } .callout--note { border-left-color: var(--c-accent); } .callout--tip { border-left-color: var(--c-success); } .callout--warning { border-left-color: var(--c-warn); } .callout--important { border-left-color: var(--c-danger); } /* ---------------------------------------------------------------- 进度条 */ .bar { height: 8px; border-radius: var(--r-pill); background: var(--c-fill-2); overflow: hidden; } .bar > i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--grad-blue); transform-origin: 0 50%; transition: width 1.1s var(--ease-out); } .meter { display: grid; gap: 8px; } .meter__row { display: flex; justify-content: space-between; font-size: var(--fs-sm); } /* -------------------------------------------------------------- 时间线 */ .timeline { position: relative; display: grid; gap: clamp(24px, 3vw, 44px); padding-left: 26px; } .timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--c-line); } .timeline__item { position: relative; } .timeline__item::before { content: ""; position: absolute; left: -26px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-bg); border: 3px solid var(--c-accent); transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2) var(--ease); } .timeline__item:hover::before { transform: scale(1.25); background: var(--c-accent); } .timeline__date { font-size: var(--fs-xs); color: var(--c-text-3); letter-spacing: 0.02em; } /* ---------------------------------------------------------------- 画廊 */ .gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 420px); gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; } .gallery > * { scroll-snap-align: start; } .gallery::-webkit-scrollbar { height: 8px; } .gallery::-webkit-scrollbar-thumb { background: var(--c-fill-3); border-radius: 4px; } /* --------------------------------------------------------------- 图文行 */ .feature-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 96px); align-items: center; width: 100%; } .feature-row--reverse .feature-row__media { order: 2; } .feature-row__media { border-radius: var(--r-lg); overflow: hidden; background: var(--c-fill); aspect-ratio: 16 / 11; display: grid; place-items: center; transition: transform var(--dur-3) var(--ease-out); } .feature-row:hover .feature-row__media { transform: scale(1.015); } .feature-row__body { display: grid; gap: 16px; align-content: center; } /* --------------------------------------------------------------- 引述块 */ .quote { display: grid; gap: 18px; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-lg); background: var(--c-fill); } .quote blockquote { margin: 0; font-size: var(--fs-h3); line-height: 1.35; letter-spacing: var(--ls-tight); font-weight: 500; } .quote figcaption { font-size: var(--fs-sm); color: var(--c-text-2); } .quote blockquote::before { content: "“"; } .quote blockquote::after { content: "”"; } /* ---------------------------------------------------------------- 提示气泡 */ .toast { position: fixed; left: 50%; bottom: 28px; z-index: 1200; transform: translate3d(-50%, 140%, 0); padding: 14px 22px; border-radius: var(--r-pill); background: var(--c-text); color: var(--c-bg); font-size: var(--fs-sm); box-shadow: var(--c-shadow-3); opacity: 0; transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease); pointer-events: none; max-width: calc(100vw - 40px); text-align: center; } .toast.is-show { transform: translate3d(-50%, 0, 0); opacity: 1; } /* ------------------------------------------------------------------ 表单 */ .field { display: grid; gap: 8px; } .field label { font-size: var(--fs-sm); font-weight: 600; } .input, .select, .textarea { width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--c-line); background: var(--c-elevated); color: var(--c-text); font-size: var(--fs-body); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .input:hover, .select:hover, .textarea:hover { border-color: var(--c-text-3); } .input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft); } .textarea { min-height: 140px; resize: vertical; } .input::placeholder, .textarea::placeholder { color: var(--c-text-3); } /* --------------------------------------------------------------- 应用窗口示意 */ .mock { border-radius: var(--r-md); overflow: hidden; background: var(--c-elevated); border: 1px solid var(--c-line-soft); box-shadow: var(--c-shadow-2); } .mock__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--c-fill); border-bottom: 1px solid var(--c-line-soft); } .mock__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--c-fill-3); } .mock__bar i:nth-child(1) { background: #ff5f57; } .mock__bar i:nth-child(2) { background: #febc2e; } .mock__bar i:nth-child(3) { background: #28c840; } .mock__bar span { margin-left: auto; margin-right: auto; font-size: 12px; color: var(--c-text-3); font-weight: 500; } .mock__body { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; min-height: 260px; } .mock__side { padding: 16px 12px; background: var(--c-bg-alt); border-right: 1px solid var(--c-line-soft); font-size: 12px; display: grid; gap: 4px; align-content: start; } .mock__side b { font-size: 10px; text-transform: uppercase; color: var(--c-text-3); letter-spacing: 0.06em; margin-top: 10px; } .mock__side b:first-child { margin-top: 0; } .mock__side span { padding: 5px 9px; border-radius: 7px; color: var(--c-text-2); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .mock__side span.is-on { background: var(--c-accent); color: #fff; font-weight: 500; transform: translateX(2px); } .mock__main { padding: clamp(16px, 2vw, 28px); display: grid; gap: 14px; align-content: start; } .mock__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; } .mock__card { padding: 12px; border-radius: var(--r-sm); background: var(--c-fill); display: grid; gap: 4px; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .mock__card:hover { transform: translateY(-3px); box-shadow: var(--c-shadow-1); } .mock__card b { font-size: 13px; } .mock__card p { font-size: 11px; color: var(--c-text-3); line-height: 1.4; } /* ------------------------------------------------------------------ 响应式 */ @media (max-width: 1068px) { .tiles { grid-template-columns: 1fr; } .feature-row { grid-template-columns: 1fr; } .feature-row--reverse .feature-row__media { order: 0; } .mock__body { grid-template-columns: 1fr; } .mock__side { border-right: 0; border-bottom: 1px solid var(--c-line-soft); grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; } .mock__side b { margin-top: 0; align-self: center; } } @media (max-width: 734px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card:hover { transform: none; } } /* ---------------- 组件变体（替代原本写在 HTML 上的内联样式） ---------------- */ .tile__links--center { justify-content: center; } /* 通栏插图：去掉卡片圆角 / 描边 / 阴影，撑满容器宽度 */ .mock--flush { width: 100%; border-radius: 0; box-shadow: none; border: 0; } .input--compact { max-width: 260px; padding: 8px 14px; font-size: 14px; } /* 代码块：自带衬底与横向滚动 */ .pre--boxed { background: var(--c-fill); padding: 14px 16px; border-radius: 12px; overflow-x: auto; } /* 波形柱图：容器定高、柱子等分，柱高由 :nth-child 给出 */ .waveform { display: flex; gap: 5px; align-items: flex-end; height: 72px; } .waveform__bar { flex: 1; border-radius: 3px; background: var(--c-fill-3); } .waveform__bar--accent { background: var(--c-accent); } .waveform__bar:nth-child(1) { height: 34%; } .waveform__bar:nth-child(2) { height: 62%; } .waveform__bar:nth-child(3) { height: 88%; } .waveform__bar:nth-child(4) { height: 46%; } .waveform__bar:nth-child(5) { height: 74%; } .waveform__bar:nth-child(6) { height: 38%; } .waveform__bar:nth-child(7) { height: 96%; } .waveform__bar:nth-child(8) { height: 54%; } .waveform__bar:nth-child(9) { height: 68%; } .waveform__bar:nth-child(10) { height: 42%; } /* ---------- src/styles/sections.css ---------- */ /* ========================================================================== 多页共用区块 — 页首 Hero、区块标题、清单、下载卡、快捷键表 ========================================================================== */ .phero { width: 100%; padding: clamp(40px, 5.6vw, 96px) var(--gutter) clamp(24px, 3.4vw, 52px); background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line-soft); } .phero--gradient { background: var(--grad-cool); } .phero--warm { background: var(--grad-warm); } .phero--mint { background: var(--grad-mint); } .phero__inner { display: grid; gap: 18px; width: 100%; max-width: var(--content-max); margin-inline: auto; } .phero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 700; } .phero p { font-size: var(--fs-lead); color: var(--c-text-2); } .phero__actions { display: flex; gap: 16px 28px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .phero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: clamp(16px, 2.4vw, 40px); margin-top: clamp(20px, 3vw, 40px); padding-top: clamp(20px, 2.6vw, 34px); border-top: 1px solid var(--c-line-soft); } .shead { display: grid; gap: 14px; width: 100%; margin-bottom: clamp(24px, 3.4vw, 52px); } .shead h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-display); } .shead p { font-size: var(--fs-lead); color: var(--c-text-2); } .shead--center { justify-items: center; text-align: center; } .dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(18px, 2.4vw, 36px); } .dl-card { display: grid; gap: 14px; padding: clamp(24px, 2.8vw, 40px); border-radius: var(--r-lg); background: var(--c-elevated); border: 1px solid var(--c-line-soft); /* 修正 legacy 笔误：原为 `transition: transform ... ,;`（逗号后直接分号）， 导致整条声明无效、box-shadow 被丢到下一行。legacy 原文保留在 legacy/pages/_shared/sections.css 作为回归基准，此处按原意补全。 */ transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .dl-card:hover { transform: translateY(-4px); box-shadow: var(--c-shadow-2); } .dl-card--featured { background: var(--grad-blue); color: #fff; border-color: transparent; } .dl-card--featured p, .dl-card--featured .dl-card__meta { color: #fff; } .dl-card--featured .btn--primary { background: #fff; /* 该按钮固定在白底上（不随主题变），故用恒定的 --c-accent： 若用 --c-accent-text，深色主题会取到 #2997ff，白底上只有 3.02:1 */ color: var(--c-accent); } .dl-card--featured .btn--primary:hover { background: rgba(255, 255, 255, 0.9); } .dl-card__meta { font-size: var(--fs-xs); color: var(--c-text-3); } .dl-card__list { display: grid; gap: 8px; font-size: var(--fs-sm); color: var(--c-text-2); } .dl-card__list li { display: flex; gap: 8px; } .dl-card__list li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; background-color: var(--c-success); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; } .dl-card--featured .dl-card__list li::before { background-color: #fff; } /* featured 卡片是深蓝渐变底：列表与徽标自带的深色文字会盖掉继承的白色， 实测只剩 1.3:1，必须显式改白；徽标改用半透明黑底配白字（7.3:1）。 */ .dl-card--featured .dl-card__list { color: #fff; } .dl-card--featured .badge { background: rgba(0, 0, 0, 0.25); color: #fff; } .kbd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; } .kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--c-fill); font-size: var(--fs-sm); transition: transform var(--dur-2) var(--ease-out); } .kbd-row:hover { transform: translateX(3px); } .checklist { display: grid; gap: 12px; } .checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--fs-sm); color: var(--c-text-2); } .checklist li::before { content: ""; width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; border-radius: 50%; background-color: var(--c-accent); -webkit-mask: var(--ico-check) center / 13px no-repeat; mask: var(--ico-check) center / 13px no-repeat; } /* ---------- src/styles/docs.css ---------- */ /* ========================================================================== docs.css — 文档中心 1) 文档主页：对齐 apple.com.cn 翻新（Refurbished）页面 —— 大标题 + 说明 + 筛选条 + 「产品」卡网格 + 保障说明 + 常见问题 2) 文档详情页：对齐 support.apple.com 支持文章 —— 面包屑 + 大标题 + 摘要 + 「本文内容」索引 + 正文（100% 宽） ========================================================================== */ /* ---------------------------------------------------- 文档主页（翻新页风格） */ .rf__hero { width: 100%; padding: clamp(40px, 5.4vw, 92px) var(--gutter) clamp(24px, 3vw, 40px); background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line-soft); } .rf__hero h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); margin-bottom: 14px; } .rf__hero p { font-size: var(--fs-lead); color: var(--c-text-2); } .rf__hero-note { margin-top: 22px; padding: 16px 20px; border-radius: var(--r-md); background: var(--c-fill); font-size: var(--fs-sm); color: var(--c-text-2); } .rf__filters { position: sticky; top: var(--nav-h); z-index: 800; background: var(--c-nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--c-nav-line); transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out), visibility var(--dur-2) var(--ease); will-change: transform, opacity; } /* 滚过筛选条后自动收起；滚回顶部时重新出现 */ .rf__filters.is-hidden { opacity: 0; visibility: hidden; transform: translate3d(0, -12px, 0); pointer-events: none; } .rf__filters-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px var(--gutter); } @media (max-width: 734px) { .rf__filters-inner { gap: 10px; } .rf__filters-inner .input { max-width: 100% !important; flex: 1 1 100%; order: 10; } .rf__count { margin-left: auto; } } .rf__filters-label { font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 600; } .rf__chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .rf__count { font-size: var(--fs-xs); color: var(--c-text-3); white-space: nowrap; } .rf__body { padding: clamp(24px, 3.4vw, 56px) var(--gutter) clamp(48px, 6vw, 100px); } .rf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2.2vw, 32px); width: 100%; } /* 产品卡：封面 + 名称 + 说明 + 元信息 + 链接 */ .rf-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 24px; border-radius: var(--r-md); background: var(--c-elevated); border: 1px solid var(--c-line-soft); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); will-change: transform; /* 整卡可点的定位上下文：标题锚点 ::after 拉伸到整卡（stretched-link 模式） */ position: relative; } .rf-card:hover { transform: translateY(-6px); box-shadow: var(--c-shadow-2); } .rf-card__cover { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden; background: var(--c-fill); font-size: clamp(40px, 5vw, 68px); font-weight: 700; color: var(--c-icon-strong); transition: transform var(--dur-3) var(--ease-out); } .rf-card:hover .rf-card__cover { transform: scale(1.03); } /* 插画外的 1px 内描边：让封面边界在浅色插画上也不糊 */ .rf-card__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--c-line-soft); pointer-events: none; } .rf-card__cover span { position: relative; z-index: 1; } /* 封面插画：每篇文档一幅；配色由 data-tone 决定，深浅主题各一套 */ .rf-art { display: block; width: 100%; height: 100%; /* 兜底底色：插画由外部 SVG 引入，若浏览器不解析（如 Firefox 的外部 ）， 封面仍呈现该主题的渐变，不会露出空白 */ background: linear-gradient(150deg, var(--art-bg-a), var(--art-bg-b)); --art-bg-a: #e8f1ff; --art-bg-b: #f8fbff; --art-1: #0071e3; --art-2: #8cc0ff; } .rf-art[data-tone="cyan"] { --art-bg-a: #e2f5fb; --art-bg-b: #f6fdff; --art-1: #0a89c4; --art-2: #7fd6f2; } .rf-art[data-tone="teal"] { --art-bg-a: #e0f6f3; --art-bg-b: #f4fdfb; --art-1: #00898f; --art-2: #79cfcd; } .rf-art[data-tone="green"] { --art-bg-a: #e6f7ec; --art-bg-b: #f6fdf8; --art-1: #12854b; --art-2: #74d3a0; } .rf-art[data-tone="indigo"] { --art-bg-a: #ebe9ff; --art-bg-b: #f8f7ff; --art-1: #5e5ce6; --art-2: #a9a6ff; } .rf-art[data-tone="amber"] { --art-bg-a: #fdf0e0; --art-bg-b: #fffaf3; --art-1: #b06a00; --art-2: #ffc56b; } .rf-art[data-tone="pink"] { --art-bg-a: #fde9f1; --art-bg-b: #fff8fa; --art-1: #d62d7a; --art-2: #ff9dbd; } .rf-art[data-tone="graphite"] { --art-bg-a: #edeff3; --art-bg-b: #f9fafb; --art-1: #3f444d; --art-2: #a3aab5; } .theme-dark .rf-art { --art-bg-a: #0b1726; --art-bg-b: #0e1c2e; --art-1: #2f9bff; --art-2: #12508f; } .theme-dark .rf-art[data-tone="cyan"] { --art-bg-a: #05222b; --art-bg-b: #092730; --art-1: #34c4f2; --art-2: #0f5a76; } .theme-dark .rf-art[data-tone="teal"] { --art-bg-a: #052421; --art-bg-b: #092b28; --art-1: #2ec4be; --art-2: #0f5c58; } .theme-dark .rf-art[data-tone="green"] { --art-bg-a: #06231a; --art-bg-b: #092b1f; --art-1: #34d17c; --art-2: #12613c; } .theme-dark .rf-art[data-tone="indigo"] { --art-bg-a: #101334; --art-bg-b: #151843; --art-1: #8b86ff; --art-2: #3c3496; } .theme-dark .rf-art[data-tone="amber"] { --art-bg-a: #2a1a06; --art-bg-b: #331f08; --art-1: #ffc457; --art-2: #7a4a06; } .theme-dark .rf-art[data-tone="pink"] { --art-bg-a: #2b0d1c; --art-bg-b: #331021; --art-1: #ff7ba9; --art-2: #8a1450; } .theme-dark .rf-art[data-tone="graphite"] { --art-bg-a: #16181b; --art-bg-b: #1d2024; --art-1: #b6bdc7; --art-2: #4a505a; } .rf-card__cat { font-size: var(--fs-xs); color: var(--c-text-3); font-weight: 600; letter-spacing: 0.02em; } .rf-card__title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; } .rf-card__desc { font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.5; } .rf-card__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; } .rf-card__link { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--c-link); transition: gap var(--dur-2) var(--ease-out); } .rf-card__link::after { content: ""; width: 0.95em; height: 0.95em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat; } .rf-card:hover .rf-card__link { gap: 10px; } /* 整卡单击打开：标题锚点拉伸到整卡（锚点自身保持 static， 其 ::after 的定位上下文落到 .rf-card 上）；只此一个真实导航锚点，避免多个 tab 焦点。 封面/阅读链接已改为装饰（aria-hidden 或 span），由该覆盖层统一接管点击与键盘聚焦。 */ .rf-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* 标题文字保持在覆盖层之上，保证选中/点击手感正常 */ .rf-card__title a { z-index: 1; } .rf__assurance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 80px); padding: clamp(28px, 3.4vw, 52px); border-radius: var(--r-lg); background: var(--c-fill); } .rf__assurance h3 { font-size: var(--fs-h4); margin-bottom: 8px; } .rf__assurance p { font-size: var(--fs-sm); color: var(--c-text-2); } .rf__skeleton { border-radius: var(--r-md); background: linear-gradient( 100deg, var(--c-fill) 30%, var(--c-fill-2) 50%, var(--c-fill) 70% ); background-size: 220% 100%; animation: rf-shimmer 1.3s linear infinite; } @keyframes rf-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } } /* 骨架屏的文字条：尺寸由类名决定，脚本只输出结构 */ .rf__skeleton--meta, .rf__skeleton--line, .rf__skeleton--line-short { height: 14px; border-radius: 4px; } .rf__skeleton--title { height: 20px; border-radius: 4px; } .rf__skeleton--meta { width: 38%; } .rf__skeleton--title { width: 70%; } .rf__skeleton--line { width: 92%; } .rf__skeleton--line-short { width: 60%; } /* 卡片入场错峰：序号由网格位置决定，脚本只输出结构 */ .rf-card:nth-child(1) { --reveal-delay: 0ms; } .rf-card:nth-child(2) { --reveal-delay: 45ms; } .rf-card:nth-child(3) { --reveal-delay: 90ms; } .rf-card:nth-child(4) { --reveal-delay: 135ms; } .rf-card:nth-child(5) { --reveal-delay: 180ms; } .rf-card:nth-child(6) { --reveal-delay: 225ms; } .rf-card:nth-child(7) { --reveal-delay: 270ms; } .rf-card:nth-child(8) { --reveal-delay: 315ms; } .rf-card:nth-child(n + 9) { --reveal-delay: 360ms; } /* -------------------------------------------------- 文档详情页（支持文章风格） */ .doc__head { padding-bottom: clamp(14px, 1.8vw, 22px); margin-bottom: clamp(20px, 2.6vw, 32px); border-bottom: 1px solid var(--c-line-soft); } .doc__crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-text-3); margin-bottom: 18px; } .doc__crumbs a { color: var(--c-link); } .doc__crumbs span[aria-hidden] { opacity: 0.6; } .doc__head h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); line-height: var(--lh-tight); } .doc__head-sub { margin-top: 12px; font-size: var(--fs-lead); color: var(--c-text-2); max-width: 64ch; } .doc__meta { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 12px; font-size: var(--fs-xs); color: var(--c-text-3); } .doc__layout { width: 100%; padding: clamp(28px, 3.6vw, 60px) var(--gutter) clamp(56px, 7vw, 110px); /* 窄屏单栏；≥1068px 由变量切换为「索引栏 + 正文」双栏并整体居中 */ --doc-cols: minmax(0, 1fr); display: grid; grid-template-columns: var(--doc-cols); gap: clamp(28px, 3.6vw, 60px); } @media (min-width: 1068px) { .doc__layout { --doc-cols: 230px minmax(0, 860px); justify-content: center; gap: clamp(40px, 5vw, 80px); } } /* 左栏：粘性「本文内容」索引 */ .doc__rail { align-self: start; } @media (min-width: 1068px) { .doc__rail { position: sticky; top: calc(var(--nav-h) + 24px); } .doc__rail .doc__toc { margin-bottom: 0; } } /* 窄屏：侧栏并入文档流 */ @media (max-width: 1067px) { .doc__rail { display: contents; } } /* 「本文内容」索引：Apple 支持文章同款 */ .doc__toc { padding: 22px 26px; border-radius: var(--r-md); background: var(--c-fill); margin-bottom: clamp(28px, 3.4vw, 48px); } .doc__toc h2 { font-size: var(--fs-h4); margin-bottom: 12px; } .doc__toc ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 6px 32px; counter-reset: toc; } .doc__toc li { counter-increment: toc; } .doc__toc a { display: block; padding: 6px 0; font-size: var(--fs-sm); color: var(--c-link); transition: transform var(--dur-2) var(--ease-out); } .doc__toc a::before { content: counter(toc) ". "; color: var(--c-text-3); } .doc__toc a:hover { transform: translateX(4px); opacity: 0.78; } /* 正文：宽屏 860px 阅读栏（不占满），窄屏 100% */ .doc__article { width: 100%; } .prose { width: 100%; font-size: var(--fs-body); color: var(--c-text); } .prose > * + * { margin-top: 1.05em; } .prose h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-display); margin-top: 1.8em; padding-top: 0.4em; scroll-margin-top: calc(var(--nav-h) + 24px); } .prose h3 { font-size: var(--fs-h3); margin-top: 1.5em; scroll-margin-top: calc(var(--nav-h) + 24px); } .prose h4 { font-size: var(--fs-h4); margin-top: 1.3em; } .prose p { line-height: var(--lh-body); color: var(--c-text); } .prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: 8px; } .prose ul li { list-style: disc; } .prose ol li { list-style: decimal; } .prose li::marker { color: var(--c-text-3); } .prose strong { font-weight: 600; } .prose a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; } .prose hr { margin: 2.4em 0; } .prose code { padding: 2px 6px; border-radius: 5px; background: var(--c-fill); font-size: 0.9em; } .prose pre { padding: 18px 20px; border-radius: var(--r-md); background: var(--c-fill); overflow-x: auto; line-height: 1.55; } .prose pre code { padding: 0; background: none; } .prose blockquote { margin: 0; padding: 14px 20px; border-left: 3px solid var(--c-line); color: var(--c-text-2); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; } .prose th, .prose td { padding: 12px 16px; border: 1px solid var(--c-line-soft); text-align: left; } .prose th { background: var(--c-fill); font-weight: 600; } .prose img { border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-fill); max-width: 100%; height: auto; } /* 文档截图：图注居中、浅灰，避免在明暗主题下糊成一片 */ .prose figure { margin: 1.8em 0; text-align: center; } .prose figure img { display: inline-block; box-shadow: var(--c-shadow-2); } .prose figcaption { margin-top: 12px; font-size: var(--fs-sm); color: var(--c-text-3); line-height: 1.5; } /* 成对截图（如明/暗主题对照）并排 */ .prose .figure-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); margin: 1.8em 0; } .prose .figure-row figure { margin: 0; } @media (max-width: 640px) { .prose .figure-row { grid-template-columns: 1fr; } } /* 支持文章中的编号步骤：Apple 采用大号序数 + 说明 */ .doc-steps { display: grid; gap: clamp(20px, 2.6vw, 34px); margin: 1.6em 0; counter-reset: dstep; } .doc-step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; } .doc-step::before { counter-increment: dstep; content: counter(dstep); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-fill); color: var(--c-accent-text); font-size: 18px; font-weight: 700; transition: transform var(--dur-2) var(--ease-spring); } .doc-step:hover::before { transform: scale(1.08); } .doc-step h3 { font-size: var(--fs-h4); margin-bottom: 6px; } .doc-step p { color: var(--c-text-2); font-size: var(--fs-sm); } /* 文章底部：上下篇 */ .doc__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: clamp(24px, 3vw, 44px); } .doc__nav a { display: grid; gap: 6px; padding: 22px 26px; border-radius: var(--r-md); background: var(--c-elevated); border: 1px solid var(--c-line-soft); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .doc__nav a:hover { transform: translateY(-3px); box-shadow: var(--c-shadow-1); text-decoration: none; } .doc__nav a:last-child { text-align: right; } .doc__nav small { font-size: var(--fs-xs); color: var(--c-text-3); } .doc__nav strong { font-size: var(--fs-h4); color: var(--c-link); } .doc__related { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--c-line); } .doc__related h2 { font-size: var(--fs-h3); margin-bottom: 20px; } .doc__related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--grid-gap); } /* 长文：跳过离屏渲染，提升滚动与首屏性能 */ .doc__article .prose > section { content-visibility: auto; contain-intrinsic-size: auto 520px; } /* -------------------------------------------------------------------------- 代码高亮配色 历史：这里曾有 vendor/highlight.min.css（GitHub Dark 主题），浅色主题下浅灰字压 #f5f5f7 底只有 1.42:1，几乎不可见，于是下面用主题变量重定义了一套浅色配色。 该 vendor 文件已在 07ec86657 删除，且两处主题的底色都由 --c-fill 统一提供： 深色 #1d1d1f、浅色 #f5f5f7。 ⚠️ 现状（迁移时如实记录，未改）：删掉 vendor 主题后**没有任何基础配色**—— 浅色主题靠下面这 39 条规则完整着色；深色主题只剩一条 .theme-dark .hljs-section， 其余 token 一律继承 .prose pre code 的 color: var(--c-text)，即深色下代码块是单色的。 要补回深色配色，在下面 .theme-dark 段里按 GitHub Dark 的取色加规则即可。 所有取值都按「本主题代码块底色」核算过对比度，正文档位最低 4.92:1。 -------------------------------------------------------------------------- */ .prose pre code, .prose pre code.hljs { /* 覆盖 vendor 的深色底，统一交给 --c-fill，两主题各自成立 */ background: transparent; color: var(--c-text); } /* 浅色主题：GitHub Light 风格，底色 #f5f5f7 */ .theme-light .hljs-comment, .theme-light .hljs-quote, .theme-light .hljs-code, .theme-light .hljs-formula { color: #5f6873; } .theme-light .hljs-keyword, .theme-light .hljs-doctag, .theme-light .hljs-type, .theme-light .hljs-template-tag, .theme-light .hljs-template-variable, .theme-light .hljs-meta .hljs-keyword { color: #cf222e; } .theme-light .hljs-title, .theme-light .hljs-title.class_, .theme-light .hljs-title.function_ { color: #6639ba; } .theme-light .hljs-attr, .theme-light .hljs-attribute, .theme-light .hljs-literal, .theme-light .hljs-meta, .theme-light .hljs-number, .theme-light .hljs-operator, .theme-light .hljs-variable, .theme-light .hljs-selector-attr, .theme-light .hljs-selector-class, .theme-light .hljs-selector-id { color: #0550ae; } .theme-light .hljs-string, .theme-light .hljs-regexp, .theme-light .hljs-meta .hljs-string { color: #0a3069; } .theme-light .hljs-built_in, .theme-light .hljs-symbol, .theme-light .hljs-bullet { color: #953800; } .theme-light .hljs-name, .theme-light .hljs-quote, .theme-light .hljs-selector-tag, .theme-light .hljs-selector-pseudo { color: #116329; } .theme-light .hljs-section { color: #005cc5; } .theme-light .hljs-addition { color: #116329; } .theme-light .hljs-deletion { color: #82071e; } .theme-light .hljs-subst, .theme-light .hljs-emphasis, .theme-light .hljs-strong { color: #24292e; } /* 深色主题：沿用 GitHub Dark，仅修正对比度不足的 .hljs-section （原 #1f6feb 在 #1d1d1f 上只有 3.63:1） */ .theme-dark .hljs-section { color: #79c0ff; } @media (max-width: 734px) { .doc__nav { grid-template-columns: 1fr; } .doc__nav a:last-child { text-align: left; } .doc-step { grid-template-columns: 34px 1fr; gap: 12px; } .doc-step::before { width: 34px; height: 34px; font-size: 15px; } } /* ---------- app/pages/account/account.component.scss ---------- */ /* 账号管理页。 只补官网设计系统里没有的几块（两栏布局、头像、提示条）， 卡片 / 输入框 / 按钮一律复用 components.css 的 .card / .input / .btn。 */ .account { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .account__main { display: grid; gap: var(--grid-gap); min-width: 0; } .account__aside { position: sticky; top: calc(var(--nav-h) + 24px); } .account__card { padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 18px; } .account__card h2 { font-size: var(--fs-lead); margin: 0; } .account__aside h3 { font-size: var(--fs-body); margin: 0 0 14px; } .account__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 结果提示条：成功绿、失败红，两态都保持足够对比度 */ .account__notice { padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid transparent; font-size: var(--fs-sm); } .account__notice.is-ok { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent); } .account__notice.is-err { background: color-mix(in srgb, var(--c-danger) 10%, transparent); border-color: var(--c-danger); color: var(--c-danger); } /* 头像 */ .account__avatar-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .account__avatar { display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; /* --ah 由后端按展示名散列给出，同一账号恒为同一个底色 */ background: hsl(var(--ah, 210) 62% 88%); color: hsl(var(--ah, 210) 48% 28%); font-size: 26px; font-weight: 600; line-height: 1; } .theme-dark .account__avatar { background: hsl(var(--ah, 210) 42% 32%); color: hsl(var(--ah, 210) 70% 86%); } .account__avatar img { width: 100%; height: 100%; object-fit: cover; } .account__avatar-side { display: grid; gap: 10px; min-width: 0; } .account__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .account__remove { color: var(--c-danger); } /* 真正的文件选择框藏起来，用旁边的