@graphiql/react/src/ui/markdown.css

[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md) | [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html) | [NPM](https://www.npmjs.com/package/@graphiql/react)

/**
 * We render markdown in the following places:
 * - In the hint tooltip when typing in the query editor (field description
 *   and, optionally, deprecation reason).
 * - In the info tooltip when hovering over a field in the query editor
 *   (field description and, optionally, deprecation reason).
 */

.graphiql-markdown-description,
.graphiql-markdown-deprecation,
.CodeMirror-hint-information-description,
.CodeMirror-hint-information-deprecation-reason,
.CodeMirror-info .info-description,
.CodeMirror-info .info-deprecation {
  & blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--px-8);
  }

  & code,
  & pre {
    border-radius: var(--border-radius-4);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-inline-code);
  }

  & code {
    padding: var(--px-2);
  }

  & pre {
    overflow: auto;
    padding: var(--px-6) var(--px-8);
  }

  & pre code {
    background-color: initial;
    border-radius: 0;
    padding: 0;
  }

  & ol,
  & ul {
    padding-left: var(--px-16);
  }

  & ol {
    list-style-type: decimal;
  }

  & ul {
    list-style-type: disc;
  }

  & img {
    border-radius: var(--border-radius-4);
    max-height: 120px;
    max-width: 100%;
  }

  & > :first-child {
    margin-top: 0;
  }

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

.graphiql-markdown-description,
.CodeMirror-hint-information-description,
.CodeMirror-info .info-description {
  & a {
    color: hsl(var(--color-primary));
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  & blockquote {
    border-left: 1.5px solid hsla(var(--color-neutral), var(--alpha-tertiary));
  }

  & code,
  & pre {
    background-color: hsla(var(--color-neutral), var(--alpha-background-light));
    color: hsl(var(--color-neutral));
  }

  & > * {
    margin: var(--px-12) 0;
  }
}

.graphiql-markdown-deprecation,
.CodeMirror-hint-information-deprecation-reason,
.CodeMirror-info .info-deprecation {
  & a {
    color: hsl(var(--color-warning));
    text-decoration: underline;
  }

  & blockquote {
    border-left: 1.5px solid hsl(var(--color-warning));
  }

  & code,
  & pre {
    background-color: hsla(var(--color-warning), var(--alpha-background-heavy));
  }

  & > * {
    margin: var(--px-8) 0;
  }
}

.graphiql-markdown-preview > :not(:first-child) {
  display: none;
}

/**
 * We show deprecations in the following places:
 * - In the hint tooltip when typing in the query editor.
 * - In the info tooltip when hovering over a field in the query editor.
 */

.CodeMirror-hint-information-deprecation,
.CodeMirror-info .info-deprecation {
  background-color: hsla(var(--color-warning), var(--alpha-background-light));
  border: 1px solid hsl(var(--color-warning));
  border-radius: var(--border-radius-4);
  color: hsl(var(--color-warning));
  margin-top: var(--px-12);
  padding: var(--px-6) var(--px-8);
}

.CodeMirror-hint-information-deprecation-label,
.CodeMirror-info .info-deprecation-label {
  font-size: var(--font-size-hint);
  font-weight: var(--font-weight-medium);
}

.CodeMirror-hint-information-deprecation-reason,
.CodeMirror-info .info-deprecation-reason {
  margin-top: var(--px-6);
}