UNPKG

@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
@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; }