@charset "utf-8"; /** * PowerFantasy 三方 SDK 清单页 —— 基础排版 * * 视觉基线沿用 powerfantasygames.com/termsofservice/index.html： * 白底、#333 正文、居中窄栏、右上角胶囊语言切换。差异只有一处—— * 本页正文主体是 5~6 列的清单表格，容器比纯条款页宽（1180px vs 900px）， * 标题与说明段落仍保持窄栏阅读宽度。 * * 本文件同时被 PC 入口 index.html 与移动端 m/index.html 引用； * 移动端的卡片式排版在 css/m-main.css 里覆盖（后加载，优先级更高）。 */ * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; color: #4290f7; cursor: pointer; } a:hover { text-decoration: underline; } html, body { width: 100%; margin: 0; padding: 0; background: #fff; color: #333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans KR", "Noto Sans JP", "Hiragino Sans", "Meiryo", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; font-size: 16px; line-height: 1.8; -webkit-text-size-adjust: 100%; } /* ── 右上角语言切换 ─────────────────────────────────────────────── 与参照页一致的胶囊按钮：默认白底灰字，当前语言实心蓝底。当前态由驱动，js/main.js 切换时改这个属性即可，不需要逐个按钮加/删 class。 */ .lang-switch { max-width: 1180px; margin: 0 auto; padding: 20px 24px 0; display: flex; justify-content: flex-end; gap: 8px; } .lang-switch a { display: inline-block; padding: 6px 14px; border: 1px solid #d0d5dd; border-radius: 999px; background: #fff; color: #555; font-size: 14px; line-height: 1.4; transition: color .15s, border-color .15s, background .15s; } .lang-switch a:hover { border-color: #4290f7; color: #4290f7; text-decoration: none; } html[data-locale="en"] .lang-switch a[data-loc="en"], html[data-locale="ko"] .lang-switch a[data-loc="ko"], html[data-locale="ja"] .lang-switch a[data-loc="ja"] { background: #4290f7; border-color: #4290f7; color: #fff; cursor: default; } /* ── 正文容器 ────────────────────────────────────────────────── */ .content_html { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; } .content_html h1 { font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 12px; color: #111; line-height: 1.4; } .content_html .intro { max-width: 900px; margin: 0 auto 32px; color: #555; font-size: 15px; text-align: justify; } /* ── 清单表格 ──────────────────────────────────────────────── 单元格边框走 border-collapse，表头浅灰置顶；合并单元格（原文档里同一服务跨多行的服务名/提供者/用途）由 js/main.js 计算 rowspan 还原，这里只负责视觉。 */ .sdk-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sdk-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 13px; line-height: 1.6; color: #333; } .sdk-table th, .sdk-table td { border: 1px solid #e4e7ec; padding: 10px 12px; text-align: left; vertical-align: top; /* 只在整词放不下时才断行，不从词中间劈开（break-word 会把 "Facebook Login/Share/Reporting" 断成 "Reporti / ng"）；超长 URL 另走下面的 .is-url 规则 */ word-break: normal; overflow-wrap: break-word; } .sdk-table thead th { background: #f5f7fa; color: #111; font-weight: 700; white-space: nowrap; position: sticky; top: 0; z-index: 1; } .sdk-table tbody tr:hover td { background: #fafbfc; } /* 服务名（首列）加粗，跨行合并时视觉上统领整组 */ .sdk-table td.col-0 { font-weight: 600; color: #111; } /* 合作方网站列：长 URL 允许任意位置断行，避免撑破表格 */ .sdk-table td.is-url { word-break: break-all; } .sdk-table td.is-url a { color: #4290f7; } /* 列宽：5 列（英文，无"权限代码"列）与 6 列（韩文 / 日文）各一套 */ .sdk-table[data-cols="5"] col:nth-child(1) { width: 15%; } .sdk-table[data-cols="5"] col:nth-child(2) { width: 17%; } .sdk-table[data-cols="5"] col:nth-child(3) { width: 33%; } .sdk-table[data-cols="5"] col:nth-child(4) { width: 21%; } .sdk-table[data-cols="5"] col:nth-child(5) { width: 14%; } .sdk-table[data-cols="6"] col:nth-child(1) { width: 17%; } .sdk-table[data-cols="6"] col:nth-child(2) { width: 16%; } .sdk-table[data-cols="6"] col:nth-child(3) { width: 16%; } .sdk-table[data-cols="6"] col:nth-child(4) { width: 18%; } .sdk-table[data-cols="6"] col:nth-child(5) { width: 18%; } .sdk-table[data-cols="6"] col:nth-child(6) { width: 15%; } /* 窄一点的桌面窗口（含平台预览面板）：容器留白收一些，表格照常横向滚动 */ @media (max-width: 1280px) { .lang-switch { padding: 16px 16px 0; } .content_html { padding: 24px 16px 60px; } } /* ══════════════════════════════════════════════════════════════ 移动端（m/index.html，） ══════════════════════════════════════════════════════════════ 为什么移动端不沿用表格：韩文 / 日文清单有 6 列，最窄的手机视口不到 360px，硬塞表格要么横向滚到看不见前几列（用户根本不知道自己在看哪一行），要么每列挤成两三个字。所以同一份数据在移动端换一种组织：一个服务一张卡片，卡片里按 [表头 → 值] 成对展开；原文档里同一服务的多行权限（那些合并单元格）在卡片内用虚线分组，"权限代码 ↔ 权限说明"的对应关系不丢。键名直接取用户文档的表头行文字，不另造标签。 */ body[data-view="m"] { font-size: 14px; } body[data-view="m"] .lang-switch { padding: 16px 16px 0; justify-content: center; } body[data-view="m"] .lang-switch a { font-size: 13px; padding: 5px 12px; } body[data-view="m"] .content_html { padding: 20px 16px 56px; } body[data-view="m"] .content_html h1 { font-size: 20px; margin-bottom: 10px; } body[data-view="m"] .content_html .intro { font-size: 13px; margin-bottom: 22px; text-align: left; } /* PC 端不渲染卡片、移动端不渲染表格，两边各自兜底藏一层，防止将来有人改渲染逻辑时两种形态同时冒出来 */ body[data-view="pc"] .sdk-cards { display: none; } body[data-view="m"] .sdk-table { display: none; } .sdk-card { border: 1px solid #e4e7ec; border-radius: 10px; padding: 14px 14px 6px; margin-bottom: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .sdk-card__name { font-size: 15px; font-weight: 700; color: #111; line-height: 1.5; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eef0f3; word-break: break-word; } .sdk-card__row { margin-bottom: 8px; } /* 同一服务的第 2 行起（原文档合并单元格里的附加权限行）加一条浅分隔线 */ .sdk-card__row + .sdk-card__row { border-top: 1px dashed #eef0f3; padding-top: 10px; } .sdk-kv { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 13px; line-height: 1.65; } .sdk-kv__k { flex: 0 0 34%; max-width: 34%; color: #888; word-break: break-word; } .sdk-kv__v { flex: 1 1 auto; color: #333; word-break: break-word; } .sdk-kv__v.is-url { word-break: break-all; } .sdk-kv__v a { color: #4290f7; } /* 超窄屏（iPhone SE 一类）：键值改上下堆叠，别让值被压成一列竖字 */ @media (max-width: 360px) { .sdk-kv { display: block; } .sdk-kv__k { max-width: 100%; display: block; font-size: 12px; } }