thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 07:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

profile modal: always-visible "Acting as" identity card (#43)

Browse Source 
Identity pill top-center on every pane, straddling the header divider, so
users always see which profile they're acting as (e.g. before uploading).
Populated in renderSavedProfiles (same resolveMeta path as the Account pane
card, so it refreshes on profile switch), hidden when logged out, and
click-through jumps to the Account pane.

Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Fable 5 committed 2026-07-03 21:24:13 -04:00
1 parent 27be0301c5
commit d1a578f3a2
4 files changed
+186
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+73
View File
@@ -2904,6 +2904,79 @@
transform-origin: top center;
}
/* #43: always-visible active-identity pill. Rendered after the header in
flow and pulled up with a negative block-start margin so it sits half-on /
half-off the header divider — every pane shows who you're acting as. */
.profile-modal__identity {
align-self: center;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
max-inline-size: min(80%, calc(var(--profile-modal-active-min-width) * 2));
padding: var(--space-3xs);
padding-inline-end: var(--space-md);
border-radius: var(--radius-full);
border: var(--border-width-hairline) solid var(--color-border-translucent);
background-color: var(--color-panel);
color: var(--color-text);
box-shadow: var(--shadow-md);
position: relative;
z-index: 2;
margin-block-start: calc(-1 * var(--space-sm));
margin-block-end: calc(-1 * var(--space-3xs));
cursor: pointer;
text-align: start;
}
.profile-modal__identity.hidden {
display: none;
}
.profile-modal__identity:hover {
border-color: var(--color-accent);
}
.profile-modal__identity-avatar {
display: flex;
inline-size: var(--space-xl);
block-size: var(--space-xl);
flex-shrink: 0;
overflow: hidden;
border-radius: var(--radius-full);
border: var(--border-width-hairline) solid var(--color-accent);
background-color: var(--color-surface);
}
.profile-modal__identity-avatar img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.profile-modal__identity-copy {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
.profile-modal__identity-kicker {
font-size: var(--font-size-3xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-extra-wide);
color: var(--color-accent);
line-height: var(--line-height-tight);
}
.profile-modal__identity-name {
font-size: var(--font-size-sm);
font-weight: 600;
line-height: var(--line-height-tight);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-modal__active-profile {
@apply focus-ring flex flex-wrap items-center gap-4 p-4;
}