66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { color, config, toRem } from 'folds';
|
|
|
|
export const CategoryButton = style({
|
|
flexGrow: 1,
|
|
});
|
|
export const CategoryButtonIcon = style({
|
|
opacity: config.opacity.P400,
|
|
});
|
|
|
|
// Avatar is 48px with symmetric 10px breathing room top/bottom — minimum
|
|
// row height clears avatar + padding so the circle never clips against
|
|
// the row's selected/hover background.
|
|
const DmRowMinHeight = toRem(68);
|
|
const DmRowTitleBlockHeight = toRem(40);
|
|
|
|
export const DmRowOuter = style({
|
|
minHeight: DmRowMinHeight,
|
|
boxSizing: 'border-box',
|
|
});
|
|
|
|
export const DmRowInner = style({
|
|
minHeight: DmRowMinHeight,
|
|
boxSizing: 'border-box',
|
|
padding: `${toRem(10)} 0`,
|
|
});
|
|
|
|
// Locks the title block to its natural 2-line height so the name does
|
|
// not jump vertically when the second row's content (preview / unread
|
|
// badge / notification icon) collapses to 0px on hover. Bridged rooms
|
|
// with no m.room.message yet but a synced unread badge are the obvious
|
|
// trigger; the same pathology applies to any (empty preview + has unread)
|
|
// pair, so the fix is room-class-agnostic.
|
|
export const DmRowText = style({
|
|
minWidth: 0,
|
|
overflow: 'hidden',
|
|
minHeight: DmRowTitleBlockHeight,
|
|
});
|
|
|
|
export const DmRowTextStretch = style({
|
|
minWidth: 0,
|
|
overflow: 'hidden',
|
|
});
|
|
|
|
export const DmRowName = style({
|
|
fontWeight: 600,
|
|
});
|
|
|
|
export const DmRowTime = style({
|
|
fontFamily: '"JetBrains Mono Variable", ui-monospace, monospace',
|
|
fontSize: toRem(10.5),
|
|
color: color.Surface.OnContainer,
|
|
opacity: 0.55,
|
|
fontVariantNumeric: 'tabular-nums',
|
|
flexShrink: 0,
|
|
whiteSpace: 'nowrap',
|
|
});
|
|
|
|
export const DmRowPreview = style({
|
|
opacity: 0.6,
|
|
});
|
|
|
|
export const DmRowPreviewUnread = style({
|
|
opacity: 0.85,
|
|
fontWeight: 500,
|
|
});
|