/* ============================================================================ VisionStory 文档站主题（docs_site/theme.css） - 品牌色取自 www.visionstory.ai 线上 CSS 变量：--color-primary: #5c29f5 （2026-08-10 抓取确认；辅助紫 #6d54fc / #9b8bff 为悬停与暗色模式变体）。 - 版式密度参照 ElevenLabs 文档站（大标题 / 宽行距 / 卡片圆角 / 代码块暗底）， 只学结构不抄皮：配色、logo、插画均为 VisionStory 自有。 - 暗/亮双模式：默认跟随 prefers-color-scheme； 覆盖系统偏好（由页面外壳的切换按钮写入，localStorage 持久化）。 ============================================================================ */ /* ---------- 设计变量：亮色（默认） ---------- */ :root { --vs-primary: #5c29f5; --vs-primary-hover: #6d54fc; --vs-primary-soft: rgba(92, 41, 245, 0.08); --vs-primary-line: rgba(92, 41, 245, 0.28); --vs-nav-active: #f2f2f2; --vs-bg: #ffffff; --vs-bg-soft: #f6f8fc; --vs-bg-card: #ffffff; --vs-ink: #1a1d24; --vs-muted: #5b6472; --vs-line: #e5e7eb; --vs-link: #5c29f5; /* 代码卡：亮色主题用浅底 + GitHub-Light 语法色板（对齐 ElevenLabs 亮色代码块，随主题切换） */ --vs-code-bg: #ffffff; --vs-code-ink: #24292e; --vs-code-inline-bg: #f0f1f5; --vs-code-inline-ink: #40317a; --vs-code-head-bg: #f6f8fa; --vs-code-head-ink: #57606a; --vs-code-head-line: #eaeef2; --vs-code-ctrl-bg: #ffffff; --vs-code-ctrl-line: #d0d7de; --vs-code-ctrl-ink: #24292e; --vs-code-ctrl-hover: #f0f3f6; --vs-code-menu-bg: #ffffff; --vs-code-shadow: rgba(31, 35, 40, 0.15); --tok-comment: #90a4ae; --tok-kw: #9c27b0; --tok-kwc: #1976d2; --tok-str: #22863a; --tok-num: #1976d2; --tok-key: #d32f2f; --tok-fn: #6f42c1; --tok-builtin: #e36209; --tok-var: #e36209; --tok-op: #1976d2; --tok-punct: #24292e; --vs-radius-card: 14px; --vs-radius-code: 10px; --vs-radius-chip: 999px; --vs-nav-height: 60px; --vs-content-width: 1120px; --vs-article-width: 780px; --vs-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06); --vs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --vs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ---------- 暗色：跟随系统 ---------- */ @media (prefers-color-scheme: dark) { :root { --vs-primary: #9b8bff; --vs-primary-hover: #b3a6ff; --vs-primary-soft: rgba(155, 139, 255, 0.12); --vs-primary-line: rgba(155, 139, 255, 0.35); --vs-nav-active: rgba(255, 255, 255, 0.07); --vs-bg: #0e0f13; --vs-bg-soft: #16171d; --vs-bg-card: #16171d; --vs-ink: #f2f3f7; --vs-muted: #9ca3af; --vs-line: #2d2e35; --vs-link: #9b8bff; --vs-code-bg: #101322; --vs-code-ink: #e2e8f0; --vs-code-inline-bg: #22242e; --vs-code-inline-ink: #c9c2ff; --vs-code-head-bg: rgba(255, 255, 255, 0.03); --vs-code-head-ink: #8b949e; --vs-code-head-line: rgba(255, 255, 255, 0.08); --vs-code-ctrl-bg: rgba(255, 255, 255, 0.06); --vs-code-ctrl-line: rgba(255, 255, 255, 0.14); --vs-code-ctrl-ink: #e2e8f0; --vs-code-ctrl-hover: rgba(255, 255, 255, 0.12); --vs-code-menu-bg: #10141c; --vs-code-shadow: rgba(0, 0, 0, 0.45); --tok-comment: #6b7a90; --tok-kw: #c792ea; --tok-kwc: #f78c6c; --tok-str: #c3e88d; --tok-num: #f78c6c; --tok-key: #ffcb6b; --tok-fn: #82aaff; --tok-builtin: #ffcb6b; --tok-var: #f07178; --tok-op: #89ddff; --tok-punct: #89ddff; --vs-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5); } } /* ---------- 暗色：用户显式选择（覆盖系统偏好，必须放在 media 之后） ---------- */ :root[data-theme="dark"] { --vs-primary: #9b8bff; --vs-primary-hover: #b3a6ff; --vs-primary-soft: rgba(155, 139, 255, 0.12); --vs-primary-line: rgba(155, 139, 255, 0.35); --vs-nav-active: rgba(255, 255, 255, 0.07); --vs-bg: #0e0f13; --vs-bg-soft: #16171d; --vs-bg-card: #16171d; --vs-ink: #f2f3f7; --vs-muted: #9ca3af; --vs-line: #2d2e35; --vs-link: #9b8bff; --vs-code-bg: #101322; --vs-code-ink: #e2e8f0; --vs-code-inline-bg: #22242e; --vs-code-inline-ink: #c9c2ff; --vs-code-head-bg: rgba(255, 255, 255, 0.03); --vs-code-head-ink: #8b949e; --vs-code-head-line: rgba(255, 255, 255, 0.08); --vs-code-ctrl-bg: rgba(255, 255, 255, 0.06); --vs-code-ctrl-line: rgba(255, 255, 255, 0.14); --vs-code-ctrl-ink: #e2e8f0; --vs-code-ctrl-hover: rgba(255, 255, 255, 0.12); --vs-code-menu-bg: #10141c; --vs-code-shadow: rgba(0, 0, 0, 0.45); --tok-comment: #6b7a90; --tok-kw: #c792ea; --tok-kwc: #f78c6c; --tok-str: #c3e88d; --tok-num: #f78c6c; --tok-key: #ffcb6b; --tok-fn: #82aaff; --tok-builtin: #ffcb6b; --tok-var: #f07178; --tok-op: #89ddff; --tok-punct: #89ddff; --vs-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5); } /* ---------- 亮色：用户显式选择（系统是暗色时也强制回亮色） ---------- */ :root[data-theme="light"] { --vs-primary: #5c29f5; --vs-primary-hover: #6d54fc; --vs-primary-soft: rgba(92, 41, 245, 0.08); --vs-primary-line: rgba(92, 41, 245, 0.28); --vs-nav-active: #f2f2f2; --vs-bg: #ffffff; --vs-bg-soft: #f6f8fc; --vs-bg-card: #ffffff; --vs-ink: #1a1d24; --vs-muted: #5b6472; --vs-line: #e5e7eb; --vs-link: #5c29f5; --vs-code-bg: #ffffff; --vs-code-ink: #24292e; --vs-code-inline-bg: #f0f1f5; --vs-code-inline-ink: #40317a; --vs-code-head-bg: #f6f8fa; --vs-code-head-ink: #57606a; --vs-code-head-line: #eaeef2; --vs-code-ctrl-bg: #ffffff; --vs-code-ctrl-line: #d0d7de; --vs-code-ctrl-ink: #24292e; --vs-code-ctrl-hover: #f0f3f6; --vs-code-menu-bg: #ffffff; --vs-code-shadow: rgba(31, 35, 40, 0.15); --tok-comment: #90a4ae; --tok-kw: #9c27b0; --tok-kwc: #1976d2; --tok-str: #22863a; --tok-num: #1976d2; --tok-key: #d32f2f; --tok-fn: #6f42c1; --tok-builtin: #e36209; --tok-var: #e36209; --tok-op: #1976d2; --tok-punct: #24292e; --vs-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06); } /* ---------- 基础 ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font: 16px/1.7 var(--vs-font); color: var(--vs-ink); background: var(--vs-bg); -webkit-font-smoothing: antialiased; } a { color: var(--vs-link); text-decoration: none; } a:hover { color: var(--vs-primary-hover); } /* ---------- 顶部导航 ---------- */ .vs-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; height: var(--vs-nav-height); padding: 0 24px; background: var(--vs-bg); background: color-mix(in srgb, var(--vs-bg) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--vs-line); } .vs-nav-brand { font-size: 17px; font-weight: 700; color: var(--vs-ink); white-space: nowrap; } .vs-nav-brand span { color: var(--vs-primary); font-weight: 600; } /* align-self:stretch 让导航项撑满整条顶栏高度，激活下划线正好落在顶栏底部 1px 分割线上 */ .vs-nav-links { display: flex; gap: 20px; flex: 1; align-self: stretch; } .vs-nav-links a { display: inline-flex; align-items: center; color: var(--vs-muted); font-size: 14.5px; font-weight: 500; padding: 0 2px; border-bottom: 2px solid transparent; } .vs-nav-links a:hover { color: var(--vs-ink); } .vs-nav-links a.active { color: var(--vs-ink); border-bottom-color: var(--vs-primary); } .vs-nav-actions { display: flex; align-items: center; gap: 12px; } /* ---------- 按钮 ---------- */ .vs-btn { display: inline-block; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 1px solid var(--vs-line); color: var(--vs-ink); background: var(--vs-bg-card); cursor: pointer; white-space: nowrap; } .vs-btn:hover { border-color: var(--vs-primary-line); color: var(--vs-ink); } .vs-btn-primary { background: var(--vs-primary); border-color: var(--vs-primary); color: #ffffff; } .vs-btn-primary:hover { background: var(--vs-primary-hover); border-color: var(--vs-primary-hover); color: #ffffff; } /* 主题切换按钮 */ .vs-theme-toggle { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--vs-line); background: var(--vs-bg-card); color: var(--vs-muted); font-size: 16px; line-height: 1; cursor: pointer; } .vs-theme-toggle:hover { color: var(--vs-ink); border-color: var(--vs-primary-line); } /* ---------- Copy page 下拉 ---------- */ /* 「Copy page」分体按钮（贴页面标题右侧，仿 ElevenLabs）：主键复制 Markdown + ▾ 展开更多 */ .vs-copy-page { display: inline-flex; align-items: stretch; flex: 0 0 auto; border: 1px solid var(--vs-line); border-radius: 10px; background: var(--vs-bg-card); overflow: hidden; } .vs-copy-page-main { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: none; background: none; font: 500 13.5px/1 var(--vs-font); color: var(--vs-muted); cursor: pointer; white-space: nowrap; } .vs-copy-page-main:hover { color: var(--vs-ink); background: var(--vs-bg-soft); } .vs-copy-page-main svg { width: 15px; height: 15px; } .vs-copy-page-more { position: relative; display: inline-flex; } .vs-copy-page-toggle { list-style: none; display: inline-flex; align-items: center; padding: 0 9px; border-left: 1px solid var(--vs-line); color: var(--vs-muted); cursor: pointer; } .vs-copy-page-toggle::-webkit-details-marker { display: none; } .vs-copy-page-toggle::after { content: "▾"; font-size: 11px; } .vs-copy-page-more:hover .vs-copy-page-toggle, .vs-copy-page-more[open] .vs-copy-page-toggle { color: var(--vs-ink); background: var(--vs-bg-soft); } .vs-copy-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--vs-bg-card); border: 1px solid var(--vs-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); padding: 6px; display: flex; flex-direction: column; z-index: 60; } .vs-copy-menu a, .vs-copy-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; border-radius: 8px; font: 14px/1.4 var(--vs-font); color: var(--vs-ink); cursor: pointer; } .vs-copy-menu a:hover, .vs-copy-menu button:hover { background: var(--vs-primary-soft); color: var(--vs-ink); } /* 页面标题行：标题占左、Copy page 按钮贴右上（窄屏自动换行到标题下方） */ .vs-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } .vs-page-head > h1 { flex: 1 1 auto; } .vs-page-head .vs-copy-page { margin-top: 4px; } /* ---------- Landing ---------- */ .vs-landing { max-width: var(--vs-content-width); margin: 0 auto; padding: 0 24px 80px; } .vs-hero { padding: 72px 0 40px; max-width: 720px; } .vs-hero h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 14px; } .vs-tagline { font-size: 19px; color: var(--vs-muted); margin: 0 0 26px; } .vs-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .vs-section { margin-top: 46px; } .vs-section > h2 { font-size: 26px; letter-spacing: -0.01em; margin: 0 0 6px; } .vs-section-sub { color: var(--vs-muted); margin: 0 0 20px; font-size: 15px; } /* 能力网格 / 模型卡片 */ .vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .vs-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--vs-line); border-radius: var(--vs-radius-card); background: var(--vs-bg-card); box-shadow: var(--vs-shadow-card); color: var(--vs-ink); } a.vs-card:hover { border-color: var(--vs-primary-line); color: var(--vs-ink); } .vs-card-head { display: flex; align-items: center; gap: 11px; } .vs-card-head h3 { font-size: 17px; margin: 0; } /* 卡片图标：圆角浅底方块 + 品牌色线性图标，hover 时反相（ElevenLabs 式产品网格观感） */ .vs-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: var(--vs-primary-soft); color: var(--vs-primary); transition: background 0.18s ease, color 0.18s ease; } .vs-card-ic { width: 20px; height: 20px; } a.vs-card:hover .vs-card-icon { background: var(--vs-primary); color: #fff; } .vs-card p { margin: 0; font-size: 14.5px; color: var(--vs-muted); flex: 1; } .vs-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .vs-card-link { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--vs-primary); } .vs-chip { display: inline-block; padding: 2px 10px; border-radius: var(--vs-radius-chip); font-size: 12px; font-weight: 500; color: var(--vs-muted); background: var(--vs-bg-soft); border: 1px solid var(--vs-line); } .vs-badge-beta { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--vs-primary); background: var(--vs-primary-soft); border: 1px solid var(--vs-primary-line); } /* ---------- 指南页布局：左侧目录 + 正文 ---------- */ .vs-guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; max-width: var(--vs-content-width); margin: 0 auto; padding: 0 24px 80px; } .vs-sidebar { position: sticky; top: calc(var(--vs-nav-height) + 24px); align-self: start; padding-top: 40px; } .vs-sidebar-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vs-muted); margin: 0 0 10px; } .vs-sidebar ul { list-style: none; margin: 0; padding: 0; } .vs-sidebar li { margin: 2px 0; } .vs-sidebar a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; color: var(--vs-muted); } .vs-sidebar a:hover { color: var(--vs-ink); background: var(--vs-bg-soft); } .vs-sidebar a.active { color: var(--vs-primary); background: var(--vs-primary-soft); font-weight: 600; } /* ---------- 正文排版（markdown 渲染产物） ---------- */ .vs-article { max-width: var(--vs-article-width); padding-top: 40px; min-width: 0; } .vs-article h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 10px; } .vs-article h2 { font-size: 23px; letter-spacing: -0.01em; margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--vs-line); } .vs-article h3 { font-size: 17.5px; margin: 26px 0 8px; } .vs-article p { margin: 12px 0; } .vs-article ul, .vs-article ol { margin: 12px 0; padding-left: 26px; } .vs-article li { margin: 5px 0; } .vs-article blockquote { margin: 16px 0; padding: 12px 18px; border-left: 3px solid var(--vs-primary); background: var(--vs-primary-soft); border-radius: 0 10px 10px 0; color: var(--vs-ink); } .vs-article blockquote p { margin: 4px 0; } .vs-article hr { border: none; border-top: 1px solid var(--vs-line); margin: 32px 0; } .vs-article img { max-width: 100%; border-radius: 10px; } /* 行内代码 */ .vs-article code { font-family: var(--vs-mono); font-size: 0.86em; background: var(--vs-code-inline-bg); color: var(--vs-code-inline-ink); border-radius: 5px; padding: 2px 6px; } /* 代码块：与 reference 代码卡同款——主题感知底色 + 1px 描边（浅色下白底也有边界， 不再白底白字看不见）；语法高亮由内层 的 tok-* 着色（见 site.py 后处理）。 */ .vs-article pre { background: var(--vs-code-bg); color: var(--vs-code-ink); border: 1px solid var(--vs-line); border-radius: var(--vs-radius-code); padding: 16px 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; margin: 14px 0; box-shadow: var(--vs-shadow-card); } .vs-article pre code { background: none; color: inherit; padding: 0; font-size: inherit; } /* 表格 */ .vs-article table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14.5px; display: block; overflow-x: auto; } .vs-article th, .vs-article td { border: 1px solid var(--vs-line); padding: 8px 12px; text-align: left; vertical-align: top; } .vs-article th { background: var(--vs-bg-soft); font-weight: 600; white-space: nowrap; } /* ---------- 页脚 ---------- */ .vs-footer { border-top: 1px solid var(--vs-line); padding: 24px; text-align: center; color: var(--vs-muted); font-size: 13.5px; } .vs-footer a { color: var(--vs-muted); text-decoration: underline; } .vs-footer a:hover { color: var(--vs-ink); } /* ---------- 响应式 ---------- */ @media (max-width: 900px) { .vs-guide-layout { grid-template-columns: 1fr; gap: 0; } .vs-sidebar { position: static; padding-top: 24px; } .vs-hero h1 { font-size: 34px; } .vs-nav { gap: 14px; padding: 0 16px; } .vs-nav-links { gap: 12px; } .vs-nav .vs-btn-primary { display: none; } /* 小屏只收起顶栏拿 key 按钮，hero 的主 CTA 保留 */ } /* 手机：顶栏一行放不下 brand+区块导航+actions 会溢出错位 —— 拆两行： 第 1 行 brand + actions（llms.txt / 主题切换），第 2 行区块导航可横向滚动。 */ @media (max-width: 700px) { .vs-nav { flex-wrap: wrap; height: auto; min-height: var(--vs-nav-height); padding: 10px 16px; gap: 8px 14px; } .vs-nav-brand { flex: 0 0 auto; } .vs-nav-actions { margin-left: auto; flex: 0 0 auto; } .vs-nav-links { order: 3; flex: 0 0 100%; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vs-nav-links::-webkit-scrollbar { display: none; } .vs-nav-links a { white-space: nowrap; padding-top: 2px; padding-bottom: 4px; } } /* ============================================================================ API reference 页（自建，替代 Scalar）——ElevenLabs/Fern 风格三栏静态文档。 语义化 class（vs-ref-*），方便主控单独调 CSS。全部走上方主题变量，暗亮双模式通用。 ============================================================================ */ /* HTTP method 语义色（非品牌色，独立成一组，四个主题选择器都声明，避免强制模式下被 media 覆盖） */ :root { --vs-m-get: #2563eb; --vs-m-get-bg: rgba(37, 99, 235, 0.12); --vs-m-post: #16a34a; --vs-m-post-bg: rgba(22, 163, 74, 0.12); --vs-m-delete: #dc2626;--vs-m-delete-bg: rgba(220, 38, 38, 0.12); --vs-m-put: #d97706; --vs-m-put-bg: rgba(217, 119, 6, 0.12); --vs-m-patch: #d97706; --vs-m-patch-bg: rgba(217, 119, 6, 0.12); } :root[data-theme="light"] { --vs-m-get: #2563eb; --vs-m-get-bg: rgba(37, 99, 235, 0.12); --vs-m-post: #16a34a; --vs-m-post-bg: rgba(22, 163, 74, 0.12); --vs-m-delete: #dc2626;--vs-m-delete-bg: rgba(220, 38, 38, 0.12); --vs-m-put: #d97706; --vs-m-put-bg: rgba(217, 119, 6, 0.12); --vs-m-patch: #d97706; --vs-m-patch-bg: rgba(217, 119, 6, 0.12); } @media (prefers-color-scheme: dark) { :root { --vs-m-get: #7aa2ff; --vs-m-get-bg: rgba(122, 162, 255, 0.16); --vs-m-post: #5cd67f; --vs-m-post-bg: rgba(92, 214, 127, 0.16); --vs-m-delete: #ff8a8a;--vs-m-delete-bg: rgba(255, 138, 138, 0.16); --vs-m-put: #f0b866; --vs-m-put-bg: rgba(240, 184, 102, 0.16); --vs-m-patch: #f0b866; --vs-m-patch-bg: rgba(240, 184, 102, 0.16); } } :root[data-theme="dark"] { --vs-m-get: #7aa2ff; --vs-m-get-bg: rgba(122, 162, 255, 0.16); --vs-m-post: #5cd67f; --vs-m-post-bg: rgba(92, 214, 127, 0.16); --vs-m-delete: #ff8a8a;--vs-m-delete-bg: rgba(255, 138, 138, 0.16); --vs-m-put: #f0b866; --vs-m-put-bg: rgba(240, 184, 102, 0.16); --vs-m-patch: #f0b866; --vs-m-patch-bg: rgba(240, 184, 102, 0.16); } /* 顶栏 llms.txt 链接 */ .vs-ref-llms { font-size: 13.5px; font-weight: 600; color: var(--vs-muted); font-family: var(--vs-mono); } .vs-ref-llms:hover { color: var(--vs-ink); } /* 整页布局：左导航 + 主区 */ .vs-ref-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; max-width: 1460px; margin: 0 auto; padding: 0 24px 80px; } /* 左栏：端点导航树（按 capability 分组），sticky */ .vs-ref-nav { position: sticky; top: calc(var(--vs-nav-height) + 20px); align-self: start; max-height: calc(100vh - var(--vs-nav-height) - 40px); overflow-y: auto; padding: 28px 0 24px; } .vs-ref-nav-group { margin-bottom: 6px; } /* 折叠式分组：summary 作为可点击组标题，右侧 chevron 展开时旋转 */ .vs-ref-nav-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; text-transform: none; /* 去掉全大写，对齐 ElevenLabs 的 Title Case 分类名 */ letter-spacing: 0; color: var(--vs-muted); margin: 0; padding: 6px 8px; border-radius: 8px; cursor: pointer; list-style: none; user-select: none; } .vs-ref-nav-title::-webkit-details-marker { display: none; } .vs-ref-nav-title:hover { color: var(--vs-ink); background: var(--vs-bg-soft); } /* chevron：参考站同款 Lucide chevron-right（本地 static/chevron.svg），用 mask 随 currentColor 着色；收起指向右、展开旋转 90° 指向下。相对 url 相对本 css（/static/），与挂载前缀无关。 */ .vs-ref-nav-title::after { content: ""; margin-left: auto; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("chevron.svg") center / 16px 16px no-repeat; mask: url("chevron.svg") center / 16px 16px no-repeat; transform: rotate(0deg); transition: transform 0.15s ease; } .vs-ref-nav-group[open] > .vs-ref-nav-title::after { transform: rotate(90deg); } /* 分类下的端点链接与分类名左边缘对齐（去掉旧的 2px 偏移） */ .vs-ref-nav-group > .vs-ref-nav-link { margin-left: 0; } /* 当前端点所在组：组名加深提示（当前组默认展开，其余收起、手风琴互斥） */ .vs-ref-nav-group-current > .vs-ref-nav-title { color: var(--vs-ink); } .vs-ref-nav-link { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; color: var(--vs-muted); font-size: 13.5px; line-height: 1.35; cursor: pointer; } .vs-ref-nav-link:hover { color: var(--vs-ink); background: var(--vs-bg-soft); } .vs-ref-nav-link.active { color: var(--vs-ink); background: var(--vs-nav-active); } .vs-ref-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 主区：端点单页平铺 */ .vs-ref-main { padding-top: 28px; min-width: 0; } .vs-ref-empty { color: var(--vs-muted); padding: 40px 0; } /* 每个端点：文案列 + sticky 代码列，二者平分内容区（对齐 ElevenLabs ~50/50） */ .vs-ref-endpoint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 40px 0; border-top: 1px solid var(--vs-line); scroll-margin-top: calc(var(--vs-nav-height) + 16px); } .vs-ref-endpoint:first-child { border-top: none; padding-top: 8px; } .vs-ref-doc { min-width: 0; } .vs-ref-title { font-size: 25px; letter-spacing: -0.01em; margin: 0 0 12px; } .vs-ref-route { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .vs-ref-path { font-family: var(--vs-mono); font-size: 14.5px; color: var(--vs-ink); background: var(--vs-bg-soft); border: 1px solid var(--vs-line); border-radius: 8px; padding: 4px 10px; word-break: break-all; } .vs-ref-deprecated { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--vs-m-delete); background: var(--vs-m-delete-bg); } .vs-ref-desc { color: var(--vs-ink); margin-bottom: 6px; } .vs-ref-desc p { margin: 10px 0; } .vs-ref-desc code { font-family: var(--vs-mono); font-size: 0.86em; background: var(--vs-code-inline-bg); color: var(--vs-code-inline-ink); border-radius: 5px; padding: 2px 6px; } /* 多分支 Union 响应：逐变体分节（如 GET /ai_video 单条 vs 批量） */ .vs-ref-variant + .vs-ref-variant { margin-top: 18px; } .vs-ref-variant-label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--vs-primary); background: var(--vs-primary-soft); border: 1px solid var(--vs-primary-line); border-radius: 6px; padding: 2px 9px; margin: 6px 0 10px; } /* method 徽章 */ .vs-method-badge { display: inline-flex; align-items: center; justify-content: center; font-family: var(--vs-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 6px; white-space: nowrap; } .vs-method-badge.mini { font-size: 10px; padding: 2px 5px; min-width: 42px; } .vs-method-badge.get { color: var(--vs-m-get); background: var(--vs-m-get-bg); } .vs-method-badge.post { color: var(--vs-m-post); background: var(--vs-m-post-bg); } .vs-method-badge.delete { color: var(--vs-m-delete); background: var(--vs-m-delete-bg); } .vs-method-badge.put { color: var(--vs-m-put); background: var(--vs-m-put-bg); } .vs-method-badge.patch { color: var(--vs-m-patch); background: var(--vs-m-patch-bg); } /* 参数 / 字段分区 */ .vs-ref-section { margin-top: 40px; } /* 小节标题（Headers / Request body / Response…）：对齐 ElevenLabs —— 大字号、深色、Title Case、 底部分隔线，一眼可辨（不再是小号灰色全大写） */ .vs-ref-section-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--vs-ink); margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--vs-line); } .vs-ref-note { color: var(--vs-muted); font-size: 14px; margin: 0 0 14px; } .vs-ref-note code { font-family: var(--vs-mono); font-size: 0.86em; background: var(--vs-code-inline-bg); color: var(--vs-code-inline-ink); border-radius: 5px; padding: 1px 5px; } .vs-param-grouplabel { font-size: 13px; font-weight: 600; color: var(--vs-muted); margin: 4px 0 12px; } .vs-param-grouplabel code { font-family: var(--vs-mono); background: var(--vs-code-inline-bg); color: var(--vs-code-inline-ink); border-radius: 5px; padding: 1px 5px; } /* Response 小节里的「200 Successful Response」状态行（对齐 ElevenLabs）：可见标签、不折叠； 一级响应字段默认直接展示，只有嵌套 2 级+ 才 Show N properties 收起。 */ .vs-ref-resp-status { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-size: 14px; } .vs-ref-resp-status-label { font-weight: 600; color: var(--vs-ink); } .vs-status-ok { font-family: var(--vs-mono); font-size: 12.5px; font-weight: 700; color: var(--vs-m-post); background: var(--vs-m-post-bg); border-radius: 6px; padding: 2px 8px; } /* 参数块：平铺、常显、不折叠 */ .vs-param { padding: 14px 0; border-bottom: 1px solid var(--vs-line); } .vs-param:last-child { border-bottom: none; } .vs-param-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; } .vs-param-name { font-family: var(--vs-mono); font-size: 14px; font-weight: 700; color: var(--vs-ink); } .vs-param-type { font-family: var(--vs-mono); font-size: 13px; color: var(--vs-muted); } .vs-param-required { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--vs-m-delete); } .vs-param-optional { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--vs-muted); } .vs-param-default { font-size: 12.5px; color: var(--vs-muted); } .vs-param-default code, .vs-param-enum code { font-family: var(--vs-mono); font-size: 0.9em; background: var(--vs-code-inline-bg); color: var(--vs-code-inline-ink); border-radius: 5px; padding: 1px 6px; } .vs-param-desc { margin-top: 6px; color: var(--vs-ink); font-size: 14.5px; } .vs-param-desc code { font-family: var(--vs-mono); font-size: 0.86em; background: var(--vs-code-inline-bg); color: var(--vs-code-inline-ink); border-radius: 5px; padding: 1px 5px; } .vs-param-enum { margin-top: 8px; font-size: 13px; color: var(--vs-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .vs-param-enum-label { font-weight: 600; } /* 嵌套对象：缩进展开，左侧引导线 */ .vs-param-children { margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--vs-line); } .vs-param-children .vs-param { padding: 10px 0; } /* 嵌套对象子字段默认收起（对齐 ElevenLabs 的 “Show N properties” 折叠按钮） */ .vs-param-expand { margin-top: 10px; } .vs-param-expand-head { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none; font-size: 12.5px; font-weight: 600; color: var(--vs-muted); background: var(--vs-bg-soft); border: 1px solid var(--vs-line); border-radius: 7px; padding: 4px 10px; } .vs-param-expand-head::-webkit-details-marker { display: none; } .vs-param-expand-head:hover { color: var(--vs-ink); border-color: var(--vs-primary-line); } .vs-param-expand-head::after { content: ""; flex: none; width: 13px; height: 13px; background-color: currentColor; -webkit-mask: url("chevron.svg") center / 13px 13px no-repeat; mask: url("chevron.svg") center / 13px 13px no-repeat; transition: transform 0.15s ease; } .vs-param-expand[open] > .vs-param-expand-head::after { transform: rotate(90deg); } .vs-param-expand > .vs-param-children { margin-top: 8px; } .vs-param-expand-hide { display: none; } .vs-param-expand[open] > .vs-param-expand-head .vs-param-expand-show { display: none; } .vs-param-expand[open] > .vs-param-expand-head .vs-param-expand-hide { display: inline; } /* Errors 小节：错误信封结构 + 状态码简表 */ .vs-ref-status-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } .vs-ref-status { display: flex; align-items: baseline; gap: 12px; font-size: 14px; } .vs-status-code { font-family: var(--vs-mono); font-size: 12.5px; font-weight: 700; color: var(--vs-m-delete); background: var(--vs-m-delete-bg); border-radius: 6px; padding: 2px 8px; min-width: 56px; text-align: center; } .vs-ref-status-desc { color: var(--vs-muted); } /* 右栏：代码示例 + 响应示例，sticky 跟随各自端点 */ .vs-ref-aside { position: sticky; top: calc(var(--vs-nav-height) + 20px); align-self: start; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .vs-ref-code { border: 1px solid var(--vs-line); border-radius: var(--vs-radius-code); overflow: hidden; background: var(--vs-code-bg); } .vs-ref-code-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--vs-code-head-bg); border-bottom: 1px solid var(--vs-code-head-line); } .vs-ref-code-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vs-code-head-ink); } .vs-ref-code-sub { font-family: var(--vs-mono); font-size: 12px; color: var(--vs-code-head-ink); } /* 自定义代码语言下拉（对齐 ElevenLabs 的 cURL ▼）：随主题切换，匹配代码卡配色 */ .vs-ref-lang { position: relative; margin-left: auto; } .vs-ref-lang-btn { appearance: none; border: 1px solid var(--vs-code-ctrl-line); background: var(--vs-code-ctrl-bg); color: var(--vs-code-ctrl-ink); font: 12.5px/1 var(--vs-font); font-weight: 600; padding: 6px 26px 6px 10px; border-radius: 6px; cursor: pointer; position: relative; } .vs-ref-lang-btn::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid var(--vs-code-head-ink); border-bottom: 1.5px solid var(--vs-code-head-ink); transform: rotate(45deg); transition: transform 0.15s ease; } .vs-ref-lang.open .vs-ref-lang-btn::after { margin-top: -2px; transform: rotate(-135deg); } .vs-ref-lang-btn:hover { background: var(--vs-code-ctrl-hover); } .vs-ref-lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 140px; z-index: 30; background: var(--vs-code-menu-bg); border: 1px solid var(--vs-code-ctrl-line); border-radius: 9px; padding: 5px; box-shadow: 0 12px 32px var(--vs-code-shadow); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97); transform-origin: top right; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; } .vs-ref-lang.open .vs-ref-lang-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.16s ease, transform 0.16s ease; } .vs-ref-lang-opt { display: block; width: 100%; text-align: left; border: none; background: none; color: var(--vs-code-ctrl-ink); font: 12.5px/1.2 var(--vs-font); font-weight: 500; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .vs-ref-lang-opt:hover { background: var(--vs-code-ctrl-hover); } .vs-ref-lang-opt.active { background: var(--vs-code-ctrl-hover); color: var(--vs-primary); font-weight: 600; } .vs-ref-panels { display: block; } .vs-ref-panel { display: none; margin: 0; padding: 16px 18px; overflow-x: auto; color: var(--vs-code-ink); font-family: var(--vs-mono); font-size: 13px; line-height: 1.6; } .vs-ref-panel.active { display: block; } .vs-ref-panel code { font-family: inherit; color: inherit; background: none; padding: 0; } /* ---------- 左栏顶部：Introduction / Authentication ---------- */ .vs-ref-nav-top { margin-bottom: 22px; display: flex; flex-direction: column; gap: 2px; } .vs-ref-nav-lead { display: block; padding: 5px 8px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--vs-muted); cursor: pointer; } .vs-ref-nav-lead:hover { color: var(--vs-ink); background: var(--vs-bg-soft); } .vs-ref-nav-lead.active { color: var(--vs-ink); background: var(--vs-nav-active); } /* ---------- 面包屑（能力名 / 端点名） ---------- */ .vs-ref-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--vs-muted); margin-bottom: 10px; } .vs-ref-crumb-cap { font-weight: 600; } .vs-ref-crumb-sep { color: var(--vs-line); } /* ---------- 紧凑排版微调（对齐 ElevenLabs：标题/描述字号收小） ---------- */ .vs-ref-title { font-size: 23px; } .vs-ref-desc { font-size: 14.5px; } .vs-ref-desc p { margin: 8px 0; } /* ---------- Introduction 页正文（单列，无右栏代码） ---------- */ .vs-ref-intro { max-width: var(--vs-article-width); padding-top: 8px; min-width: 0; } .vs-ref-lead { font-size: 16px; line-height: 1.6; color: var(--vs-muted); margin: 0 0 8px; } .vs-ref-intro-section { margin-top: 32px; } .vs-ref-intro-section h2 { font-size: 18px; letter-spacing: -0.01em; margin: 0 0 10px; padding-top: 22px; border-top: 1px solid var(--vs-line); } .vs-ref-intro-section p { font-size: 14.5px; color: var(--vs-ink); margin: 10px 0; } .vs-ref-intro-section .vs-ref-code { margin: 12px 0; } .vs-ref-intro-section code { font-family: var(--vs-mono); font-size: 0.86em; color: var(--vs-code-inline-ink); } /* ============================================================================ 语法高亮（pygments，classprefix="tok-"）——token 配色走 CSS 变量，随站点主题切换： 亮色用 GitHub-Light 色板（浅底深字，对齐 ElevenLabs 亮色代码块），暗色用 One-Dark 风。 ============================================================================ */ .vs-hl { color: var(--vs-code-ink); } /* 注释 */ .vs-hl .tok-c, .vs-hl .tok-c1, .vs-hl .tok-cm, .vs-hl .tok-cs, .vs-hl .tok-cd { color: var(--tok-comment); font-style: italic; } /* 预处理 / PHP 开标签 / C# 指令 */ .vs-hl .tok-cp, .vs-hl .tok-cpf { color: var(--tok-fn); } /* 关键字 */ .vs-hl .tok-k, .vs-hl .tok-kd, .vs-hl .tok-kn, .vs-hl .tok-kr, .vs-hl .tok-kt, .vs-hl .tok-kp { color: var(--tok-kw); } /* 关键字常量（true / false / null / nil） */ .vs-hl .tok-kc { color: var(--tok-kwc); } /* 字符串 */ .vs-hl .tok-s, .vs-hl .tok-s1, .vs-hl .tok-s2, .vs-hl .tok-sb, .vs-hl .tok-sc, .vs-hl .tok-sd, .vs-hl .tok-se, .vs-hl .tok-sh, .vs-hl .tok-si, .vs-hl .tok-sx, .vs-hl .tok-sr, .vs-hl .tok-ss { color: var(--tok-str); } /* 数字 */ .vs-hl .tok-m, .vs-hl .tok-mi, .vs-hl .tok-mf, .vs-hl .tok-mh, .vs-hl .tok-mo, .vs-hl .tok-mb, .vs-hl .tok-il { color: var(--tok-num); } /* JSON key / 标签名 / 属性名 */ .vs-hl .tok-nt, .vs-hl .tok-na { color: var(--tok-key); } /* 函数 / 类 / 装饰器 */ .vs-hl .tok-nf, .vs-hl .tok-nd, .vs-hl .tok-nc { color: var(--tok-fn); } /* 内建 / 常量 */ .vs-hl .tok-nb, .vs-hl .tok-no, .vs-hl .tok-bp { color: var(--tok-builtin); } /* 变量（$ch / @var 等） */ .vs-hl .tok-nv, .vs-hl .tok-vg, .vs-hl .tok-vi { color: var(--tok-var); } /* 运算符 */ .vs-hl .tok-o, .vs-hl .tok-ow { color: var(--tok-op); } /* 标点 */ .vs-hl .tok-p { color: var(--tok-punct); } /* ============================================================================ 交互动效与精修：让展开/悬停/下拉顺滑（去掉「生硬」感），并加纵深与可达性 ============================================================================ */ :root { interpolate-size: allow-keywords; } /* 所有
（左栏分组 / Show N properties）展开-收起做高度+淡入过渡； 现代浏览器生效，不支持 ::details-content 的会优雅降级为瞬开（无副作用）。 */ ::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 0.28s ease, opacity 0.2s ease, content-visibility 0.28s allow-discrete; } details[open]::details-content { block-size: auto; opacity: 1; } /* 交互元素统一过渡（悬停/激活不再瞬变） */ .vs-nav-links a, .vs-btn, .vs-theme-toggle, .vs-ref-llms, .vs-ref-nav-link, .vs-ref-nav-lead, .vs-ref-nav-title, .vs-param-expand-head, .vs-ref-lang-btn, .vs-ref-lang-opt, .vs-copy-btn, .vs-method-badge, .vs-copy-page-main, .vs-copy-page-toggle { transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } /* 悬停微反馈 */ .vs-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(92, 41, 245, 0.28); } .vs-theme-toggle:hover { transform: rotate(15deg); } .vs-ref-nav-link:hover, .vs-ref-nav-lead:hover { transform: translateX(2px); } /* 键盘可达性：focus-visible 描边（鼠标点击不触发） */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--vs-primary); outline-offset: 2px; border-radius: 6px; } summary:focus:not(:focus-visible) { outline: none; } /* 代码卡加一点纵深 */ .vs-ref-code { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px rgba(16, 24, 40, 0.05); } /* 代码卡头部右侧工具组（语言下拉 + 复制按钮） */ .vs-ref-code-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; } .vs-ref-code-tools .vs-ref-lang { margin-left: 0; } /* 复制按钮 */ .vs-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--vs-code-ctrl-line); background: var(--vs-code-ctrl-bg); color: var(--vs-code-head-ink); border-radius: 6px; cursor: pointer; flex: none; } .vs-copy-btn:hover { background: var(--vs-code-ctrl-hover); color: var(--vs-code-ctrl-ink); } .vs-copy-btn svg { width: 15px; height: 15px; } .vs-copy-btn .ic-check { display: none; color: var(--vs-m-post); } .vs-copy-btn.copied .ic-copy { display: none; } .vs-copy-btn.copied .ic-check { display: inline; } .vs-copy-btn.copied { border-color: var(--vs-m-post); } /* 尊重系统「减少动效」偏好 */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after, ::details-content { transition: none !important; animation: none !important; } } /* ---------- reference 页响应式 ---------- */ @media (max-width: 1100px) { .vs-ref-layout { grid-template-columns: 1fr; gap: 0; } .vs-ref-nav { position: static; max-height: none; overflow: visible; padding: 20px 0 8px; border-bottom: 1px solid var(--vs-line); margin-bottom: 8px; } .vs-ref-endpoint { grid-template-columns: 1fr; gap: 22px; } .vs-ref-aside { position: static; } }