mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
updates graphiql fonts
This commit is contained in:
Alaister Young committed
1 parent
aef943f8a1
commit
8273fd2f0d
6 files changed
+317
-37
No files matched your search
Generated
+3
-32
@@ -16956,6 +16956,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"
|
||||
}
|
||||
@@ -19858,23 +19859,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",
|
||||
@@ -39457,7 +39441,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",
|
||||
@@ -52873,7 +52856,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
|
||||
},
|
||||
"env-paths": {
|
||||
"version": "2.2.1",
|
||||
@@ -54998,18 +54982,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",
|
||||
@@ -66715,7 +66687,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",
|
||||
|
||||
@@ -26,12 +26,12 @@ import {
|
||||
useMergeQuery,
|
||||
usePluginContext,
|
||||
usePrettifyEditors,
|
||||
useSchemaContext, useTheme,
|
||||
VariableEditor
|
||||
useSchemaContext,
|
||||
useTheme,
|
||||
VariableEditor,
|
||||
} from '@graphiql/react'
|
||||
import { Fetcher } from '@graphiql/toolkit'
|
||||
import clsx from 'clsx'
|
||||
import 'graphiql/graphiql.css'
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from './graphiql.module.css'
|
||||
|
||||
|
||||
@@ -45,7 +45,8 @@
|
||||
@apply z-10;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
/* Variables */
|
||||
|
||||
:global(body.graphiql-dark) .graphiqlContainer {
|
||||
--color-base: 0, 0%, 11%;
|
||||
--color-primary: 153, 50%, 50%;
|
||||
@@ -55,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'
|
||||
|
||||
@@ -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