diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index c7fb8f2..276f1bc 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -38,7 +38,7 @@ :root[data-theme="light"] { color-scheme: light; - --bg: #eef1f6; + --bg: #e8edf5; --panel: #ffffff; --panel-2: #f6f8fb; --panel-3: #eef2f8; @@ -127,6 +127,10 @@ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } + .ops-input[readonly]:focus { + border-color: var(--border-strong); + box-shadow: none; + } .ops-input-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; @@ -156,10 +160,11 @@ .ops-btn-danger:hover:not(:disabled) { filter: brightness(1.1); } .ops-btn-secondary { background: var(--panel-2); - border-color: var(--border); + border-color: var(--border-strong); color: var(--text); } - .ops-btn-secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--hover); } + .ops-btn-secondary:hover:not(:disabled) { border-color: var(--accent); background: var(--hover); } + .ops-btn:disabled { color: var(--text-faint); } .ops-btn-ghost { background: transparent; color: var(--text-dim); @@ -385,7 +390,18 @@ color: var(--text-dim); } .set-side-item:hover { background: var(--hover); color: var(--text); } + .set-side-item { position: relative; } .set-side-item.active { background: var(--active); color: var(--accent-strong); } + .set-side-item.active::before { + content: ""; + position: absolute; + left: -1px; + top: 8px; + bottom: 8px; + width: 3px; + border-radius: 0 3px 3px 0; + background: var(--accent); + } .set-side-icon { @apply grid h-7 w-7 shrink-0 place-items-center rounded-lg; background: var(--panel-2); @@ -402,8 +418,8 @@ background: var(--panel-2); } .set-group-title { - @apply px-4 pt-3 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em]; - color: var(--text-faint); + @apply px-4 pt-3.5 pb-1.5 text-[12px] font-semibold tracking-[0.02em]; + color: var(--text-dim); } .set-row { @apply flex items-center gap-4 px-4 py-3; @@ -413,15 +429,17 @@ /* 开关 */ .set-toggle { - @apply relative h-[22px] w-[38px] rounded-full transition; - background: var(--border); + @apply relative h-[22px] w-[40px] rounded-full transition-colors; + background: var(--border-strong); } - .set-toggle:hover { opacity: 0.85; } + .set-toggle:hover { opacity: 0.9; } .set-toggle.on { background: var(--accent); } .set-toggle-dot { - @apply absolute top-[3px] left-[3px] h-4 w-4 rounded-full bg-white transition; + @apply absolute top-[3px] left-[3px] h-4 w-4 rounded-full bg-white; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); + transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.15s; } - .set-toggle.on .set-toggle-dot { transform: translateX(16px); } + .set-toggle.on .set-toggle-dot { transform: translateX(18px); } /* Mock 规则表(随右侧内容区整体滚动,表头吸附) */ .set-group .ops-hint { margin: 10px 12px 0; } @@ -474,6 +492,15 @@ color: var(--accent-strong); } + /* ---------- 方法 chip 着色 ---------- */ + .ops-chip.ops-method-GET { background: color-mix(in srgb, var(--m-GET) 14%, transparent); color: var(--m-GET); } + .ops-chip.ops-method-POST { background: color-mix(in srgb, var(--m-POST) 16%, transparent); color: var(--m-POST); } + .ops-chip.ops-method-PUT { background: color-mix(in srgb, var(--m-PUT) 14%, transparent); color: var(--m-PUT); } + .ops-chip.ops-method-PATCH { background: color-mix(in srgb, var(--m-PATCH) 14%, transparent); color: var(--m-PATCH); } + .ops-chip.ops-method-DELETE { background: color-mix(in srgb, var(--m-DELETE) 14%, transparent); color: var(--m-DELETE); } + .ops-chip.ops-method-HEAD { background: color-mix(in srgb, var(--m-HEAD) 14%, transparent); color: var(--m-HEAD); } + .ops-chip.ops-method-OPTIONS { background: color-mix(in srgb, var(--m-OPTIONS) 14%, transparent); color: var(--m-OPTIONS); } + /* ---------- 账号 / 空间 ---------- */ .ops-user-avatar { @apply grid h-[18px] w-[18px] shrink-0 place-items-center rounded-full text-[10px] font-bold text-white; diff --git a/packages/ui/src/components/Sidebar.tsx b/packages/ui/src/components/Sidebar.tsx index fa5bbb8..a4b420f 100644 --- a/packages/ui/src/components/Sidebar.tsx +++ b/packages/ui/src/components/Sidebar.tsx @@ -107,7 +107,7 @@ export function Sidebar() { ))} {history.length > 0 && ( - +