litruv
0cbc5d9a1c
All checks were successful
Trigger cinny-mobile / dispatch (push) Successful in 1s
Integrate profile effects, nameplates, and avatar decorations with live catalog browsing, Matrix profile storage, and rendering across user heroes, DMs, messages, and the sidebar avatar.
30 lines
812 B
TypeScript
30 lines
812 B
TypeScript
import { style } from '@vanilla-extract/css';
|
|
|
|
/** Discord presets are 128px canvases aligned to an ~80px avatar circle. */
|
|
export const AVATAR_DECORATION_SCALE_PERCENT = 119;
|
|
|
|
/** Inner avatar diameter as a fraction of the decoration canvas (80 / 128). */
|
|
export const AVATAR_DECORATION_INNER_PERCENT = 62.5;
|
|
|
|
export const AvatarDecorationOverlay = style({
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
width: `${AVATAR_DECORATION_SCALE_PERCENT}%`,
|
|
height: `${AVATAR_DECORATION_SCALE_PERCENT}%`,
|
|
transform: 'translate(-50%, -50%)',
|
|
objectFit: 'contain',
|
|
pointerEvents: 'none',
|
|
zIndex: 2,
|
|
});
|
|
|
|
export const SidebarAvatarStack = style({
|
|
position: 'relative',
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'visible',
|
|
});
|