@theojs/lumen/style/button.css

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

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: var(--lm-c-yellow-1);
  --vp-button-brand-text: var(--lm-c-black);
  --vp-button-brand-bg: var(--lm-c-yellow-1);
  --vp-button-brand-hover-border: var(--lm-c-yellow-2);
  --vp-button-brand-hover-text: var(--lm-c-black-darker);
  --vp-button-brand-hover-bg: var(--lm-c-yellow-2);
  --vp-button-brand-active-border: var(--lm-c-yellow-soft);
  --vp-button-brand-active-text: var(--lm-c-black-darker);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);

  --vp-button-sponsor-border: var(--vp-c-sponsor);
  --vp-button-sponsor-text: var(--lm-c-white-dark);
  --vp-button-sponsor-bg: var(--vp-c-sponsor);
  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
  --vp-button-sponsor-hover-text: var(--lm-c-white-dark);
  --vp-button-sponsor-hover-bg: var(--vp-c-sponsor);
  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
  --vp-button-sponsor-active-text: var(--lm-c-black-dark);
  --vp-button-sponsor-active-bg: var(--vp-c-sponsor);
}

.VPButton.medium {
  border-radius: 12px !important;
}

.VPButton.logo::before,
.VPButton.author::before {
  display: inline-block;
  transform: translateY(7px);
  margin-right: 0.5em;
  background: no-repeat center/24px;
  width: 24px;
  height: 24px;
  content: '';
}

.VPButton.author::before {
  background-image: var(--lm-button-author);
}

.VPButton.logo::before {
  background-image: var(--lm-button-logo);
}