fumadocs-ui/css/preset.css

The framework for building a documentation website in Next.js

@import './shiki.css';

@source '../dist/**/*.js';
@plugin '../dist/theme/typography/index.js';

@theme static {
  --color-fd-info: oklch(62.3% 0.214 259.815);
  --color-fd-warning: oklch(76.9% 0.188 70.08);
  --color-fd-error: oklch(63.7% 0.237 25.331);
  --color-fd-success: oklch(72.3% 0.219 149.579);
}

[dir='rtl'] {
  --fd-sidebar-mobile-offset: -100%;
}

@theme {
  --fd-sidebar-mobile-offset: 100%;
  --spacing-fd-container: 1400px;
  --fd-page-width: 1200px;
  --fd-sidebar-width: 0px;
  --fd-toc-width: 0px;
  --fd-layout-width: 100vw;
  --fd-banner-height: 0px;
  --fd-nav-height: 0px;
  --fd-tocnav-height: 0px;

  --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
  --color-fd-diff-add: rgba(14, 180, 100, 0.1);
  --color-fd-diff-add-symbol: rgb(10, 200, 100);

  --animate-fd-fade-in: fd-fade-in 300ms ease;
  --animate-fd-fade-out: fd-fade-out 300ms ease;

  --animate-fd-dialog-in: fd-dialog-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-fd-dialog-out: fd-dialog-out 300ms cubic-bezier(0.16, 1, 0.3, 1);

  --animate-fd-popover-in: fd-popover-in 130ms ease;
  --animate-fd-popover-out: fd-popover-out 130ms ease;

  --animate-fd-collapsible-down: fd-collapsible-down 150ms
    cubic-bezier(0.45, 0, 0.55, 1);
  --animate-fd-collapsible-up: fd-collapsible-up 150ms
    cubic-bezier(0.45, 0, 0.55, 1);

  --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
  --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;

  --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
  --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;

  --animate-fd-enterFromLeft: fd-enterFromLeft 250ms ease;
  --animate-fd-enterFromRight: fd-enterFromRight 250ms ease;

  --animate-fd-sidebar-in: fd-sidebar-in 250ms ease;
  --animate-fd-sidebar-out: fd-sidebar-out 250ms ease;

  --animate-fd-exitToLeft: fd-exitToLeft 250ms ease;
  --animate-fd-exitToRight: fd-exitToRight 250ms ease;

  @keyframes fd-sidebar-in {
    from {
      transform: translateX(var(--fd-sidebar-mobile-offset));
    }
  }

  @keyframes fd-sidebar-out {
    to {
      transform: translateX(var(--fd-sidebar-mobile-offset));
    }
  }

  @keyframes fd-collapsible-down {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes fd-collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
      opacity: 0;
    }
  }

  @keyframes fd-accordion-down {
    from {
      height: 0;
      opacity: 0.5;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes fd-accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
      opacity: 0.5;
    }
  }

  @keyframes fd-dialog-in {
    from {
      transform: scale(1.06);
      opacity: 0;
    }
    to {
      transform: scale(1);
    }
  }

  @keyframes fd-dialog-out {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.04);
      opacity: 0;
    }
  }

  @keyframes fd-popover-in {
    from {
      opacity: 0;
      transform: scale(0.7);
    }
  }

  @keyframes fd-popover-out {
    to {
      opacity: 0;
      transform: scale(0.7);
    }
  }

  @keyframes fd-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fd-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes fd-enterFromRight {
    from {
      opacity: 0;
      transform: translateX(200px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fd-enterFromLeft {
    from {
      opacity: 0;
      transform: translateX(-200px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fd-exitToRight {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(200px);
    }
  }

  @keyframes fd-exitToLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-200px);
    }
  }

  @keyframes fd-nav-menu-in {
    from {
      opacity: 0;
      height: 0px;
    }
    to {
      opacity: 1;
      height: var(--radix-navigation-menu-viewport-height);
    }
  }

  @keyframes fd-nav-menu-out {
    from {
      opacity: 1;
      height: var(--radix-navigation-menu-viewport-height);
    }
    to {
      opacity: 0;
      height: 0px;
    }
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-fd-border, currentColor);
  }

  body {
    background-color: var(--color-fd-background);
    color: var(--color-fd-foreground);
  }

  [data-rmiz-modal-overlay='visible'] {
    background-color: var(--color-fd-background);
  }

  :root,
  #nd-docs-layout {
    --fd-layout-offset: max(calc(50vw - var(--fd-layout-width) / 2), 0px);
  }
}

@variant max-xl {
  #nd-docs-layout:has([data-toc-popover]) {
    --fd-tocnav-height: calc(var(--spacing) * 10);
  }
}

@utility fd-scroll-container {
  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: var(--color-fd-border);
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    display: none;
  }
}

@utility fd-steps {
  counter-reset: step;
  position: relative;
  @apply pl-6 ml-2 border-l sm:ml-4 sm:pl-7;
}

@utility fd-step {
  &:before {
    background-color: var(--color-fd-secondary);
    color: var(--color-fd-secondary-foreground);
    content: counter(step);
    counter-increment: step;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    display: flex;
    position: absolute;
    @apply size-8 -start-4 rounded-full;
  }
}

@utility prose-no-margin {
  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }
}

@property --radix-collapsible-content-height {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;

  @apply 2xl:max-w-[1400px];
}

@variant dark (&:where(.dark, .dark *));