feat(web): redesign account settings and the sign-in page
- account settings: sidebar sections (profile, devices, security, invitations, sync and sign-in) instead of one long scroll; inline device rename, confirmations for destructive actions and toast feedback - sign-in/register: split layout with a quiet brand column, text tabs and underlined inputs; registering asks for the password twice and explains that it cannot be recovered - move invitation accept/label helpers into store/invitations so the toast and the settings inbox share them - add the home page zone styles used by the next commit
This commit is contained in:
justme committed
1 parent
4b8d0b5a5f
commit
0d31e3d058
16 files changed
+882
-454
No files matched your search
@@ -9,62 +9,12 @@
|
||||
}
|
||||
|
||||
.authPanel {
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-6) 32px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.settingsPanel {
|
||||
gap: 0;
|
||||
gap: var(--space-6);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
padding-block: var(--space-4);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.subsection h3 {
|
||||
margin: 0 0 var(--space-2);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.syncBlock {
|
||||
padding-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
min-height: 40px;
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.sectionHeader strong {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.invitationRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
min-height: 48px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: var(--bar-h);
|
||||
height: var(--bar-h);
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -72,6 +22,15 @@
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* 登录页的标题与页签重复,只保留给屏幕阅读器(aria-labelledby 仍指向它) */
|
||||
.quietHeading {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
}
|
||||
|
||||
.heading h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
@@ -91,48 +50,29 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.settingsPanel .heading {
|
||||
align-items: center;
|
||||
padding-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.settingsPanel .heading h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.syncBlock .note {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.user {
|
||||
color: var(--ok);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* 登录 / 创建账号:文字页签,当前项下划线 */
|
||||
.authMode {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-2);
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.authMode button {
|
||||
min-height: 42px;
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
min-height: 40px;
|
||||
margin-bottom: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -142,14 +82,12 @@
|
||||
}
|
||||
|
||||
.authMode button[aria-pressed="true"] {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-bottom-color: var(--accent);
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.authMode button:not([aria-pressed="true"]):hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -161,19 +99,6 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.deviceName input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.form input:not([type="checkbox"]) {
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
@@ -194,11 +119,26 @@
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
/* 登录页的输入框:只留一条底线,安静一些 */
|
||||
.authPanel .form input:not([type="checkbox"]) {
|
||||
min-height: 44px;
|
||||
padding-inline: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--line-strong);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.form input:not([type="checkbox"]):focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.authPanel .form input:not([type="checkbox"]):focus-visible {
|
||||
border-bottom-color: var(--accent);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -210,6 +150,15 @@
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.fieldError {
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.authPanel .form .actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.authPanel .form .actions > button[type="submit"] {
|
||||
flex: 1 0 100%;
|
||||
min-height: 44px;
|
||||
@@ -223,58 +172,6 @@
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.avatarField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.fieldLabel {
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filePicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.fileHint {
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.deviceRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding-block: var(--space-2);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.deviceName {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.deviceType {
|
||||
flex: 0 0 auto;
|
||||
min-width: 56px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.deviceActions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
@@ -284,21 +181,8 @@
|
||||
}
|
||||
|
||||
@media (width <= 560px) {
|
||||
.authPanel {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.form .actions {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.deviceRow {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.deviceActions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user