vitepress-openapi/src/style.css

Generate VitePress API Documentation from OpenAPI Specification.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --input: 214.3 31.8% 91.4%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --input: 217.2 32.6% 17.5%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --ring: 212.7 26.8% 83.9%;
  }
}

@layer components {
  .border,
  .border-r,
  .border-l,
  .border-t,
  .border-b,
  .border-x,
  .border-y {
    border-color: var(--vp-c-divider);
  }
}

/**
  Sidebar
 */

.OASidebarItem {
  @apply flex flex-row items-center w-full px-2 space-x-1;
}
.OASidebarItem-badge {
  @apply px-1 py-0.5 text-xs rounded;
}

/**
  Method badges
 */

.OAMethodBadge--get {
  @apply bg-green-200 text-green-800
    group-hover/oaOperationLink:bg-green-300 hover:bg-green-300
    dark:bg-green-800 dark:text-green-200
    dark:group-hover/oaOperationLink:bg-green-700 dark:hover:bg-green-700;
}
.OAMethodBadge--post {
  @apply bg-blue-200 text-blue-800
    group-hover/oaOperationLink:bg-blue-300 hover:bg-blue-300
    dark:bg-blue-800 dark:text-blue-200
    dark:group-hover/oaOperationLink:bg-blue-700 dark:hover:bg-blue-700;
}
.OAMethodBadge--put {
  @apply bg-yellow-200 text-yellow-800
    group-hover/oaOperationLink:bg-yellow-300 hover:bg-yellow-300
    dark:bg-yellow-800 dark:text-yellow-200
    dark:group-hover/oaOperationLink:bg-yellow-700 dark:hover:bg-yellow-700;
}
.OAMethodBadge--delete {
  @apply bg-red-200 text-red-800
    group-hover/oaOperationLink:bg-red-300 hover:bg-red-300
    dark:bg-red-800 dark:text-red-200
    dark:group-hover/oaOperationLink:bg-red-700 dark:hover:bg-red-700;
}
.OAMethodBadge--patch {
  @apply bg-purple-200 text-purple-800
    group-hover/oaOperationLink:bg-purple-300 hover:bg-purple-300
    dark:bg-purple-800 dark:text-purple-200
    dark:group-hover/oaOperationLink:bg-purple-700 dark:hover:bg-purple-700;
}
.OAMethodBadge--options {
  @apply bg-indigo-200 text-indigo-800
    group-hover/oaOperationLink:bg-indigo-300 hover:bg-indigo-300
    dark:bg-indigo-800 dark:text-indigo-200
    dark:group-hover/oaOperationLink:bg-indigo-700 dark:hover:bg-indigo-700;
}
.OAMethodBadge--head {
  @apply bg-pink-200 text-pink-800
    group-hover/oaOperationLink:bg-pink-300 hover:bg-pink-300
    dark:bg-pink-800 dark:text-pink-200
    dark:group-hover/oaOperationLink:bg-pink-700 dark:hover:bg-pink-700;
}

.text-method-get {
  @apply text-green-800 dark:text-green-200;
}
.text-method-post {
  @apply text-blue-800 dark:text-blue-200;
}
.text-method-put {
  @apply text-yellow-800 dark:text-yellow-200;
}
.text-method-delete {
  @apply text-red-800 dark:text-red-200;
}
.text-method-patch {
  @apply text-purple-800 dark:text-purple-200;
}
.text-method-options {
  @apply text-indigo-800 dark:text-indigo-200;
}
.text-method-head {
  @apply text-pink-800 dark:text-pink-200;
}

/**
  Next links
 */
.pager-link.next .title .OASidebarItem {
  @apply justify-end;
}

/**
  OAMarkdown
 */
.OAMarkdown.oa-doc p {
  @apply my-1 !important;
}
.OAMarkdown.oa-doc pre {
  @apply max-w-full overflow-x-auto my-1 p-2 rounded;
  background-color: var(--vp-code-block-bg);
}

/**
  OAPath
 */
.VPDoc.has-aside .OAPathContentEnd {
  @apply px-2;
}
.VPDoc:not(.has-aside) .OAPathContentEnd {
  @apply sm:px-6;
}