mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-11-02 19:02:28 +00:00
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:
1 parent
fdddbc2bb4
commit
37edbd18d2
8 files changed
+189
-53
No files matched your search
@@ -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,
|
||||
|
||||
Reference in new issue
Block a user