v3: added onboarding email on account creation
This commit is contained in:
111
src/App.css
111
src/App.css
@@ -1144,7 +1144,7 @@ body.has-player .fab-new {
|
||||
/* ── Public profile page ── */
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -1262,6 +1262,100 @@ body.has-player .fab-new {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-email-display {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0.1rem 0 0.4rem;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
padding: 0.1rem 0.2rem;
|
||||
margin-left: -0.2rem;
|
||||
}
|
||||
|
||||
.profile-email-display:hover {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.profile-email-display:hover .profile-description-edit-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.profile-email-editor {
|
||||
margin: 0.2rem 0 0.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.profile-email-input {
|
||||
width: min(260px, 100%);
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--color-border);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.profile-email-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.profile-email-actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.profile-email-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1.75rem;
|
||||
padding: 0 0.65rem;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid;
|
||||
font-size: 0.8rem;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.profile-email-btn--save {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-on-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.profile-email-btn--save:hover:not(:disabled) {
|
||||
background: var(--color-accent-hover);
|
||||
border-color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.profile-email-btn--save:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.profile-email-btn--cancel {
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.profile-email-btn--cancel:hover {
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.profile-description-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1394,12 +1488,16 @@ body.has-player .fab-new {
|
||||
.btn-border-danger,
|
||||
.btn-border-success,
|
||||
.btn-border {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.3rem 0.9rem;
|
||||
border: 1.5px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||||
}
|
||||
@@ -1594,7 +1692,8 @@ body.has-player .fab-new {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
overflow-x: clip;
|
||||
overflow-y: visible;
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
@@ -3729,8 +3828,12 @@ body.has-player .fab-new {
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: max-width 0.25s ease, opacity 0.2s ease, padding 0.25s ease,
|
||||
border-width 0.25s ease, border-color 0.15s;
|
||||
transition:
|
||||
max-width 0.25s ease,
|
||||
opacity 0.2s ease,
|
||||
padding 0.25s ease,
|
||||
border-width 0.25s ease,
|
||||
border-color 0.15s;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user