cinny/src/app/features/room/message/styles.css.ts

import { globalStyle, style } from '@vanilla-extract/css';
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';

export const MessageBase = style({
  position: 'relative',
});
export const MessageBaseBubbleCollapsed = style({
  paddingTop: 0,
});

export const MessageOptionsBase = style([
  DefaultReset,
  {
    position: 'absolute',
    top: toRem(-30),
    right: 0,
    zIndex: 1,
  },
]);
export const MessageOptionsBar = style([
  DefaultReset,
  {
    padding: config.space.S100,
  },
]);

export const BubbleAvatarBase = style({
  paddingTop: 0,
});

export const MessageAvatar = style({
  cursor: 'pointer',
});

export const MessageQuickReaction = style({
  minWidth: toRem(32),
});

export const MessageMenuGroup = style({
  padding: config.space.S100,
});

export const MessageMenuItemText = style({
  flexGrow: 1,
});

export const ReactionsContainer = style({
  position: 'relative',
  selectors: {
    '&:empty': {
      display: 'none',
    },
  },
});

/** [Gitea #138] "+N" / "less" chip at the end of a collapsed reaction row. */
export const ReactionsMore = style([
  FocusOutline,
  {
    display: 'inline-flex',
    alignItems: 'center',
    flexShrink: 0,
    padding: `${toRem(2)} ${config.space.S200}`,
    color: color.SurfaceVariant.OnContainer,
    backgroundColor: 'transparent',
    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
    borderRadius: config.radii.R300,
    cursor: 'pointer',
    selectors: {
      '&:hover, &:focus-visible': {
        backgroundColor: color.SurfaceVariant.ContainerHover,
      },
    },
  },
]);

export const ReactionsTooltipText = style({
  wordBreak: 'break-word',
});

// [Gitea #199] Long-press opens the message action sheet on touch screens. On
// iOS a long-press otherwise belongs to the system: a link/image callout, or
// the text-selection loupe, both of which race (and win against) the 450 ms
// press. No callout on message rows, and no selection while a finger is
// down; copying text is in the sheet.
globalStyle('[data-touch-actions]', { WebkitTouchCallout: 'none' });
globalStyle('[data-touch-actions][data-pressing], [data-touch-actions][data-pressing] *', {
  userSelect: 'none',
  WebkitUserSelect: 'none',
});