交互反馈优化:去掉活动栏选中蓝竖线,全按钮补按压态
- 删除 .rail-item.active::before 左侧蓝色竖条(用户反馈多余); 选中态改为稍深的着色背景 + 1px 内描边 - 新增统一 :active 按压反馈(此前全局缺失,点击无任何视觉变化): ops-btn 轻微缩放+微暗、ghost 按压着色;rail-item 按压着色; side-seg-item / new-card 缩放;ops-tree-row 按压微暗
This commit is contained in:
1 parent
02efc13a21
commit
dfa559ff59
1 file changed
+9
-11
+9
-11
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user