style.css

/* 
  This file overrides and extends default VitePress theme CSS variables and styles:
  https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(@fontsource-variable/jetbrains-mono/files/jetbrains-mono-latin-wght-normal.woff2)
    format("woff2-variations");
}

/* Define custom color variables, fabricmc.net brand colors, and other shared properties. */
:root {
  --vp-c-blue-1: #1662c5;
  --vp-c-blue-2: #2275da;
  --vp-c-blue-3: #5c9de4;
  --vp-c-blue-soft: rgba(52, 130, 219, 0.14);

  --vp-c-brand-1: var(--vp-c-blue-3);
  --vp-c-brand-2: var(--vp-c-blue-2);
  --vp-c-brand-3: var(--vp-c-blue-1);
  --vp-c-brand-soft: var(--vp-c-blue-soft);

  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3463fe 30%, #4787ff);

  --font-family-base:
    "Inter", ui-sans-serif, system-ui, sans-serif, "Noto Color Emoji", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --vp-font-family-base: var(--font-family-base);
  --vp-font-family-mono:
    "JetBrains Mono", ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New",
    monospace;
}

:root:where(:lang(zh)) {
  --vp-font-family-base: "Punctuation SC", var(--font-family-base);
}

/* Dark Mode Support - Show or hide elements based on the presence of the 'dark' class on the root element. */
:root:not(.dark) .dark-only {
  display: none;
}

:root:is(.dark) .light-only {
  display: none;
}

code,
pre {
  tab-size: 2 !important;
  font-variant-ligatures: none;
}

/* Sidebar Scrollbar - Styles scrollbars within the side navigation pane for improved visibility. */
.VPSidebar,
.aside-container {
  scrollbar-width: thin !important;
  scrollbar-color: var(--vp-c-gray-1) var(--vp-c-bg-alt);
}

@media (min-width: 1525px) {
  .aside-container {
    width: 300px !important;
  }
}

.aside-container::-webkit-scrollbar {
  display: block;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--vp-c-bg-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--vp-c-gray-1);
}

/* Override default margin on the VitePress Home component */
.VPHome {
  margin-bottom: 0px !important;
}

/* Local Search Box Animations - Fade in backdrop and animate search box on appearance. */
.VPLocalSearchBox > .backdrop {
  opacity: 0;
  animation: show 200ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
}

.VPLocalSearchBox > .shell {
  animation: show 400ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
  opacity: 0;
  transform: rotateX(-90deg);
  transform-origin: top center;
}

@keyframes show {
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Medium Zoom Overlays - Increase stacking order for zoomed images and their overlay. */
.medium-zoom-overlay {
  z-index: 10000;
}

.medium-zoom-image--opened {
  z-index: 10001;
}

/* Style <kbd> elements except the search popup */
kbd:not(.DocSearch-Button-Key) {
  background-color: #eee !important;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 5px;
  white-space: nowrap;
}

/* Center and style images within paragraphs. */
.vp-doc > p > img,
.vp-doc > div > p > img {
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 10px #8883;
  border-radius: 8px;
}