Admin ring + star across avatars (identity, switcher, cards, player, DMs)

Add a reusable decorateAdminAvatar(avatarEl, id) that applies BOTH the gold
ring (box-shadow, not clipped by the avatar's overflow) and the corner star
(hung off a non-clipped .admin-avatar-wrap it ensures around the avatar).
Idempotent; works on attached or freshly-built detached avatars.

Wired onto:
- profile modal "Acting as" identity pill
- account-switcher saved-profile avatars
- video card creator avatars
- video player creator avatar
- DM conversation list + message bubbles (upgraded from star-only to ring+star)

adminBadge.js: split the star decision from its DOM (setAdminStar) so the
ring and star share one isAdminActor check; added ADMIN_RING_CLASS /
ADMIN_WRAP_CLASS. tests: decorateAdminAvatar (wrap/ring/star, idempotency,
non-admin, detached).

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.8 committed 2026-07-07 14:24:16 -04:00
1 parent fdddbc2bb4
commit 37edbd18d2
8 files changed
+189 -53

No files matched your search

+17
View File
@@ -280,6 +280,23 @@
left: var(--space-2xs);
}
/* Non-clipped relative shell that decorateAdminAvatar wraps around a circular
avatar so the corner star isn't clipped. Sizes to the avatar it holds. */
.admin-avatar-wrap {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
/* Gold ring hugging an admin avatar. A thin page-colored gap makes it read as
a ring, not a border. box-shadow isn't clipped by the avatar's own
overflow, so it works on clipped circular avatars. */
.admin-ring {
box-shadow:
0 0 0 var(--border-width-hairline) var(--color-page),
0 0 0 calc(var(--border-width-hairline) * 3) var(--status-warning);
}
/* Gold ring around the avatar when the logged-in user is an admin — the
unmistakable "you're an admin" signal on your own profile button. A thin
page-colored gap separates the avatar from the ring so it reads as a ring,