cinny/src/app/components/updates-dialog/UpdatesDialog.css.ts

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

const MOBILE_BREAKPOINT = '480px';

export const PortalLayer = style({
  position: 'fixed',
  inset: 0,
  zIndex: config.zIndex.Max,
  pointerEvents: 'auto',
});

/** Dialog + overlay padding must never exceed the viewport height. */
const DIALOG_MAX_HEIGHT =
  'calc(85vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))';

export const OverlayFrame = style({
  boxSizing: 'border-box',
  maxHeight: '100vh',
  maxWidth: '100vw',
  padding:
    'env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px)',
});

export const DialogShell = style({
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  width: '100%',
  maxWidth: `min(${toRem(560)}, calc(100vw - ${config.space.S800}))`,
  maxHeight: DIALOG_MAX_HEIGHT,
  overflow: 'hidden',
  backgroundColor: color.Surface.Container,
  color: color.Surface.OnContainer,
  '@media': {
    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
      maxWidth: `calc(100vw - ${config.space.S400})`,
    },
  },
});

export const Hero = style({
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S200,
  padding: config.space.S500,
  paddingBottom: config.space.S400,
  backgroundColor: color.Primary.Container,
  color: color.Primary.OnContainer,
  borderBottom: `${config.borderWidth.B300} solid ${color.Primary.ContainerLine}`,
  '@media': {
    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
      padding: config.space.S400,
      paddingBottom: config.space.S300,
    },
  },
});

export const HeroRow = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S300,
  minWidth: 0,
});

export const HeroLogo = style({
  width: toRem(48),
  height: toRem(48),
  flexShrink: 0,
  '@media': {
    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
      width: toRem(40),
      height: toRem(40),
    },
  },
});

export const HeroTitleWrap = style({
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S100,
  minWidth: 0,
});

export const BodyScroll = style({
  flex: '1 1 auto',
  minHeight: 0,
  backgroundColor: color.Surface.Container,
  color: color.Surface.OnContainer,
});

export const BodyContent = style({
  display: 'flex',
  flexDirection: 'column',
  padding: config.space.S500,
  paddingTop: config.space.S400,
  '@media': {
    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
      padding: config.space.S400,
      paddingTop: config.space.S300,
    },
  },
});

export const BodyLoading = style({
  padding: config.space.S800,
});

export const Markdown = style({
  width: '100%',
  color: color.Surface.OnContainer,
  fontSize: toRem(14),
  lineHeight: 1.55,
});

globalStyle(`${Markdown} h1, ${Markdown} h2, ${Markdown} h3, ${Markdown} h4`, {
  margin: 0,
  marginTop: config.space.S400,
  marginBottom: config.space.S200,
  lineHeight: 1.3,
  color: color.Surface.OnContainer,
});

globalStyle(`${Markdown} h1:first-child, ${Markdown} h2:first-child, ${Markdown} h3:first-child, ${Markdown} h4:first-child`, {
  marginTop: 0,
});

globalStyle(`${Markdown} h2`, { fontSize: toRem(18) });
globalStyle(`${Markdown} h3`, { fontSize: toRem(16) });

globalStyle(`${Markdown} p`, {
  margin: 0,
  marginBottom: config.space.S300,
});

globalStyle(`${Markdown} p:last-child`, { marginBottom: 0 });

globalStyle(`${Markdown} ul, ${Markdown} ol`, {
  margin: 0,
  marginBottom: config.space.S300,
  paddingLeft: config.space.S500,
});

globalStyle(`${Markdown} li`, { marginBottom: config.space.S100 });
globalStyle(`${Markdown} li:last-child`, { marginBottom: 0 });

globalStyle(`${Markdown} a`, {
  color: color.Primary.Main,
  textDecoration: 'underline',
  textUnderlineOffset: toRem(2),
});

globalStyle(`${Markdown} a:hover`, { color: color.Primary.MainHover });

globalStyle(`${Markdown} img`, {
  display: 'block',
  maxWidth: '100%',
  height: 'auto',
  marginTop: config.space.S200,
  marginBottom: config.space.S300,
  borderRadius: config.radii.R300,
  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
});

globalStyle(`${Markdown} code`, {
  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
  fontSize: toRem(13),
  padding: `0 ${config.space.S100}`,
  borderRadius: config.radii.R200,
  backgroundColor: color.SurfaceVariant.Container,
  color: color.SurfaceVariant.OnContainer,
});

globalStyle(`${Markdown} pre`, {
  margin: 0,
  marginBottom: config.space.S300,
  padding: config.space.S300,
  borderRadius: config.radii.R300,
  backgroundColor: color.SurfaceVariant.Container,
  overflow: 'auto',
});

globalStyle(`${Markdown} pre code`, {
  padding: 0,
  backgroundColor: 'transparent',
});

globalStyle(`${Markdown} blockquote`, {
  margin: 0,
  marginBottom: config.space.S300,
  paddingLeft: config.space.S300,
  borderLeft: `${toRem(3)} solid ${color.Primary.Main}`,
  color: color.Surface.OnContainer,
  opacity: 0.9,
});

globalStyle(`${Markdown} hr`, {
  border: 'none',
  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  margin: `${config.space.S400} 0`,
});

globalStyle(`${Markdown} table`, {
  width: '100%',
  borderCollapse: 'collapse',
  marginBottom: config.space.S300,
  fontSize: toRem(13),
});

globalStyle(`${Markdown} th, ${Markdown} td`, {
  padding: config.space.S200,
  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  textAlign: 'left',
});

globalStyle(`${Markdown} th`, {
  backgroundColor: color.SurfaceVariant.Container,
});

export const OlderSection = style({
  width: '100%',
  marginTop: config.space.S500,
});

export const OlderToggle = style({
  width: '100%',
});

export const OlderList = style({
  listStyle: 'none',
  margin: 0,
  padding: 0,
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S100,
  width: '100%',
});

export const OlderListItem = style({
  width: '100%',
});

export const OlderItem = style({
  all: 'unset',
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-start',
  gap: config.space.S100,
  width: '100%',
  minHeight: toRem(48),
  padding: config.space.S300,
  borderRadius: config.radii.R300,
  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  backgroundColor: color.SurfaceVariant.Container,
  color: color.SurfaceVariant.OnContainer,
  cursor: 'pointer',
  textAlign: 'left',
  selectors: {
    '&:hover': {
      backgroundColor: color.SurfaceVariant.ContainerHover,
    },
    '&[data-active="true"]': {
      borderColor: color.Primary.Main,
      backgroundColor: color.Primary.Container,
      color: color.Primary.OnContainer,
    },
  },
});

export const Footer = style({
  display: 'flex',
  flexDirection: 'column',
  gap: config.space.S200,
  padding: config.space.S400,
  paddingTop: config.space.S300,
  paddingBottom: `calc(${config.space.S400} + env(safe-area-inset-bottom, 0px))`,
  borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
  backgroundColor: color.Surface.Container,
  '@media': {
    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
      padding: config.space.S300,
      paddingTop: config.space.S300,
      paddingBottom: `calc(${config.space.S300} + env(safe-area-inset-bottom, 0px))`,
    },
  },
});

export const FooterButton = style({
  width: '100%',
});

export const CloseButton = style({
  position: 'absolute',
  top: config.space.S300,
  right: config.space.S300,
  '@media': {
    [`(max-width: ${MOBILE_BREAKPOINT})`]: {
      top: config.space.S200,
      right: config.space.S200,
    },
  },
});