@zonos/amino 5.4.28 → 5.4.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/graphiql.css DELETED
@@ -1,2143 +0,0 @@
1
- /*!********************************************************************************************!*\
2
- !*** css ../../../node_modules/css-loader/dist/cjs.js!../../graphiql-react/dist/style.css ***!
3
- \********************************************************************************************/
4
- .graphiql-container * {
5
- box-sizing: border-box;
6
- font-variant-ligatures: none;
7
- }
8
- .graphiql-container,
9
- .CodeMirror-info,
10
- .CodeMirror-lint-tooltip,
11
- .graphiql-dialog,
12
- .graphiql-dialog-overlay,
13
- .graphiql-tooltip,
14
- [data-radix-popper-content-wrapper] {
15
- --color-primary: 320, 95%, 43%;
16
- --color-secondary: 242, 51%, 61%;
17
- --color-tertiary: 188, 100%, 36%;
18
- --color-info: 208, 100%, 46%;
19
- --color-success: 158, 60%, 42%;
20
- --color-warning: 36, 100%, 41%;
21
- --color-error: 13, 93%, 58%;
22
- --color-neutral: 219, 28%, 32%;
23
- --color-base: 219, 28%, 100%;
24
- --alpha-secondary: 0.76;
25
- --alpha-tertiary: 0.5;
26
- --alpha-background-heavy: 0.15;
27
- --alpha-background-medium: 0.1;
28
- --alpha-background-light: 0.07;
29
- --font-family: 'Roboto', sans-serif;
30
- --font-family-mono: 'Fira Code', monospace;
31
- --font-size-hint: 0.75rem;
32
- --font-size-inline-code: 0.8125rem;
33
- --font-size-body: 0.9375rem;
34
- --font-size-h4: 1.125rem;
35
- --font-size-h3: 1.375rem;
36
- --font-size-h2: 1.8125rem;
37
- --font-weight-regular: 400;
38
- --font-weight-medium: 500;
39
- --line-height: 1.5;
40
- --px-2: 2px;
41
- --px-4: 4px;
42
- --px-6: 6px;
43
- --px-8: 8px;
44
- --px-10: 10px;
45
- --px-12: 12px;
46
- --px-16: 16px;
47
- --px-20: 20px;
48
- --px-24: 24px;
49
- --border-radius-2: 2px;
50
- --border-radius-4: 4px;
51
- --border-radius-8: 8px;
52
- --border-radius-12: 12px;
53
- --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13),
54
- 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939),
55
- 0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061);
56
- --popover-border: none;
57
- --sidebar-width: 60px;
58
- --toolbar-width: 40px;
59
- --session-header-height: 51px;
60
- }
61
- @media (prefers-color-scheme: dark) {
62
- body:not(.graphiql-light) .graphiql-container,
63
- body:not(.graphiql-light) .CodeMirror-info,
64
- body:not(.graphiql-light) .CodeMirror-lint-tooltip,
65
- body:not(.graphiql-light) .graphiql-dialog,
66
- body:not(.graphiql-light) .graphiql-dialog-overlay,
67
- body:not(.graphiql-light) .graphiql-tooltip,
68
- body:not(.graphiql-light) [data-radix-popper-content-wrapper] {
69
- --color-primary: 338, 100%, 67%;
70
- --color-secondary: 243, 100%, 77%;
71
- --color-tertiary: 188, 100%, 44%;
72
- --color-info: 208, 100%, 72%;
73
- --color-success: 158, 100%, 42%;
74
- --color-warning: 30, 100%, 80%;
75
- --color-error: 13, 100%, 58%;
76
- --color-neutral: 219, 29%, 78%;
77
- --color-base: 219, 29%, 18%;
78
- --popover-box-shadow: none;
79
- --popover-border: 1px solid hsl(var(--color-neutral));
80
- }
81
- }
82
- body.graphiql-dark .graphiql-container,
83
- body.graphiql-dark .CodeMirror-info,
84
- body.graphiql-dark .CodeMirror-lint-tooltip,
85
- body.graphiql-dark .graphiql-dialog,
86
- body.graphiql-dark .graphiql-dialog-overlay,
87
- body.graphiql-dark .graphiql-tooltip,
88
- body.graphiql-dark [data-radix-popper-content-wrapper] {
89
- --color-primary: 338, 100%, 67%;
90
- --color-secondary: 243, 100%, 77%;
91
- --color-tertiary: 188, 100%, 44%;
92
- --color-info: 208, 100%, 72%;
93
- --color-success: 158, 100%, 42%;
94
- --color-warning: 30, 100%, 80%;
95
- --color-error: 13, 100%, 58%;
96
- --color-neutral: 219, 29%, 78%;
97
- --color-base: 219, 29%, 18%;
98
- --popover-box-shadow: none;
99
- --popover-border: 1px solid hsl(var(--color-neutral));
100
- }
101
- .graphiql-container,
102
- .CodeMirror-info,
103
- .CodeMirror-lint-tooltip,
104
- .graphiql-dialog,
105
- .graphiql-container:is(button),
106
- .CodeMirror-info:is(button),
107
- .CodeMirror-lint-tooltip:is(button),
108
- .graphiql-dialog:is(button) {
109
- color: hsla(var(--color-neutral), 1);
110
- font-family: var(--font-family);
111
- font-size: var(--font-size-body);
112
- font-weight: var(----font-weight-regular);
113
- line-height: var(--line-height);
114
- }
115
- .graphiql-container input,
116
- .CodeMirror-info input,
117
- .CodeMirror-lint-tooltip input,
118
- .graphiql-dialog input {
119
- color: hsla(var(--color-neutral), 1);
120
- font-family: var(--font-family);
121
- font-size: var(--font-size-caption);
122
- }
123
- .graphiql-container input::placeholder,
124
- .CodeMirror-info input::placeholder,
125
- .CodeMirror-lint-tooltip input::placeholder,
126
- .graphiql-dialog input::placeholder {
127
- color: hsla(var(--color-neutral), var(--alpha-secondary));
128
- }
129
- .graphiql-container a,
130
- .CodeMirror-info a,
131
- .CodeMirror-lint-tooltip a,
132
- .graphiql-dialog a {
133
- color: hsl(var(--color-primary));
134
- }
135
- .graphiql-container a:focus,
136
- .CodeMirror-info a:focus,
137
- .CodeMirror-lint-tooltip a:focus,
138
- .graphiql-dialog a:focus {
139
- outline: hsl(var(--color-primary)) auto 1px;
140
- }
141
- .graphiql-un-styled,
142
- button.graphiql-un-styled {
143
- all: unset;
144
- border-radius: var(--border-radius-4);
145
- cursor: pointer;
146
- }
147
- :is(.graphiql-un-styled, button.graphiql-un-styled):hover {
148
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
149
- }
150
- :is(.graphiql-un-styled, button.graphiql-un-styled):active {
151
- background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
152
- }
153
- :is(.graphiql-un-styled, button.graphiql-un-styled):focus {
154
- outline: hsla(var(--color-neutral), var(--alpha-background-heavy)) auto 1px;
155
- }
156
- .graphiql-button,
157
- button.graphiql-button {
158
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
159
- border: none;
160
- border-radius: var(--border-radius-4);
161
- color: hsla(var(--color-neutral), 1);
162
- cursor: pointer;
163
- font-size: var(--font-size-body);
164
- padding: var(--px-8) var(--px-12);
165
- }
166
- :is(.graphiql-button, button.graphiql-button):hover,
167
- :is(.graphiql-button, button.graphiql-button):active {
168
- background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
169
- }
170
- :is(.graphiql-button, button.graphiql-button):focus {
171
- outline: hsla(var(--color-neutral), var(--alpha-background-heavy)) auto 1px;
172
- }
173
- .graphiql-button-success:is(.graphiql-button, button.graphiql-button) {
174
- background-color: hsla(var(--color-success), var(--alpha-background-heavy));
175
- }
176
- .graphiql-button-error:is(.graphiql-button, button.graphiql-button) {
177
- background-color: hsla(var(--color-error), var(--alpha-background-heavy));
178
- }
179
- .graphiql-button-group {
180
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
181
- border-radius: calc(var(--border-radius-4) + var(--px-4));
182
- display: flex;
183
- padding: var(--px-4);
184
- }
185
- .graphiql-button-group > button.graphiql-button {
186
- background-color: transparent;
187
- }
188
- .graphiql-button-group > button.graphiql-button:hover {
189
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
190
- }
191
- .graphiql-button-group > button.graphiql-button.active {
192
- background-color: hsl(var(--color-base));
193
- cursor: default;
194
- }
195
- .graphiql-button-group > * + * {
196
- margin-left: var(--px-8);
197
- }
198
- .graphiql-dialog-overlay {
199
- position: fixed;
200
- inset: 0;
201
- background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
202
- z-index: 10;
203
- }
204
- .graphiql-dialog {
205
- background-color: hsl(var(--color-base));
206
- border: var(--popover-border);
207
- border-radius: var(--border-radius-12);
208
- box-shadow: var(--popover-box-shadow);
209
- margin: 0;
210
- max-height: 80vh;
211
- max-width: 80vw;
212
- overflow: auto;
213
- padding: 0;
214
- width: unset;
215
- transform: translate(-50%, -50%);
216
- top: 50%;
217
- left: 50%;
218
- position: fixed;
219
- z-index: 10;
220
- }
221
- .graphiql-dialog-close > svg {
222
- color: hsla(var(--color-neutral), var(--alpha-secondary));
223
- display: block;
224
- height: var(--px-12);
225
- padding: var(--px-12);
226
- width: var(--px-12);
227
- }
228
- .graphiql-dropdown-content {
229
- background-color: hsl(var(--color-base));
230
- border: var(--popover-border);
231
- border-radius: var(--border-radius-8);
232
- box-shadow: var(--popover-box-shadow);
233
- font-size: inherit;
234
- max-width: 250px;
235
- padding: var(--px-4);
236
- font-family: var(--font-family);
237
- color: hsl(var(--color-neutral));
238
- max-height: min(
239
- calc(var(--radix-dropdown-menu-content-available-height) - 10px),
240
- 400px
241
- );
242
- overflow-y: scroll;
243
- }
244
- .graphiql-dropdown-item {
245
- border-radius: var(--border-radius-4);
246
- font-size: inherit;
247
- margin: var(--px-4);
248
- overflow: hidden;
249
- padding: var(--px-6) var(--px-8);
250
- text-overflow: ellipsis;
251
- white-space: nowrap;
252
- outline: none;
253
- cursor: pointer;
254
- line-height: var(--line-height);
255
- }
256
- .graphiql-dropdown-item[data-selected],
257
- .graphiql-dropdown-item[data-current-nav],
258
- .graphiql-dropdown-item:hover {
259
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
260
- color: inherit;
261
- }
262
- .graphiql-dropdown-item:not(:first-child) {
263
- margin-top: 0;
264
- }
265
- :is(
266
- .graphiql-markdown-description,
267
- .graphiql-markdown-deprecation,
268
- .CodeMirror-hint-information-description,
269
- .CodeMirror-hint-information-deprecation-reason,
270
- .CodeMirror-info .info-description,
271
- .CodeMirror-info .info-deprecation
272
- )
273
- blockquote {
274
- margin-left: 0;
275
- margin-right: 0;
276
- padding-left: var(--px-8);
277
- }
278
- :is(
279
- .graphiql-markdown-description,
280
- .graphiql-markdown-deprecation,
281
- .CodeMirror-hint-information-description,
282
- .CodeMirror-hint-information-deprecation-reason,
283
- .CodeMirror-info .info-description,
284
- .CodeMirror-info .info-deprecation
285
- )
286
- code,
287
- :is(
288
- .graphiql-markdown-description,
289
- .graphiql-markdown-deprecation,
290
- .CodeMirror-hint-information-description,
291
- .CodeMirror-hint-information-deprecation-reason,
292
- .CodeMirror-info .info-description,
293
- .CodeMirror-info .info-deprecation
294
- )
295
- pre {
296
- border-radius: var(--border-radius-4);
297
- font-family: var(--font-family-mono);
298
- font-size: var(--font-size-inline-code);
299
- }
300
- :is(
301
- .graphiql-markdown-description,
302
- .graphiql-markdown-deprecation,
303
- .CodeMirror-hint-information-description,
304
- .CodeMirror-hint-information-deprecation-reason,
305
- .CodeMirror-info .info-description,
306
- .CodeMirror-info .info-deprecation
307
- )
308
- code {
309
- padding: var(--px-2);
310
- }
311
- :is(
312
- .graphiql-markdown-description,
313
- .graphiql-markdown-deprecation,
314
- .CodeMirror-hint-information-description,
315
- .CodeMirror-hint-information-deprecation-reason,
316
- .CodeMirror-info .info-description,
317
- .CodeMirror-info .info-deprecation
318
- )
319
- pre {
320
- overflow: auto;
321
- padding: var(--px-6) var(--px-8);
322
- }
323
- :is(
324
- .graphiql-markdown-description,
325
- .graphiql-markdown-deprecation,
326
- .CodeMirror-hint-information-description,
327
- .CodeMirror-hint-information-deprecation-reason,
328
- .CodeMirror-info .info-description,
329
- .CodeMirror-info .info-deprecation
330
- )
331
- pre
332
- code {
333
- background-color: initial;
334
- border-radius: 0;
335
- padding: 0;
336
- }
337
- :is(
338
- .graphiql-markdown-description,
339
- .graphiql-markdown-deprecation,
340
- .CodeMirror-hint-information-description,
341
- .CodeMirror-hint-information-deprecation-reason,
342
- .CodeMirror-info .info-description,
343
- .CodeMirror-info .info-deprecation
344
- )
345
- ol,
346
- :is(
347
- .graphiql-markdown-description,
348
- .graphiql-markdown-deprecation,
349
- .CodeMirror-hint-information-description,
350
- .CodeMirror-hint-information-deprecation-reason,
351
- .CodeMirror-info .info-description,
352
- .CodeMirror-info .info-deprecation
353
- )
354
- ul {
355
- padding-left: var(--px-16);
356
- }
357
- :is(
358
- .graphiql-markdown-description,
359
- .graphiql-markdown-deprecation,
360
- .CodeMirror-hint-information-description,
361
- .CodeMirror-hint-information-deprecation-reason,
362
- .CodeMirror-info .info-description,
363
- .CodeMirror-info .info-deprecation
364
- )
365
- ol {
366
- list-style-type: decimal;
367
- }
368
- :is(
369
- .graphiql-markdown-description,
370
- .graphiql-markdown-deprecation,
371
- .CodeMirror-hint-information-description,
372
- .CodeMirror-hint-information-deprecation-reason,
373
- .CodeMirror-info .info-description,
374
- .CodeMirror-info .info-deprecation
375
- )
376
- ul {
377
- list-style-type: disc;
378
- }
379
- :is(
380
- .graphiql-markdown-description,
381
- .graphiql-markdown-deprecation,
382
- .CodeMirror-hint-information-description,
383
- .CodeMirror-hint-information-deprecation-reason,
384
- .CodeMirror-info .info-description,
385
- .CodeMirror-info .info-deprecation
386
- )
387
- img {
388
- border-radius: var(--border-radius-4);
389
- max-height: 120px;
390
- max-width: 100%;
391
- }
392
- :is(
393
- .graphiql-markdown-description,
394
- .graphiql-markdown-deprecation,
395
- .CodeMirror-hint-information-description,
396
- .CodeMirror-hint-information-deprecation-reason,
397
- .CodeMirror-info .info-description,
398
- .CodeMirror-info .info-deprecation
399
- )
400
- > :first-child {
401
- margin-top: 0;
402
- }
403
- :is(
404
- .graphiql-markdown-description,
405
- .graphiql-markdown-deprecation,
406
- .CodeMirror-hint-information-description,
407
- .CodeMirror-hint-information-deprecation-reason,
408
- .CodeMirror-info .info-description,
409
- .CodeMirror-info .info-deprecation
410
- )
411
- > :last-child {
412
- margin-bottom: 0;
413
- }
414
- :is(
415
- .graphiql-markdown-description,
416
- .CodeMirror-hint-information-description,
417
- .CodeMirror-info .info-description
418
- )
419
- a {
420
- color: hsl(var(--color-primary));
421
- text-decoration: none;
422
- }
423
- :is(
424
- .graphiql-markdown-description,
425
- .CodeMirror-hint-information-description,
426
- .CodeMirror-info .info-description
427
- )
428
- a:hover {
429
- text-decoration: underline;
430
- }
431
- :is(
432
- .graphiql-markdown-description,
433
- .CodeMirror-hint-information-description,
434
- .CodeMirror-info .info-description
435
- )
436
- blockquote {
437
- border-left: 1.5px solid hsla(var(--color-neutral), var(--alpha-tertiary));
438
- }
439
- :is(
440
- .graphiql-markdown-description,
441
- .CodeMirror-hint-information-description,
442
- .CodeMirror-info .info-description
443
- )
444
- code,
445
- :is(
446
- .graphiql-markdown-description,
447
- .CodeMirror-hint-information-description,
448
- .CodeMirror-info .info-description
449
- )
450
- pre {
451
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
452
- color: hsla(var(--color-neutral), 1);
453
- }
454
- :is(
455
- .graphiql-markdown-description,
456
- .CodeMirror-hint-information-description,
457
- .CodeMirror-info .info-description
458
- )
459
- > * {
460
- margin: var(--px-12) 0;
461
- }
462
- :is(
463
- .graphiql-markdown-deprecation,
464
- .CodeMirror-hint-information-deprecation-reason,
465
- .CodeMirror-info .info-deprecation
466
- )
467
- a {
468
- color: hsl(var(--color-warning));
469
- text-decoration: underline;
470
- }
471
- :is(
472
- .graphiql-markdown-deprecation,
473
- .CodeMirror-hint-information-deprecation-reason,
474
- .CodeMirror-info .info-deprecation
475
- )
476
- blockquote {
477
- border-left: 1.5px solid hsl(var(--color-warning));
478
- }
479
- :is(
480
- .graphiql-markdown-deprecation,
481
- .CodeMirror-hint-information-deprecation-reason,
482
- .CodeMirror-info .info-deprecation
483
- )
484
- code,
485
- :is(
486
- .graphiql-markdown-deprecation,
487
- .CodeMirror-hint-information-deprecation-reason,
488
- .CodeMirror-info .info-deprecation
489
- )
490
- pre {
491
- background-color: hsla(var(--color-warning), var(--alpha-background-heavy));
492
- }
493
- :is(
494
- .graphiql-markdown-deprecation,
495
- .CodeMirror-hint-information-deprecation-reason,
496
- .CodeMirror-info .info-deprecation
497
- )
498
- > * {
499
- margin: var(--px-8) 0;
500
- }
501
- .graphiql-markdown-preview > :not(:first-child) {
502
- display: none;
503
- }
504
- .CodeMirror-hint-information-deprecation,
505
- .CodeMirror-info .info-deprecation {
506
- background-color: hsla(var(--color-warning), var(--alpha-background-light));
507
- border: 1px solid hsl(var(--color-warning));
508
- border-radius: var(--border-radius-4);
509
- color: hsl(var(--color-warning));
510
- margin-top: var(--px-12);
511
- padding: var(--px-6) var(--px-8);
512
- }
513
- .CodeMirror-hint-information-deprecation-label,
514
- .CodeMirror-info .info-deprecation-label {
515
- font-size: var(--font-size-hint);
516
- font-weight: var(--font-weight-medium);
517
- }
518
- .CodeMirror-hint-information-deprecation-reason,
519
- .CodeMirror-info .info-deprecation-reason {
520
- margin-top: var(--px-6);
521
- }
522
- .graphiql-spinner {
523
- height: 56px;
524
- margin: auto;
525
- margin-top: var(--px-16);
526
- width: 56px;
527
- }
528
- .graphiql-spinner:after {
529
- animation: rotation 0.8s linear 0s infinite;
530
- border: 4px solid transparent;
531
- border-radius: 100%;
532
- border-top: 4px solid hsla(var(--color-neutral), var(--alpha-tertiary));
533
- content: '';
534
- display: inline-block;
535
- height: 46px;
536
- vertical-align: middle;
537
- width: 46px;
538
- }
539
- @keyframes rotation {
540
- 0% {
541
- transform: rotate(0);
542
- }
543
- to {
544
- transform: rotate(360deg);
545
- }
546
- }
547
- .graphiql-tooltip {
548
- background: hsl(var(--color-base));
549
- border: var(--popover-border);
550
- border-radius: var(--border-radius-4);
551
- box-shadow: var(--popover-box-shadow);
552
- color: hsl(var(--color-neutral));
553
- font-size: inherit;
554
- padding: var(--px-4) var(--px-6);
555
- font-family: var(--font-family);
556
- }
557
- .graphiql-tabs {
558
- display: flex;
559
- align-items: center;
560
- overflow-x: auto;
561
- padding: var(--px-12);
562
- }
563
- .graphiql-tabs > :not(:first-child) {
564
- margin-left: var(--px-12);
565
- }
566
- .graphiql-tab {
567
- align-items: stretch;
568
- border-radius: var(--border-radius-8);
569
- color: hsla(var(--color-neutral), var(--alpha-secondary));
570
- display: flex;
571
- }
572
- .graphiql-tab > button.graphiql-tab-close {
573
- visibility: hidden;
574
- }
575
- .graphiql-tab.graphiql-tab-active > button.graphiql-tab-close,
576
- .graphiql-tab:hover > button.graphiql-tab-close,
577
- .graphiql-tab:focus-within > button.graphiql-tab-close {
578
- visibility: unset;
579
- }
580
- .graphiql-tab.graphiql-tab-active {
581
- background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
582
- color: hsla(var(--color-neutral), 1);
583
- }
584
- button.graphiql-tab-button {
585
- padding: var(--px-4) 0 var(--px-4) var(--px-8);
586
- }
587
- button.graphiql-tab-close {
588
- align-items: center;
589
- display: flex;
590
- padding: var(--px-4) var(--px-8);
591
- }
592
- button.graphiql-tab-close > svg {
593
- height: var(--px-8);
594
- width: var(--px-8);
595
- }
596
- .graphiql-history-header {
597
- font-size: var(--font-size-h2);
598
- font-weight: var(--font-weight-medium);
599
- display: flex;
600
- justify-content: space-between;
601
- align-items: center;
602
- }
603
- .graphiql-history-header button {
604
- font-size: var(--font-size-inline-code);
605
- padding: var(--px-6) var(--px-10);
606
- }
607
- .graphiql-history-items {
608
- margin: var(--px-16) 0 0;
609
- list-style: none;
610
- padding: 0;
611
- }
612
- .graphiql-history-item {
613
- border-radius: var(--border-radius-4);
614
- color: hsla(var(--color-neutral), var(--alpha-secondary));
615
- display: flex;
616
- font-size: var(--font-size-inline-code);
617
- font-family: var(--font-family-mono);
618
- height: 34px;
619
- }
620
- .graphiql-history-item:hover {
621
- color: hsla(var(--color-neutral), 1);
622
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
623
- }
624
- .graphiql-history-item:not(:first-child) {
625
- margin-top: var(--px-4);
626
- }
627
- .graphiql-history-item.editable {
628
- background-color: hsla(var(--color-primary), var(--alpha-background-medium));
629
- }
630
- .graphiql-history-item.editable > input {
631
- background: transparent;
632
- border: none;
633
- flex: 1;
634
- margin: 0;
635
- outline: none;
636
- padding: 0 var(--px-10);
637
- width: 100%;
638
- }
639
- .graphiql-history-item.editable > input::placeholder {
640
- color: hsla(var(--color-neutral), var(--alpha-secondary));
641
- }
642
- .graphiql-history-item.editable > button {
643
- color: hsl(var(--color-primary));
644
- padding: 0 var(--px-10);
645
- }
646
- .graphiql-history-item.editable > button:active {
647
- background-color: hsla(var(--color-primary), var(--alpha-background-heavy));
648
- }
649
- .graphiql-history-item.editable > button:focus {
650
- outline: hsl(var(--color-primary)) auto 1px;
651
- }
652
- .graphiql-history-item.editable > button > svg {
653
- display: block;
654
- }
655
- button.graphiql-history-item-label {
656
- flex: 1;
657
- padding: var(--px-8) var(--px-10);
658
- overflow: hidden;
659
- text-overflow: ellipsis;
660
- white-space: nowrap;
661
- }
662
- button.graphiql-history-item-action {
663
- align-items: center;
664
- color: hsla(var(--color-neutral), var(--alpha-secondary));
665
- display: flex;
666
- padding: var(--px-8) var(--px-6);
667
- }
668
- button.graphiql-history-item-action:hover {
669
- color: hsla(var(--color-neutral), 1);
670
- }
671
- button.graphiql-history-item-action > svg {
672
- height: 14px;
673
- width: 14px;
674
- }
675
- .graphiql-history-item-spacer {
676
- height: var(--px-16);
677
- }
678
- .graphiql-doc-explorer-default-value {
679
- color: hsl(var(--color-success));
680
- }
681
- a.graphiql-doc-explorer-type-name {
682
- color: hsl(var(--color-warning));
683
- text-decoration: none;
684
- }
685
- a.graphiql-doc-explorer-type-name:hover {
686
- text-decoration: underline;
687
- }
688
- a.graphiql-doc-explorer-type-name:focus {
689
- outline: hsl(var(--color-warning)) auto 1px;
690
- }
691
- .graphiql-doc-explorer-argument > * + * {
692
- margin-top: var(--px-12);
693
- }
694
- .graphiql-doc-explorer-argument-name {
695
- color: hsl(var(--color-secondary));
696
- }
697
- .graphiql-doc-explorer-argument-deprecation {
698
- background-color: hsla(var(--color-warning), var(--alpha-background-light));
699
- border: 1px solid hsl(var(--color-warning));
700
- border-radius: var(--border-radius-4);
701
- color: hsl(var(--color-warning));
702
- padding: var(--px-8);
703
- }
704
- .graphiql-doc-explorer-argument-deprecation-label {
705
- font-size: var(--font-size-hint);
706
- font-weight: var(--font-weight-medium);
707
- }
708
- .graphiql-doc-explorer-deprecation {
709
- background-color: hsla(var(--color-warning), var(--alpha-background-light));
710
- border: 1px solid hsl(var(--color-warning));
711
- border-radius: var(--px-4);
712
- color: hsl(var(--color-warning));
713
- padding: var(--px-8);
714
- }
715
- .graphiql-doc-explorer-deprecation-label {
716
- font-size: var(--font-size-hint);
717
- font-weight: var(--font-weight-medium);
718
- }
719
- .graphiql-doc-explorer-directive {
720
- color: hsl(var(--color-secondary));
721
- }
722
- .graphiql-doc-explorer-section-title {
723
- align-items: center;
724
- display: flex;
725
- font-size: var(--font-size-hint);
726
- font-weight: var(--font-weight-medium);
727
- line-height: 1;
728
- }
729
- .graphiql-doc-explorer-section-title > svg {
730
- height: var(--px-16);
731
- margin-right: var(--px-8);
732
- width: var(--px-16);
733
- }
734
- .graphiql-doc-explorer-section-content {
735
- margin-left: var(--px-8);
736
- margin-top: var(--px-16);
737
- }
738
- .graphiql-doc-explorer-section-content > * + * {
739
- margin-top: var(--px-16);
740
- }
741
- .graphiql-doc-explorer-root-type {
742
- color: hsl(var(--color-info));
743
- }
744
- .graphiql-doc-explorer-search {
745
- color: hsla(var(--color-neutral), var(--alpha-secondary));
746
- }
747
- .graphiql-doc-explorer-search:not([data-state='idle']) {
748
- border: var(--popover-border);
749
- border-radius: var(--border-radius-4);
750
- box-shadow: var(--popover-box-shadow);
751
- color: hsla(var(--color-neutral), 1);
752
- }
753
- .graphiql-doc-explorer-search:not([data-state='idle'])
754
- .graphiql-doc-explorer-search-input {
755
- background: hsl(var(--color-base));
756
- }
757
- .graphiql-doc-explorer-search-input {
758
- align-items: center;
759
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
760
- border-radius: var(--border-radius-4);
761
- display: flex;
762
- padding: var(--px-8) var(--px-12);
763
- }
764
- .graphiql-doc-explorer-search [role='combobox'] {
765
- border: none;
766
- background-color: transparent;
767
- margin-left: var(--px-4);
768
- width: 100%;
769
- }
770
- .graphiql-doc-explorer-search [role='combobox']:focus {
771
- outline: none;
772
- }
773
- .graphiql-doc-explorer-search [role='listbox'] {
774
- background-color: hsl(var(--color-base));
775
- border: none;
776
- border-bottom-left-radius: var(--border-radius-4);
777
- border-bottom-right-radius: var(--border-radius-4);
778
- border-top: 1px solid
779
- hsla(var(--color-neutral), var(--alpha-background-heavy));
780
- max-height: 400px;
781
- overflow-y: auto;
782
- margin: 0;
783
- font-size: var(--font-size-body);
784
- padding: var(--px-4);
785
- position: relative;
786
- }
787
- .graphiql-doc-explorer-search [role='option'] {
788
- border-radius: var(--border-radius-4);
789
- color: hsla(var(--color-neutral), var(--alpha-secondary));
790
- overflow-x: hidden;
791
- padding: var(--px-8) var(--px-12);
792
- text-overflow: ellipsis;
793
- white-space: nowrap;
794
- cursor: pointer;
795
- }
796
- .graphiql-doc-explorer-search [role='option'][data-headlessui-state='active'] {
797
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
798
- }
799
- .graphiql-doc-explorer-search [role='option']:hover {
800
- background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
801
- }
802
- .graphiql-doc-explorer-search
803
- [role='option'][data-headlessui-state='active']:hover {
804
- background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
805
- }
806
- :is(.graphiql-doc-explorer-search [role='option'])
807
- + :is(.graphiql-doc-explorer-search [role='option']) {
808
- margin-top: var(--px-4);
809
- }
810
- .graphiql-doc-explorer-search-type {
811
- color: hsl(var(--color-info));
812
- }
813
- .graphiql-doc-explorer-search-field {
814
- color: hsl(var(--color-warning));
815
- }
816
- .graphiql-doc-explorer-search-argument {
817
- color: hsl(var(--color-secondary));
818
- }
819
- .graphiql-doc-explorer-search-divider {
820
- color: hsla(var(--color-neutral), var(--alpha-secondary));
821
- font-size: var(--font-size-hint);
822
- font-weight: var(--font-weight-medium);
823
- margin-top: var(--px-8);
824
- padding: var(--px-8) var(--px-12);
825
- }
826
- .graphiql-doc-explorer-search-empty {
827
- color: hsla(var(--color-neutral), var(--alpha-secondary));
828
- padding: var(--px-8) var(--px-12);
829
- }
830
- a.graphiql-doc-explorer-field-name {
831
- color: hsl(var(--color-info));
832
- text-decoration: none;
833
- }
834
- a.graphiql-doc-explorer-field-name:hover {
835
- text-decoration: underline;
836
- }
837
- a.graphiql-doc-explorer-field-name:focus {
838
- outline: hsl(var(--color-info)) auto 1px;
839
- }
840
- .graphiql-doc-explorer-item > :not(:first-child) {
841
- margin-top: var(--px-12);
842
- }
843
- .graphiql-doc-explorer-argument-multiple {
844
- margin-left: var(--px-8);
845
- }
846
- .graphiql-doc-explorer-enum-value {
847
- color: hsl(var(--color-info));
848
- }
849
- .graphiql-doc-explorer-header {
850
- display: flex;
851
- justify-content: space-between;
852
- position: relative;
853
- }
854
- .graphiql-doc-explorer-header:focus-within .graphiql-doc-explorer-title {
855
- visibility: hidden;
856
- }
857
- .graphiql-doc-explorer-header:focus-within
858
- .graphiql-doc-explorer-back:not(:focus) {
859
- color: transparent;
860
- }
861
- .graphiql-doc-explorer-header-content {
862
- display: flex;
863
- flex-direction: column;
864
- min-width: 0;
865
- }
866
- .graphiql-doc-explorer-search {
867
- position: absolute;
868
- right: 0;
869
- top: 0;
870
- }
871
- .graphiql-doc-explorer-search:focus-within {
872
- left: 0;
873
- }
874
- .graphiql-doc-explorer-search [role='combobox'] {
875
- height: 24px;
876
- width: 4ch;
877
- }
878
- .graphiql-doc-explorer-search [role='combobox']:focus {
879
- width: 100%;
880
- }
881
- a.graphiql-doc-explorer-back {
882
- align-items: center;
883
- color: hsla(var(--color-neutral), var(--alpha-secondary));
884
- display: flex;
885
- text-decoration: none;
886
- }
887
- a.graphiql-doc-explorer-back:hover {
888
- text-decoration: underline;
889
- }
890
- a.graphiql-doc-explorer-back:focus {
891
- outline: hsla(var(--color-neutral), var(--alpha-secondary)) auto 1px;
892
- }
893
- a.graphiql-doc-explorer-back:focus + .graphiql-doc-explorer-title {
894
- visibility: unset;
895
- }
896
- a.graphiql-doc-explorer-back > svg {
897
- height: var(--px-8);
898
- margin-right: var(--px-8);
899
- width: var(--px-8);
900
- }
901
- .graphiql-doc-explorer-title {
902
- font-weight: var(--font-weight-medium);
903
- font-size: var(--font-size-h2);
904
- overflow-x: hidden;
905
- text-overflow: ellipsis;
906
- white-space: nowrap;
907
- }
908
- .graphiql-doc-explorer-title:not(:first-child) {
909
- font-size: var(--font-size-h3);
910
- margin-top: var(--px-8);
911
- }
912
- .graphiql-doc-explorer-content > * {
913
- color: hsla(var(--color-neutral), var(--alpha-secondary));
914
- margin-top: var(--px-20);
915
- }
916
- .graphiql-doc-explorer-error {
917
- background-color: hsla(var(--color-error), var(--alpha-background-heavy));
918
- border: 1px solid hsl(var(--color-error));
919
- border-radius: var(--border-radius-8);
920
- color: hsl(var(--color-error));
921
- padding: var(--px-8) var(--px-12);
922
- }
923
- .CodeMirror {
924
- font-family: monospace;
925
- height: 300px;
926
- color: #000;
927
- direction: ltr;
928
- }
929
- .CodeMirror-lines {
930
- padding: 4px 0;
931
- }
932
- .CodeMirror pre.CodeMirror-line,
933
- .CodeMirror pre.CodeMirror-line-like {
934
- padding: 0 4px;
935
- }
936
- .CodeMirror-scrollbar-filler,
937
- .CodeMirror-gutter-filler {
938
- background-color: #fff;
939
- }
940
- .CodeMirror-gutters {
941
- border-right: 1px solid #ddd;
942
- background-color: #f7f7f7;
943
- white-space: nowrap;
944
- }
945
- .CodeMirror-linenumber {
946
- padding: 0 3px 0 5px;
947
- min-width: 20px;
948
- text-align: right;
949
- color: #999;
950
- white-space: nowrap;
951
- }
952
- .CodeMirror-guttermarker {
953
- color: #000;
954
- }
955
- .CodeMirror-guttermarker-subtle {
956
- color: #999;
957
- }
958
- .CodeMirror-cursor {
959
- border-left: 1px solid black;
960
- border-right: none;
961
- width: 0;
962
- }
963
- .CodeMirror div.CodeMirror-secondarycursor {
964
- border-left: 1px solid silver;
965
- }
966
- .cm-fat-cursor .CodeMirror-cursor {
967
- width: auto;
968
- border: 0 !important;
969
- background: #7e7;
970
- }
971
- .cm-fat-cursor div.CodeMirror-cursors {
972
- z-index: 1;
973
- }
974
- .cm-fat-cursor .CodeMirror-line::selection,
975
- .cm-fat-cursor .CodeMirror-line > span::selection,
976
- .cm-fat-cursor .CodeMirror-line > span > span::selection {
977
- background: transparent;
978
- }
979
- .cm-fat-cursor .CodeMirror-line::-moz-selection,
980
- .cm-fat-cursor .CodeMirror-line > span::-moz-selection,
981
- .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
982
- background: transparent;
983
- }
984
- .cm-fat-cursor {
985
- caret-color: transparent;
986
- }
987
- @-moz-keyframes blink {
988
- 50% {
989
- background-color: transparent;
990
- }
991
- }
992
- @-webkit-keyframes blink {
993
- 50% {
994
- background-color: transparent;
995
- }
996
- }
997
- @keyframes blink {
998
- 50% {
999
- background-color: transparent;
1000
- }
1001
- }
1002
- .cm-tab {
1003
- display: inline-block;
1004
- text-decoration: inherit;
1005
- }
1006
- .CodeMirror-rulers {
1007
- position: absolute;
1008
- left: 0;
1009
- right: 0;
1010
- top: -50px;
1011
- bottom: 0;
1012
- overflow: hidden;
1013
- }
1014
- .CodeMirror-ruler {
1015
- border-left: 1px solid #ccc;
1016
- top: 0;
1017
- bottom: 0;
1018
- position: absolute;
1019
- }
1020
- .cm-s-default .cm-header {
1021
- color: #00f;
1022
- }
1023
- .cm-s-default .cm-quote {
1024
- color: #090;
1025
- }
1026
- .cm-negative {
1027
- color: #d44;
1028
- }
1029
- .cm-positive {
1030
- color: #292;
1031
- }
1032
- .cm-header,
1033
- .cm-strong {
1034
- font-weight: 700;
1035
- }
1036
- .cm-em {
1037
- font-style: italic;
1038
- }
1039
- .cm-link {
1040
- text-decoration: underline;
1041
- }
1042
- .cm-strikethrough {
1043
- text-decoration: line-through;
1044
- }
1045
- .cm-s-default .cm-keyword {
1046
- color: #708;
1047
- }
1048
- .cm-s-default .cm-atom {
1049
- color: #219;
1050
- }
1051
- .cm-s-default .cm-number {
1052
- color: #164;
1053
- }
1054
- .cm-s-default .cm-def {
1055
- color: #00f;
1056
- }
1057
- .cm-s-default .cm-variable-2 {
1058
- color: #05a;
1059
- }
1060
- .cm-s-default .cm-variable-3,
1061
- .cm-s-default .cm-type {
1062
- color: #085;
1063
- }
1064
- .cm-s-default .cm-comment {
1065
- color: #a50;
1066
- }
1067
- .cm-s-default .cm-string {
1068
- color: #a11;
1069
- }
1070
- .cm-s-default .cm-string-2 {
1071
- color: #f50;
1072
- }
1073
- .cm-s-default .cm-meta,
1074
- .cm-s-default .cm-qualifier {
1075
- color: #555;
1076
- }
1077
- .cm-s-default .cm-builtin {
1078
- color: #30a;
1079
- }
1080
- .cm-s-default .cm-bracket {
1081
- color: #997;
1082
- }
1083
- .cm-s-default .cm-tag {
1084
- color: #170;
1085
- }
1086
- .cm-s-default .cm-attribute {
1087
- color: #00c;
1088
- }
1089
- .cm-s-default .cm-hr {
1090
- color: #999;
1091
- }
1092
- .cm-s-default .cm-link {
1093
- color: #00c;
1094
- }
1095
- .cm-s-default .cm-error,
1096
- .cm-invalidchar {
1097
- color: red;
1098
- }
1099
- .CodeMirror-composing {
1100
- border-bottom: 2px solid;
1101
- }
1102
- div.CodeMirror span.CodeMirror-matchingbracket {
1103
- color: #0b0;
1104
- }
1105
- div.CodeMirror span.CodeMirror-nonmatchingbracket {
1106
- color: #a22;
1107
- }
1108
- .CodeMirror-matchingtag {
1109
- background: rgba(255, 150, 0, 0.3);
1110
- }
1111
- .CodeMirror-activeline-background {
1112
- background: #e8f2ff;
1113
- }
1114
- .CodeMirror {
1115
- position: relative;
1116
- overflow: hidden;
1117
- background: white;
1118
- }
1119
- .CodeMirror-scroll {
1120
- overflow: scroll !important;
1121
- margin-bottom: -50px;
1122
- margin-right: -50px;
1123
- padding-bottom: 50px;
1124
- height: 100%;
1125
- outline: none;
1126
- position: relative;
1127
- z-index: 0;
1128
- }
1129
- .CodeMirror-sizer {
1130
- position: relative;
1131
- border-right: 50px solid transparent;
1132
- }
1133
- .CodeMirror-vscrollbar,
1134
- .CodeMirror-hscrollbar,
1135
- .CodeMirror-scrollbar-filler,
1136
- .CodeMirror-gutter-filler {
1137
- position: absolute;
1138
- z-index: 6;
1139
- display: none;
1140
- outline: none;
1141
- }
1142
- .CodeMirror-vscrollbar {
1143
- right: 0;
1144
- top: 0;
1145
- overflow-x: hidden;
1146
- overflow-y: scroll;
1147
- }
1148
- .CodeMirror-hscrollbar {
1149
- bottom: 0;
1150
- left: 0;
1151
- overflow-y: hidden;
1152
- overflow-x: scroll;
1153
- }
1154
- .CodeMirror-scrollbar-filler {
1155
- right: 0;
1156
- bottom: 0;
1157
- }
1158
- .CodeMirror-gutter-filler {
1159
- left: 0;
1160
- bottom: 0;
1161
- }
1162
- .CodeMirror-gutters {
1163
- position: absolute;
1164
- left: 0;
1165
- top: 0;
1166
- min-height: 100%;
1167
- z-index: 3;
1168
- }
1169
- .CodeMirror-gutter {
1170
- white-space: normal;
1171
- height: 100%;
1172
- display: inline-block;
1173
- vertical-align: top;
1174
- margin-bottom: -50px;
1175
- }
1176
- .CodeMirror-gutter-wrapper {
1177
- position: absolute;
1178
- z-index: 4;
1179
- background: none !important;
1180
- border: none !important;
1181
- }
1182
- .CodeMirror-gutter-background {
1183
- position: absolute;
1184
- top: 0;
1185
- bottom: 0;
1186
- z-index: 4;
1187
- }
1188
- .CodeMirror-gutter-elt {
1189
- position: absolute;
1190
- cursor: default;
1191
- z-index: 4;
1192
- }
1193
- .CodeMirror-gutter-wrapper ::selection {
1194
- background-color: transparent;
1195
- }
1196
- .CodeMirror-gutter-wrapper ::-moz-selection {
1197
- background-color: transparent;
1198
- }
1199
- .CodeMirror-lines {
1200
- cursor: text;
1201
- min-height: 1px;
1202
- }
1203
- .CodeMirror pre.CodeMirror-line,
1204
- .CodeMirror pre.CodeMirror-line-like {
1205
- -moz-border-radius: 0;
1206
- -webkit-border-radius: 0;
1207
- border-radius: 0;
1208
- border-width: 0;
1209
- background: transparent;
1210
- font-family: inherit;
1211
- font-size: inherit;
1212
- margin: 0;
1213
- white-space: pre;
1214
- word-wrap: normal;
1215
- line-height: inherit;
1216
- color: inherit;
1217
- z-index: 2;
1218
- position: relative;
1219
- overflow: visible;
1220
- -webkit-tap-highlight-color: transparent;
1221
- -webkit-font-variant-ligatures: contextual;
1222
- font-variant-ligatures: contextual;
1223
- }
1224
- .CodeMirror-wrap pre.CodeMirror-line,
1225
- .CodeMirror-wrap pre.CodeMirror-line-like {
1226
- word-wrap: break-word;
1227
- white-space: pre-wrap;
1228
- word-break: normal;
1229
- }
1230
- .CodeMirror-linebackground {
1231
- position: absolute;
1232
- left: 0;
1233
- right: 0;
1234
- top: 0;
1235
- bottom: 0;
1236
- z-index: 0;
1237
- }
1238
- .CodeMirror-linewidget {
1239
- position: relative;
1240
- z-index: 2;
1241
- padding: 0.1px;
1242
- }
1243
- .CodeMirror-rtl pre {
1244
- direction: rtl;
1245
- }
1246
- .CodeMirror-code {
1247
- outline: none;
1248
- }
1249
- .CodeMirror-scroll,
1250
- .CodeMirror-sizer,
1251
- .CodeMirror-gutter,
1252
- .CodeMirror-gutters,
1253
- .CodeMirror-linenumber {
1254
- -moz-box-sizing: content-box;
1255
- box-sizing: content-box;
1256
- }
1257
- .CodeMirror-measure {
1258
- position: absolute;
1259
- width: 100%;
1260
- height: 0;
1261
- overflow: hidden;
1262
- visibility: hidden;
1263
- }
1264
- .CodeMirror-cursor {
1265
- position: absolute;
1266
- pointer-events: none;
1267
- }
1268
- .CodeMirror-measure pre {
1269
- position: static;
1270
- }
1271
- div.CodeMirror-cursors {
1272
- visibility: hidden;
1273
- position: relative;
1274
- z-index: 3;
1275
- }
1276
- div.CodeMirror-dragcursors,
1277
- .CodeMirror-focused div.CodeMirror-cursors {
1278
- visibility: visible;
1279
- }
1280
- .CodeMirror-selected {
1281
- background: #d9d9d9;
1282
- }
1283
- .CodeMirror-focused .CodeMirror-selected {
1284
- background: #d7d4f0;
1285
- }
1286
- .CodeMirror-crosshair {
1287
- cursor: crosshair;
1288
- }
1289
- .CodeMirror-line::selection,
1290
- .CodeMirror-line > span::selection,
1291
- .CodeMirror-line > span > span::selection {
1292
- background: #d7d4f0;
1293
- }
1294
- .CodeMirror-line::-moz-selection,
1295
- .CodeMirror-line > span::-moz-selection,
1296
- .CodeMirror-line > span > span::-moz-selection {
1297
- background: #d7d4f0;
1298
- }
1299
- .cm-searching {
1300
- background-color: #ffa;
1301
- background-color: #ff06;
1302
- }
1303
- .cm-force-border {
1304
- padding-right: 0.1px;
1305
- }
1306
- @media print {
1307
- .CodeMirror div.CodeMirror-cursors {
1308
- visibility: hidden;
1309
- }
1310
- }
1311
- .cm-tab-wrap-hack:after {
1312
- content: '';
1313
- }
1314
- span.CodeMirror-selectedtext {
1315
- background: none;
1316
- }
1317
- .graphiql-container .CodeMirror {
1318
- height: 100%;
1319
- position: absolute;
1320
- width: 100%;
1321
- }
1322
- .graphiql-container .CodeMirror {
1323
- font-family: var(--font-family-mono);
1324
- }
1325
- .graphiql-container .CodeMirror,
1326
- .graphiql-container .CodeMirror-gutters {
1327
- background: none;
1328
- background-color: var(--editor-background, hsl(var(--color-base)));
1329
- }
1330
- .graphiql-container .CodeMirror-linenumber {
1331
- padding: 0;
1332
- }
1333
- .graphiql-container .CodeMirror-gutters {
1334
- border: none;
1335
- }
1336
- .cm-s-graphiql {
1337
- color: hsla(var(--color-neutral), var(--alpha-tertiary));
1338
- }
1339
- .cm-s-graphiql .cm-keyword {
1340
- color: hsl(var(--color-primary));
1341
- }
1342
- .cm-s-graphiql .cm-def {
1343
- color: hsl(var(--color-tertiary));
1344
- }
1345
- .cm-s-graphiql .cm-punctuation {
1346
- color: hsla(var(--color-neutral), var(--alpha-tertiary));
1347
- }
1348
- .cm-s-graphiql .cm-variable {
1349
- color: hsl(var(--color-secondary));
1350
- }
1351
- .cm-s-graphiql .cm-atom {
1352
- color: hsl(var(--color-tertiary));
1353
- }
1354
- .cm-s-graphiql .cm-number {
1355
- color: hsl(var(--color-success));
1356
- }
1357
- .cm-s-graphiql .cm-string {
1358
- color: hsl(var(--color-warning));
1359
- }
1360
- .cm-s-graphiql .cm-builtin {
1361
- color: hsl(var(--color-success));
1362
- }
1363
- .cm-s-graphiql .cm-string-2 {
1364
- color: hsl(var(--color-secondary));
1365
- }
1366
- .cm-s-graphiql .cm-attribute,
1367
- .cm-s-graphiql .cm-meta {
1368
- color: hsl(var(--color-tertiary));
1369
- }
1370
- .cm-s-graphiql .cm-property {
1371
- color: hsl(var(--color-info));
1372
- }
1373
- .cm-s-graphiql .cm-qualifier {
1374
- color: hsl(var(--color-secondary));
1375
- }
1376
- .cm-s-graphiql .cm-comment {
1377
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1378
- }
1379
- .cm-s-graphiql .cm-ws {
1380
- color: hsla(var(--color-neutral), var(--alpha-tertiary));
1381
- }
1382
- .cm-s-graphiql .cm-invalidchar {
1383
- color: hsl(var(--color-error));
1384
- }
1385
- .cm-s-graphiql .CodeMirror-cursor {
1386
- border-left: 2px solid hsla(var(--color-neutral), var(--alpha-secondary));
1387
- }
1388
- .cm-s-graphiql .CodeMirror-linenumber {
1389
- color: hsla(var(--color-neutral), var(--alpha-tertiary));
1390
- }
1391
- .graphiql-container div.CodeMirror span.CodeMirror-matchingbracket,
1392
- .graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
1393
- color: hsl(var(--color-warning));
1394
- }
1395
- .graphiql-container .CodeMirror-selected,
1396
- .graphiql-container .CodeMirror-focused .CodeMirror-selected {
1397
- background: hsla(var(--color-neutral), var(--alpha-background-heavy));
1398
- }
1399
- .graphiql-container .CodeMirror-dialog {
1400
- background: inherit;
1401
- color: inherit;
1402
- left: 0;
1403
- right: 0;
1404
- overflow: hidden;
1405
- padding: var(--px-2) var(--px-6);
1406
- position: absolute;
1407
- z-index: 6;
1408
- }
1409
- .graphiql-container .CodeMirror-dialog-top {
1410
- border-bottom: 1px solid
1411
- hsla(var(--color-neutral), var(--alpha-background-heavy));
1412
- padding-bottom: var(--px-12);
1413
- top: 0;
1414
- }
1415
- .graphiql-container .CodeMirror-dialog-bottom {
1416
- border-top: 1px solid
1417
- hsla(var(--color-neutral), var(--alpha-background-heavy));
1418
- bottom: 0;
1419
- padding-top: var(--px-12);
1420
- }
1421
- .graphiql-container .CodeMirror-search-hint {
1422
- display: none;
1423
- }
1424
- .graphiql-container .CodeMirror-dialog input {
1425
- border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
1426
- border-radius: var(--border-radius-4);
1427
- padding: var(--px-4);
1428
- }
1429
- .graphiql-container .CodeMirror-dialog input:focus {
1430
- outline: hsl(var(--color-primary)) solid 2px;
1431
- }
1432
- .graphiql-container .cm-searching {
1433
- background-color: hsla(var(--color-warning), var(--alpha-background-light));
1434
- padding-bottom: 1.5px;
1435
- padding-top: 0.5px;
1436
- }
1437
- .CodeMirror-foldmarker {
1438
- color: #00f;
1439
- text-shadow:
1440
- #b9f 1px 1px 2px,
1441
- #b9f -1px -1px 2px,
1442
- #b9f 1px -1px 2px,
1443
- #b9f -1px 1px 2px;
1444
- font-family: arial;
1445
- line-height: 0.3;
1446
- cursor: pointer;
1447
- }
1448
- .CodeMirror-foldgutter {
1449
- width: 0.7em;
1450
- }
1451
- .CodeMirror-foldgutter-open,
1452
- .CodeMirror-foldgutter-folded {
1453
- cursor: pointer;
1454
- }
1455
- .CodeMirror-foldgutter-open:after {
1456
- content: '▾';
1457
- }
1458
- .CodeMirror-foldgutter-folded:after {
1459
- content: '▸';
1460
- }
1461
- .CodeMirror-foldgutter {
1462
- width: var(--px-12);
1463
- }
1464
- .CodeMirror-foldmarker {
1465
- background-color: hsl(var(--color-info));
1466
- border-radius: var(--border-radius-4);
1467
- color: hsl(var(--color-base));
1468
- font-family: inherit;
1469
- margin: 0 var(--px-4);
1470
- padding: 0 var(--px-8);
1471
- text-shadow: none;
1472
- }
1473
- .CodeMirror-foldgutter-open,
1474
- .CodeMirror-foldgutter-folded {
1475
- color: hsla(var(--color-neutral), var(--alpha-tertiary));
1476
- }
1477
- .CodeMirror-foldgutter-open:after,
1478
- .CodeMirror-foldgutter-folded:after {
1479
- margin: 0 var(--px-2);
1480
- }
1481
- .graphiql-editor {
1482
- height: 100%;
1483
- position: relative;
1484
- width: 100%;
1485
- }
1486
- .graphiql-editor.hidden {
1487
- left: -9999px;
1488
- position: absolute;
1489
- top: -9999px;
1490
- visibility: hidden;
1491
- }
1492
- .CodeMirror-lint-markers {
1493
- width: 16px;
1494
- }
1495
- .CodeMirror-lint-tooltip {
1496
- background-color: #ffd;
1497
- border: 1px solid black;
1498
- border-radius: 4px;
1499
- color: #000;
1500
- font-family: monospace;
1501
- font-size: 10pt;
1502
- overflow: hidden;
1503
- padding: 2px 5px;
1504
- position: fixed;
1505
- white-space: pre;
1506
- white-space: pre-wrap;
1507
- z-index: 100;
1508
- max-width: 600px;
1509
- opacity: 0;
1510
- transition: opacity 0.4s;
1511
- -moz-transition: opacity 0.4s;
1512
- -webkit-transition: opacity 0.4s;
1513
- -o-transition: opacity 0.4s;
1514
- -ms-transition: opacity 0.4s;
1515
- }
1516
- .CodeMirror-lint-mark {
1517
- background-position: left bottom;
1518
- background-repeat: repeat-x;
1519
- }
1520
- .CodeMirror-lint-mark-warning {
1521
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=);
1522
- }
1523
- .CodeMirror-lint-mark-error {
1524
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==);
1525
- }
1526
- .CodeMirror-lint-marker {
1527
- background-position: center center;
1528
- background-repeat: no-repeat;
1529
- cursor: pointer;
1530
- display: inline-block;
1531
- height: 16px;
1532
- width: 16px;
1533
- vertical-align: middle;
1534
- position: relative;
1535
- }
1536
- .CodeMirror-lint-message {
1537
- padding-left: 18px;
1538
- background-position: top left;
1539
- background-repeat: no-repeat;
1540
- }
1541
- .CodeMirror-lint-marker-warning,
1542
- .CodeMirror-lint-message-warning {
1543
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=);
1544
- }
1545
- .CodeMirror-lint-marker-error,
1546
- .CodeMirror-lint-message-error {
1547
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=);
1548
- }
1549
- .CodeMirror-lint-marker-multiple {
1550
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC);
1551
- background-repeat: no-repeat;
1552
- background-position: right bottom;
1553
- width: 100%;
1554
- height: 100%;
1555
- }
1556
- .CodeMirror-lint-line-error {
1557
- background-color: #b74c5114;
1558
- }
1559
- .CodeMirror-lint-line-warning {
1560
- background-color: #ffd3001a;
1561
- }
1562
- .CodeMirror-lint-mark-error,
1563
- .CodeMirror-lint-mark-warning {
1564
- background-repeat: repeat-x;
1565
- background-size: 10px 3px;
1566
- background-position: 0 95%;
1567
- }
1568
- .cm-s-graphiql .CodeMirror-lint-mark-error {
1569
- color: hsl(var(--color-error));
1570
- }
1571
- .CodeMirror-lint-mark-error {
1572
- background-image: linear-gradient(
1573
- 45deg,
1574
- transparent 65%,
1575
- hsl(var(--color-error)) 80%,
1576
- transparent 90%
1577
- ),
1578
- linear-gradient(
1579
- 135deg,
1580
- transparent 5%,
1581
- hsl(var(--color-error)) 15%,
1582
- transparent 25%
1583
- ),
1584
- linear-gradient(
1585
- 135deg,
1586
- transparent 45%,
1587
- hsl(var(--color-error)) 55%,
1588
- transparent 65%
1589
- ),
1590
- linear-gradient(
1591
- 45deg,
1592
- transparent 25%,
1593
- hsl(var(--color-error)) 35%,
1594
- transparent 50%
1595
- );
1596
- }
1597
- .cm-s-graphiql .CodeMirror-lint-mark-warning {
1598
- color: hsl(var(--color-warning));
1599
- }
1600
- .CodeMirror-lint-mark-warning {
1601
- background-image: linear-gradient(
1602
- 45deg,
1603
- transparent 65%,
1604
- hsl(var(--color-warning)) 80%,
1605
- transparent 90%
1606
- ),
1607
- linear-gradient(
1608
- 135deg,
1609
- transparent 5%,
1610
- hsl(var(--color-warning)) 15%,
1611
- transparent 25%
1612
- ),
1613
- linear-gradient(
1614
- 135deg,
1615
- transparent 45%,
1616
- hsl(var(--color-warning)) 55%,
1617
- transparent 65%
1618
- ),
1619
- linear-gradient(
1620
- 45deg,
1621
- transparent 25%,
1622
- hsl(var(--color-warning)) 35%,
1623
- transparent 50%
1624
- );
1625
- }
1626
- .CodeMirror-lint-tooltip {
1627
- background-color: hsl(var(--color-base));
1628
- border: var(--popover-border);
1629
- border-radius: var(--border-radius-8);
1630
- box-shadow: var(--popover-box-shadow);
1631
- font-size: var(--font-size-body);
1632
- font-family: var(--font-family);
1633
- max-width: 600px;
1634
- overflow: hidden;
1635
- padding: var(--px-12);
1636
- }
1637
- .CodeMirror-lint-message-error,
1638
- .CodeMirror-lint-message-warning {
1639
- background-image: none;
1640
- padding: 0;
1641
- }
1642
- .CodeMirror-lint-message-error {
1643
- color: hsl(var(--color-error));
1644
- }
1645
- .CodeMirror-lint-message-warning {
1646
- color: hsl(var(--color-warning));
1647
- }
1648
- .CodeMirror-hints {
1649
- position: absolute;
1650
- z-index: 10;
1651
- overflow: hidden;
1652
- list-style: none;
1653
- margin: 0;
1654
- padding: 2px;
1655
- -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
1656
- -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
1657
- box-shadow: 2px 3px 5px #0003;
1658
- border-radius: 3px;
1659
- border: 1px solid silver;
1660
- background: white;
1661
- font-size: 90%;
1662
- font-family: monospace;
1663
- max-height: 20em;
1664
- overflow-y: auto;
1665
- }
1666
- .CodeMirror-hint {
1667
- margin: 0;
1668
- padding: 0 4px;
1669
- border-radius: 2px;
1670
- white-space: pre;
1671
- color: #000;
1672
- cursor: pointer;
1673
- }
1674
- li.CodeMirror-hint-active {
1675
- background: #08f;
1676
- color: #fff;
1677
- }
1678
- .CodeMirror-hints {
1679
- background: hsl(var(--color-base));
1680
- border: var(--popover-border);
1681
- border-radius: var(--border-radius-8);
1682
- box-shadow: var(--popover-box-shadow);
1683
- display: grid;
1684
- font-family: var(--font-family);
1685
- font-size: var(--font-size-body);
1686
- grid-template-columns: auto fit-content(300px);
1687
- max-height: 264px;
1688
- padding: 0;
1689
- }
1690
- .CodeMirror-hint {
1691
- border-radius: var(--border-radius-4);
1692
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1693
- grid-column: 1 / 2;
1694
- margin: var(--px-4);
1695
- padding: var(--px-6) var(--px-8) !important;
1696
- }
1697
- .CodeMirror-hint:not(:first-child) {
1698
- margin-top: 0;
1699
- }
1700
- li.CodeMirror-hint-active {
1701
- background: hsla(var(--color-primary), var(--alpha-background-medium));
1702
- color: hsl(var(--color-primary));
1703
- }
1704
- .CodeMirror-hint-information {
1705
- border-left: 1px solid
1706
- hsla(var(--color-neutral), var(--alpha-background-heavy));
1707
- grid-column: 2 / 3;
1708
- grid-row: 1 / 99999;
1709
- max-height: 264px;
1710
- overflow: auto;
1711
- padding: var(--px-12);
1712
- }
1713
- .CodeMirror-hint-information-header {
1714
- display: flex;
1715
- align-items: baseline;
1716
- }
1717
- .CodeMirror-hint-information-field-name {
1718
- font-size: var(--font-size-h4);
1719
- font-weight: var(--font-weight-medium);
1720
- }
1721
- .CodeMirror-hint-information-type-name-pill {
1722
- border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
1723
- border-radius: var(--border-radius-4);
1724
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1725
- margin-left: var(--px-6);
1726
- padding: var(--px-4);
1727
- }
1728
- .CodeMirror-hint-information-type-name {
1729
- color: inherit;
1730
- text-decoration: none;
1731
- }
1732
- .CodeMirror-hint-information-type-name:hover {
1733
- text-decoration: underline dotted;
1734
- }
1735
- .CodeMirror-hint-information-description {
1736
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1737
- margin-top: var(--px-12);
1738
- }
1739
- .CodeMirror-info {
1740
- background-color: hsl(var(--color-base));
1741
- border: var(--popover-border);
1742
- border-radius: var(--border-radius-8);
1743
- box-shadow: var(--popover-box-shadow);
1744
- color: hsla(var(--color-neutral), 1);
1745
- max-height: 300px;
1746
- max-width: 400px;
1747
- opacity: 0;
1748
- overflow: auto;
1749
- padding: var(--px-12);
1750
- position: fixed;
1751
- transition: opacity 0.15s;
1752
- z-index: 10;
1753
- }
1754
- .CodeMirror-info a {
1755
- color: inherit;
1756
- text-decoration: none;
1757
- }
1758
- .CodeMirror-info a:hover {
1759
- text-decoration: underline dotted;
1760
- }
1761
- .CodeMirror-info .CodeMirror-info-header {
1762
- display: flex;
1763
- align-items: baseline;
1764
- }
1765
- .CodeMirror-info .CodeMirror-info-header > .type-name,
1766
- .CodeMirror-info .CodeMirror-info-header > .field-name,
1767
- .CodeMirror-info .CodeMirror-info-header > .arg-name,
1768
- .CodeMirror-info .CodeMirror-info-header > .directive-name,
1769
- .CodeMirror-info .CodeMirror-info-header > .enum-value {
1770
- font-size: var(--font-size-h4);
1771
- font-weight: var(--font-weight-medium);
1772
- }
1773
- .CodeMirror-info .type-name-pill {
1774
- border: 1px solid hsla(var(--color-neutral), var(--alpha-tertiary));
1775
- border-radius: var(--border-radius-4);
1776
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1777
- margin-left: var(--px-6);
1778
- padding: var(--px-4);
1779
- }
1780
- .CodeMirror-info .info-description {
1781
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1782
- margin-top: var(--px-12);
1783
- overflow: hidden;
1784
- }
1785
- .CodeMirror-jump-token {
1786
- text-decoration: underline dotted;
1787
- cursor: pointer;
1788
- }
1789
- .auto-inserted-leaf.cm-property {
1790
- animation-duration: 6s;
1791
- animation-name: insertionFade;
1792
- border-radius: var(--border-radius-4);
1793
- padding: var(--px-2);
1794
- }
1795
- @keyframes insertionFade {
1796
- 0%,
1797
- to {
1798
- background-color: none;
1799
- }
1800
- 15%,
1801
- 85% {
1802
- background-color: hsla(var(--color-warning), var(--alpha-background-light));
1803
- }
1804
- }
1805
- button.graphiql-toolbar-button {
1806
- display: flex;
1807
- align-items: center;
1808
- justify-content: center;
1809
- height: var(--toolbar-width);
1810
- width: var(--toolbar-width);
1811
- }
1812
- button.graphiql-toolbar-button.error {
1813
- background: hsla(var(--color-error), var(--alpha-background-heavy));
1814
- }
1815
- .graphiql-execute-button-wrapper {
1816
- position: relative;
1817
- }
1818
- button.graphiql-execute-button {
1819
- background-color: hsl(var(--color-primary));
1820
- border: none;
1821
- border-radius: var(--border-radius-8);
1822
- cursor: pointer;
1823
- height: var(--toolbar-width);
1824
- padding: 0;
1825
- width: var(--toolbar-width);
1826
- }
1827
- button.graphiql-execute-button:hover {
1828
- background-color: hsla(var(--color-primary), 0.9);
1829
- }
1830
- button.graphiql-execute-button:active {
1831
- background-color: hsla(var(--color-primary), 0.8);
1832
- }
1833
- button.graphiql-execute-button:focus {
1834
- outline: hsla(var(--color-primary), 0.8) auto 1px;
1835
- }
1836
- button.graphiql-execute-button > svg {
1837
- color: #fff;
1838
- display: block;
1839
- height: var(--px-16);
1840
- margin: auto;
1841
- width: var(--px-16);
1842
- }
1843
- button.graphiql-toolbar-menu {
1844
- display: block;
1845
- height: var(--toolbar-width);
1846
- width: var(--toolbar-width);
1847
- }
1848
-
1849
- /*!*********************************************************************************************************************!*\
1850
- !*** css ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/postcss-loader/dist/cjs.js!./style.css ***!
1851
- \*********************************************************************************************************************/
1852
- /* Everything */
1853
- .graphiql-container {
1854
- background-color: hsl(var(--color-base));
1855
- display: flex;
1856
- height: 100%;
1857
- margin: 0;
1858
- overflow: hidden;
1859
- width: 100%;
1860
- }
1861
- /* The sidebar */
1862
- .graphiql-container .graphiql-sidebar {
1863
- display: flex;
1864
- flex-direction: column;
1865
- justify-content: space-between;
1866
- padding: var(--px-8);
1867
- width: var(--sidebar-width);
1868
- }
1869
- .graphiql-container .graphiql-sidebar .graphiql-sidebar-section {
1870
- display: flex;
1871
- flex-direction: column;
1872
- gap: var(--px-8);
1873
- }
1874
- .graphiql-container .graphiql-sidebar button {
1875
- display: flex;
1876
- align-items: center;
1877
- justify-content: center;
1878
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1879
- height: calc(var(--sidebar-width) - (2 * var(--px-8)));
1880
- width: calc(var(--sidebar-width) - (2 * var(--px-8)));
1881
- }
1882
- .graphiql-container .graphiql-sidebar button.active {
1883
- color: hsla(var(--color-neutral), 1);
1884
- }
1885
- .graphiql-container .graphiql-sidebar button:not(:first-child) {
1886
- margin-top: var(--px-4);
1887
- }
1888
- .graphiql-container .graphiql-sidebar button > svg {
1889
- height: var(--px-20);
1890
- width: var(--px-20);
1891
- }
1892
- /* The main content, i.e. everything except the sidebar */
1893
- .graphiql-container .graphiql-main {
1894
- display: flex;
1895
- flex: 1;
1896
- min-width: 0;
1897
- }
1898
- /* The current session and tabs */
1899
- .graphiql-container .graphiql-sessions {
1900
- background-color: hsla(var(--color-neutral), var(--alpha-background-light));
1901
- /* Adding the 8px of padding to the inner border radius of the query editor */
1902
- border-radius: calc(var(--border-radius-12) + var(--px-8));
1903
- display: flex;
1904
- flex-direction: column;
1905
- flex: 1;
1906
- max-height: 100%;
1907
- margin: var(--px-16);
1908
- margin-left: 0;
1909
- min-width: 0;
1910
- }
1911
- /* The session header containing tabs and the logo */
1912
- .graphiql-container .graphiql-session-header {
1913
- align-items: center;
1914
- display: flex;
1915
- justify-content: space-between;
1916
- height: var(--session-header-height);
1917
- }
1918
- /* The button to add a new tab */
1919
- button.graphiql-tab-add {
1920
- height: 100%;
1921
- padding: var(--px-4);
1922
- }
1923
- button.graphiql-tab-add > svg {
1924
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1925
- display: block;
1926
- height: var(--px-16);
1927
- width: var(--px-16);
1928
- }
1929
- /* The right-hand-side of the session header */
1930
- .graphiql-container .graphiql-session-header-right {
1931
- align-items: center;
1932
- display: flex;
1933
- }
1934
- /* The GraphiQL logo */
1935
- .graphiql-container .graphiql-logo {
1936
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1937
- font-size: var(--font-size-h4);
1938
- font-weight: var(--font-weight-medium);
1939
- padding: var(--px-12) var(--px-16);
1940
- }
1941
- /* Undo default link styling for the default GraphiQL logo link */
1942
- .graphiql-container .graphiql-logo .graphiql-logo-link {
1943
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1944
- text-decoration: none;
1945
- }
1946
- /* The editor of the session */
1947
- .graphiql-container .graphiql-session {
1948
- display: flex;
1949
- flex: 1;
1950
- padding: 0 var(--px-8) var(--px-8);
1951
- }
1952
- /* All editors (query, variable, headers) */
1953
- .graphiql-container .graphiql-editors {
1954
- background-color: hsl(var(--color-base));
1955
- border-radius: calc(var(--border-radius-12));
1956
- box-shadow: var(--popover-box-shadow);
1957
- display: flex;
1958
- flex: 1;
1959
- flex-direction: column;
1960
- }
1961
- .graphiql-container .graphiql-editors.full-height {
1962
- margin-top: calc(var(--px-8) - var(--session-header-height));
1963
- }
1964
- /* The query editor and the toolbar */
1965
- .graphiql-container .graphiql-query-editor {
1966
- border-bottom: 1px solid
1967
- hsla(var(--color-neutral), var(--alpha-background-heavy));
1968
- padding: var(--px-16);
1969
- column-gap: var(--px-16);
1970
- display: flex;
1971
- width: 100%;
1972
- }
1973
- /* The vertical toolbar next to the query editor */
1974
- .graphiql-container .graphiql-toolbar {
1975
- width: var(--toolbar-width);
1976
- }
1977
- .graphiql-container .graphiql-toolbar > * + * {
1978
- margin-top: var(--px-8);
1979
- }
1980
- /* The toolbar icons */
1981
- .graphiql-toolbar-icon {
1982
- color: hsla(var(--color-neutral), var(--alpha-tertiary));
1983
- display: block;
1984
- height: calc(var(--toolbar-width) - (var(--px-8) * 2));
1985
- width: calc(var(--toolbar-width) - (var(--px-8) * 2));
1986
- }
1987
- /* The tab bar for editor tools */
1988
- .graphiql-container .graphiql-editor-tools {
1989
- cursor: row-resize;
1990
- display: flex;
1991
- width: 100%;
1992
- column-gap: var(--px-8);
1993
- padding: var(--px-8);
1994
- }
1995
- .graphiql-container .graphiql-editor-tools button {
1996
- color: hsla(var(--color-neutral), var(--alpha-secondary));
1997
- }
1998
- .graphiql-container .graphiql-editor-tools button.active {
1999
- color: hsla(var(--color-neutral), 1);
2000
- }
2001
- /* The tab buttons to switch between editor tools */
2002
- .graphiql-container
2003
- .graphiql-editor-tools
2004
- > button:not(.graphiql-toggle-editor-tools) {
2005
- padding: var(--px-8) var(--px-12);
2006
- }
2007
- .graphiql-container .graphiql-editor-tools .graphiql-toggle-editor-tools {
2008
- margin-left: auto;
2009
- }
2010
- /* An editor tool, e.g. variable or header editor */
2011
- .graphiql-container .graphiql-editor-tool {
2012
- flex: 1;
2013
- padding: var(--px-16);
2014
- }
2015
- /**
2016
- * The way CodeMirror editors are styled they overflow their containing
2017
- * element. For some OS-browser-combinations this might cause overlap issues,
2018
- * setting the position of this to `relative` makes sure this element will
2019
- * always be on top of any editors.
2020
- */
2021
- .graphiql-container .graphiql-toolbar,
2022
- .graphiql-container .graphiql-editor-tools,
2023
- .graphiql-container .graphiql-editor-tool {
2024
- position: relative;
2025
- }
2026
- /* The response view */
2027
- .graphiql-container .graphiql-response {
2028
- --editor-background: transparent;
2029
- display: flex;
2030
- width: 100%;
2031
- flex-direction: column;
2032
- }
2033
- /* The results editor wrapping container */
2034
- .graphiql-container .graphiql-response .result-window {
2035
- position: relative;
2036
- flex: 1;
2037
- }
2038
- /* The footer below the response view */
2039
- .graphiql-container .graphiql-footer {
2040
- border-top: 1px solid
2041
- hsla(var(--color-neutral), var(--alpha-background-heavy));
2042
- }
2043
- /* The plugin container */
2044
- .graphiql-container .graphiql-plugin {
2045
- border-left: 1px solid
2046
- hsla(var(--color-neutral), var(--alpha-background-heavy));
2047
- flex: 1;
2048
- overflow-y: auto;
2049
- padding: var(--px-16);
2050
- }
2051
- /* Generic drag bar for horizontal resizing */
2052
- .graphiql-horizontal-drag-bar {
2053
- width: var(--px-12);
2054
- cursor: col-resize;
2055
- }
2056
- .graphiql-horizontal-drag-bar:hover::after {
2057
- border: var(--px-2) solid
2058
- hsla(var(--color-neutral), var(--alpha-background-heavy));
2059
- border-radius: var(--border-radius-2);
2060
- content: '';
2061
- display: block;
2062
- height: 25%;
2063
- margin: 0 auto;
2064
- position: relative;
2065
- /* (100% - 25%) / 2 = 37.5% */
2066
- top: 37.5%;
2067
- width: 0;
2068
- }
2069
- .graphiql-container .graphiql-chevron-icon {
2070
- color: hsla(var(--color-neutral), var(--alpha-tertiary));
2071
- display: block;
2072
- height: var(--px-12);
2073
- margin: var(--px-12);
2074
- width: var(--px-12);
2075
- }
2076
- /* Generic spin animation */
2077
- .graphiql-spin {
2078
- animation: spin 0.8s linear 0s infinite;
2079
- }
2080
- @keyframes spin {
2081
- from {
2082
- transform: rotate(0deg);
2083
- }
2084
- to {
2085
- transform: rotate(360deg);
2086
- }
2087
- }
2088
- /* The header of the settings dialog */
2089
- .graphiql-dialog .graphiql-dialog-header {
2090
- align-items: center;
2091
- display: flex;
2092
- justify-content: space-between;
2093
- padding: var(--px-24);
2094
- }
2095
- /* The title of the settings dialog */
2096
- .graphiql-dialog .graphiql-dialog-title {
2097
- font-size: var(--font-size-h3);
2098
- font-weight: var(--font-weight-medium);
2099
- margin: 0;
2100
- }
2101
- /* A section inside the settings dialog */
2102
- .graphiql-dialog .graphiql-dialog-section {
2103
- align-items: center;
2104
- border-top: 1px solid
2105
- hsla(var(--color-neutral), var(--alpha-background-heavy));
2106
- display: flex;
2107
- justify-content: space-between;
2108
- padding: var(--px-24);
2109
- }
2110
- .graphiql-dialog .graphiql-dialog-section > :not(:first-child) {
2111
- margin-left: var(--px-24);
2112
- }
2113
- /* The section title in the settings dialog */
2114
- .graphiql-dialog .graphiql-dialog-section-title {
2115
- font-size: var(--font-size-h4);
2116
- font-weight: var(--font-weight-medium);
2117
- }
2118
- /* The section caption in the settings dialog */
2119
- .graphiql-dialog .graphiql-dialog-section-caption {
2120
- color: hsla(var(--color-neutral), var(--alpha-secondary));
2121
- }
2122
- .graphiql-dialog .graphiql-warning-text {
2123
- color: hsl(var(--color-warning));
2124
- font-weight: var(--font-weight-medium);
2125
- }
2126
- .graphiql-dialog .graphiql-table {
2127
- border-collapse: collapse;
2128
- width: 100%;
2129
- }
2130
- .graphiql-dialog .graphiql-table :is(th, td) {
2131
- border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
2132
- padding: var(--px-8) var(--px-12);
2133
- }
2134
- /* A single key the short-key dialog */
2135
- .graphiql-dialog .graphiql-key {
2136
- background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
2137
- border-radius: var(--border-radius-4);
2138
- padding: var(--px-4);
2139
- }
2140
- /* Avoid showing native tooltips for icons with titles */
2141
- .graphiql-container svg {
2142
- pointer-events: none;
2143
- }