@theojs/lumen/style/picture.css

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

/**
 * Component: picture
 * -------------------------------------------------------------------------- */

:root:not(.dark) .dark-only,
:root:is(.dark) .light-only,
:root:not(.dark) img[src$='#dark'],
:root:is(.dark) img[src$='#light'] {
  display: none;
}

/* @mdit/plugin-figure: https://mdit-plugins.github.io/zh/figure.html */
:root:not(.dark) .dark-only + figcaption,
:root:is(.dark) .light-only + figcaption,
:root:not(.dark) img[src$='#dark'] + figcaption,
:root:is(.dark) img[src$='#light'] + figcaption {
  display: none;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

figure img {
  border-radius: 0.5em;
}

figure figcaption {
  margin: 0.5em 0;
  color: var(--vp-c-text-3);
  font-weight: 400;
  font-size: 0.875em;
}

figure figcaption a {
  color: var(--vp-c-text-3) !important;
}