@emotion/core#Global TypeScript Examples
The following examples show how to use
@emotion/core#Global.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: elements.tsx From Frontend with MIT License | 6 votes |
|
GlobalStyles: React.FC = () => {
const { locale } = useIntl();
const direction = ['ar'].includes(locale) ? 'rtl' : 'ltr';
return (
<Global
styles={{
body: {
direction
}
}}
/>
);
}
Example #2
| Source File: RenderView.tsx From slippi-stats with MIT License | 6 votes |
|
Settings: React.FC = () => {
return (
<React.Fragment>
<Global
styles={css`
body:hover .settings {
opacity: 1;
}
.settings {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
`}
/>
<div className="settings">
<Options />
</div>
</React.Fragment>
);
}
Example #3
| Source File: theme.tsx From slippi-stats with MIT License | 6 votes |
|
GlobalTheme: React.FC<Theme> = ({ primaryColor, secondaryColor }) => {
return (
<Global
styles={css`
body.themed {
background: radial-gradient(circle at center -30%, ${primaryColor}, ${secondaryColor});
}
`}
/>
);
}
Example #4
| Source File: App.tsx From r3f-game-demo with MIT License | 6 votes |
|
export default function App() {
const [width, height] = useWindowSize();
return (
<>
<Global styles={globalStyles} />
<div css={styles.root(width, height)}>
<Game cameraZoom={80}>
<AssetLoader urls={urls} placeholder="Loading assets ...">
<SceneManager defaultScene="office">
<Scene id="office">
<OfficeScene />
</Scene>
<Scene id="other">
<OtherScene />
</Scene>
</SceneManager>
</AssetLoader>
</Game>
</div>
</>
);
}
Example #5
| Source File: index.tsx From typescript-exercises with MIT License | 6 votes |
|
export function App() {
return (
<>
<Global styles={globalStyles} />
<PageLayout>
{load(urlParams.observable$, (params) => (
<Exercise key={params.exercise} exerciseNumber={Number(params.exercise)} />
))}
</PageLayout>
</>
);
}
Example #6
| Source File: Slider.tsx From grafana-chinese with Apache License 2.0 | 6 votes |
|
Slider: FunctionComponent<Props> = ({
min,
max,
onChange,
onAfterChange,
orientation = 'horizontal',
reverse,
formatTooltipResult,
value,
tooltipAlwaysVisible = true,
}) => {
const isHorizontal = orientation === 'horizontal';
const theme = useTheme();
const styles = getStyles(theme, isHorizontal);
const RangeWithTooltip = createSliderWithTooltip(Range);
return (
<div className={cx(styles.container, styles.slider)}>
{/** Slider tooltip's parent component is body and therefore we need Global component to do css overrides for it. */}
<Global styles={styles.tooltip} />
<RangeWithTooltip
tipProps={{
visible: tooltipAlwaysVisible,
placement: isHorizontal ? 'top' : 'right',
}}
min={min}
max={max}
defaultValue={value || [min, max]}
tipFormatter={(value: number) => (formatTooltipResult ? formatTooltipResult(value) : value)}
onChange={onChange}
onAfterChange={onAfterChange}
vertical={!isHorizontal}
reverse={reverse}
/>
</div>
);
}
Example #7
| Source File: _document.tsx From blog with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<Html lang="en">
<Head />
<Global styles={css`
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('/assets/fonts/inconsolata.ttf'), local('OpenSans-Regular');
font-display: swap;
}
body {
background-color: #fff;
color: #212121;
font-family: 'Inconsolata', sans-serif;
padding: 0;
margin: 0;
}
html {
font-size: 100%;
}
`} />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Example #8
| Source File: provider.tsx From kodiak-ui with MIT License | 6 votes |
|
GlobalStyles = ({ global }: { global: ThemeUIStyleObject }) =>
jsx(Global, {
styles: (emotionTheme: any): any => {
const theme = emotionTheme as Theme
const colorStyles = createColorStyles(theme)
return css({
...colorStyles,
...global,
})(theme)
},
})
Example #9
| Source File: FontInjector.tsx From capsize with MIT License | 6 votes |
|
export default function FontInjector() {
const { state } = useAppState();
const { selectedFont } = state;
return selectedFont.url ? (
<Global
styles={{
'@font-face': {
fontFamily:
selectedFont.name.indexOf(' ') > -1
? `'${selectedFont.name}'`
: selectedFont.name,
src: `url(\'${selectedFont.url}\') format(\'${selectedFont.format}\')`,
},
}}
/>
) : null;
}
Example #10
| Source File: App.tsx From knboard with MIT License | 6 votes |
|
App = () => {
return (
<Provider store={store}>
<Router>
<ThemeProvider theme={theme}>
<CssBaseline />
<AuthWrapper />
<Toast />
<Global
styles={css`
.Mui-focusVisible {
box-shadow: 0 0 3px 2px ${FOCUS_BOX_SHADOW};
}
textarea {
font-family: inherit;
}
.MuiAutocomplete-popper {
z-index: ${modalPopperAutocompleteModalIndex} !important;
}
`}
/>
</ThemeProvider>
</Router>
</Provider>
);
}
Example #11
| Source File: AuthLayout.tsx From condo with MIT License | 6 votes |
|
AuthLayout: React.FC<IAuthLayoutProps> = (props) => {
const intl = useIntl()
const { children, ...otherProps } = props
return (
<GoogleReCaptchaProvider
reCaptchaKey={googleCaptcha && googleCaptcha.SITE_KEY}
language={intl.locale}
useRecaptchaNet
scriptProps={{
async: true,
defer: true,
appendTo: 'body',
}}>
<Global styles={FROM_INPUT_CSS}/>
<PosterLayout {...otherProps}>
<AuthLayoutContextProvider>
{children}
</AuthLayoutContextProvider>
</PosterLayout>
</GoogleReCaptchaProvider>
)
}
Example #12
| Source File: Main.tsx From connect with GNU Lesser General Public License v3.0 | 5 votes |
|
export default function Main({ children }: MainProps) {
return (
<div>
<div
css={css`
max-width: 800px;
margin: 0 auto;
padding: 60px 0;
`}
>
<h1
css={css`
font-size: 40px;
margin: 0;
padding: 0 0 60px;
`}
>
Org Viewer
</h1>
<div>{children}</div>
</div>
<Global
styles={css`
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&display=swap');
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0;
background: #faf1fa;
}
body,
h1,
input,
button {
font: 300 24px/1.5 'Fira Code';
color: #222;
}
input[type='text'] {
background: #fff;
&::placeholder {
color: #222;
}
}
`}
/>
</div>
)
}
Example #13
| Source File: index.tsx From WEB_CodeSquare_AmongUs with MIT License | 5 votes |
|
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<HelmetProvider>
<BrowserRouter>
<Helmet>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<link
rel="mask-icon"
href="/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="msapplication-TileColor" content="#2b5797" />
<meta name="theme-color" content="#ffffff" />
</Helmet>
<Global styles={GlobalStyles} />
<App />
</BrowserRouter>
</HelmetProvider>
</Provider>
</React.StrictMode>,
document.getElementById("root"),
);
Example #14
| Source File: IFrameWrapper.tsx From condo with MIT License | 5 votes |
|
IFrameWrapper: React.FC<IFrameWrapperProps> = (props) => {
const { withUser, withOrganization, parentOrigin: propParentOrigin } = props
const parentOrigin = propParentOrigin ? propParentOrigin : condoUrl
const parentType = typeof parent
const { isAuthenticated } = useAuth()
const { organization } = useOrganization()
useEffect(() => {
// NOTE: Sending load info manually for Safari support, in which iframe.onload sometimes doesn't trigger
if (parentType) {
sendLoadedStatus(parent, parentOrigin)
}
}, [parentType, parentOrigin])
useEffect(() => {
if (withOrganization && !organization && parentType) {
sendRequirementRequest('organization', parent, parentOrigin)
}
}, [parentType, organization, withOrganization, parentOrigin])
useEffect(() => {
if (withUser && !isAuthenticated) {
sendRequirementRequest('auth', parent, parentOrigin)
}
}, [parentType, isAuthenticated, withUser, parentOrigin])
useEffect(() => {
const observer = new ResizeObserver((entries) => {
if (parentType && entries && entries.length) {
sendSize(entries[0].target.clientHeight, parent, parentOrigin)
}
})
observer.observe(document.body)
return () => {
observer.unobserve(document.body)
}
}, [parentOrigin, parentType])
return (
<>
<Global styles={BODY_RESIZE_STYLES}/>
{props.children}
</>
)
}
Example #15
| Source File: GlobalStyles.tsx From tsplay.dev with MIT License | 5 votes |
|
GlobalStyles: React.FC = () => {
React.useMemo(() => {
// Preload img
new Image().src = moonSvg
new Image().src = sunSvg
}, [])
const [isDarkMode, setIsDarkMode] = React.useState(() => {
const systemDarkMode = window?.matchMedia(PREFERS_COLOR_SCHEMA)?.matches
const localStorageIsDarkMode = localStorage.get(LOCAL_STORAGE_IS_DARK_MODE)
return localStorageIsDarkMode ?? systemDarkMode
})
return (
<React.Fragment>
<div
css={css`
position: absolute;
right: 25px;
top: 25px;
font-size: 25px;
cursor: pointer;
user-select: none;
`}
>
<span
onClick={() => {
const mode = !isDarkMode
setIsDarkMode(mode)
localStorage.set(LOCAL_STORAGE_IS_DARK_MODE, mode)
}}
role="button"
className="prevent-hue-rotate"
>
<img
alt="dark mode img"
src={isDarkMode ? moonSvg : sunSvg}
css={css`
width: ${isDarkMode ? '23px' : '30px'};
`}
/>
</span>
</div>
<Fonts />
<Global styles={globalStyles} />
{isDarkMode && <Global styles={darkModeStyles} />}
</React.Fragment>
)
}
Example #16
| Source File: Fonts.tsx From tsplay.dev with MIT License | 5 votes |
|
Fonts: React.FC = () => {
return <Global styles={fonts} />
}
Example #17
| Source File: index.tsx From screenshot.rocks with MIT License | 5 votes |
|
ReactDOM.render(
<React.StrictMode>
<Global styles={styles()}/>
<MainApp/>
</React.StrictMode>,
document.getElementById('screenshot.rocks')
);
Example #18
| Source File: layout.tsx From carlosazaustre.es with MIT License | 5 votes |
|
Layout = ({ children, className }: LayoutProps) => (
<MDXProvider
components={{ ExternalLink }}
>
<Styled.root data-testid="theme-root">
<Global
styles={css({
"*": {
boxSizing: `inherit`
},
body: {
margin: 0,
padding: 0,
boxSizing: `border-box`,
textRendering: `optimizeLegibility`,
borderTop: `10px solid #FBCF65`
},
"::selection": {
backgroundColor: `secondary`,
color: `white`
},
a: {
transition: `all 0.3s ease-in-out`,
color: `#FFB934` }
})}
/>
<SEO />
<SkipNavLink>Ver contenido</SkipNavLink>
<Container css={css`
background-color: #fff;
margin: 0 auto;
padding: 0.5rem 1.5rem;
margin-top: 1em;
max-width: 1024px;
`}>
<Header />
<div id="skip-nav" css={css({ ...CodeStyles })} className={className}>
{children}
</div>
<Footer />
</Container>
</Styled.root>
</MDXProvider>
)
Example #19
| Source File: Page.tsx From use-comments with MIT License | 5 votes |
|
export function Page({ children }: PageProps) {
return (
<BaseStyles>
<Helmet>
<title>useComments</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;1,400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&display=swap"
rel="stylesheet"
/>
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>?</text></svg>"
/>
</Helmet>
<Global styles={{ html: { scrollBehavior: 'smooth' } }} />
<div
sx={{
py: 3,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
margin: 0,
height: '100%',
}}
>
<Header />
{children}
<footer sx={{ py: 4, textAlign: 'center' }}>
© 2020 ・ Built with ? by{' '}
<a href="https://twitter.com/aleksandrasays">Aleksandra Sikora</a>・
Powered by <a href="https://hasura.io">Hasura</a>
</footer>
</div>
</BaseStyles>
);
}
Example #20
| Source File: GlobalStyle.tsx From condo with MIT License | 4 votes |
|
export default function GlobalStyle () {
return (
<Global
styles={css`
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
body {
max-width: 100%;
overflow-x: hidden;
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
line-height: 1.5;
text-decoration-skip: ink;
text-rendering: optimizeLegibility;
-ms-overflow-style: -ms-autohiding-scrollbar;
-moz-font-feature-settings: 'liga on';
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
#__next {
height: 100%;
}
.ant-image-preview {
.ant-image-preview-img {
max-width: calc(100% - 80px);
max-height: calc(100% - 80px);
}
.ant-image-preview-operations {
background-color: transparent;
.ant-image-preview-operations-operation {
.anticon-rotate-left, .anticon-rotate-right, .anticon-zoom-in, .anticon-zoom-out {
display: none;
}
}
}
}
.ant-radio-wrapper {
white-space: inherit;
}
.ant-radio-inner::after {
background: ${gradients.sberActionGradient};
}
.ant-radio-checked .ant-radio-inner {
border-color: ${colors.inputBorderGrey};
&::after {
border-color: ${colors.inputBorderGrey};
}
}
.ant-checkbox-wrapper {
white-space: inherit;
span {
position: relative;
bottom: 4px;
}
}
.ant-checkbox {
width: 24px;
height: 24px;
}
.ant-checkbox-inner {
width: 24px;
height: 24px;
}
.ant-form-item input[type="checkbox"] {
width: 24px;
height: 24px;
}
.ant-checkbox-inner::after {
left: 36%;
width: 7.714px;
height: 12.143px;
}
.ant-checkbox-checked {
.ant-checkbox-inner {
background: ${gradients.sberActionGradient};
border: none;
}
.ant-checkbox-inner::after {
border: 3px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scale(1) translate(-75%, -50%);
}
}
.ant-list-item-action > li:last-child {
padding-right: 0;
}
.ant-form .ant-non-field-error .ant-form-item-control-input {
display: none;
}
.ant-form .ant-non-field-error .ant-form-item-explain {
margin-bottom: 24px;
}
.ant-form .ant-non-field-error {
margin-bottom: 0;
}
.ant-card .ant-card-head {
margin-bottom: 0;
}
/*TODO(Dimitreee): remove select style ovveride after select customization*/
.ant-select-single.ant-select-open .ant-select-selection-item {
color: #434343;
}
.react-tel-input .ant-input {
background-color: ${colors.whiteTranslucent} !important;
width: 100%;
}
.ant-input-affix-wrapper input, .ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused {
border-color: ${colors.black};
box-shadow: none !important;
}
.ant-input-affix-wrapper > input.ant-input, .ant-form-item-has-error .ant-input-affix-wrapper > input.ant-input {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.ant-form-item-has-error .ant-input-affix-wrapper > input.ant-input:focus, .ant-input-affix-wrapper > input.ant-input:focus {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.ant-checkbox {
border-color: ${colors.inputBorderGrey};
}
.ant-checkbox-inner {
border-radius: 4px;
}
.ant-checkbox-input:focus:not(:checked) + .ant-checkbox-inner {
background-color: ${colors.ultraLightGrey};
}
.ant-form-item-explain, .ant-form-item-extra {
margin: 0;
}
.ant-tag {
border-radius: 2px;
}
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > th,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > thead > tr > th,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > thead > tr > th,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > td,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > tbody > tr > td,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tbody > tr > td,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tfoot > tr > th,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > tfoot > tr > th,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tfoot > tr > th,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tfoot > tr > td,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > tfoot > tr > td,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-body > table > tfoot > tr > td {
&:not(:last-of-type) {
border-right: none;
}
}
.ant-table-pagination.ant-pagination {
margin: 40px 0 16px;
}
.ant-table-column-sorter, .ant-table-filter-trigger {
visibility: hidden;
}
.ant-table-filter-trigger.active {
visibility: visible;
}
.ant-table-cell {
&:hover {
.ant-table-column-sorter, .ant-table-filter-trigger {
visibility: visible;
}
}
}
.ant-table-thead > tr > th {
font-weight: 700;
}
.ant-table-row {
&:hover {
cursor: pointer;
}
}
.ant-table-row-expand-icon-spaced {
display: none;
}
h1.ant-typography {
font-weight: 700;
line-height: 46px;
letter-spacing: -0.01em;
}
a.ant-typography[disabled],
.ant-typography a[disabled],
a.ant-typography.ant-typography-disabled,
.ant-typography a.ant-typography-disabled {
color: ${colors.green[6]};
&:hover {
color: ${colors.green[6]};
}
}
.ant-typography strong {
font-weight: ${DEFAULT_STRONG_TEXT_FONT_WEIGHT};
}
.ant-typography mark {
background-color: ${colors.markColor};
}
.ant-alert-info > .ant-alert-content > .ant-alert-message {
color: ${colors.blue[6]}
}
.ant-alert-warning > .ant-alert-content > .ant-alert-message {
color: ${colors.orange[6]}
}
.ant-alert-success > .ant-alert-content > .ant-alert-message {
color: ${colors.green[6]}
}
.ant-alert-error > .ant-alert-content > .ant-alert-message {
color: ${colors.red[5]}
}
.ant-modal-title {
font-size: 24px;
line-height: 32px;
font-weight: 700;
}
${uploadControlCss}
${radioGroupCss}
${inputControlCss}
${page}
${carouselCss}
${cardCSS}
`}
/>
)
}
Example #21
| Source File: ServicesModal.tsx From condo with MIT License | 4 votes |
|
ServicesModal: React.FC<IServicesModalProps> = ({
visible,
onCancel,
onOk,
receipt,
currencyCode,
isDetailed,
}) => {
const intl = useIntl()
const AccountMessage = intl.formatMessage({ id: 'field.AccountNumberShort' })
const ShortFlatNumber = intl.formatMessage({ id: 'field.ShortFlatNumber' })
const moneyRender = useMemo(() => {
return getMoneyRender(intl, currencyCode)
}, [currencyCode])
const accountNumber = get(receipt, ['account', 'number'])
const address = get(receipt, ['property', 'address'])
const unitName = get(receipt, ['account', 'unitName'])
const configSize = useContext<SizeType>(ConfigProvider.SizeContext)
const modalTitleMessage = `${AccountMessage} ${accountNumber}`
const title = (
<Space direction={'vertical'} size={4}>
<Typography.Title level={3}>
{modalTitleMessage}
</Typography.Title>
<SubText size={configSize}>
{address}{unitName ? `, ${ShortFlatNumber} ${unitName}` : ''}
</SubText>
</Space>
)
const columns = useServicesTableColumns(isDetailed, currencyCode)
const { significantServices, insignificantServices } = splitServices(receipt)
const ExpandMessage = intl.formatMessage({ id: 'MoreReceiptsWithZeroCharge' }, {
count: insignificantServices.length,
})
const dataSource = formatRows(significantServices, insignificantServices, ExpandMessage)
const [expanded, setExpanded] = useState(false)
const handleRowExpand = () => setExpanded(!expanded)
// TODO (savelevMatthew): Move modal to common width-expandable component?
return (
<>
{isDetailed && <Global styles={WideModalStyles}/>}
<Modal
title={title}
visible={visible}
onOk={() => {
setExpanded(false)
onOk()
}}
onCancel={() => {
setExpanded(false)
onCancel()
}}
footer={null}
centered
className={'services-modal'}
style={{ marginTop:40 }}
>
<Table
bordered
tableLayout={'auto'}
columns={columns}
dataSource={dataSource}
pagination={false}
expandable={{
indentSize: 0,
// eslint-disable-next-line react/display-name
expandIcon: ({ expanded, onExpand, record }) => {
if (record.name !== ExpandMessage) return
if (expanded) return (
<ExpandIconWrapper>
<MinusSquareOutlined onClick={(e) => onExpand(record, e)}/>
</ExpandIconWrapper>
)
return (
<ExpandIconWrapper>
<PlusSquareOutlined onClick={(e) => onExpand(record, e)}/>
</ExpandIconWrapper>
)
},
}}
onExpand={handleRowExpand}
expandedRowKeys={expanded ? [ExpandMessage] : []}
rowKey={(record) => record.name}
onRow={(record) => ({
onClick: () => {
if (record.name === ExpandMessage) {
setExpanded(!expanded)
}
},
})}
summary={(pageData) => {
let totalToPay = 0
pageData.forEach(({ toPay }) => {
totalToPay += parseFloat(toPay || '0')
})
const pointedNumber = totalToPay.toFixed(2)
return (
<Table.Summary.Row>
<Table.Summary.Cell index={0} align={'right'} colSpan={columns.length}>
<Typography.Text strong>
{moneyRender(pointedNumber)}
</Typography.Text>
</Table.Summary.Cell>
</Table.Summary.Row>
)
}}
/>
</Modal>
</>
)
}
Example #22
| Source File: theme.tsx From livepeer-com with MIT License | 4 votes |
|
Reset = () => (
<Global
styles={{
body: {
margin: "0",
},
"h1, h2, h3, h4, h5, h6": {
margin: 0,
fontWeight: 700,
},
h1: {
fontSize: 56,
lineHeight: 1.1,
},
h2: {
fontSize: 48,
lineHeight: 1.1,
},
h3: {
fontSize: 32,
lineHeight: 1.1,
},
h4: {
fontSize: 24,
lineHeight: 1.1,
},
h5: {
fontSize: 16,
lineHeight: 1.1,
},
small: {
fontSize: "100%",
},
a: {
color: "#000",
},
".react-reveal": {
opacity: 0,
},
li: {
marginBottom: "6px",
},
table: {
padding: "0",
},
"table tr": {
borderTop: "1px solid #cccccc",
backgroundColor: "white",
margin: "0",
padding: "0",
},
"table tr:nth-of-type(2n)": {
backgroundColor: "#f8f8f8",
},
"table tr th": {
fontWeight: "bold",
border: "1px solid #cccccc",
textAlign: "left",
margin: "0",
padding: "6px 13px",
},
"table tr td": {
border: "1px solid #cccccc",
textAlign: "left",
margin: "0",
padding: "6px 13px",
},
"table tr th :first-of-type": {
marginTop: 0,
},
"table tr td :first-of-type": {
marginTop: "0",
},
"table tr th :last-of-type": {
marginBottom: "0",
},
"table tr td :last-of-type": {
marginBottom: "0",
},
"img.lazyload:not([src])": {
visibility: "hidden",
},
".lazyload": {
opacity: 0,
},
".lazyloading": {
opacity: 0,
},
".lazyloaded": {
opacity: 1,
transition: "opacity .3s",
},
"#hubspot-messages-iframe-container iframe": {
colorScheme: "auto",
},
}}
/>
)
