[skip ci]
This commit is contained in:
parent
5e41f81752
commit
3d0631dd85
@ -63,16 +63,10 @@
|
|||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
text-shadow:
|
|
||||||
0 0 6px var(--glow-color),
|
|
||||||
0 0 14px color-mix(in srgb, var(--glow-color) 50%, transparent);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .sequenceBadge {
|
:global(.theme-light) .sequenceBadge {
|
||||||
color: var(--brand-primary);
|
color: var(--brand-primary);
|
||||||
text-shadow:
|
|
||||||
0 0 5px color-mix(in srgb, var(--glow-color) 60%, transparent),
|
|
||||||
0 0 12px color-mix(in srgb, var(--glow-color) 30%, transparent);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sequenceBadgeMobile {
|
.sequenceBadgeMobile {
|
||||||
|
|||||||
@ -45,23 +45,9 @@ interface IconBadge extends BaseBadge {
|
|||||||
interface TextBadge extends BaseBadge {
|
interface TextBadge extends BaseBadge {
|
||||||
type: 'text';
|
type: 'text';
|
||||||
text: string;
|
text: string;
|
||||||
glowColor: string;
|
|
||||||
}
|
}
|
||||||
type Badge = IconBadge | TextBadge;
|
type Badge = IconBadge | TextBadge;
|
||||||
|
|
||||||
const GLOW_COLORS = [
|
|
||||||
'#ff6b9d', // rose
|
|
||||||
'#c084fc', // violet
|
|
||||||
'#60a5fa', // sky blue
|
|
||||||
'#34d399', // emerald
|
|
||||||
'#fbbf24', // amber
|
|
||||||
'#f472b6', // pink
|
|
||||||
'#818cf8', // indigo
|
|
||||||
'#2dd4bf', // teal
|
|
||||||
'#fb923c', // orange
|
|
||||||
'#a78bfa', // purple
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
interface UserProfileBadgesProps {
|
interface UserProfileBadgesProps {
|
||||||
user: UserRecord;
|
user: UserRecord;
|
||||||
profile: ProfileRecord | null;
|
profile: ProfileRecord | null;
|
||||||
@ -149,7 +135,6 @@ export const UserProfileBadges: React.FC<UserProfileBadgesProps> = observer(
|
|||||||
text: `#${profile.premiumLifetimeSequence}`,
|
text: `#${profile.premiumLifetimeSequence}`,
|
||||||
tooltip: t`Visionary ID #${profile.premiumLifetimeSequence}`,
|
tooltip: t`Visionary ID #${profile.premiumLifetimeSequence}`,
|
||||||
url: badgeUrl,
|
url: badgeUrl,
|
||||||
glowColor: GLOW_COLORS[profile.premiumLifetimeSequence % GLOW_COLORS.length],
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -188,11 +173,7 @@ export const UserProfileBadges: React.FC<UserProfileBadgesProps> = observer(
|
|||||||
badge.type === 'icon' ? (
|
badge.type === 'icon' ? (
|
||||||
<img src={badge.iconUrl} alt={badge.tooltip} className={badgeClassName} />
|
<img src={badge.iconUrl} alt={badge.tooltip} className={badgeClassName} />
|
||||||
) : (
|
) : (
|
||||||
<span
|
<span className={clsx(styles.sequenceBadge, sequenceClassName)} aria-hidden="true">
|
||||||
className={clsx(styles.sequenceBadge, sequenceClassName)}
|
|
||||||
style={{'--glow-color': badge.glowColor} as React.CSSProperties}
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
{badge.text}
|
{badge.text}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user