feat(admin): 管理端 UI/UX 深度优化——错误/加载/空状态、表单快捷键、移动端适配与无障碍
This commit is contained in:
@@ -514,3 +514,68 @@ canvas {
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 全局无障碍与质感增强 ─── */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(0, 122, 255, 0.18);
|
||||
}
|
||||
|
||||
/* 键盘导航焦点可见(鼠标点击不显示,符合 WCAG 2.4.7) */
|
||||
:focus-visible {
|
||||
outline: 2px solid #007aff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 细滚动条(macOS/Chromium),降低大面积滚动条对视觉的干扰 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
/* 尊重系统「减少动态效果」偏好 */
|
||||
/* 窄屏下压缩路由标签尺寸,避免横向裁切 */
|
||||
@media (max-width: 575px) {
|
||||
.route-dock {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.route-dock .ant-tabs-tab {
|
||||
min-width: 88px;
|
||||
max-width: 160px;
|
||||
padding: 0 8px 0 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user