94 lines
2.2 KiB
SCSS
94 lines
2.2 KiB
SCSS
@use 'mixins' as *;
|
|
|
|
// ---------- Profile popup ----------
|
|
// The account row in the sidebar opens it; it draws and closes in the same
|
|
// shape as the settings popup. Holds the profile picture (a data URL kept on
|
|
// the account), the username, the password, the interface language, and the
|
|
// way out. Cut wider than the settings sheet so the language's five choices
|
|
// fit in one row, and taller so the sections need no scrolling.
|
|
.profile-overlay { @include overlay(120); }
|
|
|
|
.profile-modal {
|
|
@include sheet(540px, min(720px, calc(100vh - 110px)));
|
|
|
|
&:focus, &:focus-visible { outline: none; }
|
|
}
|
|
|
|
.profile-modal-head { @include sheet-head; }
|
|
|
|
.profile-title { @include sheet-title; }
|
|
|
|
.profile-modal-body { @include sheet-body; }
|
|
|
|
.profile-group + .profile-group {
|
|
margin-top: 22px;
|
|
padding-top: 22px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.profile-group-head {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.profile-group-title { font-size: 0.92rem; font-weight: 700; color: var(--text); }
|
|
|
|
.profile-group-hint { font-size: 0.8rem; color: var(--muted); }
|
|
|
|
// the big avatar beside its buttons
|
|
.profile-avatar-row { display: flex; align-items: center; gap: 18px; }
|
|
|
|
.profile-avatar { @include avatar(72px, 1.7rem); }
|
|
|
|
.profile-avatar-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
// the file chooser is driven by the buttons above it, never shown itself
|
|
.profile-file-input { display: none; }
|
|
|
|
.profile-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 10px 13px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--bg-elev);
|
|
font-size: 0.88rem;
|
|
transition: border-color 0.15s, box-shadow 0.2s;
|
|
|
|
&:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
|
|
}
|
|
|
|
// the password pair stack one per line, the button below them
|
|
&-password input { flex: 1 1 100%; }
|
|
}
|
|
|
|
.profile-saved {
|
|
margin: 8px 0 0;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.profile-signout { margin-top: 2px; }
|
|
|
|
@include popup-anim(
|
|
'profile-popup',
|
|
'.profile-modal',
|
|
0.16s,
|
|
transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
-10px
|
|
);
|