import React from 'react'; import { Global, css } from '@emotion/react'; import useSiteToken from '../../hooks/useSiteToken'; import { TinyColor } from '@ctrl/tinycolor'; import ColorStyle from '../common/Color/ColorStyle'; const GlobalStyles = () => { const { token } = useSiteToken(); const { antCls, iconCls } = token; const demoGridColor = token.colorPrimary; return ( <> {/* reset */} {/* common */} {/* markdown */} img { margin: 34px 0; box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35); } .markdown p > img.markdown-inline-image { margin: 0; box-shadow: none; } .markdown h1 { margin-top: 8px; margin-bottom: 20px; color: ${token.colorTextHeading}; font-weight: 500; font-size: 30px; font-family: Avenir, ${token.fontFamily}, sans-serif; line-height: 38px; .subtitle { margin-left: 12px; } } .markdown h2 { font-size: 24px; line-height: 32px; } .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { clear: both; margin: 1.6em 0 0.6em; color: ${token.colorTextHeading}; font-weight: 500; font-family: Avenir, ${token.fontFamily}, sans-serif; } .markdown h3 { font-size: 18px; } .markdown h4 { font-size: 16px; } .markdown h5 { font-size: 14px; } .markdown h6 { font-size: 12px; } .markdown hr { clear: both; height: 1px; margin: 24px 0; background: ${token.colorSplit}; border: 0; } .markdown p, .markdown pre { margin: 1em 0; ${antCls}-row-rtl & { direction: rtl; text-align: right; } } .markdown ul > li { margin-left: 20px; padding-left: 4px; list-style-type: circle; .rtl & { margin-right: 20px; margin-left: 0; padding-right: 4px; padding-left: 0; } &:empty { display: none; } } .markdown ol > li { margin-left: 20px; padding-left: 4px; list-style-type: decimal; ${antCls}-row-rtl & { margin-right: 20px; margin-left: 0; padding-right: 4px; padding-left: 0; } } .markdown ul > li > p, .markdown ol > li > p { margin: 0.2em 0; } .markdown code { margin: 0 1px; padding: 0.2em 0.4em; font-size: 0.9em; background: ${token.siteMarkdownCodeBg}; border: 1px solid ${token.colorSplit}; border-radius: 3px; } .markdown pre { font-family: ${token.codeFamily}; background: ${token.siteMarkdownCodeBg}; border-radius: ${token.borderRadius}px; } .markdown pre code { margin: 0; padding: 0; overflow: auto; color: ${token.colorText}; font-size: ${Math.max(token.fontSize - 1, 12)}px; direction: ltr; text-align: left; background: #f5f5f5; border: none; } .markdown strong, .markdown b { font-weight: 500; } .markdown .dumi-default-source-code { margin: 1em 0; background-color: ${token.siteMarkdownCodeBg}; border-radius: ${token.borderRadius}px; > pre.prism-code { padding: 12px 20px; font-size: 13px; line-height: 2; } } .markdown .dumi-default-table-content > table, .markdown > table { width: 100%; margin: 8px 0 16px; direction: ltr; empty-cells: show; border: 1px solid ${token.colorSplit}; border-collapse: collapse; border-spacing: 0; } .markdown .dumi-default-table-content, .markdown { > table th { color: #5c6b77; font-weight: 500; white-space: nowrap; background: rgba(0, 0, 0, 0.02); } } .markdown .dumi-default-table-content, .markdown { > table th, > table td { padding: 16px 24px; text-align: left; border: 1px solid ${token.colorSplit}; } } .markdown table td > a:not(:last-child) { margin-right: 0 !important; &::after { position: relative !important; } } .markdown blockquote { margin: 1em 0; padding-left: 0.8em; color: ${token.colorTextSecondary}; font-size: 90%; border-left: 4px solid ${token.colorSplit}; .rtl & { padding-right: 0.8em; padding-left: 0; border-right: 4px solid ${token.colorSplit}; border-left: none; } } .markdown blockquote p { margin: 0; } .markdown .anchor { margin-left: 8px; opacity: 0; transition: opacity 0.3s; .rtl & { margin-right: 8px; margin-left: 0; } } .markdown .waiting { color: #ccc; cursor: not-allowed; } .markdown a.edit-button { display: inline-block; margin-left: 8px; text-decoration: none; .rtl & { margin-right: 8px; margin-left: 0; transform: rotateY(180deg); } ${antCls}icon { display: block; color: ${token.colorTextSecondary}; font-size: 16px; transition: all 0.3s; &:hover { color: ${token.colorText}; } } } .markdown h1:hover .anchor, .markdown h2:hover .anchor, .markdown h3:hover .anchor, .markdown h4:hover .anchor, .markdown h5:hover .anchor, .markdown h6:hover .anchor { display: inline-block; opacity: 1; } .markdown > br, .markdown > p > br { clear: both; } .markdown .dumi-default-table { .component-api-table { display: block; td { &:first-child { width: 18%; color: #595959; font-weight: 600; white-space: nowrap; } &:nth-child(2) { width: 55%; } &:nth-child(3) { width: 22%; color: ${token['magenta-7']}; font-size: ${Math.max(token.fontSize - 1, 12)}px; } &:nth-child(4) { width: 15%; font-size: ${Math.max(token.fontSize - 1, 12)}px; } &:nth-child(5) { width: 8%; font-size: ${Math.max(token.fontSize - 1, 12)}px; } &:nth-last-child(3):first-child { width: 38%; } &:nth-last-child(3):first-child ~ td:nth-last-child(2) { width: 70%; } } } } .markdown .dumi-default-table { table { margin: 0; overflow-x: auto; overflow-y: hidden; font-size: ${Math.max(token.fontSize - 1, 12)}px; font-family: ${token.codeFamily}; line-height: ${token.lineHeight}; border: 0; -webkit-overflow-scrolling: touch; th, td { padding: 12px; border-color: ${token.colorSplit}; border-width: 1px 0; &:first-child { border-left: 1px solid ${token.colorSplit}; } &:last-child { border-right: 1px solid ${token.colorSplit}; } } th { padding-top: 14px; border-width: 1px 0 2px; } tbody tr { transition: all 0.3s; &:hover { background: rgba(60, 90, 100, 0.04); } } td { &:first-child { min-width: 58px; } } } hr { margin: 12px 0; } } .grid-demo, [id^='components-grid-demo-'] { .demo-row, .code-box-demo .demo-row { margin-bottom: 8px; overflow: hidden; background-image: linear-gradient( 90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333% ); } ${antCls}-row > div, .code-box-demo ${antCls}-row > div { min-height: 30px; margin-top: 8px; margin-bottom: 8px; color: #fff; text-align: center; border-radius: 0; } .code-box-demo ${antCls}-row > div:not(.gutter-row) { padding: 16px 0; background: ${demoGridColor}; &:nth-child(2n + 1) { background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHex8String()}; } } ${antCls}-row .demo-col, .code-box-demo ${antCls}-row .demo-col { margin-top: 0; margin-bottom: 0; padding: 30px 0; color: ${token.colorWhite}; font-size: 18px; text-align: center; border: none; } ${antCls}-row .demo-col-1 { background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()}; } ${antCls}-row .demo-col-2, .code-box-demo ${antCls}-row .demo-col-2 { background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()}; } ${antCls}-row .demo-col-3, .code-box-demo ${antCls}-row .demo-col-3 { color: #999; background: rgba(255, 255, 255, 0.2); } ${antCls}-row .demo-col-4, .code-box-demo ${antCls}-row .demo-col-4 { background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()}; } ${antCls}-row .demo-col-5, .code-box-demo ${antCls}-row .demo-col-5 { color: #999; background: rgba(255, 255, 255, 0.2); } .code-box-demo .height-100 { height: 100px; line-height: 100px; } .code-box-demo .height-50 { height: 50px; line-height: 50px; } .code-box-demo .height-120 { height: 120px; line-height: 120px; } .code-box-demo .height-80 { height: 80px; line-height: 80px; } } [id='components-grid-demo-playground'], [id='components-grid-demo-gutter'] { > .code-box-demo ${antCls}-row > div { margin-top: 0; margin-bottom: 0; } } // For Changelog .markdown ul${antCls}-timeline { line-height: 2; li${antCls}-timeline-item { margin: 0; padding: 0 0 30px; list-style: none; ${antCls}-timeline-item-content { position: relative; top: -14px; padding-left: 32px; font-size: 14px; > h2 { margin-top: 0; padding-top: 4px; direction: ltr; span { ${antCls}-row-rtl & { float: right; } } } } } li${antCls}-timeline-item:first-child { margin-top: 40px; } } `} /> {/* highlight */} code[class*='language-'], pre[class*='language-'] { background: #f5f5f5; } /* Inline code */ :not(pre) > code[class*='language-'] { padding: 0.1em; white-space: normal; border-radius: 0.3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: #999; } .namespace { opacity: 0.7; } .markdown { .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #f81d22; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #0b8235; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #0b8235; } .token.atrule, .token.attr-value, .token.keyword { color: #008dff; } .token.function { color: #f81d22; } .token.regex, .token.important, .token.variable { color: #e90; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } } `} /> {/* demo */} p { width: 100%; margin: 0.5em 0; padding-right: 25px; font-size: 12px; word-break: break-word; ${antCls}-row-rtl & { padding-right: 0; padding-left: 25px; } } } &.expand &-meta { border-bottom: 1px dashed ${token.colorSplit}; border-radius: 0; } .code-expand-icon { cursor: pointer; } .code-expand-icon-show, .code-expand-icon-hide { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; margin: 0; box-shadow: none; transition: all 0.4s; user-select: none; ${antCls}-row-rtl & { right: 0; left: auto; } } .code-expand-icon-show { opacity: 0.55; pointer-events: auto; &:hover { opacity: 1; } } .code-expand-icon${antCls}-tooltip-open .code-expand-icon-show { opacity: 1; } .code-expand-icon-hide { opacity: 0; pointer-events: none; } .highlight-wrapper { display: none; overflow: auto; border-radius: 0 0 ${token.borderRadius}px ${token.borderRadius}px; &-expand { display: block; } } .highlight { position: relative; pre { margin: 0; padding: 0; background: ${token.colorBgContainer}; } &:not(:first-child) { border-top: 1px dashed ${token.colorSplit}; } } &-actions { display: flex; justify-content: center; padding: 12px 0; border-top: 1px dashed ${token.colorSplit}; opacity: 0.7; transition: opacity 0.3s; &:hover { opacity: 1; } } &-actions > &-code-action { position: relative; display: flex; align-items: center; width: 16px; height: 16px; margin-left: 16px; color: ${token.colorTextSecondary}; cursor: pointer; transition: all 0.24s; ${antCls}-row-rtl & { margin-right: 16px; margin-left: 0; } &:first-child { margin-left: 0; ${antCls}-row-rtl & { margin-right: 0; } } &:hover { color: ${token.colorText}; } } &-code-copy { width: 14px; height: 14px; font-size: 14px; text-align: center; background: ${token.colorBgContainer}; cursor: pointer; transition: transform 0.24s; &:hover { transform: scale(1.1); } &${iconCls}-check { color: ${token['green-6']} !important; font-weight: bold; } } &-codepen { width: 14px; height: 14px; overflow: hidden; border: 0; cursor: pointer; } &-riddle { width: 14px; height: 14px; overflow: hidden; border: 0; cursor: pointer; } &-codesandbox { width: 16px; height: 16px; overflow: hidden; border: 0; cursor: pointer; &:hover { opacity: 1; } } .highlight-wrapper:hover &-code-copy, .highlight-wrapper:hover &-codepen, .highlight-wrapper:hover &-codesandbox, .highlight-wrapper:hover &-riddle { opacity: 1; } pre { width: auto; margin: 0; code { background: ${token.colorBgContainer}; border: none; box-shadow: unset; } } &-debug { border-color: ${token['purple-3']}; } &-debug &-title a { color: ${token['purple-6']}; } } .demo-wrapper { position: relative; } .all-code-box-controls { position: absolute; top: -32px; inset-inline-end: 0; } ${antCls}-row-rtl { #components-tooltip-demo-placement, #components-popover-demo-placement, #components-popconfirm-demo-placement { .code-box-demo { direction: ltr; } } } `} /> {/* icon */} {/* iconPickSearcher */} img { max-width: 50px; max-height: 50px; } } .icon-pic-search-result { min-height: 50px; padding: 0 10px; > .result-tip { padding: 10px 0; color: ${token.colorTextSecondary}; } > table { width: 100%; .col-icon { width: 80px; padding: 10px 0; > ${iconCls} { font-size: 30px; :hover { color: ${token.colorLinkHover}; } } } } } `} /> {/* Browser mockup */} * { display: block; } `} /> {/* nprogress */} {/* Responsive */} .markdown > * { width: 100% !important; } } .main-wrapper { width: 100%; margin: 0; border-radius: 0; } .prev-next-nav { width: ~'calc(100% - 32px)'; margin-left: 16px; .ant-row-rtl & { margin-right: 16px; margin-left: 64px; } } .drawer { .ant-menu-inline .ant-menu-item::after, .ant-menu-vertical .ant-menu-item::after { right: auto; left: 0; } } /** home 区块 **/ .home-page-wrapper { .page { h2 { margin: 80px auto 64px; } } .parallax-bg { display: none; } } .banner { display: block; height: 632px; &-bg-wrapper { display: none; } .img-wrapper, .text-wrapper { display: inline-block; width: 100%; min-width: unset; max-width: unset; margin: auto; text-align: center; } .img-wrapper { position: initial; margin-top: 20px; text-align: center; svg { width: 100%; max-width: 260px; height: auto; margin: 0 auto; } } .text-wrapper { min-height: 200px; margin-top: 32px; padding: 0; h1 { display: none; } p { color: #314659; font-size: 14px; line-height: 28px; } .banner-btns { display: block; min-width: 100%; white-space: nowrap; text-align: center; .banner-btn { padding: 0 20px; font-size: 14px; } } .banner-promote { min-width: 100%; margin-top: 32px; .ant-divider { display: none; } a { font-size: 14px; white-space: nowrap; img { width: 20px; } } } } } .page1 { min-height: 1300px; .ant-row { margin: 24px auto 64px; > div { margin-bottom: 48px; } } } .page2 { min-height: 840px; background: ${token.colorBgContainer}; &-content { box-shadow: none; } &-components { display: none; } &-product { min-height: auto; padding: 0 16px; .product-block { margin-bottom: 34px; padding-bottom: 35px; border-bottom: 1px solid ${token.colorSplit}; &:last-child { margin-bottom: 32px; border-bottom: none; .block-text-wrapper { height: auto; } } .block-image-wrapper { height: 88px; img { height: 100%; } } .block-text-wrapper { padding-bottom: 0; border-bottom: none; h4 { margin-bottom: 4px; font-size: 18px; line-height: 24px; } p { margin-bottom: 8px; font-size: 12px; line-height: 20px; } a { line-height: 20px; } .components-button-wrapper { margin-top: 16px; font-size: 12px; a { display: block; } } a.more-mobile-react, a.more-mobile-angular { margin-top: 0; color: ${token.colorLink}; } a.more-mobile-react:hover, a.more-mobile-angular:hover { color: #40a9ff; } } } } } .page3 { min-height: 688px; background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat; background-size: cover; .ant-row { margin: 0 8px; } .page3-block { margin-bottom: 32px; padding: 24px; background: ${token.colorBgContainer}; border-radius: 4px; box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3); &:nth-child(2) { .page3-img-wrapper img { display: block; width: 70%; margin: auto; } } p { font-size: 12px; } .page3-img-wrapper { width: 20%; img { width: 100%; } } .page3-text-wrapper { width: 80%; max-width: initial; margin: 0; padding-left: 16px; } } } } `} /> {/* Preview Image */} ); }; export default GlobalStyles;