iter(g267): 补 Windows 强制色高对比兜底
This commit is contained in:
@@ -5499,3 +5499,59 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
|
||||
border-left: 1px solid var(--ua-border-subtle);
|
||||
margin-left: var(--ua-space-2);
|
||||
}
|
||||
|
||||
/* ---- Windows 高对比模式(forced-colors: active)兜底 ----
|
||||
高对比模式用系统色板强制替换颜色,会剥掉 box-shadow、并把自绘底色抹平:
|
||||
于是「靠阴影当边框」的浮层、「靠淡色底表达选中」的选项全部消失,控件看起来是一块空白。
|
||||
这里只补结构与状态,不指定品牌色——具体颜色交给系统关键字(CanvasText / Highlight / GrayText)。
|
||||
注意:焦点描边不在这里重写,全局 outline 的颜色会被系统自动强制(写死色值反而撞 outline-literal 门禁)。 */
|
||||
@media (forced-colors: active) {
|
||||
/* 1) 结构:把「阴影当边框」的容器换回真边框,否则卡片与浮层会融进页面底 */
|
||||
.ua-card,
|
||||
.ua-modal,
|
||||
.ua-drawer,
|
||||
.ua-pop,
|
||||
.ua-menu,
|
||||
.ua-select-pop,
|
||||
.ua-json,
|
||||
.ua-tip,
|
||||
.ua-toast,
|
||||
.ua-layout-sider {
|
||||
border: 1px solid CanvasText;
|
||||
box-shadow: none; /* 阴影在最上层被剥掉,留着只会让「有没有边框」更难判断 */
|
||||
}
|
||||
|
||||
/* 2) 控件轮廓:按钮与输入框平时靠底色区分,高对比下底色一律被抹平 */
|
||||
.ua-button,
|
||||
.ua-input,
|
||||
.ua-textarea,
|
||||
.ua-select-trigger,
|
||||
.ua-input-group,
|
||||
.ua-checkbox,
|
||||
.ua-switch,
|
||||
.ua-tag,
|
||||
.ua-badge {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
|
||||
/* 3) 选中态:淡色底在高对比下不可见,改用系统高亮底 + 反白字 */
|
||||
.ua-option[aria-selected='true'],
|
||||
.ua-menu-item[aria-checked='true'],
|
||||
.ua-tab[aria-selected='true'],
|
||||
.ua-tab-active,
|
||||
.ua-step.is-active {
|
||||
background: Highlight;
|
||||
color: HighlightText;
|
||||
forced-color-adjust: none; /* 保住高亮底:不关掉调整的话系统会把 Highlight 也归一到窗口底色 */
|
||||
}
|
||||
|
||||
/* 4) 占位与骨架:GrayText 是系统给「占位 / 不可交互」的那一档颜色 */
|
||||
.ua-skeleton,
|
||||
.ua-progress-fill {
|
||||
background: GrayText;
|
||||
}
|
||||
.ua-input::placeholder,
|
||||
.ua-textarea::placeholder {
|
||||
color: GrayText;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user