homarr/apps/docs/src/app/global.css

@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "fumadocs-openapi/css/preset.css";

/* Scalar mounts its client at the end of body, outside Fumadocs' themed Test button. */
html .scalar-app {
  --scalar-background-1: var(--color-fd-background);
  --scalar-background-2: var(--color-fd-card);
  --scalar-background-3: var(--color-fd-secondary);
  --scalar-color-1: var(--color-fd-foreground);
  --scalar-color-2: var(--color-fd-muted-foreground);
  --scalar-color-3: var(--color-fd-muted-foreground);
  --scalar-color-accent: var(--color-fd-primary);
  --scalar-border-color: var(--color-fd-border);
  --scalar-button-1: var(--color-fd-primary);
  --scalar-button-1-hover: color-mix(in srgb, var(--color-fd-primary) 85%, var(--color-fd-background));
  --scalar-button-1-color: var(--color-fd-primary-foreground);
}

html.light .scalar-app {
  color-scheme: light;
}

html.dark .scalar-app {
  color-scheme: dark;
}

.scalar-app .scalar-container.scalar-client--open {
  z-index: 100;
  background: rgb(0 0 0 / 65%);
}

.homarr-api-reference .not-prose:is(.light-mode, .dark-mode) + p {
  margin-top: 1rem;
}

@source "../components/**/*.{ts,tsx}";
@source "../../docs/**/*.{md,mdx}";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) * 0.75);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 1.25);
  --radius-xl: calc(var(--radius) * 1.5);
}

:root {
  --background: oklch(0.985 0.006 25.7);
  --foreground: oklch(0.22 0 0);
  --card: oklch(0.997 0.002 25.7);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: #c62828;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.96 0.012 25.7);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.965 0.008 25.7);
  --muted-foreground: oklch(0.46 0.012 25.7);
  --accent: oklch(0.955 0.025 25.7);
  --accent-foreground: oklch(0.46 0.17 25.7);
  --destructive: oklch(0.637 0.208 25.3);
  --border: oklch(0.88 0.012 25.7);
  --input: var(--border);
  --ring: var(--primary);
  --radius: 0.375rem;
  --ifm-color-primary: #c62828;
  --ifm-navbar-background-color: var(--card);
  --ifm-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --homarr-secondary-bg: oklch(0.965 0 0);
  --color-fd-background: var(--background);
  --color-fd-foreground: var(--foreground);
  --color-fd-card: var(--card);
  --color-fd-card-foreground: var(--card-foreground);
  --color-fd-popover: var(--popover);
  --color-fd-popover-foreground: var(--popover-foreground);
  --color-fd-primary: var(--primary);
  --color-fd-primary-foreground: var(--primary-foreground);
  --color-fd-secondary: var(--secondary);
  --color-fd-secondary-foreground: var(--secondary-foreground);
  --color-fd-muted: var(--muted);
  --color-fd-muted-foreground: var(--muted-foreground);
  --color-fd-accent: var(--accent);
  --color-fd-accent-foreground: var(--accent-foreground);
  --color-fd-border: color-mix(in oklch, var(--border) 82%, transparent);
  --color-fd-ring: var(--ring);
  --fd-layout-width: 96rem;
  --fd-page-width: 52rem;
}

.dark {
  --ifm-color-primary: #fa5252;
  --background: oklch(0.185 0.012 25.7);
  --foreground: oklch(0.965 0.004 25.7);
  --card: oklch(0.225 0.014 25.7);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.665 0.222 25.7);
  --primary-foreground: oklch(0.15 0.025 25.7);
  --secondary: oklch(0.265 0.016 25.7);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.255 0.014 25.7);
  --muted-foreground: oklch(0.74 0.014 25.7);
  --accent: oklch(0.31 0.055 25.7);
  --accent-foreground: oklch(0.88 0.09 25.7);
  --border: oklch(0.34 0.018 25.7);
  --input: var(--border);
  --ring: var(--primary);
  --ifm-navbar-background-color: var(--card);
  --homarr-secondary-bg: var(--card);
}

