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.
130 lines
2.4 KiB
TypeScript
130 lines
2.4 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
export const TimelineFloat = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
// Above timeline media carousels / sticky message chrome
|
|
zIndex: 10,
|
|
minWidth: 'max-content',
|
|
},
|
|
],
|
|
variants: {
|
|
position: {
|
|
Top: {
|
|
top: config.space.S400,
|
|
},
|
|
Bottom: {
|
|
bottom: config.space.S400,
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
position: 'Top',
|
|
},
|
|
});
|
|
|
|
export const DmNameplateBackground = style({
|
|
position: 'absolute',
|
|
inset: 0,
|
|
pointerEvents: 'none',
|
|
zIndex: 0,
|
|
overflow: 'hidden',
|
|
});
|
|
|
|
export const DmNameplateBackgroundMedia = style({
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
left: 'auto',
|
|
width: toRem(280),
|
|
maxWidth: '70%',
|
|
height: toRem(64),
|
|
objectFit: 'cover',
|
|
objectPosition: 'right top',
|
|
opacity: 0.12,
|
|
});
|
|
|
|
export const CarouselScroller = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'flex',
|
|
gap: config.space.S200,
|
|
overflowX: 'auto',
|
|
overflowY: 'hidden',
|
|
paddingBottom: config.space.S100,
|
|
width: '100%',
|
|
cursor: 'grab',
|
|
userSelect: 'none',
|
|
},
|
|
]);
|
|
|
|
export const CarouselScrollerDragging = style([
|
|
DefaultReset,
|
|
{
|
|
cursor: 'grabbing',
|
|
},
|
|
]);
|
|
|
|
export const CarouselItem = style([
|
|
DefaultReset,
|
|
{
|
|
flex: '0 0 auto',
|
|
maxWidth: '100%',
|
|
},
|
|
]);
|
|
|
|
export const CarouselEdgeGradient = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
top: 0,
|
|
height: '100%',
|
|
width: toRem(16),
|
|
pointerEvents: 'none',
|
|
zIndex: 1,
|
|
},
|
|
],
|
|
variants: {
|
|
position: {
|
|
Left: {
|
|
left: 0,
|
|
background: `linear-gradient(to right, ${color.Surface.Container}, rgba(116, 116, 116, 0))`,
|
|
},
|
|
Right: {
|
|
right: 0,
|
|
background: `linear-gradient(to left, ${color.Surface.Container}, rgba(116, 116, 116, 0))`,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export const CarouselScrollBtn = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
position: 'absolute',
|
|
top: '50%',
|
|
zIndex: 2,
|
|
},
|
|
],
|
|
variants: {
|
|
position: {
|
|
Left: {
|
|
left: 0,
|
|
transform: 'translate(-25%, -50%)',
|
|
},
|
|
Right: {
|
|
right: 0,
|
|
transform: 'translate(25%, -50%)',
|
|
},
|
|
},
|
|
},
|
|
});
|