@theojs/lumen/style/components-var.css

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

:root {
  /**
  * Default
  * -------------------------------------------------------------------------- */

  --lm-iconify-defColor: var(--vp-c-text-2);
  --lm-component-bg: var(--vp-c-bg-alt);
  --lm-imr: 0.25em;
  --lm-promo-text-color: var(--vp-c-brand-1);
  --lm-promo-text-weight: bold;
  --lm-promo-title-bg: var(--lm-Aside-promo);
  --lm-promo-title-color: transparent;
  --lm-promo-title-weight: 600;

  /**
  * Component: Notice
  * -------------------------------------------------------------------------- */
  --lm-Notice-bg: var(--vp-button-alt-bg);
  --lm-Notice-border: transparent;
  --lm-Notice-data: var(--vp-c-brand-1);
  --lm-Notice-bg-hover: var(--vp-button-alt-bg);
  --lm-Notice-border-hover: var(--vp-c-brand-1);
  --lm-Notice-transform-hover: none;
  --lm-Notice-transform-active: none;

  /**
  * Component: Aside
  * -------------------------------------------------------------------------- */

  --lm-Aside-bg: var(--lm-component-bg);
  --lm-Aside-border: transparent;
  --lm-Aside-name: -webkit-linear-gradient(225deg, var(--vp-c-brand-1), var(--vp-c-brand-3), var(--vp-c-brand-1));
  --lm-Aside-name-color: transparent;
  --lm-Aside-promo: -webkit-linear-gradient(
    225deg,
    rgba(100, 108, 255, 1),
    rgba(176, 71, 255, 1),
    rgba(100, 108, 255, 1)
  );
  --lm-Aside-promo-color: transparent;
  --lm-Aside-hide: var(--vp-c-text-2);
  --lm-Aside-info: var(--vp-c-text-2);
  --lm-Aside-name-bg-hover: var(--lm-component-bg);
  --lm-Aside-name-border-hover: var(--vp-c-brand-1);
  --lm-Aside-promo-bg-hover: var(--lm-component-bg);
  --lm-Aside-promo-border-hover: rgba(100, 108, 255, 1);
  --lm-Aside-transform-hover: none;
  --lm-Aside-transform-active: none;

  /**
  * Component: BoxCube
  * -------------------------------------------------------------------------- */

  --lm-Boxcube-bg: var(--lm-component-bg);
  --lm-Boxcube-border: transparent;
  --lm-Boxcube-name: var(--vp-c-brand-1);
  --lm-Boxcube-bg-hover: var(--lm-component-bg);
  --lm-Boxcube-border-hover: var(--vp-c-brand-1);
  --lm-Boxcube-name-hover: var(--vp-c-brand-2);
  --lm-Boxcube-boxshadow-hover: none;
  --lm-Boxcube-transform-hover: none;
  --lm-Boxcube-transform-active: none;

  /**
  * Component: Links
  * -------------------------------------------------------------------------- */

  --lm-Links-bg: var(--lm-component-bg);
  --lm-Links-border: transparent;
  --lm-Links-name: var(--vp-c-brand-1);
  --lm-Links-desc: var(--vp-c-text-2);
  --lm-Links-bg-hover: var(--lm-component-bg);
  --lm-Links-border-hover: var(--vp-c-brand-1);
  --lm-Links-name-hover: var(--vp-c-brand-2);
  --lm-Links-boxshadow-hover: none;
  --lm-Links-transform-hover: none;
  --lm-Links-transform-active: none;

  /**
  * Component: Card
  * -------------------------------------------------------------------------- */

  --lm-Card-bg: var(--lm-component-bg);
  --lm-Card-border: transparent;
  --lm-Card-name: var(--vp-c-brand-1);
  --lm-Card-desc: var(--vp-c-text-2);
  --lm-Card-bg-hover: var(--lm-component-bg);
  --lm-Card-border-hover: var(--vp-c-brand-1);
  --lm-Card-name-hover: var(--vp-c-brand-2);
  --lm-Card-boxshadow-hover: none;
  --lm-Card-transform-hover: none;
  --lm-Card-transform-active: none;

  /**
  * Component: CopyText
  * -------------------------------------------------------------------------- */

  --lm-CopyText-border: transparent;
  --lm-CopyText-auto-bg: var(--vp-code-bg);
  --lm-CopyText-auto-color: var(--vp-c-brand-1);
  --lm-CopyText-auto-bg-hover: var(--vp-c-brand-soft);
  --lm-CopyText-auto-border-hover: transparent;
  --lm-CopyText-info-bg: var(--vp-code-bg);
  --lm-CopyText-info-color: var(--vp-c-text-1);
  --lm-CopyText-info-bg-hover: var(--vp-code-bg);
  --lm-CopyText-info-border-hover: transparent;
  --lm-CopyText-tip-bg: var(--vp-c-green-soft);
  --lm-CopyText-tip-color: var(--vp-c-green-1);
  --lm-CopyText-tip-bg-hover: var(--vp-c-green-soft);
  --lm-CopyText-tip-border-hover: transparent;
  --lm-CopyText-warning-bg: var(--vp-c-warning-soft);
  --lm-CopyText-warning-color: var(--vp-c-warning-1);
  --lm-CopyText-warning-bg-hover: var(--vp-c-warning-soft);
  --lm-CopyText-warning-border-hover: transparent;
  --lm-CopyText-warning-bg: var(--vp-c-warning-soft);
  --lm-CopyText-warning-color: var(--vp-c-warning-1);
  --lm-CopyText-warning-bg-hover: var(--vp-c-warning-soft);
  --lm-CopyText-warning-border-hover: transparent;
  --lm-CopyText-danger-bg: var(--vp-c-danger-soft);
  --lm-CopyText-danger-color: var(--vp-c-danger-1);
  --lm-CopyText-danger-bg-hover: var(--vp-c-danger-soft);
  --lm-CopyText-danger-border-hover: transparent;

  /**
  * Component: Pill
  * -------------------------------------------------------------------------- */

  --lm-Pill-bg: var(--vp-code-bg);
  --lm-Pill-border: transparent;
  --lm-Pill-name: var(--vp-c-brand-1);
  --lm-Pill-bg-hover: var(--vp-code-bg);
  --lm-Pill-border-hover: var(--vp-c-brand-1);
  --lm-Pill-name-hover: var(--vp-c-brand-2);
  --lm-Pill-boxshadow-hover: none;
  --lm-Pill-transform-hover: none;
  --lm-Pill-transform-active: none;

  /**
  * Component: Footer
  * -------------------------------------------------------------------------- */

  --lm-Footer-bg: var(--lm-component-bg);
  --lm-Footer-link-hover: var(--vp-c-brand-1);

  /**
  * Component: Underline
  * -------------------------------------------------------------------------- */

  --lm-Underline-bg: var(--vp-c-brand-1);

  /**
  * button
  * -------------------------------------------------------------------------- */

  --lm-button-author: url('https://i.theojs.cn/logo/avatar-mini.webp');
  --lm-button-logo: url('https://i.theojs.cn/logo/lumen-logo-mini.svg');

  /**
  * Component:Waline - https://waline.js.org/reference/client/style.html 
  * -------------------------------------------------------------------------- */

  --waline-bg-elv: rgba(44, 62, 80, 0.1);
  --waline-font-size: 1rem !important;
  --waline-white: var(--vp-c-white) !important;
  --waline-light-grey: var(--vp-c-text-1) !important;
  --waline-dark-grey: var(--vp-c-text-1) !important;
  --waline-theme-color: var(--vp-c-brand-1) !important;
  --waline-active-color: var(--vp-c-brand-3) !important;
  --waline-color: var(--vp-c-text-1) !important;
  --waline-bg-color: var(--vp-c-bg-alt) !important;
  --waline-bg-color-light: var(--waline-bg-elv) !important;
  --waline-bg-color-hover: var(--waline-bg-elv) !important;
  --waline-border-color: var(--waline-bg-elv) !important;
  --waline-disable-bg-color: var(--vp-c-bg-alt) !important;
  --waline-disable-color: var(--vp-c-text-3) !important;
  --waline-code-bg-color: var(--vp-c-bg-alt) !important;
  --waline-bq-color: var(--vp-c-text-3) !important;
  --waline-avatar-size: 3.25rem;
  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
  --waline-badge-color: #3498db;
  --waline-badge-font-size: 0.775em;
  --waline-info-bg-color: var(--vp-c-bg-alt) !important;
  --waline-info-color: var(--vp-c-text-3) !important;
  --waline-info-font-size: 0.625em;
  --waline-border: 1px solid var(--waline-border-color);
  --waline-avatar-radius: 50%;
  --waline-box-shadow: none;
}

