@theojs/lumen/style/doc-blocks.css

专为 VitePress 打造的主题美化与 Vue 扩展组件库

/**
 * Component: doc-blocks
 * -------------------------------------------------------------------------- */

.vp-doc .custom-block {
  position: relative;
  border-left: 6px solid;
}

.vp-doc .custom-block .custom-block-title {
  padding-left: 1.25em;
}

.vp-doc .custom-block:before {
  display: inline-block;
  position: absolute;
  transform: translate(-20%, 20%);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  width: 1.2em;
  height: 1.2em;
  content: '';
}

/* info,note  */
.vp-doc .custom-block.info,
.vp-doc .custom-block.note {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1-8h-2V7h2z'/%3E%3C/svg%3E");
  border-left-color: var(--vp-c-text-2);
  color: var(--vp-c-text-2);
}

.vp-doc .custom-block.info .custom-block-title,
.vp-doc .custom-block.info:before,
.vp-doc .custom-block.note .custom-block-title,
.vp-doc .custom-block.note:before {
  color: var(--vp-c-text-1);
}

/* tip */
.vp-doc .custom-block.tip {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1-8h-2V7h2z'/%3E%3C/svg%3E");
  border-left-color: var(--vp-c-green-1);
  background-color: var(--vp-c-green-soft);
  color: var(--vp-c-green-2);
}

.vp-doc .custom-block.tip .custom-block-title,
.vp-doc .custom-block.tip:before {
  color: var(--vp-c-green-1);
}

.vp-doc .custom-block.tip code {
  background-color: var(--vp-c-green-soft);
  color: var(--vp-c-green-1);
}

.vp-doc .custom-block.tip a {
  color: var(--vp-c-green-1);
}

/* warning */
.vp-doc .custom-block.warning {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3M12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1m1 4h-2v-2h2z'/%3E%3C/svg%3E");
  border-left-color: var(--vp-c-warning-1);
  color: var(--vp-c-warning-2);
}

.vp-doc .custom-block.warning .custom-block-title,
.vp-doc .custom-block.warning:before {
  color: var(--vp-c-warning-1);
}

/* caution,danger */
.vp-doc .custom-block.caution,
.vp-doc .custom-block.danger {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3M12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1m1 4h-2v-2h2z'/%3E%3C/svg%3E");
  border-left-color: var(--vp-c-danger-1);
  color: var(--vp-c-danger-2);
}

.vp-doc .custom-block.caution .custom-block-title,
.vp-doc .custom-block.caution:before,
.vp-doc .custom-block.danger .custom-block-title,
.vp-doc .custom-block.danger:before {
  color: var(--vp-c-danger-1);
}

/* important */
.vp-doc .custom-block.important {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1-8h-2V7h2z'/%3E%3C/svg%3E");
  border-left-color: var(--vp-c-important-1);
  color: var(--vp-c-important-2);
}

.vp-doc .custom-block.important .custom-block-title,
.vp-doc .custom-block.important:before {
  color: var(--vp-c-important-1);
}

/* details */
.vp-doc .custom-block.details {
  border: 0;
}

.vp-doc .custom-block.details:before {
  display: none;
}

.vp-doc .custom-block.details p,
.vp-doc .custom-block.details li,
.vp-doc .custom-block.details ol {
  color: var(--vp-c-text-2);
}

/* blockquote */
.vp-doc blockquote {
  position: relative;
  transition: border-color 0.5s;
  border-left: 6px solid var(--vp-c-text-3);
  border-radius: 0.5em;
  background-color: var(--vp-c-bg-soft);
  padding: 0.25em 0 0.25em 1em;
  color: var(--vp-c-text-3);
}

.vp-doc blockquote > p,
.vp-doc blockquote > ul,
.vp-doc blockquote > ol {
  font-size: var(--vp-custom-block-font-size);
}