交互反馈优化:去掉活动栏选中蓝竖线,全按钮补按压态

- 删除 .rail-item.active::before 左侧蓝色竖条(用户反馈多余);
  选中态改为稍深的着色背景 + 1px 内描边
- 新增统一 :active 按压反馈(此前全局缺失,点击无任何视觉变化):
  ops-btn 轻微缩放+微暗、ghost 按压着色;rail-item 按压着色;
  side-seg-item / new-card 缩放;ops-tree-row 按压微暗
This commit is contained in:
logan committed 2026-09-20 00:54:01 +08:00
1 parent 02efc13a21
commit dfa559ff59
1 file changed
+9 -11
+9 -11
View File
@@ -152,6 +152,9 @@
cursor: pointer;
}
.ops-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* 统一按压反馈:轻微缩放 + 微暗,松手即恢复 */
.ops-btn:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.92); }
.ops-btn:active:not(:disabled).ops-btn-ghost { background: var(--panel-2); filter: none; }
.ops-btn-primary { background: var(--accent); color: #fff; }
.ops-btn-primary:hover:not(:disabled) { background: var(--accent-strong); }
.ops-btn-success { background: var(--success); color: #fff; }
@@ -242,6 +245,7 @@
color: var(--text-dim);
}
.ops-tree-row:hover { background: var(--hover); color: var(--text); }
.ops-tree-row:active { filter: brightness(0.93); }
.ops-tree-row-active {
background: var(--active);
color: var(--accent-strong);
@@ -513,6 +517,7 @@
color: var(--text-dim);
}
.side-seg-item:hover { color: var(--text); }
.side-seg-item:active { transform: scale(0.96); }
.side-seg-item.active {
background: var(--panel);
color: var(--accent-strong);
@@ -530,19 +535,11 @@
color: var(--text-dim);
}
.rail-item:hover { background: var(--panel-2); color: var(--text); }
.rail-item:active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rail-item.active {
background: color-mix(in srgb, var(--accent) 12%, transparent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent-strong);
}
.rail-item.active::before {
content: "";
position: absolute;
left: -4px;
top: 20%;
height: 60%;
width: 3px;
border-radius: 2px;
background: var(--accent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* 工作区角标:绿=本地,蓝=团队 */
@@ -609,6 +606,7 @@
@apply flex items-center gap-2.5 rounded-lg px-2 py-2 text-left transition;
}
.new-card:hover { background: var(--panel-2); }
.new-card:active { transform: scale(0.98); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.new-card-full { width: 100%; }
.new-card-neutral {
@apply grid shrink-0 place-items-center;