UI 精修:全面视觉评审后的集中打磨(浅色/深色双主题复验通过)
- 层次:浅色底色加深(#e8edf5),侧栏白面板与主区对比清晰 - 按钮:secondary 边框加深 + hover 转 accent;禁用态灰字(不再与启用态混淆) - 方法标签:GET/POST/PUT/… 七色 chip 着色(14% 底 + 方法色文字) - 设置弹窗:左导航 active 竖条指示、开关 40px + 阴影圆点 + 弹性动画、分组标题层级提升 - 顶栏:主题按钮前补分隔线;只读输入框不再显示聚焦环 - 侧栏:清空历史危险红样式;官网与价格改为 accent 链接 - 登录弹窗提示文案精简 - 评审方式:主界面(浅)25 条 + Mock 弹窗 + 设置弹窗逐条修复;浅/深主题复验截图评审通过
This commit is contained in:
1 parent
0edd3e674a
commit
838f76c21b
4 files changed
+41
-13
No files matched your search
+37
-10
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user