diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index b36e278..e95c53e 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -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;