iter(g233): 位移量令牌化，transform 位移收敛为 --ua-translate-* 七档并纳入审计口径
This commit is contained in:
HIsheR
+33
-33
@@ -43,7 +43,7 @@
|
||||
}
|
||||
.ua-btn:hover {
|
||||
filter: brightness(1.08); /* 悬停提亮 + 主题色投影 + 内高光，三层叠出光泽 */
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-1)));
|
||||
box-shadow: var(--ua-shadow-accent), var(--ua-shadow-highlight);
|
||||
}
|
||||
.ua-btn:active {
|
||||
@@ -127,7 +127,7 @@
|
||||
transition: transform var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease), border-color var(--ua-duration-fast) var(--ua-ease);
|
||||
}
|
||||
.ua-card-hoverable:hover {
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-2)));
|
||||
box-shadow: var(--ua-shadow-2); /* 悬停浮起：从 1 档升到 2 档，一档之差刚好可感 */
|
||||
border-color: color-mix(in srgb, var(--ua-color-border) var(--ua-alpha-strong), transparent); /* 阴影接手层次，边框同步减淡，两者配合而非叠加 */
|
||||
}
|
||||
@@ -412,14 +412,14 @@ body.ua-col-resizing {
|
||||
background: var(--ua-color-surface);
|
||||
box-shadow: var(--ua-shadow-2);
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-4)));
|
||||
visibility: hidden;
|
||||
transition: opacity var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease), visibility var(--ua-duration-fast) var(--ua-ease);
|
||||
}
|
||||
.ua-select-pop.is-flip {
|
||||
top: auto; /* 空间不足翻到触发器上方 */
|
||||
bottom: calc(100% + 4px);
|
||||
transform: translateY(4px); /* 入场方向随翻转镜像：从下方 4px 滑入 */
|
||||
transform: translateY(var(--ua-translate-4)); /* 入场方向随翻转镜像：从下方 4px 滑入 */
|
||||
}
|
||||
.ua-select-pop.ua-open {
|
||||
opacity: 1;
|
||||
@@ -529,7 +529,7 @@ body.ua-col-resizing {
|
||||
background: var(--ua-color-surface);
|
||||
box-shadow: var(--ua-shadow-2);
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-4)));
|
||||
visibility: hidden;
|
||||
transition: opacity var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease), visibility var(--ua-duration-fast) var(--ua-ease);
|
||||
}
|
||||
@@ -550,7 +550,7 @@ body.ua-col-resizing {
|
||||
.ua-menu-pop.is-flip {
|
||||
top: auto; /* 空间不足翻到触发器上方 */
|
||||
bottom: calc(100% + 4px);
|
||||
transform: translateY(4px); /* 入场方向随翻转镜像：从下方 4px 滑入 */
|
||||
transform: translateY(var(--ua-translate-4)); /* 入场方向随翻转镜像：从下方 4px 滑入 */
|
||||
}
|
||||
.ua-menu-pop.ua-open {
|
||||
opacity: 1;
|
||||
@@ -699,11 +699,11 @@ body.ua-col-resizing {
|
||||
}
|
||||
.ua-pop-top {
|
||||
bottom: calc(100% + 8px);
|
||||
transform: translateY(4px);
|
||||
transform: translateY(var(--ua-translate-4));
|
||||
}
|
||||
.ua-pop-bottom {
|
||||
top: calc(100% + 8px);
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-4)));
|
||||
}
|
||||
.ua-pop.ua-open {
|
||||
opacity: 1;
|
||||
@@ -877,7 +877,7 @@ body.ua-col-resizing {
|
||||
transition: transform var(--ua-duration-fast) var(--ua-ease), border-color var(--ua-duration-fast) var(--ua-ease), background var(--ua-duration-fast) var(--ua-ease), color var(--ua-duration-fast) var(--ua-ease);
|
||||
}
|
||||
.ua-tag.is-checkable:hover {
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-1)));
|
||||
color: var(--ua-color-text);
|
||||
}
|
||||
.ua-tag.is-checkable:active {
|
||||
@@ -1099,7 +1099,7 @@ button.ua-step-dot {
|
||||
button.ua-step-dot:hover {
|
||||
border-color: var(--ua-color-accent);
|
||||
color: var(--ua-color-accent);
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-1)));
|
||||
}
|
||||
.ua-step-done .ua-step-dot {
|
||||
border-color: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-strong), transparent);
|
||||
@@ -1299,7 +1299,7 @@ button.ua-step-dot:hover {
|
||||
@keyframes ua-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-6)));
|
||||
}
|
||||
}
|
||||
.ua-alert-icon {
|
||||
@@ -1347,7 +1347,7 @@ button.ua-step-dot:hover {
|
||||
/* 关闭退场：淡出 + 轻微上移，配合 200ms 后摘除节点 */
|
||||
.ua-alert-out {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-4)));
|
||||
}
|
||||
.ua-alert-info {
|
||||
border-color: var(--ua-color-accent);
|
||||
@@ -1421,7 +1421,7 @@ button.ua-step-dot:hover {
|
||||
}
|
||||
.ua-page-btn:hover:not(:disabled) {
|
||||
border-color: var(--ua-color-accent);
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-1)));
|
||||
}
|
||||
/* 按下：回位落底，取消悬停浮起并加深底色 */
|
||||
.ua-page-btn:active:not(:disabled) {
|
||||
@@ -1511,7 +1511,7 @@ button.ua-step-dot:hover {
|
||||
border: 1px solid;
|
||||
font-size: var(--ua-font-size-md);
|
||||
opacity: 0;
|
||||
transform: translateX(12px);
|
||||
transform: translateX(var(--ua-translate-12));
|
||||
transition: opacity var(--ua-duration-base) var(--ua-ease-out), transform var(--ua-duration-base) var(--ua-ease-out);
|
||||
}
|
||||
.ua-toast.ua-open {
|
||||
@@ -1958,17 +1958,17 @@ button.ua-step-dot:hover {
|
||||
}
|
||||
/* 浮层入场：自上而下 4px 淡入（触发在下方、弹层向下展开）；翻转态改用 ua-pop-rise 反向 */
|
||||
@keyframes ua-pop-drop {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
from { opacity: 0; transform: translateY(calc(-1 * var(--ua-translate-4))); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
@keyframes ua-pop-rise {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
from { opacity: 0; transform: translateY(var(--ua-translate-4)); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
@keyframes ua-pop-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px) scale(0.96);
|
||||
transform: translateY(var(--ua-translate-8)) scale(0.96);
|
||||
}
|
||||
}
|
||||
.ua-modal-head {
|
||||
@@ -2030,22 +2030,22 @@ button.ua-step-dot:hover {
|
||||
.ua-tip-top {
|
||||
left: 50%;
|
||||
bottom: calc(100% + 6px);
|
||||
transform: translate(-50%, 3px);
|
||||
transform: translate(-50%, var(--ua-translate-3));
|
||||
}
|
||||
.ua-tip-bottom {
|
||||
left: 50%;
|
||||
top: calc(100% + 6px);
|
||||
transform: translate(-50%, -3px);
|
||||
transform: translate(-50%, calc(-1 * var(--ua-translate-3)));
|
||||
}
|
||||
.ua-tip-left {
|
||||
right: calc(100% + 6px);
|
||||
top: 50%;
|
||||
transform: translate(3px, -50%);
|
||||
transform: translate(var(--ua-translate-3), -50%);
|
||||
}
|
||||
.ua-tip-right {
|
||||
left: calc(100% + 6px);
|
||||
top: 50%;
|
||||
transform: translate(-3px, -50%);
|
||||
transform: translate(calc(-1 * var(--ua-translate-3)), -50%);
|
||||
}
|
||||
.ua-tip.ua-open {
|
||||
opacity: 1;
|
||||
@@ -2142,7 +2142,7 @@ button.ua-step-dot:hover {
|
||||
}
|
||||
.ua-image:hover,
|
||||
.ua-image:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-2)));
|
||||
box-shadow: var(--ua-shadow-2);
|
||||
outline: none;
|
||||
}
|
||||
@@ -2388,7 +2388,7 @@ button.ua-step-dot:hover {
|
||||
line-height: var(--ua-leading-normal);
|
||||
}
|
||||
@keyframes ua-tl-in {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
from { opacity: 0; transform: translateY(calc(-1 * var(--ua-translate-4))); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes ua-tl-pulse {
|
||||
@@ -2934,7 +2934,7 @@ button.ua-step-dot:hover {
|
||||
box-shadow: var(--ua-shadow-2);
|
||||
pointer-events: auto;
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transform: translateY(var(--ua-translate-8));
|
||||
transition: opacity var(--ua-duration-base) var(--ua-ease), transform var(--ua-duration-base) var(--ua-ease);
|
||||
}
|
||||
.ua-notice-open {
|
||||
@@ -3589,7 +3589,7 @@ button.ua-step-dot:hover {
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.9);
|
||||
transform: translateY(var(--ua-translate-8)) scale(0.9);
|
||||
pointer-events: none;
|
||||
transition: opacity var(--ua-duration-base) var(--ua-ease), transform var(--ua-duration-base) var(--ua-ease);
|
||||
box-shadow: var(--ua-shadow-accent-strong); /* 悬浮强调件主题色投影 */
|
||||
@@ -3600,7 +3600,7 @@ button.ua-step-dot:hover {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.ua-backtop.is-visible:hover {
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-2)));
|
||||
}
|
||||
.ua-backtop:focus-visible {
|
||||
outline: 2px solid var(--ua-color-accent);
|
||||
@@ -3710,7 +3710,7 @@ button.ua-step-dot:hover {
|
||||
transition: transform var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease);
|
||||
}
|
||||
.ua-colorpicker-cell:hover {
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-1)));
|
||||
}
|
||||
.ua-colorpicker-cell.is-selected {
|
||||
box-shadow: var(--ua-focus-ring-selected);
|
||||
@@ -3821,7 +3821,7 @@ button.ua-step-dot:hover {
|
||||
gap: var(--ua-space-1);
|
||||
}
|
||||
@keyframes ua-tour-in {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
from { opacity: 0; transform: translateY(var(--ua-translate-4)); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -4069,7 +4069,7 @@ button.ua-step-dot:hover {
|
||||
.ua-anchor-link:hover {
|
||||
color: var(--ua-color-text);
|
||||
background: var(--ua-color-tint-accent-weak);
|
||||
transform: translateX(2px);
|
||||
transform: translateX(var(--ua-translate-2));
|
||||
}
|
||||
.ua-anchor-link.is-active {
|
||||
color: var(--ua-color-text);
|
||||
@@ -4276,7 +4276,7 @@ button.ua-step-dot:hover {
|
||||
}
|
||||
.ua-calendar-day:hover {
|
||||
background: var(--ua-color-tint-accent-weak);
|
||||
transform: translateY(-1px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-1)));
|
||||
}
|
||||
/* 按下：底色转中性深一档，浮起交由悬停态负责 */
|
||||
.ua-calendar-day:active {
|
||||
@@ -4468,7 +4468,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
|
||||
.ua-fab:hover {
|
||||
color: var(--ua-color-accent);
|
||||
border-color: var(--ua-color-accent);
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-2)));
|
||||
box-shadow: var(--ua-shadow-4); /* 悬停抬升 = 最高层档 */
|
||||
}
|
||||
.ua-fab:active {
|
||||
@@ -5076,14 +5076,14 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
|
||||
background: var(--ua-color-surface);
|
||||
box-shadow: var(--ua-shadow-2);
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
transform: translateY(calc(-1 * var(--ua-translate-4)));
|
||||
visibility: hidden;
|
||||
transition: opacity var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease), visibility var(--ua-duration-fast) var(--ua-ease);
|
||||
}
|
||||
.ua-timepicker-pop.is-flip {
|
||||
top: auto; /* 空间不足翻到触发器上方 */
|
||||
bottom: calc(100% + 4px);
|
||||
transform: translateY(4px); /* 入场方向随翻转镜像 */
|
||||
transform: translateY(var(--ua-translate-4)); /* 入场方向随翻转镜像 */
|
||||
}
|
||||
.ua-timepicker-pop.ua-open {
|
||||
opacity: 1;
|
||||
|
||||
Reference in New Issue
Block a user