@graphiql/react
Version:
[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)
181 lines (164 loc) • 4.74 kB
CSS
@import url('codemirror/lib/codemirror.css');
/* Make the editors fill up their container and make them scrollable */
.graphiql-container .CodeMirror {
height: 100%;
position: absolute;
width: 100%;
}
/* Override font settings */
.graphiql-container .CodeMirror {
font-family: var(--font-family-mono);
}
/* Set default background color */
.graphiql-container .CodeMirror,
.graphiql-container .CodeMirror-gutters {
background: none;
background-color: var(--editor-background, hsl(var(--color-base)));
}
/* No padding around line numbers */
.graphiql-container .CodeMirror-linenumber {
padding: 0;
}
/* No border between gutter and editor */
.graphiql-container .CodeMirror-gutters {
border: none;
}
/**
* Editor theme
*/
.cm-s-graphiql {
/* Default to punctuation */
color: hsla(var(--color-neutral), var(--alpha-tertiary));
/* OperationType, `fragment`, `on` */
& .cm-keyword {
color: hsl(var(--color-primary));
}
/* Name (OperationDefinition), FragmentName */
& .cm-def {
color: hsl(var(--color-tertiary));
}
/* Punctuator (except `$` and `@`) */
& .cm-punctuation {
color: hsla(var(--color-neutral), var(--alpha-tertiary));
}
/* Variable */
& .cm-variable {
color: hsl(var(--color-secondary));
}
/* NamedType */
& .cm-atom {
color: hsl(var(--color-tertiary));
}
/* IntValue, FloatValue */
& .cm-number {
color: hsl(var(--color-success));
}
/* StringValue */
& .cm-string {
color: hsl(var(--color-warning));
}
/* BooleanValue */
& .cm-builtin {
color: hsl(var(--color-success));
}
/* EnumValue */
& .cm-string-2 {
color: hsl(var(--color-secondary));
}
/* Name (ObjectField, Argument) */
& .cm-attribute {
color: hsl(var(--color-tertiary));
}
/* Name (Directive) */
& .cm-meta {
color: hsl(var(--color-tertiary));
}
/* Name (Alias, Field without Alias) */
& .cm-property {
color: hsl(var(--color-info));
}
/* Name (Field with Alias) */
& .cm-qualifier {
color: hsl(var(--color-secondary));
}
/* Comment */
& .cm-comment {
color: hsla(var(--color-neutral), var(--alpha-secondary));
}
/* Whitespace */
& .cm-ws {
color: hsla(var(--color-neutral), var(--alpha-tertiary));
}
/* Invalid characters */
& .cm-invalidchar {
color: hsl(var(--color-error));
}
/* Cursor */
& .CodeMirror-cursor {
border-left: 2px solid hsla(var(--color-neutral), var(--alpha-secondary));
}
/* Color for line numbers and fold-gutters */
& .CodeMirror-linenumber {
color: hsla(var(--color-neutral), var(--alpha-tertiary));
}
}
/* Matching bracket colors */
.graphiql-container div.CodeMirror span.CodeMirror-matchingbracket,
.graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
color: hsl(var(--color-warning));
}
/* Selected text blocks */
.graphiql-container .CodeMirror-selected,
.graphiql-container .CodeMirror-focused .CodeMirror-selected {
background: hsla(var(--color-neutral), var(--alpha-background-heavy));
}
/* Position the search dialog */
.graphiql-container .CodeMirror-dialog {
background: inherit;
color: inherit;
left: 0;
right: 0;
overflow: hidden;
padding: var(--px-2) var(--px-6);
position: absolute;
z-index: 6;
}
.graphiql-container .CodeMirror-dialog-top {
border-bottom: 1px solid
hsla(var(--color-neutral), var(--alpha-background-heavy));
padding-bottom: var(--px-12);
top: 0;
}
.graphiql-container .CodeMirror-dialog-bottom {
border-top: 1px solid
hsla(var(--color-neutral), var(--alpha-background-heavy));
bottom: 0;
padding-top: var(--px-12);
}
/* Hide the search hint */
.graphiql-container .CodeMirror-search-hint {
display: none;
}
/* Style the input field for searching */
.graphiql-container .CodeMirror-dialog input {
border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
border-radius: var(--border-radius-4);
padding: var(--px-4);
}
.graphiql-container .CodeMirror-dialog input:focus {
outline: hsl(var(--color-primary)) solid 2px;
}
/* Set the highlight color for search results */
.graphiql-container .cm-searching {
background-color: hsla(var(--color-warning), var(--alpha-background-light));
/**
* When cycling through search results, CodeMirror overlays the current
* selection with another element that has the .CodeMirror-selected class
* applied. This adds another background color (see above), but this extra
* box does not quite match the height of this element. To match them up we
* add some extra padding here. (Note that this doesn't affect the line
* height of the CodeMirror editor as all line wrappers have a fixed height.)
*/
padding-bottom: 1.5px;
padding-top: 0.5px;
}