fix(ui): 收敛激活态描边、修正内层圆角溢出并替换 emoji 图标
This commit is contained in:
+38
-16
@@ -485,8 +485,8 @@ body.ua-col-resizing {
|
||||
但两者的密集列表换成内嵌描边后更整齐;与 cascader 项保持同一口径 */
|
||||
.ua-option:focus-visible,
|
||||
.ua-menu-item:focus-visible {
|
||||
outline: 2px solid var(--ua-color-accent);
|
||||
outline-offset: -2px;
|
||||
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环:细一档 + 柔和色,2px 实色在密集列表里像粗边框 */
|
||||
outline-offset: -1.5px;
|
||||
}
|
||||
/* 选中态:低视觉比重——淡色底 + 弱化文字,不抢焦点 */
|
||||
.ua-option-selected {
|
||||
@@ -537,6 +537,16 @@ body.ua-col-resizing {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
/* 首末项补圆角:面板内距 4px 小于 8px 圆角,悬停底色块的直角会压出面板弧线 */
|
||||
.ua-menu-pop > .ua-menu-item:first-child {
|
||||
border-radius: var(--ua-radius-sm) var(--ua-radius-sm) 0 0;
|
||||
}
|
||||
.ua-menu-pop > .ua-menu-item:last-child {
|
||||
border-radius: 0 0 var(--ua-radius-sm) var(--ua-radius-sm);
|
||||
}
|
||||
.ua-menu-pop > .ua-menu-item:only-child {
|
||||
border-radius: var(--ua-radius-sm);
|
||||
}
|
||||
.ua-menu-pop.is-flip {
|
||||
top: auto; /* 空间不足翻到触发器上方 */
|
||||
bottom: calc(100% + 4px);
|
||||
@@ -1666,8 +1676,8 @@ button.ua-step-dot:hover {
|
||||
.ua-tab:focus-visible {
|
||||
/* 页签条是 overflow-x:auto 的滚动容器,外偏移焦点环会被裁掉,
|
||||
这里改用与 seg-btn 一致的内嵌描边,键盘用户才真看得见焦点 */
|
||||
outline: 2px solid var(--ua-color-accent);
|
||||
outline-offset: -2px;
|
||||
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环:细一档 + 柔和色,2px 实色在密集列表里像粗边框 */
|
||||
outline-offset: -1.5px;
|
||||
color: var(--ua-color-accent);
|
||||
}
|
||||
.ua-tab:disabled {
|
||||
@@ -1724,9 +1734,9 @@ button.ua-step-dot:hover {
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
height: 1.5px; /* 指示条不做 2px 实线:细一档已足够标识,粗条在浅底上过于抢眼 */
|
||||
border-radius: 1px;
|
||||
background: var(--ua-color-accent);
|
||||
background: var(--ua-color-accent-soft); /* 柔和强调色:纯 accent 满饱和做长条会发刺 */
|
||||
transition: left var(--ua-duration-slow) var(--ua-ease-out), width var(--ua-duration-slow) var(--ua-ease-out);
|
||||
}
|
||||
|
||||
@@ -2206,6 +2216,16 @@ button.ua-step-dot:hover {
|
||||
font-size: var(--ua-font-size-md);
|
||||
user-select: none;
|
||||
}
|
||||
/* 附加块自带底色,首末两端必须跟组圆角对齐(减去 1px 边框),否则直角会压出外层圆角 */
|
||||
.ua-input-group > .ua-input-addon:first-child {
|
||||
border-radius: var(--ua-radius-md-inset) 0 0 var(--ua-radius-md-inset);
|
||||
}
|
||||
.ua-input-group > .ua-input-addon:last-child {
|
||||
border-radius: 0 var(--ua-radius-md-inset) var(--ua-radius-md-inset) 0;
|
||||
}
|
||||
.ua-input-group > .ua-input-addon:only-child {
|
||||
border-radius: var(--ua-radius-md-inset);
|
||||
}
|
||||
.ua-input-clear-group {
|
||||
display: inline-flex; /* 清空按钮 / 计数 + 原有 suffix 并排 */
|
||||
align-items: center;
|
||||
@@ -2411,8 +2431,8 @@ button.ua-step-dot:hover {
|
||||
color: var(--ua-color-text);
|
||||
}
|
||||
.ua-seg-btn:focus-visible {
|
||||
outline: 2px solid var(--ua-color-accent);
|
||||
outline-offset: -2px;
|
||||
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环:细一档 + 柔和色,2px 实色在密集列表里像粗边框 */
|
||||
outline-offset: -1.5px;
|
||||
}
|
||||
.ua-seg-btn.is-active {
|
||||
color: var(--ua-color-accent);
|
||||
@@ -3220,8 +3240,8 @@ button.ua-step-dot:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ua-cascader-opt:focus-visible {
|
||||
outline: 2px solid var(--ua-color-accent);
|
||||
outline-offset: -2px;
|
||||
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环:细一档 + 柔和色,2px 实色在密集列表里像粗边框 */
|
||||
outline-offset: -1.5px;
|
||||
}
|
||||
.ua-cascader-arrow {
|
||||
color: var(--ua-color-text-muted);
|
||||
@@ -3424,6 +3444,7 @@ button.ua-step-dot:hover {
|
||||
border-radius: var(--ua-radius-md);
|
||||
background: var(--ua-color-surface);
|
||||
box-shadow: var(--ua-shadow-4);
|
||||
overflow: clip; /* 裁掉内层格子的直角底:不建滚动容器,日历/色板本身不需要滚动 */
|
||||
}
|
||||
.ua-datepicker-pop.ua-open {
|
||||
display: block;
|
||||
@@ -3503,8 +3524,8 @@ button.ua-step-dot:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ua-datepicker-day:focus-visible {
|
||||
outline: 2px solid var(--ua-color-accent);
|
||||
outline-offset: -2px;
|
||||
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环:细一档 + 柔和色,2px 实色在密集列表里像粗边框 */
|
||||
outline-offset: -1.5px;
|
||||
}
|
||||
.ua-datepicker-foot {
|
||||
display: flex;
|
||||
@@ -3667,6 +3688,7 @@ button.ua-step-dot:hover {
|
||||
border-radius: var(--ua-radius-md);
|
||||
background: var(--ua-color-surface);
|
||||
box-shadow: var(--ua-shadow-4);
|
||||
overflow: clip; /* 裁掉内层格子的直角底:不建滚动容器,日历/色板本身不需要滚动 */
|
||||
}
|
||||
.ua-colorpicker-pop.ua-open {
|
||||
display: block;
|
||||
@@ -4064,10 +4086,10 @@ button.ua-step-dot:hover {
|
||||
position: absolute;
|
||||
left: calc(-1 * var(--ua-space-3));
|
||||
top: 50%;
|
||||
width: 2px;
|
||||
width: 1.5px;
|
||||
height: 70%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--ua-color-accent);
|
||||
background: var(--ua-color-accent-soft);
|
||||
border-radius: 1px;
|
||||
}
|
||||
.ua-anchor-link.is-disabled {
|
||||
@@ -4722,8 +4744,8 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
|
||||
background: var(--ua-color-tint-accent-weak);
|
||||
}
|
||||
.ua-row-clickable:focus-visible {
|
||||
outline: 2px solid var(--ua-color-accent);
|
||||
outline-offset: -2px; /* 环画在行内,避免被表格滚动容器裁掉 */
|
||||
outline: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点环:细一档 + 柔和色,2px 实色在密集列表里像粗边框 */
|
||||
outline-offset: -1.5px; /* 环画在行内,避免被表格滚动容器裁掉 */
|
||||
}
|
||||
|
||||
/* —— 通知角落:右上与 toast 同侧,左列放次要信息 —— */
|
||||
|
||||
Reference in New Issue
Block a user