/* * 买断制定价字段:网页发布页与 AGC 发布面板共用同一份表现与文案。 * * 这里只补平台原语没覆盖的部分,不另造一套控件观感: * - 外壳:`PlatformSubpanel`(`platform` 面 + `xs` 圆角 ≈ 网页 `.game-publish-fieldset` 的 * 0.7rem 描边卡片,AGC 侧同族容器是 `.game-distribution-publish-panel__publication`)。 * - 付费方式:原生 radio(屏外裁切保留语义 / 键盘 / `.checked`)+ 共享 chip 外观 * (`getPlatformCategoryChipClassName`:未选=浅底描边,选中=实心品牌填充反白)。 * - 买断价:`PlatformTextField`,本文件只补右对齐等宽数字、单位留位、错误态与层次。 * * 选择器统一写成「根类 + 子类」而不是裸类:AGC 发布面板的 * `.game-distribution-publish-panel__fields label/input` 是后代选择器(0,1,1),会盖掉 * 原语里的 Tailwind 工具类(0,1,0)。提高一档特异性后,组件外观在两端都由这里唯一决定。 */ .platform-game-pricing-field { display: grid; gap: 0.6rem; min-width: 0; font-size: 0.76rem; color: var(--platform-text-strong, #3d1f10); } .platform-game-pricing-field .platform-game-pricing-field__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; } .platform-game-pricing-field .platform-game-pricing-field__option { position: relative; display: inline-flex; gap: 0; min-width: 0; margin: 0; cursor: pointer; } /* 原生 radio 只做语义与键盘载体:`display: none` / `visibility: hidden` 会把可聚焦性和 读屏可见性一起拿掉,所以用「屏外裁切」隐藏,焦点仍落在它身上。 */ .platform-game-pricing-field .platform-game-pricing-field__option-input { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 1px; height: 1px; min-width: 0; margin: 0; border: 0; padding: 0; background: transparent; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } /* chip 自带高度 36px(窄屏还会降到 33px),这里统一抬到 44px 触控下限; 「免费 / 买断制」字数不同,按内容宽度会一宽一窄,给个共同下限让两枚等宽。 */ .platform-game-pricing-field .platform-game-pricing-field__option-chip { min-width: 5.5rem; min-height: 2.75rem; } .platform-game-pricing-field .platform-game-pricing-field__option-input:focus-visible + .platform-game-pricing-field__option-chip { outline: 2px solid var(--platform-input-focus-ring, #b6623f); outline-offset: 2px; } .platform-game-pricing-field .platform-game-pricing-field__option-input:disabled + .platform-game-pricing-field__option-chip { cursor: not-allowed; opacity: 0.55; } .platform-game-pricing-field .platform-game-pricing-field__price { display: grid; gap: 0.35rem; min-width: 0; } .platform-game-pricing-field .platform-game-pricing-field__price-label { display: block; color: var(--platform-text-strong, #3d1f10); font-size: 0.75rem; font-weight: 700; line-height: 1.35; cursor: pointer; } .platform-game-pricing-field .platform-game-pricing-field__price-control { position: relative; display: flex; align-items: center; min-width: 0; } /* 边框 / 圆角 / 底色 / 焦点环都来自 `PlatformTextField`(AGC 宿主还会用面板自己的输入框 token 覆盖,与同面板其它输入框一致),这里只补三件事:数字右对齐且等宽、给单位留位、错误态。 */ .platform-game-pricing-field .platform-game-pricing-field__price-input { padding-right: 2.9rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; text-align: right; } /* 错误态。网页宿主对子面板内的输入框做了统一 remap(`src/index.css` 的 `.platform-theme :where(.platform-subpanel …) :where(input…)`,带 `!important`), 非法态在那边由宿主同族的 `[aria-invalid='true']` 分支给出;这里保留**正常权重**的同色声明, AGC 侧没有那套 remap 时就靠这条生效。不改 `box-shadow`:那是宿主的输入高光与焦点环, 压掉会让非法字段失去键盘焦点提示。 */ .platform-game-pricing-field .platform-game-pricing-field__price-input[aria-invalid='true'] { border-color: var(--platform-button-danger-text, #a6402f); background: var(--platform-button-danger-fill, rgba(255, 237, 229, 0.94)); } /* 原生 number 的上下箭头会画在「泥点」单位左边(Chrome 一直画,Firefox hover 才画), 与单位挤在一起;这里隐藏箭头,保留 `type="number"` + `inputMode="numeric"`(移动端仍是数字键盘)。 */ .platform-game-pricing-field .platform-game-pricing-field__price-input::-webkit-outer-spin-button, .platform-game-pricing-field .platform-game-pricing-field__price-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; } .platform-game-pricing-field .platform-game-pricing-field__price-input { -moz-appearance: textfield; appearance: textfield; } .platform-game-pricing-field .platform-game-pricing-field__price-unit { position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); color: var(--platform-text-soft, #988476); font-size: 0.72rem; font-weight: 700; line-height: 1; pointer-events: none; } .platform-game-pricing-field .platform-game-pricing-field__price-input[aria-invalid='true'] + .platform-game-pricing-field__price-unit { color: var(--platform-button-danger-text, #a6402f); } .platform-game-pricing-field .platform-game-pricing-field__hint { color: var(--platform-text-soft, #988476); font-size: 0.7rem; font-weight: 500; line-height: 1.5; } .platform-game-pricing-field .platform-game-pricing-field__error { color: var(--platform-button-danger-text, #a6402f); font-size: 0.72rem; font-weight: 600; line-height: 1.45; } /* 窄屏(≈390px):两枚胶囊等分整行,不靠换行兜底,也不出现横向溢出。 */ @media (max-width: 480px) { .platform-game-pricing-field .platform-game-pricing-field__modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-game-pricing-field .platform-game-pricing-field__option-chip { width: 100%; min-width: 0; } }