GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-08-12 01:24:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix(about): 修正更新通道选中态被 v2 通用 Segmented 样式覆盖

Browse Source 
- 上一提交的选择器特异性只有 (0,3,1)，与 v2-theme.css:601 的
  `body[data-ui-version="v2"] .ant-segmented .ant-segmented-item-selected` 同分，
  而 v2-theme.css 在 App.css 之后导入，同分时后加载者胜出，
  选中态仍被 --gn-bg-panel 覆盖回灰底，主题色胶囊实际未生效
- 选择器补上 .ant-segmented（.gonavi-about-update-channel.ant-segmented）把特异性提到 (0,4,1)
- 选中项的 color 一并显式设为白色，避免 v2 通用规则的 --gn-fg-1 在强调色底上对比不足
This commit is contained in:
Syngnat
2026-07-26 21:21:51 +08:00
parent bb3a6ee577
commit 57a0bb4f69
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/App.css
View File

@@ -1887,28 +1887,35 @@ body[data-theme='dark'] .gonavi-about-update-channel .ant-segmented-item-selecte
原先深色下选中态是 rgba(30,41,59,.98)，与容器底 rgba(15,23,42,.55) 对比极低，
选中状态几乎看不出来，且完全没有体现主题色。
--gn-accent 仅在 v2 下定义，因此这里限定 v2 作用域；旧版 UI 保留其自身的中性配色。
ant-segmented-thumb 是切换时的滑动块，必须与选中项同色，否则动画期间会闪回灰底。 */
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-selected,
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-thumb {
ant-segmented-thumb 是切换时的滑动块，必须与选中项同色，否则动画期间会闪回灰底。
注意选择器必须带上 .ant-segmented（即 .gonavi-about-update-channel.ant-segmented），
把特异性提到 (0,4,1)：v2-theme.css:601 的
`body[data-ui-version="v2"] .ant-segmented .ant-segmented-item-selected`
特异性同为 (0,3,1) 且该文件在 App.css 之后导入，同分时后加载者胜出，
只写 (0,3,1) 会被它按 --gn-bg-panel 覆盖回灰底。 */
body[data-ui-version='v2'] .gonavi-about-update-channel.ant-segmented .ant-segmented-item-selected,
body[data-ui-version='v2'] .gonavi-about-update-channel.ant-segmented .ant-segmented-thumb {
background: var(--gn-accent) !important;
box-shadow: none !important;
}
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-selected .ant-segmented-item-label {
body[data-ui-version='v2'] .gonavi-about-update-channel.ant-segmented .ant-segmented-item-selected,
body[data-ui-version='v2'] .gonavi-about-update-channel.ant-segmented .ant-segmented-item-selected .ant-segmented-item-label {
color: #ffffff !important;
}
/* 未选项：透明底 + hover 时微亮，避免与选中胶囊争夺注意力。 */
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item:not(.ant-segmented-item-selected) {
body[data-ui-version='v2'] .gonavi-about-update-channel.ant-segmented .ant-segmented-item:not(.ant-segmented-item-selected) {
background: transparent !important;
}
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item:not(.ant-segmented-item-selected):hover .ant-segmented-item-label {
body[data-ui-version='v2'] .gonavi-about-update-channel.ant-segmented .ant-segmented-item:not(.ant-segmented-item-selected):hover .ant-segmented-item-label {
color: var(--gn-fg-1) !important;
}
/* 键盘可达性：Segmented 的焦点环也跟随主题色。 */
body[data-ui-version='v2'] .gonavi-about-update-channel .ant-segmented-item-input:focus-visible + .ant-segmented-item-label {
body[data-ui-version='v2'] .gonavi-about-update-channel.ant-segmented .ant-segmented-item-input:focus-visible + .ant-segmented-item-label {
outline: 2px solid var(--gn-accent) !important;
outline-offset: -2px;
border-radius: 4px;