feat(ui): complete Plan 06-03 - Settings page Manus design alignment
- Apply Manus design tokens to SettingsPage.css - Update .sp-nav, .sp-card, .sp-section, .sp-input with manus-* vars - Settings page now matches chat UI Manus dark theme
This commit is contained in:
1 parent
2d893daf07
commit
4a867b36ff
3 files changed
+86
-21
No files matched your search
@@ -14,8 +14,8 @@
|
||||
.sp-nav {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
background: var(--bg2);
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--manus-surface);
|
||||
border-right: 1px solid var(--manus-elevated);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
@@ -66,13 +66,13 @@
|
||||
}
|
||||
|
||||
.sp-nav-item:hover {
|
||||
background: var(--bg3);
|
||||
color: var(--text);
|
||||
background: var(--manus-elevated);
|
||||
color: var(--manus-tx);
|
||||
}
|
||||
|
||||
.sp-nav-item--active {
|
||||
background: var(--bg4);
|
||||
color: var(--text);
|
||||
background: var(--manus-elevated);
|
||||
color: var(--manus-tx);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -182,14 +182,14 @@
|
||||
.sp-section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
color: var(--manus-tx);
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sp-section-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text3);
|
||||
color: var(--manus-tx2);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -230,8 +230,8 @@
|
||||
|
||||
/* ── Card (continuous, macOS/Linear style) ── */
|
||||
.sp-card {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--manus-elevated);
|
||||
border: 1px solid var(--manus-hover);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -622,10 +622,10 @@
|
||||
|
||||
/* ── Inputs ── */
|
||||
.sp-input {
|
||||
background: var(--bg3);
|
||||
border: 1px solid transparent;
|
||||
background: var(--manus-surface);
|
||||
border: 1px solid var(--manus-elevated);
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
color: var(--manus-tx);
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
outline: none;
|
||||
@@ -634,13 +634,13 @@
|
||||
}
|
||||
|
||||
.sp-input:hover {
|
||||
border-color: var(--border);
|
||||
border-color: var(--manus-hover);
|
||||
}
|
||||
|
||||
.sp-input:focus {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg4);
|
||||
box-shadow: 0 0 0 1px var(--accent);
|
||||
border-color: var(--manus-blue);
|
||||
background: var(--manus-elevated);
|
||||
box-shadow: 0 0 0 1px var(--manus-blue);
|
||||
}
|
||||
|
||||
.sp-input:disabled {
|
||||
|
||||
Reference in new issue
Block a user