/* The Bridge — global styles & design tokens. Ported from the claude.ai reference (claude页面设计参考资源). Dark is the default theme; light is a complete second theme (design spec §2.1). Brand coral: #d97757. */ /* bridge-client 桌面原生壳：恢复桌面输入语义，压低大面积玻璃合成成本， 并把常驻分页隔离为独立绘制域。全部由 preload 能力标记门控。 */ html[data-desktop="1"] body { -webkit-user-select: auto; user-select: auto; } html[data-desktop="1"] button, html[data-desktop="1"] [role="button"] { cursor: pointer; } html[data-desktop="1"] .settings { backdrop-filter: blur(18px) saturate(1.08); } /* 服务端控制台 / 扩展中心盖在设置页之上，只画了 38% 的黑罩——手机端下面垫的是 毛玻璃 .settings 面板所以读得清；桌面端下面是不透明的逻辑板 .sd，底下的文字 会原样透上来跟控制台内容叠在一起（实测整页不可读）。桌面形态自带磨砂罩。 */ html[data-desktop="1"] .sadm, html[data-desktop="1"] .extp { background: rgba(9, 11, 16, .74); -webkit-backdrop-filter: blur(26px) saturate(1.12); backdrop-filter: blur(26px) saturate(1.12); } html[data-desktop="1"] .page, html[data-desktop="1"] .claude-page, html[data-desktop="1"] .vertex-page { contain: layout style paint; } html[data-desktop="1"] * { -webkit-tap-highlight-color: transparent; } @media (pointer: fine) { html[data-desktop="1"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-desktop="1"] ::-webkit-scrollbar-thumb { background: rgba(127,127,127,.24); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; } } /* —— WCO frameless（桌面壳 BRIDGE_WCO，批4.5 全站走查）—— 拖拽区按几何并集计算、与 z-index 无关：顶部 40px 带内残留的交互元素会被 drag 吞点击， 故【全部交互元素一律 no-drag 兜底】（带外元素上是零成本 no-op，未来新页自动被罩住）； 右上 ~140px 被系统最小化/最大化/关闭按钮覆盖：各分页顶栏按 --wco-right （wco.svelte.js 实时同步的窗控占宽）平移避让。非 WCO 环境 data-wco 不存在，全部惰性。 */ html[data-wco="1"] button, html[data-wco="1"] [role="button"], html[data-wco="1"] a, html[data-wco="1"] input, html[data-wco="1"] textarea, html[data-wco="1"] select, html[data-wco="1"] [contenteditable="true"] { -webkit-app-region: no-drag; } /* Claude 顶栏右浮钮组：钉在窗口右上与系统窗控做邻居——.claude-slide 常挂 transform， fixed 的包含块=全屏滑动层，故 dock 展开挤窄聊天列时按钮原位不动；右距收紧到窗控左缘 4px。 收成标题栏带里的一颗紧凑胶囊（高 32，与窗控按钮同一条中线）：原先 44px 高、top:2 会伸出 40px 的窗控带，工作台展开后它压进面板第一行。现在工作台把自己那段第一行让出来当标题栏带 （ClaudeDock.svelte），胶囊正好坐在带里、窗控左边。top 组件里是内联样式，须 !important 压过。 左上汉堡（medium 档才出）同步收成 32px，两端同一条基线。 */ html[data-wco="1"] .claude-slide .fab.pill { position: fixed; right: calc(4px + var(--wco-right, 0px)); top: calc((var(--wco-h, 40px) - 32px) / 2) !important; height: 32px; border-radius: 16px; padding: 0 3px; } html[data-wco="1"] .claude-slide .fab.pill .pbtn { width: 38px; height: 26px; border-radius: 13px; } html[data-wco="1"] .claude-slide .fab.pill .pbtn svg { width: 18px; height: 18px; } html[data-wco="1"] .claude-slide .fab.pill .live-dot { top: 2px; right: 6px; } html[data-wco="1"] .claude-slide .fab.round { top: calc((var(--wco-h, 40px) - 32px) / 2) !important; width: 32px; height: 32px; font-size: 18px; } /* Vertex：手机态顶栏 flex（右组 margin-left:auto）/ 桌面态右上功能钮 */ html[data-wco="1"] .v-header { padding-right: calc(8px + var(--wco-right, 0px)); } html[data-wco="1"] .v-dt-top { padding-right: calc(16px + var(--wco-right, 0px)); } /* 工作空间工具栏的避让不在这里写：FilesDesktop 组件内按 --fd-avoid-r 让位（整页=窗控； 内嵌进 Claude 工作台时为 0：工作台在桌面壳下把自己那段第一行整条让给窗控当标题栏带，子树里 --wco-right 归零），见 FilesDesktop.svelte / ClaudeDock.svelte。下方查看器头的 --wco-right 避让 在工作台侧栏里同样因此失效，这是有意的。 */ /* Harness（dimensio）分页的右上避让不在这里写：它按"哪一栏真的贴着窗口右缘"分情况 （dock 展开时右缘归面板，顶栏再让就成了隔空悬浮的钮），已下沉到 harness 组件内部， 由 App.svelte 的 --hx-hdr-r / --hx-pane-r 两个变量消费本文件下发的 --wco-right。 顺带解掉 .top / .dock 与 ServerAdmin、桌面主页启动器的撞名风险。 */ /* 服务端控制台 / 扩展中心（右上刷新/关闭钮距右缘仅 ~20px） */ html[data-wco="1"] .sadm .main > .top, html[data-wco="1"] .extp .main > .top { padding-right: calc(4px + var(--wco-right, 0px)); } /* 窄窗（≤880px 时 rail 横滑置顶）整体让出标题栏带 */ @media (max-width: 880px) { html[data-wco="1"] .sadm .frame, html[data-wco="1"] .extp .frame { padding-top: calc(14px + var(--wco-h, 40px)); } } /* 沉浸查看器顶条 + 右上菜单 + 各文档查看器头部 */ html[data-wco="1"] .mv-root .mv-top { padding-right: calc(10px + var(--wco-right, 0px)); } html[data-wco="1"] .mv-root .mv-menu { right: calc(10px + var(--wco-right, 0px)); } html[data-wco="1"] .doc-head, html[data-wco="1"] .pdf-head, html[data-wco="1"] .of-head, html[data-wco="1"] .hv-bar { padding-right: calc(10px + var(--wco-right, 0px)); } /* ChatGPT 分页是同源 iframe：主框架的拖拽区吞不掉也罩不住子文档（app-region 只收集主框架）， 整体下推一个标题栏带最稳——顶带留给拖拽，clone 顶栏与窗控互不打扰 */ /* 顶带底色不在这里硬写：写死 #212121 既跟 clone 的暗色面 #171717 差一截（顶部一条 肉眼可见的接缝），亮色主题下还会盖掉组件自己的白底。交给 .chatgpt-page 本体着色。 */ html[data-wco="1"] .chatgpt-page .chat-frame { margin-top: var(--wco-h, 40px); height: calc(100% - var(--wco-h, 40px)); } @font-face{font-family:"Anthropic Sans";src:url('/app/assets/cc27851ad-CFxw3nG7-CFxw3nG7.woff2') format("woff2");font-weight:300 800;font-style:normal;font-display:swap} @font-face{font-family:"Anthropic Serif";src:url('/app/assets/c66fc489e-C-BHYa_K-C-BHYa_K.woff2') format("woff2");font-weight:300 800;font-style:normal;font-display:swap} @font-face{font-family:"Anthropicons-Variable";src:url('/app/assets/c0f671921-DICoRAgs-DICoRAgs.woff2') format("woff2");font-weight:400 700;font-display:block} :root{ /* 系统栏安全边距：浏览器/iOS 走 env()；apk 由原生 edge-to-edge 注入真值 （inline style 覆盖此定义）。全前端统一引用 var(--sat)/var(--sab)。 */ --sat:env(safe-area-inset-top, 0px); --sab:env(safe-area-inset-bottom, 0px); --bg:#1f1f1e; --card:#2c2c2a; --text:#f8f8f6; --serif:#c3c2b7; --muted:#97958c; --coral:#d97757; --userbubble:#121212; --avatar-bg:#4a4a46; --hover:rgba(255,255,255,.07); --hover-strong:rgba(255,255,255,.10); --divider:rgba(255,255,255,.08); --card-shadow:0 2px 16px rgba(0,0,0,.2),0 0 0 .5px rgba(226,225,218,.28); --q-card:rgba(40,40,38,.97); --q-rowsel:rgba(255,255,255,.06); --q-skipborder:rgba(255,255,255,.22); --q-shadow:0 2px 16px rgba(0,0,0,.3),0 0 0 .5px rgba(226,225,218,.2); --sans:"Anthropic Sans",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --serif-stack:"Anthropic Serif",Georgia,"Times New Roman",Times,serif; --icons:"Anthropicons-Variable"; --ok:#5aa468; --warn:#d9a441; --crit:#d96a5a; --taskchip:#2f6fd6; --taskchip-fg:#ffffff; /* 后台任务芯片（官方 /code 页「N running task」同款蓝） */ --radius:16px; color-scheme:dark; /* 原生滚动条/表单控件跟随暗色（否则默认亮色滚动条在黑夜里发白突兀） */ /* —— 运动令牌（唯一真相源，JS 侧镜像见 lib/motion.js 的 DUR/EASE）—— 此前全站 15+ 种互不相干的 cubic-bezier、时长从 .14s 到 2.9s 随手拍；审美一致性 来自同一套时间与曲线反复出现，故一律引用下列令牌，不再就地手写数值。 档位按「移动距离 / 元素体量」分，不按「这动画重不重要」分。 */ --mo-tap:90ms; /* 按下反馈，必须 <100ms */ --mo-micro:140ms; /* 悬停 / 开关 / 小图标状态 */ --mo-quick:200ms; /* 菜单 / 气泡 / 芯片 */ --mo-base:280ms; /* 面板 / 弹层 / 罩层——全站弹层标准节拍 */ --mo-page:420ms; /* 整页容器变形 */ --mo-hero:560ms; /* 启动揭幕 / 主题切换 */ /* 入场用 decel、出场用 accel、双向用 std；opacity 走 fade 不跟位移曲线 */ --ea-std:cubic-bezier(.2,0,0,1); --ea-decel:cubic-bezier(.05,.7,.1,1); --ea-accel:cubic-bezier(.3,0,.8,.15); --ea-out:cubic-bezier(0,0,0,1); --ea-settle:cubic-bezier(.34,1.26,.5,1); /* 仅「松手回弹」，绝不用于按下 */ --ea-fade:cubic-bezier(.4,0,.6,1); } /* --press-s：按下缩放的可过渡自定义属性（use:pressable 驱动）。 注册成 才能被 transition 插值——不注册时自定义属性是"离散"的，按下会瞬跳。 */ @property --press-s { syntax: ""; inherits: false; initial-value: 1; } html[data-theme="light"]{ color-scheme:light; --bg:#f8f8f6; --card:#ffffff; --text:#121212; --serif:#373734; --muted:#7b7974; --coral:#d97757; --userbubble:#efeeeb; --avatar-bg:#d9d8d3; --hover:rgba(0,0,0,.05); --hover-strong:rgba(0,0,0,.07); --divider:rgba(0,0,0,.10); --card-shadow:0 2px 16px rgba(0,0,0,.1),0 0 0 .5px rgba(31,31,30,.2); --taskchip:#1f6feb; --taskchip-fg:#ffffff; --q-card:rgba(255,255,255,.98); --q-rowsel:#f4f4f1; --q-skipborder:rgba(31,31,30,.3); --q-shadow:0 2px 16px rgba(0,0,0,.08),0 0 0 .5px rgba(31,31,30,.3); } /* Anthropicons 动态图标（claude.ai 同款）：字体自带 ANIM/ANM2 变体轴（0–100 字形形变， 如项目盒盖展开）。注册成可过渡的数值属性后，悬停改 --ca-anim 即得官网那套弹性微动效。 */ @property --ca-anim { syntax: ""; inherits: true; initial-value: 0; } /* markdown 宽表格的滚动壳（由 lib/md.js 在渲染时套上，所有 md 渲染面共用： Claude / Vertex / Codex / agy / 扩展中心）。表格按内容排自然列宽，超出的部分在壳里 横滚——绝不把正文列顶宽、更不能让整条会话变成可左右拖的画布。 */ .md-tablewrap{max-width:100%;overflow-x:auto;margin:0 0 12px} .md-tablewrap>table{width:max-content;max-width:none;margin:0} /* KaTeX 块级公式同理：katex 自带样式只有 display:block，长公式（大矩阵、连加）会直接 溢出正文列。给它自己的横滚，overflow-y 保持 hidden 免得高分式旁边冒出竖滚条。 */ .katex-display{overflow-x:auto;overflow-y:hidden;padding-bottom:2px} *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{height:100%} /* 原生手感基建： · overscroll-behavior:none —— 滚动到边不把滚动链传给 WebView（无 glow/下拉刷新误触） · text-size-adjust —— 禁 WebView 字体膨胀算法（旋转/宽变时正文突然放大＝很 web） · touch-action:manipulation —— 消除残存的双击缩放判定延迟，点按即时响应 */ html{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px; -webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none; touch-action:manipulation; transition:background-color .25s ease,color .25s ease; } /* UI 骨架禁选中/禁长按呼出（原生 app 标配：长按按钮不出现文本选择柄/放大镜）； 正文内容（回答、气泡、思考、输入框）在下面明确放开，复制体验不受影响。 */ body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} input,textarea,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} img,svg{-webkit-user-drag:none;user-drag:none} /* 触屏隐藏滚动条（原生 app 无常驻滚动条；桌面鼠标环境保留），并让滚动容器不外溢滚动链 */ @media (pointer: coarse){ ::-webkit-scrollbar{width:0;height:0;display:none} *{scrollbar-width:none} } #app{height:100%;display:flex;flex-direction:column} button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation} .ic{font-family:var(--icons);font-style:normal;line-height:1;display:inline-block} /* 可选中的正文区（组件里用 class 挂上）：Claude 回答/用户气泡/思考体/工具参数等 */ .sel-text,.sel-text *{-webkit-user-select:text;user-select:text} /* 触摸/点击不显示焦点轮廓——WebView 默认是橙黄色：可聚焦元素（如 THE BRIDGE 切主题钮）被点后、 或转场组件卸载后焦点回退到 body 时，会沿整屏画一圈，直到点背景失焦才消失（=暗色主题切换后那条 黄边框）。仅键盘导航(:focus-visible)保留轮廓做无障碍；手机无键盘故移动端不再出现。 */ :focus{outline:none} :focus-visible{outline:2px solid var(--coral);outline-offset:2px} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* —— 全站弹层语言（唯一一套）—— 此前每个弹层各写各的（.18/.2/.3/.38/.42s、有的只淡入、有的只滑入），层与层之间 节奏对不上＝"粗糙"。统一为：罩层先于内容起、内容带位移落定；关闭时内容先走、罩层殿后。 .ov-scrim 给罩，.ov-panel 给内容板，.ov-sheet 给底部/侧边抽屉。挂 .closing 即出场。 */ .ov-scrim{ animation:ov-scrim-in var(--mo-base) var(--ea-fade) both; transition:opacity var(--mo-quick) var(--ea-fade); } .ov-scrim.closing{opacity:0} @keyframes ov-scrim-in{from{opacity:0}} .ov-panel{ animation:ov-panel-in var(--mo-base) var(--ea-decel) both; transition:transform var(--mo-quick) var(--ea-accel),opacity var(--mo-quick) var(--ea-fade); } .ov-panel.closing{opacity:0;transform:translateY(8px) scale(.985)} @keyframes ov-panel-in{from{opacity:0;transform:translateY(14px) scale(.97)}} /* 弹出菜单/气泡：从触发点长出来，故带 transform-origin，且更快 */ .ov-pop{animation:ov-pop-in var(--mo-quick) var(--ea-decel) both} @keyframes ov-pop-in{from{opacity:0;transform:scale(.94)}} /* —— 按下反馈（use:pressable 的 CSS 侧）—— 纪律：按下干脆(90ms 无过冲)、松手才弹（弹簧在 JS 侧）。CSS 只负责消费 --press-s。 元素若另有 transform，自己写成 translate(..) scale(var(--press-s,1)) 组合。 */ .pressable{transform:scale(var(--press-s,1))} /* 纯 CSS 兜底（未挂 action 的既有按钮）：仍比原先的弹性按下干脆 */ .press-css{transition:transform var(--mo-tap) var(--ea-accel)} .press-css:active{transform:scale(.96)} /* —— 液态玻璃（use:liquidGlass 给元素加 .lg；折射滤镜由 JS 按尺寸注入）—— .lg 只负责玻璃本体淡底色 + 立体边光 + 镜面高光；折射/色散是 backdrop-filter。 */ .lg{ position:relative; border-radius:var(--lg-radius,28px); background:rgba(255,255,255,var(--lg-tint,.04)); /* 极淡底色，保证透光而非磨砂 */ box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 1.5px 1.5px 1.5px rgba(255,255,255,.45), inset -1.5px -2px 3px rgba(0,0,0,.16), 0 10px 26px rgba(0,0,0,.24); isolation:isolate; /* 让 ::after 的 screen 混合限定在自身 */ } .lg::after{ /* 顶部斜向镜面高光，强化凸面反光 */ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.06) 21%,rgba(255,255,255,0) 44%); mix-blend-mode:screen; pointer-events:none; } .lg-content{ position:relative; z-index:1; } /* 玻璃上的图标/文字浮在高光之上 */ /* 纯折射变体：去掉边光/镜面高光/淡底色，只留折射本身——图标入场「鼓包」(折射 scale 从 0 拉到预设)用 */ /* 「光感」变体：默认 glow=0 完全纯折射（无打光，融入壁纸）；光感滑块(--lg-glow 0→1)按强度 加回立体边光+暗部+外投影（本体 box-shadow）＋镜面高光（::after）＝原登录胶囊那套打光质感。 */ .lg.lg-bare{ background:transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,calc(.32*var(--lg-glow,0))), inset 1.5px 1.5px 1.5px rgba(255,255,255,calc(.45*var(--lg-glow,0))), inset -1.5px -2px 3px rgba(0,0,0,calc(.16*var(--lg-glow,0))), 0 10px 26px rgba(0,0,0,calc(.22*var(--lg-glow,0))); } .lg.lg-bare::after{ content:""; opacity:var(--lg-glow,0); } /* 镜面高光按光感强度（背景/screen 继承 .lg::after） */ /* 全域拖拽进行中（lib/dragdrop.svelte.js 挂在 上）： ① 禁掉整页文字选择——鼠标拖到一半会把沿途文字刷成蓝的； ② 光标改成「攥着」，桌面上一眼看出手里有东西。 触屏上这两条都无副作用（没有光标、也没有拖选）。 */ html.dnd-live, html.dnd-live * { user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; } html.dnd-live { cursor: grabbing; } /* ④ 拖拽期间浏览器不许再做任何触摸手势：触摸滚动在 Chrome 里是整场序列级别的手势，第二根手指 一滚，它会给【所有】指针补 pointercancel、拎着的那份当场掉地。touch-action 是逐级求交集的， 挂在 html 上等于全站生效，之后落下的每根手指都不再有原生滚动——第二根手指的滚动/点按由 lib/dragdrop.svelte.js 自己认（JS 滚动 + 惯性 + 合成 click）。 */ html.dnd-live { touch-action: none !important; } /* ③ 拖拽期间让 iframe 对命中测试透明：指针一旦飘到 iframe 上，事件就被路由进它自己的 document，父页当场失去这根手指（Codex 分页整块正文就是个 iframe，不让开就永远投不进去）。 */ html.dnd-live iframe { pointer-events: none !important; } /* dimensio 正文列的落点高亮：规则必须落在【全局】——harness 那侧是另一个组件的 scoped CSS， 宿主注入的 action 加的类在那里会被编译器当未使用剪掉。用 outline 而不是 ::after， 免得依赖目标节点的定位上下文。 */ .hx-dnd-on { outline: 2px solid var(--hx-accent, #6d7cff); outline-offset: -6px; border-radius: 14px; } /* ===== claude.ai /code 转录滚动区同款渐隐（CDS .scroll-fade-strip-*，2026-09-11 自官方桌面端 1.52386 的 c6a992d55 css 原样取回）===== 两条 sticky 渐变带贴在滚动容器首尾（负 margin 不占位），颜色 = 容器底色（--scroll-fade-color， 缺省 --bg），由 scroll() 时间线驱动两个注册属性：raw = 顶带在头 size 像素内 0→1、底带在尾 size 像素内 1→0；active = 容器可滚才为 1（不可滚时 scroll() 时间线不活跃、动画不生效、保持初值 0， 两带恒隐——官方靠这一手让短内容不出现渐隐）。不支持 scroll() 的引擎 opacity 恒 0，等于没这层。 官方转录：顶 32px（--epitaxy-top-fade-height）、底 48px（scroll-fade-size-[48px]）；本项目按页面覆写。 渐变梯度是官方原值：0%实色 → 13% .85 → 40% .5 → 70% .15 → 透明。 */ @property --scroll-fade-size { syntax: ""; inherits: false; initial-value: 28px; } @property --scroll-fade-raw { syntax: ""; inherits: false; initial-value: 0; } @property --scroll-fade-active { syntax: ""; inherits: false; initial-value: 0; } .scroll-fade-strip-top, .scroll-fade-strip-bottom { position: sticky; inset-inline-start: 0; height: var(--scroll-fade-size); pointer-events: none; z-index: 1; opacity: 0; } .scroll-fade-strip-top { top: 0; margin-bottom: calc(var(--scroll-fade-size) * -1); background: linear-gradient(to bottom, var(--scroll-fade-color, var(--bg)), color-mix(in srgb, var(--scroll-fade-color, var(--bg)) 85%, transparent) 13%, color-mix(in srgb, var(--scroll-fade-color, var(--bg)) 50%, transparent) 40%, color-mix(in srgb, var(--scroll-fade-color, var(--bg)) 15%, transparent) 70%, transparent); } .scroll-fade-strip-bottom { bottom: 0; margin-top: calc(var(--scroll-fade-size) * -1); background: linear-gradient(to top, var(--scroll-fade-color, var(--bg)), color-mix(in srgb, var(--scroll-fade-color, var(--bg)) 85%, transparent) 13%, color-mix(in srgb, var(--scroll-fade-color, var(--bg)) 50%, transparent) 40%, color-mix(in srgb, var(--scroll-fade-color, var(--bg)) 15%, transparent) 70%, transparent); } @supports (animation-timeline: scroll()) { .scroll-fade-strip-top, .scroll-fade-strip-bottom { opacity: calc(var(--scroll-fade-raw) * var(--scroll-fade-active)); animation-timing-function: linear; animation-fill-mode: both, none; animation-duration: auto; animation-timeline: scroll(), scroll(); } .scroll-fade-strip-top { animation-name: scroll-fade-strip-in, scroll-fade-strip-active; animation-range: 0px var(--scroll-fade-size), 0px 101%; } .scroll-fade-strip-bottom { animation-name: scroll-fade-strip-out, scroll-fade-strip-active; animation-range: calc(100% - var(--scroll-fade-size)) 100%, 0px 101%; } } @keyframes scroll-fade-strip-in { 0% { --scroll-fade-raw: 0; } to { --scroll-fade-raw: 1; } } @keyframes scroll-fade-strip-out { 0% { --scroll-fade-raw: 1; } to { --scroll-fade-raw: 0; } } @keyframes scroll-fade-strip-active { 0%, to { --scroll-fade-active: 1; } }