tdesign-site-components/lib/styles/style.css

### 🏗️ Develop

:root,
:root[theme-mode="light"] {
  --header-height: 64px;
  --doc-header-height: 252px;
  --aside-width: 260px;
  --footer-height: 388px;
  --border-radius: 3px;
  --theme-block-light-display: block;
  --theme-block-dark-display: none;
  --content-max-width: 960px;
  --content-padding-right: 264px;
  --content-padding-left-right: 24px;
  --header-box-shadow: inset 0 -1px 0 #e7e7e7;
  --footer-box-shadow: inset 0 1px 0 #e7e7e7;
  --aside-box-shadow: inset -1px 0 0 #e7e7e7;
  --portal-box-shadow: inset 1px 0px 0px #dcdcdc, inset -1px 0px 0px #dcdcdc, inset 0px -1px 0px #dcdcdc, inset 0px 1px 0px #dcdcdc;
  --table-box-shadow: inset 0px 1px 0px #e7e7e7, inset 0px -1px 0px #e7e7e7, inset -1px 0px 0px #e7e7e7, inset 1px 0px 0px #e7e7e7;
  --shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
  --shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
  --shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
  --shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
  --shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
  --shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
  --shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
  --anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
  --anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
  --anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
  --anim-duration-base: 0.2s;
  --anim-duration-moderate: 0.24s;
  --anim-duration-slow: 0.28s;
  --bg-color-page: #f5f5f5;
  --bg-color-secondarypage: #f5f5f5;
  --bg-color-demo: #fff;
  --bg-color-demo-secondary: #eee;
  --bg-color-code: #f3f3f3;
  --bg-color-code-linear: linear-gradient(180deg, #f3f3f3 0%, rgba(243, 243, 243, 0) 100%);
  --bg-color-footer: #eee;
  --bg-color-secondaryfooter: #e7e7e7;
  --bg-color-docpage: #fff;
  --bg-color-container: #fff;
  --bg-color-container-transparent: rgba(255, 255, 255, 0.9);
  --bg-color-secondarycontainer: #f5f5f5;
  --bg-color-component: #eee;
  --bg-color-component-transparent: rgba(238, 238, 238, 0.8);
  --bg-color-tag: #eee;
  --bg-color-tab: #eee;
  --bg-color-table: #fff;
  --bg-color-thead: #dcdcdc;
  --bg-color-navigation: #fff;
  --bg-color-card: #fff;
  --component-stroke: #eee;
  --component-border: #e7e7e7;
  --bg-color-demo-hover: rgba(0, 0, 0, 0.05);
  --bg-color-demo-select: rgba(0, 0, 0, 0.1);
  --bg-color-code-hover: #e7e7e7;
  --bg-color-code-select: #dcdcdc;
  --bg-color-container-hover: #f3f3f3;
  --bg-color-container-select: #eee;
  --bg-color-component-hover: #dcdcdc;
  --bg-color-component-select: #a6a6a6;
  --bg-color-tab-select: #fff;
  --bg-color-table-hover: #f5f5f5;
  --bg-color-navigation-hover: #f3f3f3;
  --bg-color-navigation-select: #e7e7e7;
  --bg-color-card-hover: #f3f3f3;
  --bg-color-scroll: rgba(0, 0, 0, 0.14);
  --bg-color-component-disabled: #eee;
  --text-primary: rgba(0, 0, 0, 0.9);
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-placeholder: rgba(0, 0, 0, 0.4);
  --text-disabled: rgba(0, 0, 0, 0.26);
  --text-anti: #fff;
  --text-interactive: var(--td-brand-color);
  --brand-main: var(--td-brand-color);
  --brand-main-hover: var(--td-brand-color-hover, var(--td-brand-color-active));
  --brand-main-focus: var(--td-brand-color-focus);
  --brand-main-disabled: var(--td-brand-color-disabled);
  --brand-main-light: rgba(0, 82, 217, 0.1);
  --error-1: #fff0ed;
  --error-8: #881f1c;
  --error-main: #d54941;
  --error-main-hover: #f6685d;
  --error-main-disabled: #ffb9b0;
  --error-main-light: rgba(213, 73, 65, 0.1);
  --warning-main: #e37318;
  --warning-main-hover: #fa9550;
  --warning-main-disabled: #ffb98c;
  --warning-main-light: rgba(227, 115, 24, 0.1);
  --success-main: #2ba471;
  --success-main-disabled: rgba(43, 164, 113, 0.25);
  --success-main-light: rgba(43, 164, 113, 0.1);
  --bg-color-theme-transparent: rgba(238, 238, 238, 0.6);
  --bg-color-theme-secondary: #f3f3f3;
  --bg-color-theme-surface: #fff;
  --bg-color-theme-tertiary: #e7e7e7;
  --theme-component-border: rgba(0, 0, 0, 0.06);
  --bg-color-theme-radio: #e7e7e7;
  --bg-color-theme-radio-active: #fff;
}
@media screen and (max-width: 960px) {
  :root,
  :root[theme-mode="light"] {
    --content-padding-right: 0;
  }
}
@media screen and (min-width: 1200px) {
  :root,
  :root[theme-mode="light"] {
    --content-padding-left-right: 48px;
  }
}
@media screen and (min-width: 1920px) {
  :root,
  :root[theme-mode="light"] {
    --content-max-width: 1200px;
  }
}
:root[theme-mode="dark"] {
  background: var(--bg-color-page);
  --theme-block-light-display: none;
  --theme-block-dark-display: block;
  --header-box-shadow: inset 0 -1px 0 #4b4b4b;
  --footer-box-shadow: inset 0 1px 0 #4b4b4b;
  --aside-box-shadow: inset -1px 0 0 #4b4b4b;
  --portal-box-shadow: inset 1px 0px 0px #5e5e5e, inset -1px 0px 0px #5e5e5e, inset 0px -1px 0px #5e5e5e, inset 0px 1px 0px #5e5e5e;
  --table-box-shadow: inset 0px 1px 0px #4b4b4b, inset 0px -1px 0px #4b4b4b, inset -1px 0px 0px #4b4b4b, inset 1px 0px 0px #4b4b4b;
  --shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
  --shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
  --shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
  --shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
  --shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
  --shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
  --shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
  --bg-color-page: #242424;
  --bg-color-secondarypage: #181818;
  --bg-color-demo: #181818;
  --bg-color-demo-secondary: #181818;
  --bg-color-code: #2c2c2c;
  --bg-color-code-linear: linear-gradient(180deg, #2c2c2c 0%, rgba(44, 44, 44, 0) 100%);
  --bg-color-footer: #181818;
  --bg-color-secondaryfooter: #101010;
  --bg-color-docpage: #242424;
  --bg-color-container: #242424;
  --bg-color-container-transparent: rgba(44, 44, 44, 0.9);
  --bg-color-secondarycontainer: #383838;
  --bg-color-component: #383838;
  --bg-color-component-transparent: rgba(75, 75, 75, 0.9);
  --bg-color-tag: #4b4b4b;
  --bg-color-tab: #383838;
  --bg-color-table: #242424;
  --bg-color-thead: #4b4b4b;
  --bg-color-navigation: #2c2c2c;
  --bg-color-card: #383838;
  --component-stroke: #383838;
  --component-border: #4b4b4b;
  --bg-color-demo-hover: rgba(255, 255, 255, 0.05);
  --bg-color-demo-select: rgba(255, 255, 255, 0.1);
  --bg-color-code-hover: #383838;
  --bg-color-code-select: #4b4b4b;
  --bg-color-container-hover: #383838;
  --bg-color-container-select: #4b4b4b;
  --bg-color-component-hover: #5e5e5e;
  --bg-color-component-select: #777;
  --bg-color-tab-select: #4b4b4b;
  --bg-color-table-hover: #2c2c2c;
  --bg-color-navigation-hover: #383838;
  --bg-color-navigation-select: #4b4b4b;
  --bg-color-card-hover: #4b4b4b;
  --bg-color-scroll: rgba(255, 255, 255, 0.14);
  --bg-color-component-disabled: #242424;
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-placeholder: rgba(255, 255, 255, 0.35);
  --text-disabled: rgba(255, 255, 255, 0.22);
  --text-anti: #fff;
  --brand-main-light: rgba(69, 130, 230, 0.2);
  --error-1: #472324;
  --error-8: #ec888e;
  --error-main: #c64751;
  --error-main-hover: #a03f46;
  --error-main-disabled: #951114;
  --error-main-light: rgba(227, 77, 89, 0.1);
  --warning-main: #cf6e2d;
  --warning-main-hover: #a75d2b;
  --warning-main-disabled: #733c23;
  --warning-main-light: rgba(237, 123, 47, 0.1);
  --success-main: #059465;
  --success-main-hover: #0d7a55;
  --success-main-disabled: rgba(0, 168, 112, 0.25);
  --success-main-light: rgba(0, 168, 112, 0.1);
  --bg-color-theme-transparent: rgba(44, 44, 44, 0.6);
  --bg-color-theme-secondary: #424242;
  --bg-color-theme-surface: #4d4d4d;
  --bg-color-theme-tertiary: #5e5e5e;
  --theme-component-border: rgba(255, 255, 255, 0.06);
  --bg-color-theme-radio: #424242;
  --bg-color-theme-radio-active: #5e5e5e;
}
:root[theme-mode="dark"] img {
  filter: brightness(0.85);
}
html,
body {
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
  font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  width: 0;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: transparent;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--bg-color-page);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: var(--bg-color-scroll);
}
ul,
dl,
ol {
  margin: 0;
  padding: 0;
  padding-left: 1.2em;
  line-height: 22px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
@font-face {
  font-family: TencentSansW7;
  src: url("../font/tencent-w7.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: TCloudNumber;
  src: url("../font/TCloudNumber.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* stylelint-disable */
@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}
#nprogress .bar {
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(to right, #0062fa 0%, #ffbd2e 25%, #ff454f 50%, #ffbd2e 75%, #0062fa 100%);
  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient 6s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1;
  transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: none;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}
#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}
:root .__light__,
:root[theme-mode="light"] .__light__ {
  display: block;
}
:root .__dark__,
:root[theme-mode="light"] .__dark__ {
  display: none;
}
:root[theme-mode="dark"] .__light__ {
  display: none;
}
:root[theme-mode="dark"] .__dark__ {
  display: block;
}
div[name="DOC"] img,
div[name="API"] img,
div[name="DESIGN"] img {
  max-width: 100%;
  margin: 16px 0 8px;
}
div[name="DOC"] em,
div[name="API"] em,
div[name="DESIGN"] em {
  font-size: 12px;
  line-height: 20px;
}
div[name="DOC"] blockquote,
div[name="DEMO"] blockquote,
div[name="API"] blockquote,
div[name="DESIGN"] blockquote {
  display: block;
  overflow: auto;
  border-left: 2px solid var(--component-border);
  background: var(--bg-color-code);
  color: var(--text-primary);
  padding: 12px 12px 12px 24px;
  margin: 16px 0;
}
div[name="DOC"] > ul:not([class]) li,
div[name="DEMO"] > ul:not([class]) li,
div[name="API"] > ul:not([class]) li,
div[name="DESIGN"] > ul:not([class]) li,
div[name="DOC"] > ol:not([class]) li,
div[name="DEMO"] > ol:not([class]) li,
div[name="API"] > ol:not([class]) li,
div[name="DESIGN"] > ol:not([class]) li {
  margin-top: 4px;
}
div[name="DOC"] > h5:not([class]),
div[name="DEMO"] > h5:not([class]),
div[name="API"] > h5:not([class]),
div[name="DESIGN"] > h5:not([class]) {
  font-weight: 500;
}
div[name="DOC"] > p:not([class]),
div[name="DEMO"] > p:not([class]),
div[name="API"] > p:not([class]),
div[name="DESIGN"] > p:not([class]) {
  margin: 16px 0 8px;
}
div[name="DOC"] > :first-child,
div[name="DEMO"] > :first-child,
div[name="API"] > :first-child,
div[name="DESIGN"] > :first-child {
  margin-top: 0;
}
div[name="DOC"] pre,
div[name="DEMO"] pre,
div[name="API"] pre,
div[name="DESIGN"] pre {
  color: var(--text-primary);
  padding: 20px 24px;
  border-radius: 6px;
  border: 1px solid var(--component-border);
  background: var(--bg-color-code);
  overflow: auto;
  position: relative;
}
div[name="DOC"] pre:hover::-webkit-scrollbar-thumb,
div[name="DEMO"] pre:hover::-webkit-scrollbar-thumb,
div[name="API"] pre:hover::-webkit-scrollbar-thumb,
div[name="DESIGN"] pre:hover::-webkit-scrollbar-thumb {
  background-color: var(--bg-color-scroll);
}
div[name="DOC"] pre::-webkit-scrollbar-corner,
div[name="DEMO"] pre::-webkit-scrollbar-corner,
div[name="API"] pre::-webkit-scrollbar-corner,
div[name="DESIGN"] pre::-webkit-scrollbar-corner {
  width: 0;
}
div[name="DOC"] pre::-webkit-scrollbar,
div[name="DEMO"] pre::-webkit-scrollbar,
div[name="API"] pre::-webkit-scrollbar,
div[name="DESIGN"] pre::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: transparent;
}
div[name="DOC"] pre::-webkit-scrollbar-thumb,
div[name="DEMO"] pre::-webkit-scrollbar-thumb,
div[name="API"] pre::-webkit-scrollbar-thumb,
div[name="DESIGN"] pre::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: transparent;
}
div[name="DOC"] *:not(pre) > code,
div[name="DEMO"] *:not(pre) > code,
div[name="API"] *:not(pre) > code,
div[name="DESIGN"] *:not(pre) > code {
  margin: 0 2px;
  color: var(--error-8);
  background: var(--error-1);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  word-break: break-word;
}
div[name="DOC"] code,
div[name="DEMO"] code,
div[name="API"] code,
div[name="DESIGN"] code,
div[name="DOC"] code *,
div[name="DEMO"] code *,
div[name="API"] code *,
div[name="DESIGN"] code * {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
}
div[name="DOC"] a:not([class]),
div[name="DEMO"] a:not([class]),
div[name="API"] a:not([class]),
div[name="DESIGN"] a:not([class]) {
  line-height: 24px;
  text-decoration: none;
  color: var(--text-interactive);
}
div[name="DOC"] > table,
div[name="DEMO"] > table,
div[name="API"] > table,
div[name="DESIGN"] > table {
  width: 100%;
  background: var(--bg-color-table);
  border-radius: 6px;
  border-collapse: collapse;
  overflow: hidden;
  margin: 16px 0;
  box-shadow: var(--table-box-shadow);
}
div[name="DOC"] > table thead,
div[name="DEMO"] > table thead,
div[name="API"] > table thead,
div[name="DESIGN"] > table thead {
  background: var(--bg-color-tag);
  font-weight: normal;
}
div[name="DOC"] > table thead th,
div[name="DEMO"] > table thead th,
div[name="API"] > table thead th,
div[name="DESIGN"] > table thead th {
  border: 0;
}
div[name="DOC"] > table thead tr:hover,
div[name="DEMO"] > table thead tr:hover,
div[name="API"] > table thead tr:hover,
div[name="DESIGN"] > table thead tr:hover {
  background: var(--bg-color-tag);
}
div[name="DOC"] > table tr,
div[name="DEMO"] > table tr,
div[name="API"] > table tr,
div[name="DESIGN"] > table tr {
  transition: all 0.2s;
}
div[name="DOC"] > table tr:hover,
div[name="DEMO"] > table tr:hover,
div[name="API"] > table tr:hover,
div[name="DESIGN"] > table tr:hover {
  background-color: var(--bg-color-table-hover);
}
div[name="DOC"] > table td:first-child,
div[name="DEMO"] > table td:first-child,
div[name="API"] > table td:first-child,
div[name="DESIGN"] > table td:first-child {
  font-weight: bold;
}
div[name="DOC"] > table td:nth-child(1),
div[name="DEMO"] > table td:nth-child(1),
div[name="API"] > table td:nth-child(1),
div[name="DESIGN"] > table td:nth-child(1) {
  font-weight: bold;
}
div[name="DOC"] > table td:nth-child(4),
div[name="DEMO"] > table td:nth-child(4),
div[name="API"] > table td:nth-child(4),
div[name="DESIGN"] > table td:nth-child(4) {
  word-break: break-all;
}
div[name="DOC"] > table th,
div[name="DEMO"] > table th,
div[name="API"] > table th,
div[name="DESIGN"] > table th,
div[name="DOC"] > table td,
div[name="DEMO"] > table td,
div[name="API"] > table td,
div[name="DESIGN"] > table td {
  padding: 16px;
  line-height: 22px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--component-stroke);
}
div[name="DOC"] > table th,
div[name="DEMO"] > table th,
div[name="API"] > table th,
div[name="DESIGN"] > table th {
  white-space: nowrap;
}
div[name="DOC"] nav + h1,
div[name="DEMO"] nav + h1,
div[name="API"] nav + h1,
div[name="DESIGN"] nav + h1,
div[name="DOC"] nav + h2,
div[name="DEMO"] nav + h2,
div[name="API"] nav + h2,
div[name="DESIGN"] nav + h2,
div[name="DOC"] nav + h3,
div[name="DEMO"] nav + h3,
div[name="API"] nav + h3,
div[name="DESIGN"] nav + h3,
div[name="DOC"] nav + h4,
div[name="DEMO"] nav + h4,
div[name="API"] nav + h4,
div[name="DESIGN"] nav + h4 {
  margin-top: 0;
}
div[name="DOC"] > h1,
div[name="DEMO"] > h1,
div[name="API"] > h1,
div[name="DESIGN"] > h1 {
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  margin-bottom: 24px;
}
div[name="DOC"] > h2,
div[name="DEMO"] > h2,
div[name="API"] > h2,
div[name="DESIGN"] > h2 {
  font-weight: bold;
  font-size: 28px;
  line-height: 36px;
  margin: 64px 0 24px;
  display: flex;
  align-items: center;
}
div[name="DOC"] > h2 .tdesign-header-anchor,
div[name="DEMO"] > h2 .tdesign-header-anchor,
div[name="API"] > h2 .tdesign-header-anchor,
div[name="DESIGN"] > h2 .tdesign-header-anchor,
div[name="DOC"] > h2 .header-anchor,
div[name="DEMO"] > h2 .header-anchor,
div[name="API"] > h2 .header-anchor,
div[name="DESIGN"] > h2 .header-anchor {
  width: 32px;
  height: 32px;
  background-image: url(../images/link.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-left: 8px;
  font-size: 0;
}
div[name="DOC"] > h2:hover a,
div[name="DEMO"] > h2:hover a,
div[name="API"] > h2:hover a,
div[name="DESIGN"] > h2:hover a {
  opacity: 1;
}
div[name="DOC"] > h3,
div[name="DEMO"] > h3,
div[name="API"] > h3,
div[name="DESIGN"] > h3 {
  font-weight: bold;
  font-size: 20px;
  line-height: 28px;
  margin: 48px 0 8px;
  display: flex;
  align-items: center;
  white-space: pre-wrap;
}
div[name="DOC"] > h3 .tdesign-header-anchor,
div[name="DEMO"] > h3 .tdesign-header-anchor,
div[name="API"] > h3 .tdesign-header-anchor,
div[name="DESIGN"] > h3 .tdesign-header-anchor,
div[name="DOC"] > h3 .header-anchor,
div[name="DEMO"] > h3 .header-anchor,
div[name="API"] > h3 .header-anchor,
div[name="DESIGN"] > h3 .header-anchor {
  width: 24px;
  height: 24px;
  background-image: url(../images/link.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-left: 8px;
  font-size: 0;
}
div[name="DOC"] > h3:hover a,
div[name="DEMO"] > h3:hover a,
div[name="API"] > h3:hover a,
div[name="DESIGN"] > h3:hover a {
  opacity: 1;
}
div[name="DOC"] > h4,
div[name="DEMO"] > h4,
div[name="API"] > h4,
div[name="DESIGN"] > h4 {
  font-size: 16px;
  line-height: 24px;
  margin: 32px 0 8px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
div[name="DOC"] > h4 .tdesign-header-anchor,
div[name="DEMO"] > h4 .tdesign-header-anchor,
div[name="API"] > h4 .tdesign-header-anchor,
div[name="DESIGN"] > h4 .tdesign-header-anchor,
div[name="DOC"] > h4 .header-anchor,
div[name="DEMO"] > h4 .header-anchor,
div[name="API"] > h4 .header-anchor,
div[name="DESIGN"] > h4 .header-anchor {
  width: 20px;
  height: 20px;
  background-image: url(../images/link.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-left: 8px;
  font-size: 0;
}
div[name="DOC"] > h4:hover a,
div[name="DEMO"] > h4:hover a,
div[name="API"] > h4:hover a,
div[name="DESIGN"] > h4:hover a {
  opacity: 1;
}
div[name="DOC"] > h5,
div[name="DEMO"] > h5,
div[name="API"] > h5,
div[name="DESIGN"] > h5 {
  font-size: 14px;
  line-height: 22px;
  margin: 8px 0 16px;
  font-weight: normal;
}
div[name="DOC"] > h5 .tdesign-header-anchor,
div[name="DEMO"] > h5 .tdesign-header-anchor,
div[name="API"] > h5 .tdesign-header-anchor,
div[name="DESIGN"] > h5 .tdesign-header-anchor,
div[name="DOC"] > h5 .header-anchor,
div[name="DEMO"] > h5 .header-anchor,
div[name="API"] > h5 .header-anchor,
div[name="DESIGN"] > h5 .header-anchor {
  display: none;
}
div[name="DOC"] > p,
div[name="DEMO"] > p,
div[name="API"] > p,
div[name="DESIGN"] > p {
  font-size: 14px;
  line-height: 22px;
  color: var(--text-primary);
}
div[name="DOC"] hr,
div[name="DEMO"] hr,
div[name="API"] hr,
div[name="DESIGN"] hr {
  opacity: 0;
  margin: 16px 0;
}
div[name="DOC"] .tdesign-header-anchor,
div[name="DEMO"] .tdesign-header-anchor,
div[name="API"] .tdesign-header-anchor,
div[name="DESIGN"] .tdesign-header-anchor,
div[name="DOC"] .header-anchor,
div[name="DEMO"] .header-anchor,
div[name="API"] .header-anchor,
div[name="DESIGN"] .header-anchor {
  text-decoration: none;
  transition: opacity 0.3s;
  opacity: 0;
}
.tdesign-toc_container {
  width: 240px;
  padding-right: 10px;
  max-height: 480px;
  max-height: min(calc(100vh - 550px), 480px);
  overflow: hidden auto;
  position: absolute;
  right: 24px;
  top: 316px;
  box-sizing: border-box;
}
@media screen and (max-width: 960px) {
  .tdesign-toc_container {
    display: none;
  }
}
.tdesign-toc_container::-webkit-scrollbar-corner {
  width: 0;
}
.tdesign-toc_container::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: transparent;
}
.tdesign-toc_container::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: var(--bg-color-scroll);
}
.tdesign-toc_container .tdesign-toc_list {
  padding-left: 0;
  font-size: 12px;
  line-height: 20px;
  list-style: none;
  border-left: 1px solid var(--component-stroke);
}
.tdesign-toc_container .tdesign-toc_list .tdesign-toc_list_item {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.tdesign-toc_container .tdesign-toc_list .tdesign-toc_list_item .tdesign-toc_list {
  border-left: 0;
  text-indent: 16px;
}
.tdesign-toc_container .tdesign-toc_list .tdesign-toc_list_item_a {
  margin-left: -1px;
  padding-left: 16px;
  margin-bottom: 4px;
  overflow: hidden;
  color: var(--text-secondary);
  display: block;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 1px solid transparent;
}
.tdesign-toc_container .tdesign-toc_list .tdesign-toc_list_item_a:hover {
  color: var(--text-primary);
}
.tdesign-toc_container .tdesign-toc_list .tdesign-toc_list_item_a.active {
  color: var(--brand-main);
  border-left: 1px solid var(--brand-main);
}
div[name="DESIGN"] h5 + .legend {
  margin-top: -16px;
}
div[name="DESIGN"] img {
  display: block;
  border-radius: 6px;
  border: 1px solid var(--component-border);
}
div[name="DESIGN"] img.tag {
  margin: 0;
  width: 25%;
  max-width: 60px;
  border: 0;
}
div[name="DESIGN"] .legend {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
div[name="DESIGN"] .legend .item {
  width: calc(50% - 12px);
}
div[name="DOC"] image {
  margin: 0;
  border-radius: 6px;
  border: 1px solid var(--component-stroke);
}
div[name="DOC"] h3 .tag {
  color: var(--text-secondary);
  padding: 0 12px;
  border-radius: 3px;
  background: var(--component-border);
  margin-left: 8px;
  font-style: normal;
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
}
div[name="DOC"] .image-group {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 16px;
}
div[name="DOC"] .image-wrapper {
  background: var(--bg-color-code);
  border-radius: 6px;
  padding: 12px;
  box-sizing: border-box;
}
@media screen and (min-width: 1440px) {
  div[name="DOC"] .image-wrapper {
    width: calc((100% - 48px) / 4);
  }
}
@media screen and (min-width: 750px) and (max-width: 1439px) {
  div[name="DOC"] .image-wrapper {
    width: calc((100% - 32px) / 3);
  }
}
@media screen and (max-width: 749px) {
  div[name="DOC"] .image-wrapper {
    width: calc((100% - 16px) / 2);
  }
}
div[name="DOC"] .image-wrapper .item {
  background: var(--bg-color-card);
  border-radius: 3px;
  padding: 12px 16px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.24s cubic-bezier(0.38, 0, 0.24, 1), box-shadow 0.24s linear, opacity 0.24s linear;
}
div[name="DOC"] .image-wrapper .item:hover {
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0px 6px 30px 5px rgba(0, 0, 0, 0.05), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 8px 10px -5px rgba(0, 0, 0, 0.08);
}
div[name="DOC"] .image-wrapper .item:hover .name {
  color: var(--text-primary);
}
div[name="DOC"] .image-wrapper .item img {
  margin: 8px 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  filter: none;
}
div[name="DOC"] .image-wrapper .item .name {
  line-height: 22px;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  transition: all 0.2s linear;
}
@media screen and (max-width: 960px) {
  div[name='API'] {
    overflow-x: auto;
  }
  div[name='API'] table {
    width: 225%;
  }
}
div[name="DOC"].timeline {
  padding-left: 32px;
  position: relative;
  overflow: hidden;
}
div[name="DOC"].timeline::after {
  content: '';
  position: absolute;
  top: 24px;
  left: 3px;
  width: 2px;
  height: 100%;
  background: var(--brand-main);
}
div[name="DOC"].timeline h2 {
  position: relative;
}
div[name="DOC"].timeline h2 td-code,
div[name="DOC"].timeline h2 code {
  padding: 2px 12px;
  border-radius: 3px;
  background: var(--bg-color-tag);
  margin-left: 24px;
  color: var(--text-primary);
  font-size: 20px;
}
div[name="DOC"].timeline h2::before {
  content: '';
  position: absolute;
  left: -32px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--brand-main);
  background: var(--bg-color-docpage);
  outline: 8px solid var(--bg-color-docpage);
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 10;
}
div[name="DOC"].timeline h2:last-of-type::after {
  content: '';
  position: absolute;
  top: 30px;
  left: -32px;
  z-index: 10;
  width: 8px;
  height: 9999px;
  background: var(--bg-color-docpage);
}
div[name="DOC"].timeline h3 {
  font-size: 20px;
  line-height: 28px;
}
@keyframes light-to-dark {
  from {
    clip-path: polygon(0 0, 0 0, calc(0.14054083 * -100vh) 100%, calc(0.14054083 * -100vh) 100%);
  }
  to {
    clip-path: polygon(0 0, calc((0.14054083 * 100vh) + 100%) 0, 100% 100%, calc(0.14054083 * -100vh) 100%);
  }
}
@keyframes dark-to-light {
  from {
    clip-path: polygon(calc((0.14054083 * 100vh) + 100%) 0, calc((0.14054083 * 100vh) + 100%) 0, 100% 100%, 100% 100%);
  }
  to {
    clip-path: polygon(0 0, calc((0.14054083 * 100vh) + 100%) 0, 100% 100%, calc(0.14054083 * -100vh) 100%);
  }
}
:root::view-transition-group(root) {
  animation-duration: 1s;
}
:root::view-transition-new(root),
:root::view-transition-old(root) {
  mix-blend-mode: normal;
}
:root::view-transition-old(root),
:root[theme-mode='dark']::view-transition-old(root) {
  animation: none;
}
:root::view-transition-new(root) {
  animation-name: dark-to-light;
}
:root[theme-mode='dark']::view-transition-new(root) {
  animation-name: light-to-dark;
}