mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Merge pull request #12698 from supabase/chore/graphiql-cleanup
chore: graphiql cleanup
This commit is contained in:
7 files changed
+381
-250
No files matched your search
Generated
+3
-32
@@ -16861,6 +16861,7 @@
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
|
||||
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
@@ -19752,23 +19753,6 @@
|
||||
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/graphiql": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/graphiql/-/graphiql-2.2.0.tgz",
|
||||
"integrity": "sha512-w1ujpCKMlkwkoUjeg0HpRiBBTm1WHAjHNkFv1TbMu6trjzz63mQ48GLZlmyQY1yhwmc+diCcvmmAt+AyvKLWWA==",
|
||||
"dependencies": {
|
||||
"@graphiql/react": "^0.15.0",
|
||||
"@graphiql/toolkit": "^0.8.0",
|
||||
"entities": "^2.0.0",
|
||||
"graphql-language-service": "^5.1.0",
|
||||
"markdown-it": "^12.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"graphql": "^15.5.0 || ^16.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/graphlib": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
|
||||
@@ -38745,7 +38729,6 @@
|
||||
"dayjs": "^1.11.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"generate-password": "^1.7.0",
|
||||
"graphiql": "^2.2.0",
|
||||
"graphql": "^16.6.0",
|
||||
"graphql-ws": "^5.11.3",
|
||||
"html-to-image": "^1.10.8",
|
||||
@@ -52143,7 +52126,8 @@
|
||||
"entities": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
|
||||
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
|
||||
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
|
||||
"dev": true
|
||||
},
|
||||
"errno": {
|
||||
"version": "0.1.8",
|
||||
@@ -54260,18 +54244,6 @@
|
||||
"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
|
||||
"dev": true
|
||||
},
|
||||
"graphiql": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/graphiql/-/graphiql-2.2.0.tgz",
|
||||
"integrity": "sha512-w1ujpCKMlkwkoUjeg0HpRiBBTm1WHAjHNkFv1TbMu6trjzz63mQ48GLZlmyQY1yhwmc+diCcvmmAt+AyvKLWWA==",
|
||||
"requires": {
|
||||
"@graphiql/react": "^0.15.0",
|
||||
"@graphiql/toolkit": "^0.8.0",
|
||||
"entities": "^2.0.0",
|
||||
"graphql-language-service": "^5.1.0",
|
||||
"markdown-it": "^12.2.0"
|
||||
}
|
||||
},
|
||||
"graphlib": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
|
||||
@@ -65519,7 +65491,6 @@
|
||||
"dayjs": "^1.11.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"generate-password": "^1.7.0",
|
||||
"graphiql": "^2.2.0",
|
||||
"graphql": "^16.6.0",
|
||||
"graphql-ws": "^5.11.3",
|
||||
"html-to-image": "^1.10.8",
|
||||
|
||||
@@ -1,22 +1,18 @@
|
||||
/* Based on https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/components/GraphiQL.tsx */
|
||||
|
||||
import {
|
||||
Button,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
CopyIcon,
|
||||
Dialog,
|
||||
ExecuteButton,
|
||||
GraphiQLProvider,
|
||||
HeaderEditor,
|
||||
KeyboardShortcutIcon,
|
||||
MergeIcon,
|
||||
PlusIcon,
|
||||
PrettifyIcon,
|
||||
QueryEditor,
|
||||
ReloadIcon,
|
||||
ResponseEditor,
|
||||
SettingsIcon,
|
||||
Spinner,
|
||||
Tab,
|
||||
Tabs,
|
||||
@@ -31,14 +27,12 @@ import {
|
||||
usePluginContext,
|
||||
usePrettifyEditors,
|
||||
useSchemaContext,
|
||||
useStorageContext,
|
||||
useTheme,
|
||||
VariableEditor,
|
||||
} from '@graphiql/react'
|
||||
import { Fetcher } from '@graphiql/toolkit'
|
||||
import clsx from 'clsx'
|
||||
import 'graphiql/graphiql.css'
|
||||
import { PropsWithChildren, useEffect, useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from './graphiql.module.css'
|
||||
|
||||
export type GraphiQLProps = {
|
||||
@@ -77,7 +71,6 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
const editorContext = useEditorContext({ nonNull: true })
|
||||
const executionContext = useExecutionContext({ nonNull: true })
|
||||
const schemaContext = useSchemaContext({ nonNull: true })
|
||||
const storageContext = useStorageContext()
|
||||
const pluginContext = usePluginContext()
|
||||
|
||||
const copy = useCopyQuery()
|
||||
@@ -124,10 +117,6 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
: 'variables'
|
||||
}
|
||||
)
|
||||
const [showDialog, setShowDialog] = useState<'settings' | 'short-keys' | null>(null)
|
||||
const [clearStorageStatus, setClearStorageStatus] = useState<'success' | 'error' | null>(null)
|
||||
|
||||
const logo = <GraphiQLLogo />
|
||||
|
||||
const toolbar = (
|
||||
<>
|
||||
@@ -149,19 +138,19 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
}
|
||||
}
|
||||
|
||||
const modifier =
|
||||
window.navigator.platform.toLowerCase().indexOf('mac') === 0 ? (
|
||||
<code className="graphiql-key">Cmd</code>
|
||||
) : (
|
||||
<code className="graphiql-key">Ctrl</code>
|
||||
)
|
||||
const hasSingleTab = editorContext.tabs.length === 1
|
||||
|
||||
return (
|
||||
<div className={clsx('graphiql-container', styles.graphiqlContainer)}>
|
||||
<div className="graphiql-main">
|
||||
<div ref={pluginResize.firstRef} style={{ minWidth: 0 }}>
|
||||
<div className={clsx('graphiql-sessions', styles.graphiqlSessions)}>
|
||||
<div className="graphiql-session-header">
|
||||
<div
|
||||
className={clsx(
|
||||
'graphiql-session-header',
|
||||
!hasSingleTab && styles.graphiqlSessionHeader
|
||||
)}
|
||||
>
|
||||
<Tabs aria-label="Select active operation">
|
||||
{editorContext.tabs.length > 1 ? (
|
||||
<>
|
||||
@@ -203,8 +192,8 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
) : null}
|
||||
</Tabs>
|
||||
<div className="graphiql-session-header-right">
|
||||
{editorContext.tabs.length === 1 ? (
|
||||
<div className="graphiql-add-tab-wrapper">
|
||||
{hasSingleTab ? (
|
||||
<div className={clsx('graphiql-add-tab-wrapper', styles.graphiqlAddTabWrapper)}>
|
||||
<Tooltip label="Add tab">
|
||||
<UnStyledButton
|
||||
type="button"
|
||||
@@ -217,7 +206,6 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : null}
|
||||
{logo}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -228,12 +216,17 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
>
|
||||
<div ref={editorResize.firstRef}>
|
||||
<div
|
||||
className={`graphiql-editors ${styles.graphiqlEditors}${
|
||||
editorContext.tabs.length === 1 ? ' full-height' : ''
|
||||
}`}
|
||||
className={clsx(
|
||||
'graphiql-editors',
|
||||
styles.graphiqlEditors,
|
||||
hasSingleTab && 'full-height'
|
||||
)}
|
||||
>
|
||||
<div ref={editorToolsResize.firstRef}>
|
||||
<section className="graphiql-query-editor" aria-label="Query Editor">
|
||||
<section
|
||||
className={clsx('graphiql-query-editor', styles.graphiqlQueryEditor)}
|
||||
aria-label="Query Editor"
|
||||
>
|
||||
<div className="graphiql-query-editor-wrapper">
|
||||
<QueryEditor />
|
||||
</div>
|
||||
@@ -327,10 +320,19 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
</div>
|
||||
</div>
|
||||
<div ref={editorResize.dragBarRef}>
|
||||
<div className="graphiql-horizontal-drag-bar" />
|
||||
<div
|
||||
className={clsx('graphiql-horizontal-drag-bar', styles.graphiqlHorizontalDragBar)}
|
||||
/>
|
||||
</div>
|
||||
<div ref={editorResize.secondRef}>
|
||||
<div className="graphiql-response">
|
||||
<div
|
||||
className={clsx(
|
||||
'graphiql-response',
|
||||
hasSingleTab
|
||||
? styles.graphiqlResponseSingleTab
|
||||
: styles.graphiqlResponseMultiTab
|
||||
)}
|
||||
>
|
||||
{executionContext.isFetching ? <Spinner /> : null}
|
||||
<ResponseEditor />
|
||||
</div>
|
||||
@@ -340,7 +342,11 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
</div>
|
||||
|
||||
<div ref={pluginResize.dragBarRef}>
|
||||
{pluginContext?.visiblePlugin ? <div className="graphiql-horizontal-drag-bar" /> : null}
|
||||
{pluginContext?.visiblePlugin ? (
|
||||
<div
|
||||
className={clsx('graphiql-horizontal-drag-bar', styles.graphiqlHorizontalDragBar)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -354,7 +360,7 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
<div className="graphiql-plugin">{PluginContent ? <PluginContent /> : null}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="graphiql-sidebar">
|
||||
<div className={clsx('graphiql-sidebar', styles.graphiqlSidebar)}>
|
||||
<div className="graphiql-sidebar-section">
|
||||
{pluginContext?.plugins.map((plugin) => {
|
||||
const isVisible = plugin === pluginContext.visiblePlugin
|
||||
@@ -396,195 +402,10 @@ export const GraphiQLInterface = ({ theme }: GraphiQLInterfaceProps) => {
|
||||
/>
|
||||
</UnStyledButton>
|
||||
</Tooltip>
|
||||
<Tooltip label="Open short keys dialog">
|
||||
<UnStyledButton
|
||||
type="button"
|
||||
onClick={() => setShowDialog('short-keys')}
|
||||
aria-label="Open short keys dialog"
|
||||
>
|
||||
<KeyboardShortcutIcon aria-hidden="true" />
|
||||
</UnStyledButton>
|
||||
</Tooltip>
|
||||
<Tooltip label="Open settings dialog">
|
||||
<UnStyledButton
|
||||
type="button"
|
||||
onClick={() => setShowDialog('settings')}
|
||||
aria-label="Open settings dialog"
|
||||
>
|
||||
<SettingsIcon aria-hidden="true" />
|
||||
</UnStyledButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog isOpen={showDialog === 'short-keys'} onDismiss={() => setShowDialog(null)}>
|
||||
<div className="graphiql-dialog-header">
|
||||
<div className="graphiql-dialog-title">Short Keys</div>
|
||||
<Dialog.Close onClick={() => setShowDialog(null)} />
|
||||
</div>
|
||||
<div className="graphiql-dialog-section">
|
||||
<div>
|
||||
<table className="graphiql-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Short key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{modifier}
|
||||
{' + '}
|
||||
<code className="graphiql-key">F</code>
|
||||
</td>
|
||||
<td>Search in editor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{modifier}
|
||||
{' + '}
|
||||
<code className="graphiql-key">K</code>
|
||||
</td>
|
||||
<td>Search in documentation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{modifier}
|
||||
{' + '}
|
||||
<code className="graphiql-key">Enter</code>
|
||||
</td>
|
||||
<td>Execute query</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code className="graphiql-key">Ctrl</code>
|
||||
{' + '}
|
||||
<code className="graphiql-key">Shift</code>
|
||||
{' + '}
|
||||
<code className="graphiql-key">P</code>
|
||||
</td>
|
||||
<td>Prettify editors</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code className="graphiql-key">Ctrl</code>
|
||||
{' + '}
|
||||
<code className="graphiql-key">Shift</code>
|
||||
{' + '}
|
||||
<code className="graphiql-key">M</code>
|
||||
</td>
|
||||
<td>Merge fragments definitions into operation definition</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code className="graphiql-key">Ctrl</code>
|
||||
{' + '}
|
||||
<code className="graphiql-key">Shift</code>
|
||||
{' + '}
|
||||
<code className="graphiql-key">C</code>
|
||||
</td>
|
||||
<td>Copy query</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code className="graphiql-key">Ctrl</code>
|
||||
{' + '}
|
||||
<code className="graphiql-key">Shift</code>
|
||||
{' + '}
|
||||
<code className="graphiql-key">R</code>
|
||||
</td>
|
||||
<td>Re-fetch schema using introspection</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
The editors use{' '}
|
||||
<a
|
||||
href="https://codemirror.net/5/doc/manual.html#keymaps"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
CodeMirror Key Maps
|
||||
</a>{' '}
|
||||
that add more short keys. This instance of Graph<em>i</em>QL uses <code>sublime</code>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<Dialog
|
||||
isOpen={showDialog === 'settings'}
|
||||
onDismiss={() => {
|
||||
setShowDialog(null)
|
||||
setClearStorageStatus(null)
|
||||
}}
|
||||
>
|
||||
<div className="graphiql-dialog-header">
|
||||
<div className="graphiql-dialog-title">Settings</div>
|
||||
<Dialog.Close
|
||||
onClick={() => {
|
||||
setShowDialog(null)
|
||||
setClearStorageStatus(null)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{storageContext ? (
|
||||
<div className="graphiql-dialog-section">
|
||||
<div>
|
||||
<div className="graphiql-dialog-section-title">Clear storage</div>
|
||||
<div className="graphiql-dialog-section-caption">
|
||||
Remove all locally stored data and start fresh.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
type="button"
|
||||
state={clearStorageStatus || undefined}
|
||||
disabled={clearStorageStatus === 'success'}
|
||||
onClick={() => {
|
||||
try {
|
||||
storageContext?.clear()
|
||||
setClearStorageStatus('success')
|
||||
} catch {
|
||||
setClearStorageStatus('error')
|
||||
}
|
||||
}}
|
||||
>
|
||||
{clearStorageStatus === 'success'
|
||||
? 'Cleared data'
|
||||
: clearStorageStatus === 'error'
|
||||
? 'Failed'
|
||||
: 'Clear data'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Configure the UI by providing this Component as a child of GraphiQL.
|
||||
function GraphiQLLogo<TProps>(props: PropsWithChildren<TProps>) {
|
||||
return (
|
||||
<div className="graphiql-logo">
|
||||
{props.children || (
|
||||
<a
|
||||
className="graphiql-logo-link"
|
||||
href="https://github.com/graphql/graphiql"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Graph
|
||||
<em>i</em>
|
||||
QL
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
GraphiQLLogo.displayName = 'GraphiQLLogo'
|
||||
|
||||
export default GraphiQL
|
||||
@@ -15,7 +15,38 @@
|
||||
margin-top: calc(0px - var(--session-header-height));
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
.graphiqlContainer .graphiqlQueryEditor {
|
||||
@apply border-b border-scale-500;
|
||||
}
|
||||
|
||||
.graphiqlContainer .graphiqlSessionHeader {
|
||||
background-color: hsl(var(--color-base));
|
||||
@apply border-b border-scale-500;
|
||||
}
|
||||
|
||||
.graphiqlContainer .graphiqlResponseSingleTab {
|
||||
margin-top: calc(24px - var(--session-header-height));
|
||||
}
|
||||
|
||||
.graphiqlContainer .graphiqlResponseMultiTab {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.graphiqlContainer .graphiqlSidebar {
|
||||
@apply border-l border-scale-500;
|
||||
}
|
||||
|
||||
.graphiqlHorizontalDragBar {
|
||||
@apply border-l border-scale-500;
|
||||
}
|
||||
|
||||
.graphiqlAddTabWrapper {
|
||||
padding: var(--px-12);
|
||||
@apply z-10;
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
|
||||
:global(body.graphiql-dark) .graphiqlContainer {
|
||||
--color-base: 0, 0%, 11%;
|
||||
--color-primary: 153, 50%, 50%;
|
||||
@@ -25,3 +56,8 @@
|
||||
--color-base: 210, 17%, 98%;
|
||||
--color-primary: 153, 50%, 50%;
|
||||
}
|
||||
|
||||
.graphiqlContainer {
|
||||
--font-family: theme(fontFamily.sans);
|
||||
--font-family-mono: theme(fontFamily.mono);
|
||||
}
|
||||
@@ -46,7 +46,6 @@
|
||||
"dayjs": "^1.11.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"generate-password": "^1.7.0",
|
||||
"graphiql": "^2.2.0",
|
||||
"graphql": "^16.6.0",
|
||||
"graphql-ws": "^5.11.3",
|
||||
"html-to-image": "^1.10.8",
|
||||
|
||||
@@ -10,6 +10,7 @@ import 'styles/contextMenu.scss'
|
||||
import 'styles/react-data-grid-logs.scss'
|
||||
import 'styles/date-picker.scss'
|
||||
import 'styles/grid.scss'
|
||||
import 'styles/graphiql-base.scss'
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
||||
|
||||
@@ -128,8 +128,8 @@ export default class UiStore implements IUiStore {
|
||||
}
|
||||
|
||||
setTheme(theme: 'dark' | 'light') {
|
||||
document.body.classList.replace(this.theme, theme)
|
||||
this.theme = theme
|
||||
document.body.className = theme
|
||||
}
|
||||
|
||||
onThemeOptionChange(themeOption: 'dark' | 'light' | 'system') {
|
||||
|
||||
@@ -0,0 +1,303 @@
|
||||
/* GraphiQL Base styles from https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/style.css with font face directives removed */
|
||||
|
||||
.graphiql-container *{box-sizing:border-box}.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal{--color-primary: 320, 95%, 43%;--color-secondary: 242, 51%, 61%;--color-tertiary: 188, 100%, 36%;--color-info: 208, 100%, 46%;--color-success: 158, 60%, 42%;--color-warning: 36, 100%, 41%;--color-error: 13, 93%, 58%;--color-neutral: 219, 28%, 32%;--color-base: 219, 28%, 100%;--alpha-secondary: .76;--alpha-tertiary: .5;--alpha-background-heavy: .15;--alpha-background-medium: .1;--alpha-background-light: .07;--font-family: "Roboto", sans-serif;--font-family-mono: "Fira Code", monospace;--font-size-hint:.75rem;--font-size-inline-code:.8125rem;--font-size-body:.9375rem;--font-size-h4:1.125rem;--font-size-h3:1.375rem;--font-size-h2:1.8125rem;--font-weight-regular: 400;--font-weight-medium: 500;--line-height: 1.5;--px-2: 2px;--px-4: 4px;--px-6: 6px;--px-8: 8px;--px-10: 10px;--px-12: 12px;--px-16: 16px;--px-20: 20px;--px-24: 24px;--border-radius-2: 2px;--border-radius-4: 4px;--border-radius-8: 8px;--border-radius-12: 12px;--popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, .13), 0px 1.34018px 4.46726px rgba(59, 76, 106, .0774939), 0px .399006px 1.33002px rgba(59, 76, 106, .0525061);--popover-border: none;--sidebar-width: 60px;--toolbar-width: 40px;--session-header-height: 51px}@media (prefers-color-scheme: dark){body:not(.graphiql-light) .graphiql-container,body:not(.graphiql-light) .CodeMirror-info,body:not(.graphiql-light) .CodeMirror-lint-tooltip,body:not(.graphiql-light) reach-portal{--color-primary: 338, 100%, 67%;--color-secondary: 243, 100%, 77%;--color-tertiary: 188, 100%, 44%;--color-info: 208, 100%, 72%;--color-success: 158, 100%, 42%;--color-warning: 30, 100%, 80%;--color-error: 13, 100%, 58%;--color-neutral: 219, 29%, 78%;--color-base: 219, 29%, 18%;--popover-box-shadow: none;--popover-border: 1px solid hsl(var(--color-neutral))}}body.graphiql-dark .graphiql-container,body.graphiql-dark .CodeMirror-info,body.graphiql-dark .CodeMirror-lint-tooltip,body.graphiql-dark reach-portal{--color-primary: 338, 100%, 67%;--color-secondary: 243, 100%, 77%;--color-tertiary: 188, 100%, 44%;--color-info: 208, 100%, 72%;--color-success: 158, 100%, 42%;--color-warning: 30, 100%, 80%;--color-error: 13, 100%, 58%;--color-neutral: 219, 29%, 78%;--color-base: 219, 29%, 18%;--popover-box-shadow: none;--popover-border: 1px solid hsl(var(--color-neutral))}:is(.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal),:is(.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal):is(button){color:hsla(var(--color-neutral),1);font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(----font-weight-regular);line-height:var(--line-height)}:is(.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal) input{color:hsla(var(--color-neutral),1);font-family:var(--font-family);font-size:var(--font-size-caption)}:is(.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal) input::placeholder{color:hsla(var(--color-neutral),var(--alpha-secondary))}:is(.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal) a{color:hsl(var(--color-primary))}:is(.graphiql-container,.CodeMirror-info,.CodeMirror-lint-tooltip,reach-portal) a:focus{outline:hsl(var(--color-primary)) auto 1px}.graphiql-un-styled,button.graphiql-un-styled{all:unset;border-radius:var(--border-radius-4);cursor:pointer}:is(.graphiql-un-styled,button.graphiql-un-styled):hover{background-color:hsla(var(--color-neutral),var(--alpha-background-light))}:is(.graphiql-un-styled,button.graphiql-un-styled):active{background-color:hsla(var(--color-neutral),var(--alpha-background-medium))}:is(.graphiql-un-styled,button.graphiql-un-styled):focus{outline:hsla(var(--color-neutral),var(--alpha-background-heavy)) auto 1px}.graphiql-button,button.graphiql-button{background-color:hsla(var(--color-neutral),var(--alpha-background-light));border:none;border-radius:var(--border-radius-4);color:hsla(var(--color-neutral),1);cursor:pointer;font-size:var(--font-size-body);padding:var(--px-8) var(--px-12)}:is(.graphiql-button,button.graphiql-button):hover,:is(.graphiql-button,button.graphiql-button):active{background-color:hsla(var(--color-neutral),var(--alpha-background-medium))}:is(.graphiql-button,button.graphiql-button):focus{outline:hsla(var(--color-neutral),var(--alpha-background-heavy)) auto 1px}.graphiql-button-success:is(.graphiql-button,button.graphiql-button){background-color:hsla(var(--color-success),var(--alpha-background-heavy))}.graphiql-button-error:is(.graphiql-button,button.graphiql-button){background-color:hsla(var(--color-error),var(--alpha-background-heavy))}.graphiql-button-group{background-color:hsla(var(--color-neutral),var(--alpha-background-light));border-radius:calc(var(--border-radius-4) + var(--px-4));display:flex;padding:var(--px-4)}.graphiql-button-group>button.graphiql-button{background-color:transparent}.graphiql-button-group>button.graphiql-button:hLine truncated
|
||||
|
||||
/* Everything */
|
||||
.graphiql-container {
|
||||
background-color: hsl(var(--color-base));
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
/* The sidebar */
|
||||
.graphiql-container .graphiql-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: var(--px-8);
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
.graphiql-container .graphiql-sidebar .graphiql-sidebar-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--px-8);
|
||||
}
|
||||
.graphiql-container .graphiql-sidebar button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: hsla(var(--color-neutral), var(--alpha-secondary));
|
||||
height: calc(var(--sidebar-width) - (2 * var(--px-8)));
|
||||
width: calc(var(--sidebar-width) - (2 * var(--px-8)));
|
||||
}
|
||||
.graphiql-container .graphiql-sidebar button.active {
|
||||
color: hsla(var(--color-neutral), 1);
|
||||
}
|
||||
.graphiql-container .graphiql-sidebar button:not(:first-child) {
|
||||
margin-top: var(--px-4);
|
||||
}
|
||||
.graphiql-container .graphiql-sidebar button > svg {
|
||||
height: var(--px-20);
|
||||
width: var(--px-20);
|
||||
}
|
||||
/* The main content, i.e. everything except the sidebar */
|
||||
.graphiql-container .graphiql-main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
/* The current session and tabs */
|
||||
.graphiql-container .graphiql-sessions {
|
||||
background-color: hsla(var(--color-neutral), var(--alpha-background-light));
|
||||
/* Adding the 8px of padding to the inner border radius of the query editor */
|
||||
border-radius: calc(var(--border-radius-12) + var(--px-8));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
max-height: 100%;
|
||||
margin: var(--px-16);
|
||||
margin-left: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
/* The session header containing tabs and the logo */
|
||||
.graphiql-container .graphiql-session-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: var(--session-header-height);
|
||||
}
|
||||
/* The button to add a new tab */
|
||||
button.graphiql-tab-add {
|
||||
height: 100%;
|
||||
padding: 0 var(--px-4);
|
||||
}
|
||||
button.graphiql-tab-add > svg {
|
||||
color: hsla(var(--color-neutral), var(--alpha-secondary));
|
||||
display: block;
|
||||
height: var(--px-16);
|
||||
width: var(--px-16);
|
||||
}
|
||||
.graphiql-add-tab-wrapper {
|
||||
padding: var(--px-12) 0;
|
||||
}
|
||||
/* The right-hand-side of the session header */
|
||||
.graphiql-container .graphiql-session-header-right {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
/* The GraphiQL logo */
|
||||
.graphiql-container .graphiql-logo {
|
||||
color: hsla(var(--color-neutral), var(--alpha-secondary));
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: var(--px-12) var(--px-16);
|
||||
}
|
||||
/* Undo default link styling for the default GraphiQL logo link */
|
||||
.graphiql-container .graphiql-logo .graphiql-logo-link {
|
||||
color: hsla(var(--color-neutral), var(--alpha-secondary));
|
||||
text-decoration: none;
|
||||
}
|
||||
/* The editor of the session */
|
||||
.graphiql-container .graphiql-session {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 var(--px-8) var(--px-8);
|
||||
}
|
||||
/* All editors (query, variable, headers) */
|
||||
.graphiql-container .graphiql-editors {
|
||||
background-color: hsl(var(--color-base));
|
||||
border-radius: calc(var(--border-radius-12));
|
||||
box-shadow: var(--popover-box-shadow);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
.graphiql-container .graphiql-editors.full-height {
|
||||
margin-top: calc(var(--px-8) - var(--session-header-height));
|
||||
}
|
||||
/* The query editor and the toolbar */
|
||||
.graphiql-container .graphiql-query-editor {
|
||||
border-bottom: 1px solid
|
||||
hsla(var(--color-neutral), var(--alpha-background-heavy));
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: var(--px-16);
|
||||
}
|
||||
/* The query editor */
|
||||
.graphiql-container .graphiql-query-editor-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
/* The vertical toolbar next to the query editor */
|
||||
.graphiql-container .graphiql-toolbar {
|
||||
margin-left: var(--px-16);
|
||||
width: var(--toolbar-width);
|
||||
}
|
||||
.graphiql-container .graphiql-toolbar > * + * {
|
||||
margin-top: var(--px-8);
|
||||
}
|
||||
/* The toolbar icons */
|
||||
.graphiql-toolbar-icon {
|
||||
color: hsla(var(--color-neutral), var(--alpha-tertiary));
|
||||
display: block;
|
||||
height: calc(var(--toolbar-width) - (var(--px-8) * 2));
|
||||
width: calc(var(--toolbar-width) - (var(--px-8) * 2));
|
||||
}
|
||||
/* The tab bar for editor tools */
|
||||
.graphiql-container .graphiql-editor-tools {
|
||||
align-items: center;
|
||||
cursor: row-resize;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--px-8);
|
||||
}
|
||||
.graphiql-container .graphiql-editor-tools button {
|
||||
color: hsla(var(--color-neutral), var(--alpha-secondary));
|
||||
}
|
||||
.graphiql-container .graphiql-editor-tools button.active {
|
||||
color: hsla(var(--color-neutral), 1);
|
||||
}
|
||||
/* The tab buttons to switch between editor tools */
|
||||
.graphiql-container .graphiql-editor-tools-tabs {
|
||||
cursor: auto;
|
||||
display: flex;
|
||||
}
|
||||
.graphiql-container .graphiql-editor-tools-tabs > button {
|
||||
padding: var(--px-8) var(--px-12);
|
||||
}
|
||||
.graphiql-container .graphiql-editor-tools-tabs > button + button {
|
||||
margin-left: var(--px-8);
|
||||
}
|
||||
/* An editor tool, e.g. variable or header editor */
|
||||
.graphiql-container .graphiql-editor-tool {
|
||||
flex: 1;
|
||||
padding: var(--px-16);
|
||||
}
|
||||
/**
|
||||
* The way CodeMirror editors are styled they overflow their containing
|
||||
* element. For some OS-browser-combinations this might cause overlap issues,
|
||||
* setting the position of this to `relative` makes sure this element will
|
||||
* always be on top of any editors.
|
||||
*/
|
||||
.graphiql-container .graphiql-toolbar,
|
||||
.graphiql-container .graphiql-editor-tools,
|
||||
.graphiql-container .graphiql-editor-tool {
|
||||
position: relative;
|
||||
}
|
||||
/* The response view */
|
||||
.graphiql-container .graphiql-response {
|
||||
--editor-background: transparent;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
/* The results editor wrapping container */
|
||||
.graphiql-container .graphiql-response .result-window {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
/* The footer below the response view */
|
||||
.graphiql-container .graphiql-footer {
|
||||
border-top: 1px solid
|
||||
hsla(var(--color-neutral), var(--alpha-background-heavy));
|
||||
}
|
||||
/* The plugin container */
|
||||
.graphiql-container .graphiql-plugin {
|
||||
border-left: 1px solid
|
||||
hsla(var(--color-neutral), var(--alpha-background-heavy));
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--px-16);
|
||||
}
|
||||
/* Generic drag bar for horizontal resizing */
|
||||
.graphiql-container .graphiql-horizontal-drag-bar {
|
||||
width: var(--px-12);
|
||||
cursor: col-resize;
|
||||
}
|
||||
.graphiql-container .graphiql-horizontal-drag-bar:hover::after {
|
||||
border: var(--px-2) solid
|
||||
hsla(var(--color-neutral), var(--alpha-background-heavy));
|
||||
border-radius: var(--border-radius-2);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 25%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
/* (100% - 25%) / 2 = 37.5% */
|
||||
top: 37.5%;
|
||||
width: 0;
|
||||
}
|
||||
.graphiql-container .graphiql-chevron-icon {
|
||||
color: hsla(var(--color-neutral), var(--alpha-tertiary));
|
||||
display: block;
|
||||
height: var(--px-12);
|
||||
margin: var(--px-12);
|
||||
width: var(--px-12);
|
||||
}
|
||||
/* Generic spin animation */
|
||||
.graphiql-spin {
|
||||
animation: spin 0.8s linear 0s infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/* The header of the settings dialog */
|
||||
reach-portal .graphiql-dialog-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--px-24);
|
||||
}
|
||||
/* The title of the settings dialog */
|
||||
reach-portal .graphiql-dialog-title {
|
||||
font-size: var(--font-size-h3);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
/* A section inside the settings dialog */
|
||||
reach-portal .graphiql-dialog-section {
|
||||
align-items: center;
|
||||
border-top: 1px solid
|
||||
hsla(var(--color-neutral), var(--alpha-background-heavy));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--px-24);
|
||||
}
|
||||
reach-portal .graphiql-dialog-section > :not(:first-child) {
|
||||
margin-left: var(--px-24);
|
||||
}
|
||||
/* The section title in the settings dialog */
|
||||
reach-portal .graphiql-dialog-section-title {
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
/* The section caption in the settings dialog */
|
||||
reach-portal .graphiql-dialog-section-caption {
|
||||
color: hsla(var(--color-neutral), var(--alpha-secondary));
|
||||
}
|
||||
reach-portal .graphiql-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
reach-portal .graphiql-table :is(th, td) {
|
||||
border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
|
||||
padding: var(--px-8) var(--px-12);
|
||||
}
|
||||
/* A single key the short-key dialog */
|
||||
reach-portal .graphiql-key {
|
||||
background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
|
||||
border-radius: var(--border-radius-4);
|
||||
padding: var(--px-4);
|
||||
}
|
||||
/* Avoid showing native tooltips for icons with titles */
|
||||
.graphiql-container svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user