|
@@ -505,20 +505,47 @@ import { SessionService } from '../../../core/session.service';
|
|
|
font-size: var(--fs-13);
|
|
font-size: var(--fs-13);
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
- transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ transition:
|
|
|
|
|
+ background-color var(--motion-fast) var(--ease-standard),
|
|
|
|
|
+ border-color var(--motion-fast) var(--ease-standard),
|
|
|
|
|
+ transform var(--motion-fast) var(--ease-standard);
|
|
|
}
|
|
}
|
|
|
|
|
+ /*
|
|
|
|
|
+ * 退出登录按钮(2026-11-01 用户反馈修复)。
|
|
|
|
|
+ *
|
|
|
|
|
+ * 🔴 原实现 .logout-action:hover 的 background 与本体**完全相同**(都是 --danger-subtle)——
|
|
|
|
|
+ * 悬停等于没有任何变化,用户感觉不到按钮是活的。
|
|
|
|
|
+ * 悬停等于没有任何变化,用户感觉不到按钮是活的。
|
|
|
|
|
+ *
|
|
|
|
|
+ * 现在:
|
|
|
|
|
+ * 默认 浅红底 + 半透明红边(克制,不像是故障报警)
|
|
|
|
|
+ * 悬停 底色加深一档 + 边框变实 + 轻微上浮
|
|
|
|
|
+ * 按下 回落(scale .98),给「按到了」的触感
|
|
|
|
|
+ */
|
|
|
.logout-action {
|
|
.logout-action {
|
|
|
- width: 100%;
|
|
|
|
|
- border: 1px solid color-mix(in srgb, var(--danger) 52%, var(--edge));
|
|
|
|
|
- background: var(--danger-subtle);
|
|
|
|
|
|
|
+ border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--edge));
|
|
|
|
|
+ /* 用 danger 与 surface 混出浅底,比固定的 danger-subtle 更好控制层次 */
|
|
|
|
|
+ background: color-mix(in srgb, var(--danger) 10%, var(--surface));
|
|
|
color: var(--danger);
|
|
color: var(--danger);
|
|
|
}
|
|
}
|
|
|
- .logout-action:hover { background: var(--danger-subtle); }
|
|
|
|
|
|
|
+ .logout-action:hover {
|
|
|
|
|
+ background: color-mix(in srgb, var(--danger) 20%, var(--surface));
|
|
|
|
|
+ border-color: color-mix(in srgb, var(--danger) 72%, var(--edge));
|
|
|
|
|
+ transform: translateY(-1px);
|
|
|
|
|
+ }
|
|
|
.logout-action:active { transform: scale(.98); }
|
|
.logout-action:active { transform: scale(.98); }
|
|
|
.logout-action:focus-visible {
|
|
.logout-action:focus-visible {
|
|
|
outline: 2px solid var(--primary-ring);
|
|
outline: 2px solid var(--primary-ring);
|
|
|
outline-offset: 2px;
|
|
outline-offset: 2px;
|
|
|
}
|
|
}
|
|
|
|
|
+ /* 图标随悬停右移一点,强化「离开 / 退出」的语义 */
|
|
|
|
|
+ .logout-action i {
|
|
|
|
|
+ transition: transform var(--motion-fast) var(--ease-standard);
|
|
|
|
|
+ }
|
|
|
|
|
+ .logout-action:hover i {
|
|
|
|
|
+ transform: translateX(2px);
|
|
|
|
|
+ }
|
|
|
@keyframes page-card-in {
|
|
@keyframes page-card-in {
|
|
|
from { opacity: 0; transform: translateY(var(--sp-2)); }
|
|
from { opacity: 0; transform: translateY(var(--sp-2)); }
|
|
|
to { opacity: 1; transform: translateY(0); }
|
|
to { opacity: 1; transform: translateY(0); }
|