konnosDashboard
graphiql-base.css335 lines · main
1/* GraphiQL Base styles from https://github.com/graphql/graphiql/blob/main/packages/graphiql/src/style.css */
2
3/* Everything */
4.graphiql-container {
5 background-color: hsl(var(--color-base));
6 display: flex;
7 height: 100%;
8 margin: 0;
9 overflow: hidden;
10 width: 100%;
11}
12
13/* The sidebar */
14.graphiql-container .graphiql-sidebar {
15 display: flex;
16 flex-direction: column;
17 justify-content: space-between;
18 padding: var(--px-8);
19 width: var(--sidebar-width);
20}
21
22.graphiql-container .graphiql-sidebar .graphiql-sidebar-section {
23 display: flex;
24 flex-direction: column;
25 gap: var(--px-8);
26}
27
28.graphiql-container .graphiql-sidebar button {
29 display: flex;
30 align-items: center;
31 justify-content: center;
32 color: hsla(var(--color-neutral), var(--alpha-secondary));
33 height: calc(var(--sidebar-width) - (2 * var(--px-8)));
34 width: calc(var(--sidebar-width) - (2 * var(--px-8)));
35}
36
37.graphiql-container .graphiql-sidebar button.active {
38 color: hsla(var(--color-neutral), 1);
39}
40
41.graphiql-container .graphiql-sidebar button:not(:first-child) {
42 margin-top: var(--px-4);
43}
44
45.graphiql-container .graphiql-sidebar button > svg {
46 height: var(--px-20);
47 width: var(--px-20);
48}
49
50/* The main content, i.e. everything except the sidebar */
51.graphiql-container .graphiql-main {
52 display: flex;
53 flex: 1;
54 min-width: 0;
55}
56
57/* The current session and tabs */
58.graphiql-container .graphiql-sessions {
59 background-color: hsla(var(--color-neutral), var(--alpha-background-light));
60 /* Adding the 8px of padding to the inner border radius of the query editor */
61 border-radius: calc(var(--border-radius-12) + var(--px-8));
62 display: flex;
63 flex-direction: column;
64 flex: 1;
65 max-height: 100%;
66 margin: var(--px-16);
67 margin-left: 0;
68 min-width: 0;
69}
70
71/* The session header containing tabs and the logo */
72.graphiql-container .graphiql-session-header {
73 align-items: center;
74 display: flex;
75 justify-content: space-between;
76 height: var(--session-header-height);
77}
78
79/* The button to add a new tab */
80button.graphiql-tab-add {
81 height: 100%;
82 padding: var(--px-4);
83}
84
85button.graphiql-tab-add > svg {
86 color: hsla(var(--color-neutral), var(--alpha-secondary));
87 display: block;
88 height: var(--px-16);
89 width: var(--px-16);
90}
91
92/* The right-hand-side of the session header */
93.graphiql-container .graphiql-session-header-right {
94 align-items: center;
95 display: flex;
96}
97
98/* The GraphiQL logo */
99.graphiql-container .graphiql-logo {
100 color: hsla(var(--color-neutral), var(--alpha-secondary));
101 font-size: var(--font-size-h4);
102 font-weight: var(--font-weight-medium);
103 padding: var(--px-12) var(--px-16);
104}
105
106/* Undo default link styling for the default GraphiQL logo link */
107.graphiql-container .graphiql-logo .graphiql-logo-link {
108 color: hsla(var(--color-neutral), var(--alpha-secondary));
109 text-decoration: none;
110}
111
112/* The editor of the session */
113.graphiql-container .graphiql-session {
114 display: flex;
115 flex: 1;
116 padding: 0 var(--px-8) var(--px-8);
117}
118
119/* All editors (query, variable, headers) */
120.graphiql-container .graphiql-editors {
121 background-color: hsl(var(--color-base));
122 border-radius: calc(var(--border-radius-12));
123 box-shadow: var(--popover-box-shadow);
124 display: flex;
125 flex: 1;
126 flex-direction: column;
127}
128
129.graphiql-container .graphiql-editors.full-height {
130 margin-top: calc(var(--px-8) - var(--session-header-height));
131}
132
133/* The query editor and the toolbar */
134.graphiql-container .graphiql-query-editor {
135 border-bottom: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
136 padding: var(--px-16);
137 column-gap: var(--px-16);
138 display: flex;
139 width: 100%;
140}
141
142/* The vertical toolbar next to the query editor */
143.graphiql-container .graphiql-toolbar {
144 width: var(--toolbar-width);
145}
146
147.graphiql-container .graphiql-toolbar > * + * {
148 margin-top: var(--px-8);
149}
150
151/* The toolbar icons */
152.graphiql-toolbar-icon {
153 color: hsla(var(--color-neutral), var(--alpha-tertiary));
154 display: block;
155 height: calc(var(--toolbar-width) - (var(--px-8) * 2));
156 width: calc(var(--toolbar-width) - (var(--px-8) * 2));
157}
158
159/* The tab bar for editor tools */
160.graphiql-container .graphiql-editor-tools {
161 cursor: row-resize;
162 display: flex;
163 width: 100%;
164 column-gap: var(--px-8);
165 padding: var(--px-8);
166}
167
168.graphiql-container .graphiql-editor-tools button {
169 color: hsla(var(--color-neutral), var(--alpha-secondary));
170}
171
172.graphiql-container .graphiql-editor-tools button.active {
173 color: hsla(var(--color-neutral), 1);
174}
175
176/* The tab buttons to switch between editor tools */
177.graphiql-container .graphiql-editor-tools > button:not(.graphiql-toggle-editor-tools) {
178 padding: var(--px-8) var(--px-12);
179}
180
181.graphiql-container .graphiql-editor-tools .graphiql-toggle-editor-tools {
182 margin-left: auto;
183}
184
185/* An editor tool, e.g. variable or header editor */
186.graphiql-container .graphiql-editor-tool {
187 flex: 1;
188 padding: var(--px-16);
189}
190
191/**
192 * The way CodeMirror editors are styled they overflow their containing
193 * element. For some OS-browser-combinations this might cause overlap issues,
194 * setting the position of this to `relative` makes sure this element will
195 * always be on top of any editors.
196 */
197.graphiql-container .graphiql-toolbar,
198.graphiql-container .graphiql-editor-tools,
199.graphiql-container .graphiql-editor-tool {
200 position: relative;
201}
202
203/* The response view */
204.graphiql-container .graphiql-response {
205 --editor-background: transparent;
206 display: flex;
207 width: 100%;
208 flex-direction: column;
209}
210
211/* The results editor wrapping container */
212.graphiql-container .graphiql-response .result-window {
213 position: relative;
214 flex: 1;
215}
216
217/* The footer below the response view */
218.graphiql-container .graphiql-footer {
219 border-top: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
220}
221
222/* The plugin container */
223.graphiql-container .graphiql-plugin {
224 border-left: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
225 flex: 1;
226 overflow-y: auto;
227 padding: var(--px-16);
228}
229
230/* Generic drag bar for horizontal resizing */
231.graphiql-horizontal-drag-bar {
232 width: var(--px-12);
233 cursor: col-resize;
234}
235
236.graphiql-horizontal-drag-bar:hover::after {
237 border: var(--px-2) solid hsla(var(--color-neutral), var(--alpha-background-heavy));
238 border-radius: var(--border-radius-2);
239 content: '';
240 display: block;
241 height: 25%;
242 margin: 0 auto;
243 position: relative;
244 /* (100% - 25%) / 2 = 37.5% */
245 top: 37.5%;
246 width: 0;
247}
248
249.graphiql-container .graphiql-chevron-icon {
250 color: hsla(var(--color-neutral), var(--alpha-tertiary));
251 display: block;
252 height: var(--px-12);
253 margin: var(--px-12);
254 width: var(--px-12);
255}
256
257/* Generic spin animation */
258.graphiql-spin {
259 animation: spin 0.8s linear 0s infinite;
260}
261
262@keyframes spin {
263 from {
264 transform: rotate(0deg);
265 }
266 to {
267 transform: rotate(360deg);
268 }
269}
270
271/* The header of the settings dialog */
272.graphiql-dialog .graphiql-dialog-header {
273 align-items: center;
274 display: flex;
275 justify-content: space-between;
276 padding: var(--px-24);
277}
278
279/* The title of the settings dialog */
280.graphiql-dialog .graphiql-dialog-title {
281 font-size: var(--font-size-h3);
282 font-weight: var(--font-weight-medium);
283 margin: 0;
284}
285
286/* A section inside the settings dialog */
287.graphiql-dialog .graphiql-dialog-section {
288 align-items: center;
289 border-top: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
290 display: flex;
291 justify-content: space-between;
292 padding: var(--px-24);
293}
294
295.graphiql-dialog .graphiql-dialog-section > :not(:first-child) {
296 margin-left: var(--px-24);
297}
298
299/* The section title in the settings dialog */
300.graphiql-dialog .graphiql-dialog-section-title {
301 font-size: var(--font-size-h4);
302 font-weight: var(--font-weight-medium);
303}
304
305/* The section caption in the settings dialog */
306.graphiql-dialog .graphiql-dialog-section-caption {
307 color: hsla(var(--color-neutral), var(--alpha-secondary));
308}
309
310.graphiql-dialog .graphiql-warning-text {
311 color: hsl(var(--color-warning));
312 font-weight: var(--font-weight-medium);
313}
314
315.graphiql-dialog .graphiql-table {
316 border-collapse: collapse;
317 width: 100%;
318}
319
320.graphiql-dialog .graphiql-table :is(th, td) {
321 border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
322 padding: var(--px-8) var(--px-12);
323}
324
325/* A single key the short-key dialog */
326.graphiql-dialog .graphiql-key {
327 background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
328 border-radius: var(--border-radius-4);
329 padding: var(--px-4);
330}
331
332/* Avoid showing native tooltips for icons with titles */
333.graphiql-container svg {
334 pointer-events: none;
335}