.dark {
  /**
  * Default
  * -------------------------------------------------------------------------- */

  --lm-promo-title-bg: var(--lm-Aside-promo);
  --lm-promo-title-color: transparent;

  /**
  * Component: Aside
  * -------------------------------------------------------------------------- */
  --lm-Aside-promo: -webkit-linear-gradient(
    225deg,
    rgba(120, 200, 255, 1),
    rgba(255, 130, 255, 1),
    rgba(120, 200, 255, 1)
  );
  --lm-Aside-name-color: transparent;

  /**
  * Component:Waline - https://waline.js.org/reference/client/style.html 
  * -------------------------------------------------------------------------- */

  --waline-white: var(--vp-c-brand-text) !important;
  --waline-light-grey: var(--vp-c-text-1) !important;
  --waline-dark-grey: var(--vp-c-text-1) !important;
  --waline-color: var(--vp-c-text-1) !important;
  --waline-bg-color: var(--vp-c-bg-alt) !important;
  --waline-bg-color-light: var(--vp-c-bg-elv) !important;
  --waline-bg-color-hover: var(--vp-c-bg-elv) !important;
  --waline-border-color: var(--vp-c-bg-elv) !important;
  --waline-disable-bg-color: var(--vp-c-bg-elv) !important;
  --waline-disable-color: var(--vp-c-text-3) !important;
  --waline-code-bg-color: var(--vp-c-bg-alt) !important;
  --waline-bq-color: var(--vp-c-text-3) !important;
  --waline-info-bg-color: var(--vp-c-bg-elv) !important;
  --waline-info-color: var(--vp-c-text-3) !important;
}