/* ============================================================ 工具页 Landing 双模式（G2A 原型，先用于 tools/webp-to-png/） 同一份 HTML 两种形态： iframe 内（默认） → 只有工具本体，与改造前完全一致 独立直达 standalone → 展开 Header / 说明 / FAQ / 相关工具 / Footer 判定由各工具页 里的内联同步脚本完成，给 加 .is-standalone。 **默认必须是 iframe 安全的**：即使脚本没跑，落地页内容也保持隐藏， 绝不会让首页 iframe 突然变成一张长 SEO 页。 本文件只引用 tokens.css 变量，不新造设计语言。 ============================================================ */ /* 工具区（工具卡 + 信任行）到说明区之间的分隔留白。 收紧时只调这一个值，不要在各段散落 magic number。 */ :root { --tl-gap-tool-to-body: 28px; } /* ── 滚动条槽永久预留（Phase 19A1.1 · Issue 2）─────────────────────── Founder 实测：在"左侧 list + 右侧 iframe"的综合 Tools 模式里， 上传很多图片 / 切到 4× 会让 iframe 里出现竖向滚动条， 可用宽度随之变窄，Workspace 主容器跟着跳；删掉内容又跳回来。 ⚠️ scroll owner 是 **iframe 文档的视口**，不是 body：工具页写的是 `body { overflow-y: auto }`，而 html 为 visible 时 body 的 overflow 会**传播到视口**，所以真正滚动的是 documentElement。 实测（真实 headful Chrome · 经典滚动条 · 1440×900 外壳）： 现状（无 gutter） iframe surface 内容少 → 内容多 Δ=15px html{scrollbar-gutter:stable} 同上 Δ=0 ← 正解 body{scrollbar-gutter:stable} 同上 Δ=15px ← 加错地方，无效 html{overflow-y:scroll} 同上 Δ=15px ← 更糟（双滚动条） 所以 gutter 落在 html，而不是 body / iframe 元素三处一起加。 ⚠️ **只作用在 embed 上下文**（`html:not(.is-standalone)`）。 `.is-standalone` 由各工具页 的同步脚本按 `window.top === window.self` 设置，是现成的 embed 判据 —— 不需要任何 storage / handshake。 为什么必须收窄：top-level 公开页的 scroll owner 是浏览器窗口， 那一页下面还有 SEO 正文、本来就一直在滚，宽度根本不会跳； 给它也留 gutter 只会凭空多一条右侧空带，把产品框推离视口中心 —— g49/g51 的居中断言实测 15px 偏移（第一版真的踩了）。 ⚠️ 只写 `stable`，**不写 both-edges**（左侧留白没有产品理由）； 也**不给根加 ::-webkit-scrollbar 宽度** —— 那会让 overlay 滚动条的用户 永远多看到一条轨道，而他们本来就没有这个问题。 ⚠️ 绝不用 overflow:hidden / scrollbar-width:none 去"解决"： 要的是**宽度不跳**，不是用户看不到滚动条。滚轮 / 触控板 / 键盘照常可滚。 */ html:not(.is-standalone) { scrollbar-gutter: stable; } /* ---------- 默认（iframe / 脚本未执行）：落地页内容一律隐藏 ---------- */ [data-landing-only] { display: none; } /* ---------- standalone：恢复正常文档流 ---------- */ /* 工具页原本 html,body{height:100%} + body{display:flex} + .tool-shell{margin:auto} 是为 iframe 垂直居中服务的；独立页要的是自然纵向滚动，这里覆盖掉。 */ html.is-standalone, html.is-standalone body { height: auto; } html.is-standalone body { display: block; padding: 0; overflow-y: visible; background: var(--yq-bg-canvas); } /* ---------- Header ---------- */ html.is-standalone .tl-header { display: flex; } .tl-header { align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--yq-bg-page); border-bottom: 1px solid var(--yq-border); } .tl-brand { display: flex; align-items: center; gap: 10px; color: var(--yq-text-1); text-decoration: none; font-weight: 600; font-size: 15px; } .tl-brand img { width: 28px; height: 28px; display: block; } /* 品牌 lockup：YUQUE 是主词，descriptor 明显更轻——不能比品牌名更抢眼。 descriptor 全语言保持英文（品牌 descriptor，不翻译）。 */ .tl-brand-desc { font-weight: 400; font-size: 12px; color: var(--yq-text-3); padding-left: 9px; margin-left: 1px; border-left: 1px solid var(--yq-border); } @media (max-width: 640px) { .tl-brand-desc { display: none; } } .tl-nav { color: var(--yq-text-2); text-decoration: none; font-size: 13px; padding: 6px 10px; border-radius: var(--yq-r-ctl); } .tl-nav:hover { background: var(--yq-bg-quiet); color: var(--yq-text-1); } .tl-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yq-focus-ring), 0 0 0 1px var(--yq-primary); } /* ---------- Header 右侧：Locale Switcher + All tools（Phase 11C-A） ---------- 标记由 scripts/lib/locale-switcher.mjs 统一生成，行为在 assets/js/locale-switcher.js。 顺序固定为「语言 → All tools」，同一行、同一档字号，不做第二层导航。 */ .tl-actions { display: flex; align-items: center; gap: 4px; min-width: 0; } .tl-locale { position: relative; } .tl-locale-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: var(--yq-r-ctl); background: transparent; color: var(--yq-text-2); font: inherit; font-size: 13px; line-height: 20px; white-space: nowrap; cursor: pointer; } .tl-locale-trigger:hover, .tl-locale-trigger[aria-expanded="true"] { background: var(--yq-bg-quiet); color: var(--yq-text-1); } .tl-locale-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yq-focus-ring), 0 0 0 1px var(--yq-primary); } .tl-locale-globe, .tl-locale-caret { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .tl-locale-globe { width: 16px; height: 16px; stroke-width: 1.25; } .tl-locale-caret { width: 10px; height: 10px; stroke-width: 1.5; transition: transform var(--yq-dur) var(--yq-ease); } .tl-locale-trigger[aria-expanded="true"] .tl-locale-caret { transform: rotate(180deg); } /* 浮层：贴触发按钮右缘向左展开（右侧还有 All tools，向右展开会出屏）。 高度夹在视口内、内部滚动 —— 矮屏 / 横屏手机上 9 项仍然全部可达。 */ .tl-locale-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 220px; max-width: calc(100vw - 32px); max-height: min(420px, calc(100vh - 80px)); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--yq-bg-page); border: 1px solid var(--yq-border); border-radius: var(--yq-r-card); box-shadow: var(--yq-shadow-pop); } .tl-locale-menu[hidden] { display: none; } .tl-locale-menu a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--yq-r-ctl); color: var(--yq-text-1); font-size: 14px; text-decoration: none; white-space: nowrap; } .tl-locale-menu a:hover { background: var(--yq-bg-quiet); } .tl-locale-menu a:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--yq-primary), 0 0 0 3px var(--yq-focus-ring); } .tl-locale-flag { width: 20px; text-align: center; flex: none; } /* 当前语言：accent 文字 + 右侧对勾（形状由 CSS 画，不引入图标资源） */ .tl-locale-menu a[aria-current="page"] { color: var(--yq-primary); font-weight: 600; background: var(--yq-primary-weak); } .tl-locale-menu a[aria-current="page"]::after { content: ""; flex: none; width: 9px; height: 5px; margin-left: auto; padding-left: 0; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); } .tl-locale-menu a[aria-current="page"] .tl-locale-name { padding-right: 16px; } /* 窄屏或触屏（含横屏手机，宽度可能 > 640）：每一项至少 44px 高 */ @media (max-width: 640px), (pointer: coarse) { .tl-locale-menu a { min-height: 44px; } } /* ---------- 工具卡在独立页里的位置 ---------- */ html.is-standalone .tool-shell { margin: 32px auto 0; padding-left: 20px; padding-right: 20px; } /* 工具卡下方的本地处理说明，弱化处理，不抢操作焦点 */ html.is-standalone .tl-assure { display: block; } .tl-assure { max-width: 640px; margin: 12px auto 0; padding: 0 20px; text-align: center; font-size: 12px; color: var(--yq-text-3); } /* ---------- 正文 ---------- */ html.is-standalone .tl-content { display: block; } .tl-content { max-width: 760px; margin: 0 auto; padding: var(--tl-gap-tool-to-body) 20px 8px; color: var(--yq-text-2); font-size: 14px; line-height: 1.75; } .tl-content section + section { margin-top: 36px; } .tl-content h2 { font-size: 17px; font-weight: 600; color: var(--yq-text-1); margin: 0 0 12px; letter-spacing: -.01em; } .tl-content h3 { font-size: 14px; font-weight: 600; color: var(--yq-text-1); margin: 20px 0 4px; } .tl-content p { margin: 0 0 10px; } .tl-content ol, .tl-content ul { margin: 0 0 10px; padding-left: 20px; } .tl-content li { margin-bottom: 6px; } .tl-content strong { color: var(--yq-text-1); font-weight: 600; } .tl-divider { height: 1px; background: var(--yq-border); border: 0; margin: 0 0 var(--tl-gap-tool-to-body); /* 分界线在留白正中，两侧对称 */ } /* ---------- 相关工具 ---------- */ .tl-related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; } .tl-related-list a { display: block; padding: 12px 14px; background: var(--yq-bg-page); border: 1px solid var(--yq-border); border-radius: var(--yq-r-card); color: var(--yq-text-1); text-decoration: none; font-size: 13px; font-weight: 500; transition: border-color var(--yq-dur) var(--yq-ease); } .tl-related-list a:hover { border-color: var(--yq-border-strong); } .tl-related-list span { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--yq-text-3); } /* ---------- Footer ---------- */ html.is-standalone .tl-footer { display: block; } .tl-footer { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px; font-size: 12px; color: var(--yq-text-3); } .tl-footer a { color: var(--yq-text-2); text-decoration: none; } .tl-footer a:hover { color: var(--yq-text-1); } /* ---------- 移动端 ---------- */ @media (max-width: 640px) { :root { --tl-gap-tool-to-body: 22px; } .tl-header { padding: 12px 16px; } .tl-brand { font-size: 14px; } .tl-header { gap: 8px; } .tl-actions { gap: 0; } .tl-locale-trigger, .tl-nav { padding-left: 8px; padding-right: 8px; } html.is-standalone .tool-shell { margin-top: 20px; padding-left: 16px; padding-right: 16px; } .tl-content { padding: var(--tl-gap-tool-to-body) 16px 8px; font-size: 14px; } .tl-footer { padding: 28px 16px 40px; } .tl-assure { padding: 0 16px; } }