滑块圆钮改实心:暖白实心钮 + filled 段铺到钮下沿(复核反馈 2 之三)
Project CI / AI game creator shell Rust crates (pull_request) Successful in 6m32s
Project CI / Backend tests (pull_request) Successful in 8m39s
Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 9m8s
Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 10m43s
Project CI / Frontend tests (pull_request) Successful in 3m4s
Project CI / AI game creator shell web tests (pull_request) Successful in 3m4s
Project CI / Native shell tests (pull_request) Successful in 9m3s
Project CI / Repository checks (pull_request) Successful in 7m11s
Project CI / AI game creator shell Rust crates (pull_request) Successful in 6m32s
Project CI / Backend tests (pull_request) Successful in 8m39s
Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 9m8s
Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 10m43s
Project CI / Frontend tests (pull_request) Successful in 3m4s
Project CI / AI game creator shell web tests (pull_request) Successful in 3m4s
Project CI / Native shell tests (pull_request) Successful in 9m3s
Project CI / Repository checks (pull_request) Successful in 7m11s
- 圆钮去掉「主色描边 + 半透明底」造成的空心环观感:改 `background: var(--platform-panel-fill)`(两个主题都是不透明面板色),保留 1px `--platform-subpanel-border` 极淡描边与柔和暖影,尺寸仍 20px - 「靶心」根因:`--platform-input-highlight` 在浅色主题只有 90% 不透明,filled 段透出来正好在钮心形成一个点;换不透明 token 后消失。同时给 input `position: relative; z-index: 1`,让实心钮压在档位点之上(不再被下面的点透出) - filled 段:`--strength-progress`(百分比)换成 `--strength-ratio`(0~1 无单位),CSS 用 `calc(20px + ratio * (100% - 20px))` 把填充一直铺到圆钮右缘,两端在任意轨道宽度下都对得齐;默认档填充恰等于圆钮直径(不伪造填充) - hover 把暖影压深一档;focus-visible 焦点环与投影一起给(`box-shadow` 是单值属性,只写环会把实心钮的影子抹掉);Firefox 的 track/progress/thumb 同步同一套 - 校验:typecheck、2 个 vitest 文件 212 passed / 9 skipped、eslint、prettier、encoding、spacetime-schema、diff-check 全通过;无头 Chromium 重采 5 张**真 PNG** 并已换进 PR 正文(像素级验证:圆钮中心 (252,248,244) 暖白、mid 态 filled 右界与钮右缘重合)
This commit is contained in:
@@ -13668,6 +13668,9 @@ details.design-agent-reasoning[open]
|
||||
.project-chat-surface.is-direct-codex
|
||||
.project-chat-composer.is-direct-codex
|
||||
.project-chat-composer-strength-range {
|
||||
/* 圆钮(input 的 thumb)要压在档位点之上:实心钮不该被它下面那颗点透出来。 */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
margin: 0;
|
||||
@@ -13683,11 +13686,14 @@ details.design-agent-reasoning[open]
|
||||
.project-chat-composer-strength-range::-webkit-slider-runnable-track {
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
/* 已选段用主色、未选段用暖灰:进度由组件写进来的 `--strength-progress` 决定。 */
|
||||
/* 已选段一直铺到圆钮右缘(`--strength-ratio` 是无单位档位比例,20px = 圆钮直径),
|
||||
圆钮右缘之外才是未选段;`calc` 让两端在任意轨道宽度下都对齐。 */
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--platform-accent) 0 var(--strength-progress, 0%),
|
||||
var(--platform-subpanel-border) var(--strength-progress, 0%) 100%
|
||||
var(--platform-accent) 0
|
||||
calc(20px + var(--strength-ratio, 0) * (100% - 20px)),
|
||||
var(--platform-subpanel-border)
|
||||
calc(20px + var(--strength-ratio, 0) * (100% - 20px)) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13699,10 +13705,15 @@ details.design-agent-reasoning[open]
|
||||
height: 20px;
|
||||
margin-top: -7px;
|
||||
appearance: none;
|
||||
border: 2px solid var(--platform-accent);
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
border-radius: 999px;
|
||||
background: var(--platform-input-highlight);
|
||||
box-shadow: 0 2px 6px rgb(112 57 30 / 22%);
|
||||
/* 实心暖白圆钮:用 `--platform-panel-fill`(两个主题都是不透明面板色)而不是半透明的
|
||||
`--platform-input-highlight`——后者浅色主题只有 90% 不透明,下面的已选段会透出来,
|
||||
看起来就是个"靶心"。不再画中心点、也不用主色描边成空心环。 */
|
||||
background: var(--platform-panel-fill);
|
||||
box-shadow:
|
||||
0 2px 6px rgb(112 57 30 / 24%),
|
||||
0 1px 2px rgb(112 57 30 / 16%);
|
||||
}
|
||||
|
||||
.game-workbench-chat
|
||||
@@ -13712,6 +13723,10 @@ details.design-agent-reasoning[open]
|
||||
:disabled
|
||||
)::-webkit-slider-thumb {
|
||||
transform: scale(1.06);
|
||||
/* 悬停把暖影压深一档(实心钮靠影子浮起来,不能只靠描边)。 */
|
||||
box-shadow:
|
||||
0 3px 9px rgb(112 57 30 / 30%),
|
||||
0 1px 3px rgb(112 57 30 / 20%);
|
||||
}
|
||||
|
||||
.game-workbench-chat
|
||||
@@ -13734,7 +13749,10 @@ details.design-agent-reasoning[open]
|
||||
.project-chat-surface.is-direct-codex
|
||||
.project-chat-composer.is-direct-codex
|
||||
.project-chat-composer-strength-range:focus-visible::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
|
||||
/* 焦点环与暖影一起给:`box-shadow` 是单值属性,只写环会把实心钮的影子抹掉。 */
|
||||
box-shadow:
|
||||
0 0 0 3px var(--platform-input-focus-ring),
|
||||
0 2px 6px rgb(112 57 30 / 24%);
|
||||
}
|
||||
|
||||
.game-workbench-chat
|
||||
@@ -13770,10 +13788,13 @@ details.design-agent-reasoning[open]
|
||||
.project-chat-composer-strength-range::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--platform-accent);
|
||||
/* 与 WebKit 同一套实心钮:暖白底 + 极淡描边 + 柔和暖影(不用主色描边成空心环)。 */
|
||||
border: 1px solid var(--platform-subpanel-border);
|
||||
border-radius: 999px;
|
||||
background: var(--platform-input-highlight);
|
||||
box-shadow: 0 2px 6px rgb(112 57 30 / 22%);
|
||||
background: var(--platform-panel-fill);
|
||||
box-shadow:
|
||||
0 2px 6px rgb(112 57 30 / 24%),
|
||||
0 1px 2px rgb(112 57 30 / 16%);
|
||||
}
|
||||
|
||||
/* 档位点:纯装饰(命中与吸附由原生 range 负责),个数跟着档位契约走,
|
||||
|
||||
+2
-2
@@ -488,8 +488,8 @@ export function ComposerReasoningEffortSelect({
|
||||
value={activeIndex}
|
||||
style={
|
||||
{
|
||||
/* 已选段填充的进度:CSS 里用它给轨道做双色渐变(不写死颜色)。 */
|
||||
'--strength-progress': `${(activeIndex / (options.length - 1)) * 100}%`,
|
||||
/* 档位比例(0~1,无单位):CSS 用它算出圆钮中心,填充铺到圆钮右缘。 */
|
||||
'--strength-ratio': String(activeIndex / (options.length - 1)),
|
||||
} as CSSProperties
|
||||
}
|
||||
aria-label="思维强度"
|
||||
|
||||
Reference in New Issue
Block a user