minty/src/app/components/image-viewer/ImageViewer.css.ts
Jan Jurzitza 2889a72b81
Make small images not scale up in image viewer (#1554)
Instead show them in real resolution
2023-11-28 20:22:20 +05:30

42 lines
875 B
TypeScript

import { style } from '@vanilla-extract/css';
import { DefaultReset, color, config } from 'folds';
export const ImageViewer = style([
DefaultReset,
{
height: '100%',
},
]);
export const ImageViewerHeader = style([
DefaultReset,
{
paddingLeft: config.space.S200,
paddingRight: config.space.S200,
borderBottomWidth: config.borderWidth.B300,
flexShrink: 0,
gap: config.space.S200,
},
]);
export const ImageViewerContent = style([
DefaultReset,
{
backgroundColor: color.Background.Container,
color: color.Background.OnContainer,
overflow: 'hidden',
},
]);
export const ImageViewerImg = style([
DefaultReset,
{
objectFit: 'contain',
width: 'auto',
height: 'auto',
maxWidth: '100%',
maxHeight: '100%',
backgroundColor: color.Surface.Container,
transition: 'transform 100ms linear',
},
]);