import { css, Global } from '@emotion/react'; import React from 'react'; import { useTheme } from 'antd-style'; export default () => { const token = useTheme(); return ( <Global styles={css` .preview-image-boxes { display: flex; float: right; clear: both; width: 496px; margin: 0 0 70px 64px; &-with-carousel { width: 420px; .preview-image-box img { padding: 0; } } .ant-row-rtl & { float: left; margin: 0 64px 70px 0; } } .preview-image-boxes + .preview-image-boxes { margin-top: -35px; } .preview-image-box { float: left; width: 100%; } .preview-image-box + .preview-image-box { margin-left: 24px; .ant-row-rtl & { margin-right: 24px; margin-left: 0; } } .preview-image-wrapper { position: relative; display: inline-block; width: 100%; padding: 16px; text-align: center; background: #f2f4f5; box-sizing: border-box; } .preview-image-wrapper.video { display: block; padding: 0; background: 0; } .preview-image-wrapper video { display: block; width: 100%; + svg { position: absolute; top: 0; left: 0; } } .preview-image-wrapper.good::after { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 3px; background: ${token.colorPrimary}; content: ''; } .preview-image-wrapper.bad::after { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 3px; background: ${token.colorError}; content: ''; } .preview-image-title { margin-top: 20px; color: ${token.colorText}; font-size: 12px; } .preview-image-description { margin-top: 2px; color: ${token.colorTextSecondary}; font-size: 12px; line-height: 1.5; } .preview-image-description hr { margin: 2px 0; background: none; border: 0; } .preview-image-box img { box-sizing: border-box; max-width: 100%; padding: 12px; background: ${token.colorBgContainer}; border-radius: ${token.borderRadius}px; cursor: pointer; transition: all 0.3s; &.no-padding { padding: 0; background: none; } } .preview-image-boxes.preview-image-boxes-with-carousel img { padding: 0; box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 ${token.colorBgContainer}, 0 4px 0 0 #ddd, 0 6px 0 0 ${token.colorBgContainer}, 0 7px 0 0 #ddd; } .preview-image-box img:hover { box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); } .transition-video-player, .motion-video-min { float: right; width: 600px; padding: 0 0 70px 20px; .preview-image-wrapper { padding: 0; } .ant-row-rtl & { float: left; } } .motion-video-min { width: 390px; } .motion-principle-wrapper { width: 100%; max-width: 900px; margin: 48px 0 24px; } .principle-wrapper { width: 100%; .principle { display: inline-block; box-sizing: border-box; width: 100%; min-height: 180px; margin-right: 12.5%; margin-bottom: 24px; padding: 24px; font-size: 24px; text-align: center; border: 1px solid #e8e8e8; border-radius: 4px; &:last-child { margin-right: 0; } h4 { margin: 16px 0 8px; } p { font-size: 12px; line-height: 24px; } } } `} /> ); };