From 2996b878e9bfc3004481486b778821d75eb805c3 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 18:09:45 +0800 Subject: [PATCH] =?UTF-8?q?iter(g198):=20=E5=85=A8=E6=8E=A7=E4=BB=B6?= =?UTF-8?q?=E6=8C=89=E4=B8=8B=E6=80=81=E8=A1=A5=E9=BD=90=E6=82=AC=E5=81=9C?= =?UTF-8?q?=E5=8F=8D=E9=A6=88=E9=97=AD=E7=8E=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/skin/ui/ui.css | 42 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index b18aa02..f8894a7 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -68,6 +68,10 @@ 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); } +/* 输入类悬停:边框加深一档,提示可交互但不抢焦点 */ +.ua-input:hover:not(:disabled) { + border-color: color-mix(in srgb, var(--ua-color-text) 30%, var(--ua-color-border)); +} .ua-input:focus-visible { outline: none; border-color: var(--ua-color-accent); @@ -352,11 +356,15 @@ body.ua-col-resizing { color: var(--ua-color-text); font-size: var(--ua-font-size-md); 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 { 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 { outline: none; border-color: var(--ua-color-accent); @@ -458,6 +466,10 @@ body.ua-col-resizing { .ua-option:hover { background: var(--ua-color-tint-accent-weak); } +/* 按下:底色转中性深一档,与淡底悬停区分 */ +.ua-option:active:not(:disabled) { + background: var(--ua-color-surface-2); +} /* 选中态:低视觉比重——淡色底 + 弱化文字,不抢焦点 */ .ua-option-selected { background: var(--ua-color-tint-accent); @@ -536,6 +548,10 @@ body.ua-col-resizing { .ua-menu-item:hover:not(:disabled) { background: var(--ua-color-tint-accent-weak); } +/* 按下:底色转中性深一档,与淡底悬停区分 */ +.ua-menu-item:active:not(:disabled) { + background: var(--ua-color-surface-2); +} .ua-menu-item.is-danger { color: var(--ua-color-danger); } @@ -686,6 +702,10 @@ body.ua-col-resizing { .ua-acc-head:hover:not(:disabled) { background: var(--ua-color-tint-accent-weak); } +/* 按下:底色转中性深一档 */ +.ua-acc-head:active:not(:disabled) { + background: var(--ua-color-surface-2); +} .ua-acc-head:focus-visible { outline: none; box-shadow: var(--ua-focus-ring-inset); @@ -914,6 +934,11 @@ body.ua-col-resizing { font: inherit; font-size: var(--ua-font-size-md); 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 { display: flex; /* 字数统计 + 原有 suffix 并排靠右 */ @@ -1342,12 +1367,17 @@ button.ua-step-dot:hover { font-size: var(--ua-font-size-md); cursor: pointer; 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) { border-color: var(--ua-color-accent); transform: translateY(-1px); } +/* 按下:回位落底,取消悬停浮起并加深底色 */ +.ua-page-btn:active:not(:disabled) { + background: var(--ua-color-surface-2); + transform: translateY(0); +} .ua-page-btn:focus-visible { outline: none; border-color: var(--ua-color-accent); @@ -1589,6 +1619,10 @@ button.ua-step-dot:hover { color: var(--ua-color-text); background: var(--ua-color-tint-accent-weak); } +/* 按下:底色转中性深一档 */ +.ua-tab:active:not(:disabled) { + background: var(--ua-color-surface-2); +} .ua-tab:focus-visible { outline: none; color: var(--ua-color-accent); @@ -4173,6 +4207,10 @@ button.ua-step-dot:hover { background: var(--ua-color-tint-accent-weak); transform: translateY(-1px); } +/* 按下:底色转中性深一档,浮起交由悬停态负责 */ +.ua-calendar-day:active { + background: var(--ua-color-surface-2); +} .ua-calendar-day.is-today { box-shadow: var(--ua-shadow-inset-border); /* 今天只用细内框,不与选中态抢视觉 */ }