Files
cinny/src/app/features/room/MembersDrawer.css.ts
Ajay Bura f82cfead46 Support room version 12 (#2399)
* WIP - support room version 12

* add room creators hook

* revert changes from powerlevels

* improve use room creators hook

* add hook to get dm users

* add options to add creators in create room/space

* add member item component in member drawer

* remove unused import

* extract member drawer header component

* get room creators as set only if room version support them

* add room permissions hook

* support room v12 creators power

* make predecessor event id optional

* add info about founders in permissions

* allow to create infinite powers to room creators

* allow everyone with permission to create infinite power

* handle additional creators in room upgrade

* add option to follow space tombstone
2025-08-13 00:12:30 +10:00

63 lines
1.3 KiB
TypeScript

import { keyframes, style } from '@vanilla-extract/css';
import { config, toRem } from 'folds';
export const MembersDrawer = style({
width: toRem(266),
});
export const MembersDrawerHeader = style({
flexShrink: 0,
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
borderBottomWidth: config.borderWidth.B300,
});
export const MemberDrawerContentBase = style({
position: 'relative',
overflow: 'hidden',
});
export const MemberDrawerContent = style({
padding: `${config.space.S200} 0`,
});
const ScrollBtnAnime = keyframes({
'0%': {
transform: `translate(-50%, -100%) scale(0)`,
},
'100%': {
transform: `translate(-50%, 0) scale(1)`,
},
});
export const DrawerScrollTop = style({
position: 'absolute',
top: config.space.S200,
left: '50%',
transform: 'translateX(-50%)',
zIndex: 1,
animation: `${ScrollBtnAnime} 100ms`,
});
export const DrawerGroup = style({
paddingLeft: config.space.S200,
});
export const MembersGroup = style({
paddingLeft: config.space.S200,
});
export const MembersGroupLabel = style({
padding: config.space.S200,
selectors: {
'&:not(:first-child)': {
paddingTop: config.space.S500,
},
},
});
export const DrawerVirtualItem = style({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
});