@tdesign/site-components 0.0.1 → 0.17.1

package/lib/styles/style.css

@@ -0,0 +1,986 @@
+: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;
+}