* {
  border-color: var(--border);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--ifm-font-family-base);
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.homarr-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.homarr-brand-logo {
  width: 1.875rem;
  height: auto;
}

#nd-nav {
  height: 4.25rem;
}

#nd-nav > div {
  background-color: color-mix(in oklch, var(--color-fd-primary) 3%, var(--color-fd-background));
  border-bottom-color: color-mix(in oklch, var(--color-fd-primary) 18%, var(--color-fd-border));
}

#nd-nav > div > div > nav {
  height: 4.25rem;
}

#nd-nav a[data-active="true"],
#nd-sidebar a[data-active="true"] {
  color: var(--color-fd-accent-foreground);
}

#nd-page > div:first-child .text-fd-primary {
  color: var(--color-fd-foreground);
}

#nd-sidebar {
  background-color: color-mix(in oklch, var(--color-fd-primary) 2.5%, var(--color-fd-background));
  border-color: color-mix(in oklch, var(--color-fd-primary) 14%, var(--color-fd-border));
}

#nd-sidebar [data-radix-scroll-area-viewport],
#nd-sidebar-mobile [data-radix-scroll-area-viewport] {
  overflow-y: auto !important;
}

.homarr-docs-title {
  max-width: 22ch;
  font-size: clamp(2.15rem, 3.4vw, 2.75rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.homarr-docs-description {
  max-width: 62ch;
  color: var(--color-fd-muted-foreground);
}

.homarr-content-page {
  width: 100%;
  margin-inline: auto;
  padding: 3rem 1.25rem;
}

.homarr-content-header {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}

.homarr-content-title {
  max-width: 24ch;
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.homarr-content-lead {
  max-width: 65ch;
  margin-top: 1rem;
  color: var(--color-fd-muted-foreground);
  font-size: 1.125rem;
  line-height: 1.75;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .homarr-content-page {
    padding-inline: 2rem;
  }
}

@media (min-width: 1024px) {
  .homarr-content-page {
    padding-block: 4rem;
  }
}

.homarr-page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.homarr-blog-body :where(p, li) {
  font-size: 1.0625rem;
  line-height: 1.8;
}

.homarr-blog-body :where(img, video) {
  border-radius: 0.5rem;
}

.prose :where(h1, h2, h3) {
  text-wrap: balance;
}

.prose :where(p, li) {
  text-wrap: pretty;
}

.prose a[data-card="true"] {
  border-color: color-mix(in oklch, var(--color-fd-primary) 12%, var(--color-fd-border));
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.prose a[data-card="true"] > .not-prose:first-child {
  color: var(--color-fd-primary);
  background-color: color-mix(in oklch, var(--color-fd-primary) 9%, var(--color-fd-card));
  border-color: color-mix(in oklch, var(--color-fd-primary) 22%, var(--color-fd-border));
  box-shadow: none;
}

.prose a[data-card="true"]:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklch, var(--color-fd-primary) 38%, var(--color-fd-border));
}

@media print {
  #nd-docs-layout {
    --fd-sidebar-width: 0px !important;
  }

  #nd-sidebar,
  .homarr-page-actions {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.prose a:not([data-card="true"]),
footer a {
  text-decoration-line: underline;
  text-underline-offset: 0.16em;
}

.dark .prose a code {
  color: var(--color-fd-primary);
}

/* Place Carbon after the TOC, or below the page content when no TOC is visible. */
.homarr-carbon {
  width: 100%;
  max-width: 300px;
  margin: 1.5rem auto 0;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.5;
}
.homarr-carbon-banner {
  margin-top: 1rem;
}
.homarr-carbon:has(> div:empty) {
  margin-block: 0;
}
.homarr-carbon img {
  max-width: 100%;
}
.homarr-carbon-toc {
  display: none;
}
@media (min-width: 1280px) {
  .homarr-carbon-toc {
    display: block;
  }
  .homarr-carbon-inline {
    display: none;
  }
}

/* Keep the ad in the side column on pages with no headings, without an empty TOC label. */
.homarr-docs-toc:not(:has(a[href^="#"])) > :not(.homarr-carbon) {
  display: none;
}