temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g179): 弹层阴影语义化归档

Browse Source
This commit is contained in:
HIsheR
2026-10-26 17:17:26 +08:00
parent a9a084ca97
commit 7b4adb01a0
7 changed files with 134 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/ui.css
+8 -8
View File
@@ -19,7 +19,7 @@
.ua-btn:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 25%, transparent);
box-shadow: var(--ua-shadow-accent); /* 主题色投影：主按钮悬停浮起 */
}
.ua-btn:active {
transform: translateY(0) scale(0.97);
@@ -91,7 +91,7 @@
}
.ua-card-hoverable:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px color-mix(in srgb, var(--ua-color-text) 14%, transparent);
box-shadow: var(--ua-shadow-2); /* 卡片悬停浮起 = 下拉档 */
}
.ua-table table {
width: 100%;
@@ -2279,7 +2279,7 @@ button.ua-step-dot:hover {
height: 100%;
border-radius: 999px;
background: var(--ua-color-bg);
box-shadow: 0 1px 4px color-mix(in srgb, var(--ua-color-text) 12%, transparent);
box-shadow: var(--ua-shadow-1); /* 滑块拇指轻浮起 = 贴地档 */
transition: transform var(--ua-duration-base) ease, width var(--ua-duration-base) ease;
pointer-events: none;
}
@@ -3462,7 +3462,7 @@ button.ua-step-dot:hover {
transform: translateY(8px) scale(0.9);
pointer-events: none;
transition: opacity var(--ua-duration-base) ease, transform var(--ua-duration-base) ease;
box-shadow: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent);
box-shadow: var(--ua-shadow-accent-strong); /* 悬浮强调件主题色投影 */
}
.ua-backtop.is-visible {
opacity: 1;
@@ -4327,7 +4327,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
font: inherit;
font-size: var(--ua-font-size-md);
cursor: pointer;
box-shadow: 0 6px 20px color-mix(in srgb, var(--ua-color-text) 16%, transparent);
box-shadow: var(--ua-shadow-3); /* 悬浮按钮 = 浮层档 */
transition: transform var(--ua-duration-fast) ease, box-shadow var(--ua-duration-fast) ease, color var(--ua-duration-fast) ease, border-color var(--ua-duration-fast) ease;
}
.ua-fab.has-label {
@@ -4338,7 +4338,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
color: var(--ua-color-accent);
border-color: var(--ua-color-accent);
transform: translateY(-2px);
box-shadow: 0 10px 26px color-mix(in srgb, var(--ua-color-text) 22%, transparent);
box-shadow: var(--ua-shadow-4); /* 悬停抬升 = 最高层档 */
}
.ua-fab:active {
transform: translateY(0) scale(0.97);
@@ -4419,7 +4419,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
border: 1px solid var(--ua-color-border);
border-radius: var(--ua-radius-md);
background: var(--ua-color-surface);
box-shadow: 0 12px 28px color-mix(in srgb, var(--ua-color-text) 16%, transparent);
box-shadow: var(--ua-shadow-2); /* 下拉弹层 = 下拉档 */
}
.ua-mentions.is-open .ua-mentions-pop {
display: block;
@@ -4518,7 +4518,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
border: 1px solid var(--ua-color-border);
border-radius: var(--ua-radius-md);
background: var(--ua-color-surface);
box-shadow: 0 14px 30px color-mix(in srgb, var(--ua-color-text) 16%, transparent);
box-shadow: var(--ua-shadow-2); /* 下拉弹层 = 下拉档 */
}
.ua-treeselect.is-open .ua-treeselect-pop {
display: block;