iter(g198): 全控件按下态补齐悬停反馈闭环
This commit is contained in:
+40
-2
@@ -68,6 +68,10 @@
|
|||||||
font-size: var(--ua-font-size-md);
|
font-size: var(--ua-font-size-md);
|
||||||
transition: border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease);
|
transition: border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease);
|
||||||
}
|
}
|
||||||
|
/* 输入类悬停:边框加深一档,提示可交互但不抢焦点 */
|
||||||
|
.ua-input:hover:not(:disabled) {
|
||||||
|
border-color: color-mix(in srgb, var(--ua-color-text) 30%, var(--ua-color-border));
|
||||||
|
}
|
||||||
.ua-input:focus-visible {
|
.ua-input:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--ua-color-accent);
|
border-color: var(--ua-color-accent);
|
||||||
@@ -352,11 +356,15 @@ body.ua-col-resizing {
|
|||||||
color: var(--ua-color-text);
|
color: var(--ua-color-text);
|
||||||
font-size: var(--ua-font-size-md);
|
font-size: var(--ua-font-size-md);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease);
|
transition: border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease), background var(--ua-duration-fast) var(--ua-ease);
|
||||||
}
|
}
|
||||||
.ua-select-trigger:hover {
|
.ua-select-trigger:hover {
|
||||||
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, var(--ua-color-border));
|
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, var(--ua-color-border));
|
||||||
}
|
}
|
||||||
|
/* 按下:底色加深一档,与悬停的描边反馈形成两段式 */
|
||||||
|
.ua-select-trigger:active:not(:disabled) {
|
||||||
|
background: var(--ua-color-surface-2);
|
||||||
|
}
|
||||||
.ua-select-trigger:focus-visible {
|
.ua-select-trigger:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--ua-color-accent);
|
border-color: var(--ua-color-accent);
|
||||||
@@ -458,6 +466,10 @@ body.ua-col-resizing {
|
|||||||
.ua-option:hover {
|
.ua-option:hover {
|
||||||
background: var(--ua-color-tint-accent-weak);
|
background: var(--ua-color-tint-accent-weak);
|
||||||
}
|
}
|
||||||
|
/* 按下:底色转中性深一档,与淡底悬停区分 */
|
||||||
|
.ua-option:active:not(:disabled) {
|
||||||
|
background: var(--ua-color-surface-2);
|
||||||
|
}
|
||||||
/* 选中态:低视觉比重——淡色底 + 弱化文字,不抢焦点 */
|
/* 选中态:低视觉比重——淡色底 + 弱化文字,不抢焦点 */
|
||||||
.ua-option-selected {
|
.ua-option-selected {
|
||||||
background: var(--ua-color-tint-accent);
|
background: var(--ua-color-tint-accent);
|
||||||
@@ -536,6 +548,10 @@ body.ua-col-resizing {
|
|||||||
.ua-menu-item:hover:not(:disabled) {
|
.ua-menu-item:hover:not(:disabled) {
|
||||||
background: var(--ua-color-tint-accent-weak);
|
background: var(--ua-color-tint-accent-weak);
|
||||||
}
|
}
|
||||||
|
/* 按下:底色转中性深一档,与淡底悬停区分 */
|
||||||
|
.ua-menu-item:active:not(:disabled) {
|
||||||
|
background: var(--ua-color-surface-2);
|
||||||
|
}
|
||||||
.ua-menu-item.is-danger {
|
.ua-menu-item.is-danger {
|
||||||
color: var(--ua-color-danger);
|
color: var(--ua-color-danger);
|
||||||
}
|
}
|
||||||
@@ -686,6 +702,10 @@ body.ua-col-resizing {
|
|||||||
.ua-acc-head:hover:not(:disabled) {
|
.ua-acc-head:hover:not(:disabled) {
|
||||||
background: var(--ua-color-tint-accent-weak);
|
background: var(--ua-color-tint-accent-weak);
|
||||||
}
|
}
|
||||||
|
/* 按下:底色转中性深一档 */
|
||||||
|
.ua-acc-head:active:not(:disabled) {
|
||||||
|
background: var(--ua-color-surface-2);
|
||||||
|
}
|
||||||
.ua-acc-head:focus-visible {
|
.ua-acc-head:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: var(--ua-focus-ring-inset);
|
box-shadow: var(--ua-focus-ring-inset);
|
||||||
@@ -914,6 +934,11 @@ body.ua-col-resizing {
|
|||||||
font: inherit;
|
font: inherit;
|
||||||
font-size: var(--ua-font-size-md);
|
font-size: var(--ua-font-size-md);
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
|
transition: border-color var(--ua-duration-fast) var(--ua-ease);
|
||||||
|
}
|
||||||
|
/* 输入类悬停:边框加深一档,与 .ua-input 同步 */
|
||||||
|
.ua-textarea:hover:not(:disabled) {
|
||||||
|
border-color: color-mix(in srgb, var(--ua-color-text) 30%, var(--ua-color-border));
|
||||||
}
|
}
|
||||||
.ua-textarea-count-group {
|
.ua-textarea-count-group {
|
||||||
display: flex; /* 字数统计 + 原有 suffix 并排靠右 */
|
display: flex; /* 字数统计 + 原有 suffix 并排靠右 */
|
||||||
@@ -1342,12 +1367,17 @@ button.ua-step-dot:hover {
|
|||||||
font-size: var(--ua-font-size-md);
|
font-size: var(--ua-font-size-md);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
transition: border-color var(--ua-duration-fast) ease, box-shadow var(--ua-duration-fast) ease, transform var(--ua-duration-fast) ease;
|
transition: border-color var(--ua-duration-fast) ease, box-shadow var(--ua-duration-fast) ease, transform var(--ua-duration-fast) ease, background var(--ua-duration-fast) ease;
|
||||||
}
|
}
|
||||||
.ua-page-btn:hover:not(:disabled) {
|
.ua-page-btn:hover:not(:disabled) {
|
||||||
border-color: var(--ua-color-accent);
|
border-color: var(--ua-color-accent);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
/* 按下:回位落底,取消悬停浮起并加深底色 */
|
||||||
|
.ua-page-btn:active:not(:disabled) {
|
||||||
|
background: var(--ua-color-surface-2);
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
.ua-page-btn:focus-visible {
|
.ua-page-btn:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--ua-color-accent);
|
border-color: var(--ua-color-accent);
|
||||||
@@ -1589,6 +1619,10 @@ button.ua-step-dot:hover {
|
|||||||
color: var(--ua-color-text);
|
color: var(--ua-color-text);
|
||||||
background: var(--ua-color-tint-accent-weak);
|
background: var(--ua-color-tint-accent-weak);
|
||||||
}
|
}
|
||||||
|
/* 按下:底色转中性深一档 */
|
||||||
|
.ua-tab:active:not(:disabled) {
|
||||||
|
background: var(--ua-color-surface-2);
|
||||||
|
}
|
||||||
.ua-tab:focus-visible {
|
.ua-tab:focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
color: var(--ua-color-accent);
|
color: var(--ua-color-accent);
|
||||||
@@ -4173,6 +4207,10 @@ button.ua-step-dot:hover {
|
|||||||
background: var(--ua-color-tint-accent-weak);
|
background: var(--ua-color-tint-accent-weak);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
/* 按下:底色转中性深一档,浮起交由悬停态负责 */
|
||||||
|
.ua-calendar-day:active {
|
||||||
|
background: var(--ua-color-surface-2);
|
||||||
|
}
|
||||||
.ua-calendar-day.is-today {
|
.ua-calendar-day.is-today {
|
||||||
box-shadow: var(--ua-shadow-inset-border); /* 今天只用细内框,不与选中态抢视觉 */
|
box-shadow: var(--ua-shadow-inset-border); /* 今天只用细内框,不与选中态抢视觉 */
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user