fzu-product/.vitepress/theme/style.css

/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */
/**
 * Colors
 * -------------------------------------------------------------------------- */

@import url('https://fonts.loli.net/css2?family=Noto+Sans+Mono&family=Noto+Sans+SC:wght@400;700&display=swap');

@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://gstatic.loli.net/s/notocoloremoji/v25/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2) format('woff2');
  unicode-range: U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8;
}

.dark .vp-doc a,#loading, .dark .vp-doc a>code, .dark .VPNavBarMenuLink.VPNavBarMenuLink:hover, .dark .VPNavBarMenuLink.VPNavBarMenuLink.active, .dark .link.link:hover, .dark .link.link.active, .dark .edit-link-button.edit-link-button, .dark .pager-link .title {
  color: var(--vp-c-brand-lighter);
}

:root {
  --vp-c-brand: #0dadc4;
  --vp-c-brand-light: #1A9CED;
  --vp-c-brand-lighter: #1CA8FF;
  --vp-c-brand-lightest: #5EB2E6;
  --vp-c-brand-dark: #0B52BF;
  --vp-c-brand-darker: #015F8F;
  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
}

:root {
  --vp-font-family-base: 'Noto Sans SC', 'Noto Color Emoji', sans-serif;
  --vp-font-family-mono: 'Noto Sans Mono', sans-serif, monospace, consolas;
}

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

:root {
  --vp-button-brand-border: var(--vp-c-brand-light);
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand);
  --vp-button-brand-hover-border: var(--vp-c-brand-light);
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
  --vp-button-brand-active-border: var(--vp-c-brand-light);
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    #08BAB6,
    #1994E1,
    #0B52BF
  );

  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    #08BAB6 50%,
    #1994E1 50%,
    #0B52BF 50%
  );
  --vp-home-hero-image-filter: blur(40px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(72px);
  }
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

.dark {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

/**
 * Component: Algolia
 * -------------------------------------------------------------------------- */

.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand) !important;
}

mjx-container {
  display: inline-block;
  margin: auto;
}


.VPHero .image-bg {
  z-index: -1;
  opacity: 0.8;
  transition: opacity 1s ease;
}

.VPHero .image-container:hover .image-bg {
  opacity: 1;
}


:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    var(--vp-c-brand) 30%,
    var(--vp-c-brand-next)
  );
  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    var(--vp-c-brand) 30%,
    var(--vp-c-brand-next)
  );
  --vp-home-hero-image-filter: blur(80px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(120px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(120px);
  }
}

/* Safari has a very bad performance on gradient and filter */
.browser-safari, .browser-firefox {
  --vp-home-hero-name-color: var(--vp-c-brand);
  --vp-home-hero-name-background: transparent;
  --vp-home-hero-image-background-image: transparent;
  --vp-home-hero-image-filter: '';
}

.jp-MarkdownOutput{
  color: #3c3c43 !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}

.dark .jp-MarkdownOutput{
  color: #dfdfd7 !important;
  font-family: 'Noto Sans SC', 'Noto Color Emoji', sans-serif !important;
}

.jp-InputArea-editor{
  border-radius: 8px !important;
}

.cm-content{
  font-family: 'Noto Sans Mono', sans-serif, monospace, consolas !important;
  background-color: #f6f6f7 !important;
}

.dark .cm-content{
  font-family: 'Noto Sans Mono', sans-serif, monospace, consolas !important;
  /* background-color: #161618 !important; */
}

.jp-RenderedHTMLCommon :not(pre) > code {
  background-color: var(--vp-c-mute) !important;
}

.VPImage {
  user-drag: none !important;
  -webkit-user-drag: none !important;
  -moz-user-drag: none !important;
}