/* ========================================================================== Codex 页面改造 —— 借鉴 New API playground 的阅读体验 ========================================================================== 范围：**仅 /codex 页面**，且不依赖任何 JS 设置的标记。 ── 为什么不用 data-codex 标记 ───────────────────────────────────────── 最初用 作作用域，实测**不可靠**： React hydration 会重写 的属性，脚本早期设置的值被抹掉。 实测同一份脚本，有时 data-codex 存在、有时为 null（时序竞争）。 改为直接以 **Codex 页自身的 DOM 特征**作锚点 —— 更稳，且有两个额外好处： · 不依赖 JS 执行时序，hydration 动不了它 · 客户端路由跳转（App Router 不刷新页面）时，DOM 变了规则自然失效， 不会残留到别的页面 ── 锚点唯一性（实测，逐页 grep -F 计数）──────────────────────────────── 选择器 codex 首页 music photowall posts forum about moments market section.min-h-[620px] 1 0 0 0 0 0 0 0 0 aside.space-y-5 1 0 0 0 0 0 0 0 0 div.*grid-cols-[minmax(0,1fr)_300px] 1 0 0 0 0 0 0 0 0 三者都是 Codex 页独占，所以样式天然不外溢。 ── 参考站的设计规则（读其源码提炼，自行实现，未复制代码）────────────── 出处：new-api/web/src/features/playground/lib/message/message-styles.ts "Assistant content reads like a document column; user bubble stays compact." · AI 回复：bg-transparent、无边框、max-w-[78ch] —— 扁平文档流 · 用户消息：rounded-2xl + rounded-br-md、bg-muted/70、px-4 py-2.5、shadow-sm · 消息纵向 py-2.5，比常规列表紧凑 ── 与既往翻车的区别 ─────────────────────────────────────────────────── 不碰宿主的 overflow / position / isolation / z-index。 只改 background / border / border-radius / padding / max-width / box-shadow， 这些属性不改变任何子元素的定位基准或层叠归属。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 令牌 —— 挂在 Codex 页独有的聊天卡片上 -------------------------------------------------------------------------- */ section.min-h-\[620px\] { --cx-reading-width: 74ch; --cx-bubble-radius: 18px; --cx-bubble-tight: 6px; --cx-user-bg: linear-gradient( 180deg, rgba(0, 165, 239, 0.14), rgba(0, 165, 239, 0.09) ); --cx-user-border: rgba(0, 165, 239, 0.26); --cx-user-text: #0b3d57; --cx-ai-text: rgba(15, 23, 42, 0.9); } .dark section.min-h-\[620px\] { --cx-user-bg: linear-gradient( 180deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.1) ); --cx-user-border: rgba(125, 211, 252, 0.24); --cx-user-text: #dcefff; --cx-ai-text: rgba(226, 232, 240, 0.92); } /* -------------------------------------------------------------------------- 2. 消息流节奏 -------------------------------------------------------------------------- 消息列表 = 聊天卡片的直接子 div（class 含 flex-1 space-y-4 overflow-y-auto）。 参考站每项 py-2.5，这里用 margin 实现同等紧凑度，且不动 padding （padding 归列表自己管，改了会与滚动区打架）。 -------------------------------------------------------------------------- */ section.min-h-\[620px\] > div.flex-1.space-y-4 > div + div { margin-top: 0.75rem; } /* -------------------------------------------------------------------------- 3. 用户消息 —— 紧凑气泡，右下角收紧 -------------------------------------------------------------------------- */ section.min-h-\[620px\] > div.flex-1.space-y-4 > div.justify-end > div { background: var(--cx-user-bg) !important; border: 1px solid var(--cx-user-border) !important; color: var(--cx-user-text) !important; /* 右下角收紧，形成「从右侧发出」的指向感 */ border-radius: var(--cx-bubble-radius) var(--cx-bubble-radius) var(--cx-bubble-tight) var(--cx-bubble-radius) !important; padding: 0.65rem 0.95rem !important; max-width: 82% !important; /* 参考站 85%，再宽像横幅 */ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); font-size: 0.9375rem; line-height: 1.7; } /* -------------------------------------------------------------------------- 4. AI 回复 —— 去掉气泡，改扁平文档流（本次改造的核心） -------------------------------------------------------------------------- 原来的白色圆角气泡在长回复下会形成一块块「孤岛」，阅读连贯性差。 去掉边框与底色后，文字直接贴着左缘成栏，接近参考站的文档感。 -------------------------------------------------------------------------- */ section.min-h-\[620px\] > div.flex-1.space-y-4 > div.justify-start > div { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0.3rem 0 !important; /* 阅读宽度：一行过长时回行容易找不到下一行开头 */ max-width: min(100%, var(--cx-reading-width)) !important; color: var(--cx-ai-text) !important; font-size: 0.9375rem; line-height: 1.78; } /* AI 消息内的图片仍需要边界，单独给 */ section.min-h-\[620px\] > div.flex-1.space-y-4 > div.justify-start > div > img { border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.22); } /* -------------------------------------------------------------------------- 5. 输入区 -------------------------------------------------------------------------- 外壳本身的样式见 codex-ui.css。这里补两处： · 宽屏下把输入区约束到与正文接近的宽度（参考站是 mx-auto max-w-4xl） · 芯片行收敛间距 -------------------------------------------------------------------------- */ @media (min-width: 1024px) { section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 { max-width: 56rem; width: 100%; margin-left: auto; margin-right: auto; } } section.min-h-\[620px\] > footer > div.mb-3.flex, section.min-h-\[620px\] > footer > div.flex-wrap { gap: 0.4rem; } /* -------------------------------------------------------------------------- 6. 侧栏卡片 -------------------------------------------------------------------------- aside.space-y-5 在 Codex 页独占（实测其他页面均为 0）。 -------------------------------------------------------------------------- */ aside.space-y-5 > section.apple-glass { padding: 1.15rem 1.25rem !important; } aside.space-y-5 > section.apple-glass h2 { font-size: 0.8125rem; letter-spacing: 0.01em; } aside.space-y-5 select.apple-input { border-radius: 12px; } /* -------------------------------------------------------------------------- 7. 降级 -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { section.min-h-\[620px\] *, aside.space-y-5 * { transition: none !important; animation: none !important; } } /* 与动效层共用总开关：?motion=off 时把 AI 消息还原成站点原样 */ [data-motion='off'] section.min-h-\[620px\] > div.flex-1.space-y-4 > div.justify-start > div { background: revert !important; border: revert !important; padding: revert !important; border-radius: revert !important; max-width: revert !important; }