ds-markdown/es/index.css

> 🚀 React Markdown 打字动画组件，提供现代聊天界面效果

:root {
  --ds-rgb-neutral-50: 250 250 250;
  --ds-rgb-neutral-100: 245 245 245;
  --ds-rgb-neutral-150: 237 237 237;
  --ds-rgb-neutral-200: 229 229 229;
  --ds-rgb-neutral-250: 220 220 220;
  --ds-rgb-neutral-300: 212 212 212;
  --ds-rgb-neutral-350: 187 187 187;
  --ds-rgb-neutral-400: 163 163 163;
  --ds-rgb-neutral-450: 139 139 139;
  --ds-rgb-neutral-500: 115 115 115;
  --ds-rgb-neutral-550: 98 98 98;
  --ds-rgb-neutral-600: 82 82 82;
  --ds-rgb-neutral-650: 73 73 73;
  --ds-rgb-neutral-700: 64 64 64;
  --ds-rgb-neutral-750: 51 51 51;
  --ds-rgb-neutral-800: 38 38 38;
  --ds-rgb-neutral-850: 30 30 30;
  --ds-rgb-neutral-900: 23 23 23;
  --ds-rgb-neutral-950: 10 10 10;
  --ds-rgb-blue-500: 59 130 246;
  --ds-rgb-label-1: var(--ds-rgb-neutral-700);
}
.ds-markdown {
  --ds-font-family-code: Menlo, 'Roboto Mono', 'Courier New', Courier, monospace, 'Inter', sans-serif;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Oxygen, Open Sans, sans-serif;
}
.ds-markdown {
  --ds-rgb-primary: var(--ds-rgb-blue-500);
  --ds-rgb-label-1: var(--ds-rgb-neutral-700);
  --ds-rgb-label-2: var(--ds-rgb-neutral-450);
  --ds-rgb-label-3: var(--ds-rgb-neutral-400);
  --dsr-border-1: rgb(var(--ds-rgb-neutral-350));
  --dsr-border-2: rgb(var(--ds-rgb-neutral-200));
  --ds-button-hover-color: rgba(0, 0, 0, 0.04);
  --ds-md-inline-code-color: #ececec;
  --dsr-bg: #ffffff;
  --ds-thinking-border-color: #e5e5e5;
}
.ds-markdown.ds-markdown-dark {
  --ds-rgb-label-1: var(--ds-rgb-neutral-50);
  --ds-rgb-label-2: var(--ds-rgb-neutral-400);
  --dsr-border-2: rgb(var(--ds-rgb-neutral-600));
  --ds-button-hover-color: rgba(255, 255, 255, 0.04);
  --ds-md-inline-code-color: #424242;
  --dsr-bg: #292a2d;
  --ds-thinking-border-color: #4e4e56;
}
.ds-markdown {
  --ds-font-size-m: 14px;
  --ds-font-size-xsp: 11px;
  --ds-line-height-m: 25px;
  --ds-transition-duration: 0.2s;
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-rgba-transparent: 255 255 255 / 0;
  --ds-rgb-link: var(--ds-rgb-primary);
  --ds-input-height-l: 44px;
  --ds-input-height-m: 34px;
  --ds-input-height-s: 30px;
  --ds-input-height-xs: 26px;
}
.ds-markdown.apple {
  --ds-font-weight-strong: 500;
}
.ds-markdown {
  --ds-md-zoom: 1.143;
  --ds-md-font-size: calc(var(--ds-md-zoom) * var(--ds-font-size-m));
  --ds-md-line-height: calc(var(--ds-md-zoom) * var(--ds-line-height-m));
  font-size: var(--ds-md-font-size);
  min-height: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
  color: rgb(var(--ds-rgb-label-1));
  background-color: var(--dsr-bg);
}
.ds-markdown img {
  max-width: 100%;
}
.ds-markdown h1,
.ds-markdown h2,
.ds-markdown h3,
.ds-markdown h4,
.ds-markdown h5,
.ds-markdown h6 {
  font-weight: var(--ds-font-weight-strong);
  font-size: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
  margin: calc(var(--ds-md-zoom) * 16px) 0 calc(var(--ds-md-zoom) * 12px) 0;
}
.ds-markdown h1,
.ds-markdown h2,
.ds-markdown h3,
.ds-markdown h4,
.ds-markdown h5,
.ds-markdown h6 {
  font-weight: var(--ds-font-weight-strong);
  font-size: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
  margin: calc(var(--ds-md-zoom) * 16px) 0 calc(var(--ds-md-zoom) * 12px) 0;
}
.ds-markdown h1 {
  font-size: calc(var(--ds-md-zoom) * 24px);
  line-height: 1.5;
}
.ds-markdown h2 {
  font-size: calc(var(--ds-md-zoom) * 20px);
  line-height: 1.5;
}
.ds-markdown h3 {
  font-size: calc(var(--ds-md-zoom) * 16px);
  line-height: 1.5;
}
.ds-markdown h1 .header-anchor,
.ds-markdown h2 .header-anchor,
.ds-markdown h3 .header-anchor,
.ds-markdown h4 .header-anchor,
.ds-markdown h5 .header-anchor,
.ds-markdown h6 .header-anchor {
  opacity: 0;
  margin-left: 4px;
}
.ds-markdown h1:hover .header-anchor,
.ds-markdown h2:hover .header-anchor,
.ds-markdown h3:hover .header-anchor,
.ds-markdown h4:hover .header-anchor,
.ds-markdown h5:hover .header-anchor,
.ds-markdown h6:hover .header-anchor {
  opacity: 1;
}
.ds-markdown .ds-markdown-paragraph {
  font-size: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
}
.ds-markdown a:not(.ds-a) {
  color: rgb(var(--ds-rgb-link));
  transition: box-shadow var(--ds-transition-duration) var(--ds-ease-in-out);
  border-radius: calc(var(--ds-md-zoom) * 6px);
  border-left: 3px solid rgba(var(--ds-rgba-transparent));
  border-right: 3px solid rgba(var(--ds-rgba-transparent));
  border-top: 2px solid rgba(var(--ds-rgba-transparent));
  border-bottom: 2px solid rgba(var(--ds-rgba-transparent));
  margin-left: -3px;
  margin-right: -3px;
  text-decoration: none;
  position: relative;
}
.ds-markdown a:not(.ds-a):focus {
  outline: none;
}
.ds-markdown a:not(.ds-a):focus-visible {
  box-shadow: 0 0 0 2px rgb(var(--ds-rgb-primary));
}
.ds-markdown li > ul,
.ds-markdown li > ol {
  margin-top: 4px;
}
.ds-markdown ul,
.ds-markdown ol {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
  padding-left: calc(var(--ds-md-zoom) * 24px);
}
.ds-markdown li:not(:first-child) {
  margin-top: 4px;
}
.ds-markdown li::marker {
  line-height: var(--ds-md-line-height);
  color: rgb(var(--ds-rgb-label-2));
}
.ds-markdown hr {
  height: 1px;
  margin: 32px 0;
  background-color: var(--dsr-border-2);
  border: none;
  display: block;
}
.ds-markdown blockquote {
  border-left: 2px solid rgb(var(--ds-rgb-label-3));
  padding-left: calc(var(--ds-md-zoom) * 16px);
  margin: 0;
}
.ds-markdown table {
  border-collapse: collapse;
}
.ds-markdown th {
  color: rgb(var(--ds-rgb-label-1));
  padding: calc(var(--ds-md-zoom) * 6px) calc(var(--ds-md-zoom) * 12px);
  border-bottom: 1px solid rgb(var(--ds-rgb-label-3));
  border-top: 1px solid rgb(var(--ds-rgb-label-3));
  font-weight: 600;
}
.ds-markdown th,
.ds-markdown td {
  text-align: left;
}
.ds-markdown th:first-child {
  padding-left: 0;
}
.ds-markdown td {
  padding: calc(var(--ds-md-zoom) * 6px) calc(var(--ds-md-zoom) * 12px);
  border-bottom: 1px solid rgb(var(--ds-rgb-label-3));
}
.ds-markdown td:first-child {
  padding-left: 0;
}
.ds-markdown pre {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
  font-family: var(--ds-font-family-code);
  overflow: auto;
}
.ds-markdown code {
  font-size: 0.875em;
  font-weight: var(--ds-font-weight-strong);
  font-family: var(--ds-font-family-code);
  background-color: var(--ds-md-inline-code-color, #ececec);
  border-radius: 4px;
}
.ds-markdown code:before {
  margin-left: 4px;
}
.ds-markdown code:after {
  margin-right: 4px;
}
ds-markdown-math {
  text-align: center;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}
.ds-markdown > * .ds-markdown-math {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
}
.ds-markdown > * .ds-markdown-math:first-child {
  margin-top: 0;
}
.ds-markdown > * .ds-markdown-math:last-child {
  margin-bottom: 0;
}
.ds-markdown-code-copy-button {
  background-color: rgba(var(--ds-rgba-transparent));
  color: inherit;
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
}
.ds-markdown li > .ds-markdown-paragraph {
  margin: 4px 0;
}
.ds-markdown li > :first-child {
  margin-top: 0;
}
.ds-markdown li > :last-child {
  margin-bottom: 0;
}
.ds-markdown .ds-markdown-paragraph:last-child {
  margin-bottom: 0 !important;
}
.ds-markdown > :first-child {
  margin-top: 0 !important;
}
.ds-markdown .ds-markdown-thinking {
  border-left: 2px solid var(--ds-thinking-border-color);
  padding: 0 0 0 12px;
  color: rgb(var(--ds-rgb-label-2));
  line-height: 26px;
  font-size: var(--ds-font-size-m);
}
.ds-markdown .ds-markdown-answer {
  margin: calc(var(--ds-md-zoom) * 12px) 0;
  font-size: var(--ds-md-font-size);
  line-height: var(--ds-md-line-height);
}
.ds-button {
  --button-height: 28px;
  --button-font-size: var(--ds-font-size-m);
  --button-line-height: var(--ds-line-height-m);
  --button-border-radius: 10px;
  --button-padding: 0 14px;
  --button-icon-size: 18px;
  --button-icon-margin: 0 8px 0 0;
}
.ds-button {
  height: var(--button-height);
  line-height: var(--button-line-height);
  font-size: var(--button-font-size);
  border-radius: var(--button-border-radius);
  padding: var(--button-padding);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: opacity var(--ds-transition-duration) var(--ds-ease-in-out), background-color var(--ds-transition-duration) var(--ds-ease-in-out);
  font-variant-numeric: tabular-nums;
  outline: none;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}
.ds-button__disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.ds-button > .ds-button__icon {
  line-height: 0;
  font-size: var(--button-icon-size);
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  margin: var(--button-icon-margin);
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}
.ds-button:hover {
  background-color: var(--ds-button-hover-color);
}
[id^='dmermaid-'] {
  height: 0;
  overflow: hidden;
}
.ds-button.ds-icon-button {
  padding: 0 4px;
}
.ds-button.ds-icon-button .ds-button__icon {
  margin-right: 0;
}