graphiql_rails 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,14 @@
1
+ /*
2
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
3
+ * listed below.
4
+ *
5
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
7
+ *
8
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
9
+ * compiled file so the styles you add here take precedence over styles defined in any styles
10
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
11
+ * file per style scope.
12
+ *
13
+ *= require_self
14
+ */
@@ -0,0 +1,1129 @@
1
+ html, body {
2
+ height: 100%;
3
+ margin: 0;
4
+ overflow: hidden;
5
+ width: 100%;
6
+ }
7
+
8
+ #graphiql-container {
9
+ color: #141823;
10
+ width: 100%;
11
+ display: -webkit-flex;
12
+ display: flex;
13
+ -webkit-flex-direction: row;
14
+ flex-direction: row;
15
+ height: 100%;
16
+ font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
17
+ font-size: 14px;
18
+ }
19
+
20
+ #graphiql-container .editorWrap {
21
+ display: -webkit-flex;
22
+ display: flex;
23
+ -webkit-flex-direction: column;
24
+ flex-direction: column;
25
+ -webkit-flex: 1;
26
+ flex: 1;
27
+ }
28
+
29
+ #graphiql-container .title {
30
+ font-size: 18px;
31
+ }
32
+
33
+ #graphiql-container .title em {
34
+ font-family: georgia;
35
+ font-size: 19px;
36
+ }
37
+
38
+ #graphiql-container .topBarWrap {
39
+ display: -webkit-flex;
40
+ display: flex;
41
+ -webkit-flex-direction: row;
42
+ flex-direction: row;
43
+ }
44
+
45
+ #graphiql-container .topBar {
46
+ background: -webkit-linear-gradient(#f7f7f7, #e2e2e2);
47
+ background: linear-gradient(#f7f7f7, #e2e2e2);
48
+ border-bottom: solid 1px #d0d0d0;
49
+ cursor: default;
50
+ height: 34px;
51
+ padding: 7px 14px 6px;
52
+ -webkit-user-select: none;
53
+ user-select: none;
54
+ display: -webkit-flex;
55
+ display: flex;
56
+ -webkit-flex-direction: row;
57
+ flex-direction: row;
58
+ -webkit-flex: 1;
59
+ flex: 1;
60
+ -webkit-align-items: center;
61
+ align-items: center;
62
+ }
63
+
64
+ #graphiql-container .docExplorerShow {
65
+ background: -webkit-linear-gradient(#f7f7f7, #e2e2e2);
66
+ background: linear-gradient(#f7f7f7, #e2e2e2);
67
+ border: none;
68
+ border-bottom: solid 1px #d0d0d0;
69
+ border-left: solid 1px rgba(0, 0, 0, 0.2);
70
+ color: #3B5998;
71
+ cursor: pointer;
72
+ font-size: 14px;
73
+ outline: 0;
74
+ padding: 2px 20px 0 18px;
75
+ }
76
+
77
+ #graphiql-container .docExplorerShow:before {
78
+ border-left: 2px solid #3B5998;
79
+ border-top: 2px solid #3B5998;
80
+ content: '';
81
+ display: inline-block;
82
+ height: 9px;
83
+ margin: 0 3px -1px 0;
84
+ position: relative;
85
+ width: 9px;
86
+ -webkit-transform: rotate(-45deg);
87
+ transform: rotate(-45deg);
88
+ }
89
+
90
+ #graphiql-container .editorBar {
91
+ display: -webkit-flex;
92
+ display: flex;
93
+ -webkit-flex-direction: row;
94
+ flex-direction: row;
95
+ -webkit-flex: 1;
96
+ flex: 1;
97
+ }
98
+
99
+ #graphiql-container .queryWrap {
100
+ display: -webkit-flex;
101
+ display: flex;
102
+ -webkit-flex-direction: column;
103
+ flex-direction: column;
104
+ -webkit-flex: 1;
105
+ flex: 1;
106
+ }
107
+
108
+ #graphiql-container .resultWrap {
109
+ position: relative;
110
+ display: -webkit-flex;
111
+ display: flex;
112
+ -webkit-flex-direction: column;
113
+ flex-direction: column;
114
+ -webkit-flex: 1;
115
+ flex: 1;
116
+ border-left: solid 1px #e0e0e0;
117
+ }
118
+
119
+ #graphiql-container .docExplorerWrap {
120
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
121
+ z-index: 3;
122
+ position: relative;
123
+ background: white;
124
+ }
125
+
126
+ #graphiql-container .docExplorerResizer {
127
+ cursor: col-resize;
128
+ height: 100%;
129
+ left: -5px;
130
+ position: absolute;
131
+ top: 0;
132
+ width: 10px;
133
+ z-index: 10;
134
+ }
135
+
136
+ #graphiql-container .docExplorerHide {
137
+ cursor: pointer;
138
+ font-size: 18px;
139
+ margin: -7px -8px -6px 0;
140
+ padding: 18px 16px 15px 12px;
141
+ }
142
+
143
+ #graphiql-container .query-editor {
144
+ -webkit-flex: 1;
145
+ flex: 1;
146
+ position: relative;
147
+ }
148
+
149
+ #graphiql-container .variable-editor {
150
+ height: 30px;
151
+ display: -webkit-flex;
152
+ display: flex;
153
+ -webkit-flex-direction: column;
154
+ flex-direction: column;
155
+ position: relative;
156
+ }
157
+
158
+ #graphiql-container .variable-editor-title {
159
+ background: #eeeeee;
160
+ border-bottom: solid 1px #d6d6d6;
161
+ border-top: solid 1px #e0e0e0;
162
+ color: #777;
163
+ font-variant: small-caps;
164
+ font-weight: bold;
165
+ letter-spacing: 1px;
166
+ line-height: 14px;
167
+ padding: 6px 0 8px 43px;
168
+ text-transform: lowercase;
169
+ -webkit-user-select: none;
170
+ user-select: none;
171
+ }
172
+
173
+ #graphiql-container .codemirrorWrap {
174
+ -webkit-flex: 1;
175
+ flex: 1;
176
+ position: relative;
177
+ }
178
+
179
+ #graphiql-container .result-window {
180
+ -webkit-flex: 1;
181
+ flex: 1;
182
+ position: relative;
183
+ }
184
+
185
+ #graphiql-container .footer {
186
+ background: #f6f7f8;
187
+ border-left: solid 1px #e0e0e0;
188
+ border-top: solid 1px #e0e0e0;
189
+ margin-left: 12px;
190
+ position: relative;
191
+ }
192
+
193
+ #graphiql-container .footer:before {
194
+ background: #eeeeee;
195
+ bottom: 0;
196
+ content: " ";
197
+ left: -13px;
198
+ position: absolute;
199
+ top: -1px;
200
+ width: 12px;
201
+ }
202
+
203
+ #graphiql-container .result-window .CodeMirror {
204
+ background: #f6f7f8;
205
+ }
206
+
207
+ #graphiql-container .result-window .CodeMirror-gutters {
208
+ background-color: #eeeeee;
209
+ border-color: #e0e0e0;
210
+ cursor: col-resize;
211
+ }
212
+
213
+ #graphiql-container .result-window .CodeMirror-foldgutter,
214
+ #graphiql-container .result-window .CodeMirror-foldgutter-open:after,
215
+ #graphiql-container .result-window .CodeMirror-foldgutter-folded:after {
216
+ padding-left: 3px;
217
+ }
218
+
219
+ #graphiql-container .execute-button {
220
+ background: -webkit-linear-gradient(#fdfdfd, #d2d3d6);
221
+ background: linear-gradient(#fdfdfd, #d2d3d6);
222
+ border: solid 1px rgba(0,0,0,0.25);
223
+ border-radius: 17px;
224
+ box-shadow: 0 1px 0 #fff;
225
+ cursor: pointer;
226
+ fill: #444;
227
+ height: 34px;
228
+ margin: 0 14px 0 28px;
229
+ padding: 0;
230
+ width: 34px;
231
+ }
232
+
233
+ #graphiql-container .execute-button:active {
234
+ background: -webkit-linear-gradient(#e6e6e6, #c0c0c0);
235
+ background: linear-gradient(#e6e6e6, #c0c0c0);
236
+ box-shadow:
237
+ 0 1px 0 #fff,
238
+ inset 0 0 2px rgba(0, 0, 0, 0.3),
239
+ inset 0 0 6px rgba(0, 0, 0, 0.2);
240
+ }
241
+
242
+ #graphiql-container .execute-button:focus {
243
+ outline: 0;
244
+ }
245
+
246
+ #graphiql-container .CodeMirror-scroll {
247
+ -webkit-overflow-scrolling: touch;
248
+ }
249
+
250
+ #graphiql-container .CodeMirror {
251
+ position: absolute;
252
+ top: 0;
253
+ left: 0;
254
+ height: 100%;
255
+ width: 100%;
256
+ font-size: 13px;
257
+ font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
258
+ color: #141823;
259
+ }
260
+
261
+ #graphiql-container .CodeMirror-lines {
262
+ padding: 20px 0;
263
+ }
264
+
265
+ .CodeMirror-hint-information .content {
266
+ -webkit-box-orient: vertical;
267
+ color: #141823;
268
+ display: -webkit-box;
269
+ font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
270
+ font-size: 13px;
271
+ -webkit-line-clamp: 3;
272
+ line-height: 16px;
273
+ max-height: 48px;
274
+ overflow: hidden;
275
+ text-overflow: -o-ellipsis-lastline;
276
+ }
277
+
278
+ .CodeMirror-hint-information .content p:first-child {
279
+ margin-top: 0;
280
+ }
281
+
282
+ .CodeMirror-hint-information .content p:last-child {
283
+ margin-bottom: 0;
284
+ }
285
+
286
+ .CodeMirror-hint-information .infoType {
287
+ color: #30a;
288
+ margin-right: 0.5em;
289
+ display: inline;
290
+ cursor: pointer;
291
+ }
292
+
293
+ .autoInsertedLeaf.cm-property {
294
+ padding: 2px 4px 1px;
295
+ margin: -2px -4px -1px;
296
+ border-radius: 2px;
297
+ border-bottom: solid 2px rgba(255, 255, 255, 0);
298
+ -webkit-animation-duration: 6s;
299
+ -moz-animation-duration: 6s;
300
+ animation-duration: 6s;
301
+ -webkit-animation-name: insertionFade;
302
+ -moz-animation-name: insertionFade;
303
+ animation-name: insertionFade;
304
+ }
305
+
306
+ @-moz-keyframes insertionFade {
307
+ from, to {
308
+ background: rgba(255, 255, 255, 0);
309
+ border-color: rgba(255, 255, 255, 0);
310
+ }
311
+
312
+ 15%, 85% {
313
+ background: #fbffc9;
314
+ border-color: #f0f3c0;
315
+ }
316
+ }
317
+
318
+ @-webkit-keyframes insertionFade {
319
+ from, to {
320
+ background: rgba(255, 255, 255, 0);
321
+ border-color: rgba(255, 255, 255, 0);
322
+ }
323
+
324
+ 15%, 85% {
325
+ background: #fbffc9;
326
+ border-color: #f0f3c0;
327
+ }
328
+ }
329
+
330
+ @keyframes insertionFade {
331
+ from, to {
332
+ background: rgba(255, 255, 255, 0);
333
+ border-color: rgba(255, 255, 255, 0);
334
+ }
335
+
336
+ 15%, 85% {
337
+ background: #fbffc9;
338
+ border-color: #f0f3c0;
339
+ }
340
+ }
341
+
342
+ div.CodeMirror-lint-tooltip {
343
+ background-color: white;
344
+ color: #141823;
345
+ border: 0;
346
+ border-radius: 2px;
347
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
348
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
349
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
350
+ font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
351
+ font-size: 13px;
352
+ line-height: 16px;
353
+ padding: 6px 10px;
354
+ opacity: 0;
355
+ transition: opacity 0.15s;
356
+ -moz-transition: opacity 0.15s;
357
+ -webkit-transition: opacity 0.15s;
358
+ -o-transition: opacity 0.15s;
359
+ -ms-transition: opacity 0.15s;
360
+ }
361
+
362
+ div.CodeMirror-lint-message-error, div.CodeMirror-lint-message-warning {
363
+ padding-left: 23px;
364
+ }
365
+
366
+ /* COLORS */
367
+
368
+ #graphiql-container .CodeMirror-foldmarker {
369
+ border-radius: 4px;
370
+ background: #08f;
371
+ background: -webkit-linear-gradient(#43A8FF, #0F83E8);
372
+ background: linear-gradient(#43A8FF, #0F83E8);
373
+
374
+ color: white;
375
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
376
+ -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
377
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
378
+ font-family: arial;
379
+ line-height: 0;
380
+ padding: 0px 4px 1px;
381
+ font-size: 12px;
382
+ margin: 0 3px;
383
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.1);
384
+ }
385
+
386
+ #graphiql-container div.CodeMirror span.CodeMirror-matchingbracket {
387
+ color: #555;
388
+ text-decoration: underline;
389
+ }
390
+
391
+ #graphiql-container div.CodeMirror span.CodeMirror-nonmatchingbracket {
392
+ color: #f00;
393
+ }
394
+
395
+ /* Comment */
396
+ .cm-comment {
397
+ color: #999;
398
+ }
399
+
400
+ /* Punctuation */
401
+ .cm-punctuation {
402
+ color: #555;
403
+ }
404
+
405
+ /* Keyword */
406
+ .cm-keyword {
407
+ color: #B11A04;
408
+ }
409
+
410
+ /* OperationName, FragmentName */
411
+ .cm-def {
412
+ color: #D2054E;
413
+ }
414
+
415
+ /* FieldName */
416
+ .cm-property {
417
+ color: #1F61A0;
418
+ }
419
+
420
+ /* FieldAlias */
421
+ .cm-qualifier {
422
+ color: #1C92A9;
423
+ }
424
+
425
+ /* ArgumentName and ObjectFieldName */
426
+ .cm-attribute {
427
+ color: #8B2BB9;
428
+ }
429
+
430
+ /* Number */
431
+ .cm-number {
432
+ color: #2882F9;
433
+ }
434
+
435
+ /* String */
436
+ .cm-string {
437
+ color: #D64292;
438
+ }
439
+
440
+ /* Boolean */
441
+ .cm-builtin {
442
+ color: #D47509;
443
+ }
444
+
445
+ /* EnumValue */
446
+ .cm-string-2 {
447
+ color: #0B7FC7;
448
+ }
449
+
450
+ /* Variable */
451
+ .cm-variable {
452
+ color: #397D13;
453
+ }
454
+
455
+ /* Directive */
456
+ .cm-meta {
457
+ color: #B33086;
458
+ }
459
+
460
+ /* Type */
461
+ .cm-atom {
462
+ color: #CA9800;
463
+ }
464
+ /* BASICS */
465
+
466
+ .CodeMirror {
467
+ /* Set height, width, borders, and global font properties here */
468
+ font-family: monospace;
469
+ height: 300px;
470
+ color: black;
471
+ }
472
+
473
+ /* PADDING */
474
+
475
+ .CodeMirror-lines {
476
+ padding: 4px 0; /* Vertical padding around content */
477
+ }
478
+ .CodeMirror pre {
479
+ padding: 0 4px; /* Horizontal padding of content */
480
+ }
481
+
482
+ .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
483
+ background-color: white; /* The little square between H and V scrollbars */
484
+ }
485
+
486
+ /* GUTTER */
487
+
488
+ .CodeMirror-gutters {
489
+ border-right: 1px solid #ddd;
490
+ background-color: #f7f7f7;
491
+ white-space: nowrap;
492
+ }
493
+ .CodeMirror-linenumbers {}
494
+ .CodeMirror-linenumber {
495
+ padding: 0 3px 0 5px;
496
+ min-width: 20px;
497
+ text-align: right;
498
+ color: #999;
499
+ white-space: nowrap;
500
+ }
501
+
502
+ .CodeMirror-guttermarker { color: black; }
503
+ .CodeMirror-guttermarker-subtle { color: #999; }
504
+
505
+ /* CURSOR */
506
+
507
+ .CodeMirror div.CodeMirror-cursor {
508
+ border-left: 1px solid black;
509
+ }
510
+ /* Shown when moving in bi-directional text */
511
+ .CodeMirror div.CodeMirror-secondarycursor {
512
+ border-left: 1px solid silver;
513
+ }
514
+ .CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
515
+ width: auto;
516
+ border: 0;
517
+ background: #7e7;
518
+ }
519
+ .CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
520
+ z-index: 1;
521
+ }
522
+
523
+ .cm-animate-fat-cursor {
524
+ width: auto;
525
+ border: 0;
526
+ -webkit-animation: blink 1.06s steps(1) infinite;
527
+ -moz-animation: blink 1.06s steps(1) infinite;
528
+ animation: blink 1.06s steps(1) infinite;
529
+ }
530
+ @-moz-keyframes blink {
531
+ 0% { background: #7e7; }
532
+ 50% { background: none; }
533
+ 100% { background: #7e7; }
534
+ }
535
+ @-webkit-keyframes blink {
536
+ 0% { background: #7e7; }
537
+ 50% { background: none; }
538
+ 100% { background: #7e7; }
539
+ }
540
+ @keyframes blink {
541
+ 0% { background: #7e7; }
542
+ 50% { background: none; }
543
+ 100% { background: #7e7; }
544
+ }
545
+
546
+ /* Can style cursor different in overwrite (non-insert) mode */
547
+ div.CodeMirror-overwrite div.CodeMirror-cursor {}
548
+
549
+ .cm-tab { display: inline-block; text-decoration: inherit; }
550
+
551
+ .CodeMirror-ruler {
552
+ border-left: 1px solid #ccc;
553
+ position: absolute;
554
+ }
555
+
556
+ /* DEFAULT THEME */
557
+
558
+ .cm-s-default .cm-keyword {color: #708;}
559
+ .cm-s-default .cm-atom {color: #219;}
560
+ .cm-s-default .cm-number {color: #164;}
561
+ .cm-s-default .cm-def {color: #00f;}
562
+ .cm-s-default .cm-variable,
563
+ .cm-s-default .cm-punctuation,
564
+ .cm-s-default .cm-property,
565
+ .cm-s-default .cm-operator {}
566
+ .cm-s-default .cm-variable-2 {color: #05a;}
567
+ .cm-s-default .cm-variable-3 {color: #085;}
568
+ .cm-s-default .cm-comment {color: #a50;}
569
+ .cm-s-default .cm-string {color: #a11;}
570
+ .cm-s-default .cm-string-2 {color: #f50;}
571
+ .cm-s-default .cm-meta {color: #555;}
572
+ .cm-s-default .cm-qualifier {color: #555;}
573
+ .cm-s-default .cm-builtin {color: #30a;}
574
+ .cm-s-default .cm-bracket {color: #997;}
575
+ .cm-s-default .cm-tag {color: #170;}
576
+ .cm-s-default .cm-attribute {color: #00c;}
577
+ .cm-s-default .cm-header {color: blue;}
578
+ .cm-s-default .cm-quote {color: #090;}
579
+ .cm-s-default .cm-hr {color: #999;}
580
+ .cm-s-default .cm-link {color: #00c;}
581
+
582
+ .cm-negative {color: #d44;}
583
+ .cm-positive {color: #292;}
584
+ .cm-header, .cm-strong {font-weight: bold;}
585
+ .cm-em {font-style: italic;}
586
+ .cm-link {text-decoration: underline;}
587
+ .cm-strikethrough {text-decoration: line-through;}
588
+
589
+ .cm-s-default .cm-error {color: #f00;}
590
+ .cm-invalidchar {color: #f00;}
591
+
592
+ .CodeMirror-composing { border-bottom: 2px solid; }
593
+
594
+ /* Default styles for common addons */
595
+
596
+ div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
597
+ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
598
+ .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
599
+ .CodeMirror-activeline-background {background: #e8f2ff;}
600
+
601
+ /* STOP */
602
+
603
+ /* The rest of this file contains styles related to the mechanics of
604
+ the editor. You probably shouldn't touch them. */
605
+
606
+ .CodeMirror {
607
+ position: relative;
608
+ overflow: hidden;
609
+ background: white;
610
+ }
611
+
612
+ .CodeMirror-scroll {
613
+ overflow: scroll !important; /* Things will break if this is overridden */
614
+ /* 30px is the magic margin used to hide the element's real scrollbars */
615
+ /* See overflow: hidden in .CodeMirror */
616
+ margin-bottom: -30px; margin-right: -30px;
617
+ padding-bottom: 30px;
618
+ height: 100%;
619
+ outline: none; /* Prevent dragging from highlighting the element */
620
+ position: relative;
621
+ }
622
+ .CodeMirror-sizer {
623
+ position: relative;
624
+ border-right: 30px solid transparent;
625
+ }
626
+
627
+ /* The fake, visible scrollbars. Used to force redraw during scrolling
628
+ before actuall scrolling happens, thus preventing shaking and
629
+ flickering artifacts. */
630
+ .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
631
+ position: absolute;
632
+ z-index: 6;
633
+ display: none;
634
+ }
635
+ .CodeMirror-vscrollbar {
636
+ right: 0; top: 0;
637
+ overflow-x: hidden;
638
+ overflow-y: scroll;
639
+ }
640
+ .CodeMirror-hscrollbar {
641
+ bottom: 0; left: 0;
642
+ overflow-y: hidden;
643
+ overflow-x: scroll;
644
+ }
645
+ .CodeMirror-scrollbar-filler {
646
+ right: 0; bottom: 0;
647
+ }
648
+ .CodeMirror-gutter-filler {
649
+ left: 0; bottom: 0;
650
+ }
651
+
652
+ .CodeMirror-gutters {
653
+ position: absolute; left: 0; top: 0;
654
+ z-index: 3;
655
+ }
656
+ .CodeMirror-gutter {
657
+ white-space: normal;
658
+ height: 100%;
659
+ display: inline-block;
660
+ margin-bottom: -30px;
661
+ /* Hack to make IE7 behave */
662
+ *zoom:1;
663
+ *display:inline;
664
+ }
665
+ .CodeMirror-gutter-wrapper {
666
+ position: absolute;
667
+ z-index: 4;
668
+ height: 100%;
669
+ }
670
+ .CodeMirror-gutter-elt {
671
+ position: absolute;
672
+ cursor: default;
673
+ z-index: 4;
674
+ }
675
+ .CodeMirror-gutter-wrapper {
676
+ -webkit-user-select: none;
677
+ -moz-user-select: none;
678
+ user-select: none;
679
+ }
680
+
681
+ .CodeMirror-lines {
682
+ cursor: text;
683
+ min-height: 1px; /* prevents collapsing before first draw */
684
+ }
685
+ .CodeMirror pre {
686
+ /* Reset some styles that the rest of the page might have set */
687
+ -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
688
+ border-width: 0;
689
+ background: transparent;
690
+ font-family: inherit;
691
+ font-size: inherit;
692
+ margin: 0;
693
+ white-space: pre;
694
+ word-wrap: normal;
695
+ line-height: inherit;
696
+ color: inherit;
697
+ z-index: 2;
698
+ position: relative;
699
+ overflow: visible;
700
+ -webkit-tap-highlight-color: transparent;
701
+ }
702
+ .CodeMirror-wrap pre {
703
+ word-wrap: break-word;
704
+ white-space: pre-wrap;
705
+ word-break: normal;
706
+ }
707
+
708
+ .CodeMirror-linebackground {
709
+ position: absolute;
710
+ left: 0; right: 0; top: 0; bottom: 0;
711
+ z-index: 0;
712
+ }
713
+
714
+ .CodeMirror-linewidget {
715
+ position: relative;
716
+ z-index: 2;
717
+ overflow: auto;
718
+ }
719
+
720
+ .CodeMirror-widget {}
721
+
722
+ .CodeMirror-code {
723
+ outline: none;
724
+ }
725
+
726
+ /* Force content-box sizing for the elements where we expect it */
727
+ .CodeMirror-scroll,
728
+ .CodeMirror-sizer,
729
+ .CodeMirror-gutter,
730
+ .CodeMirror-gutters,
731
+ .CodeMirror-linenumber {
732
+ -moz-box-sizing: content-box;
733
+ box-sizing: content-box;
734
+ }
735
+
736
+ .CodeMirror-measure {
737
+ position: absolute;
738
+ width: 100%;
739
+ height: 0;
740
+ overflow: hidden;
741
+ visibility: hidden;
742
+ }
743
+ .CodeMirror-measure pre { position: static; }
744
+
745
+ .CodeMirror div.CodeMirror-cursor {
746
+ position: absolute;
747
+ border-right: none;
748
+ width: 0;
749
+ }
750
+
751
+ div.CodeMirror-cursors {
752
+ visibility: hidden;
753
+ position: relative;
754
+ z-index: 3;
755
+ }
756
+ .CodeMirror-focused div.CodeMirror-cursors {
757
+ visibility: visible;
758
+ }
759
+
760
+ .CodeMirror-selected { background: #d9d9d9; }
761
+ .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
762
+ .CodeMirror-crosshair { cursor: crosshair; }
763
+ .CodeMirror ::selection { background: #d7d4f0; }
764
+ .CodeMirror ::-moz-selection { background: #d7d4f0; }
765
+
766
+ .cm-searching {
767
+ background: #ffa;
768
+ background: rgba(255, 255, 0, .4);
769
+ }
770
+
771
+ /* IE7 hack to prevent it from returning funny offsetTops on the spans */
772
+ .CodeMirror span { *vertical-align: text-bottom; }
773
+
774
+ /* Used to force a border model for a node */
775
+ .cm-force-border { padding-right: .1px; }
776
+
777
+ @media print {
778
+ /* Hide the cursor when printing */
779
+ .CodeMirror div.CodeMirror-cursors {
780
+ visibility: hidden;
781
+ }
782
+ }
783
+
784
+ /* See issue #2901 */
785
+ .cm-tab-wrap-hack:after { content: ''; }
786
+
787
+ /* Help users use markselection to safely style text background */
788
+ span.CodeMirror-selectedtext { background: none; }
789
+ #graphiql-container .doc-explorer {
790
+ background: white;
791
+ }
792
+
793
+ #graphiql-container .doc-explorer-title-bar {
794
+ cursor: default;
795
+ display: -webkit-flex;
796
+ display: flex;
797
+ height: 34px;
798
+ line-height: 14px;
799
+ padding: 8px 8px 5px;
800
+ position: relative;
801
+ -webkit-user-select: none;
802
+ user-select: none;
803
+ }
804
+
805
+ #graphiql-container .doc-explorer-title {
806
+ padding: 10px 0 10px 10px;
807
+ font-weight: bold;
808
+ text-align: center;
809
+ text-overflow: ellipsis;
810
+ white-space: nowrap;
811
+ overflow-x: hidden;
812
+ -webkit-flex: 1;
813
+ flex: 1;
814
+ }
815
+
816
+ #graphiql-container .doc-explorer-back {
817
+ color: #3B5998;
818
+ cursor: pointer;
819
+ margin: -7px 0 -6px -8px;
820
+ overflow-x: hidden;
821
+ padding: 17px 12px 16px 16px;
822
+ text-overflow: ellipsis;
823
+ white-space: nowrap;
824
+ }
825
+
826
+ #graphiql-container .doc-explorer-back:before {
827
+ border-left: 2px solid #3B5998;
828
+ border-top: 2px solid #3B5998;
829
+ content: '';
830
+ display: inline-block;
831
+ height: 9px;
832
+ margin: 0 3px -1px 0;
833
+ position: relative;
834
+ width: 9px;
835
+ -webkit-transform: rotate(-45deg);
836
+ transform: rotate(-45deg);
837
+ }
838
+
839
+ #graphiql-container .doc-explorer-rhs {
840
+ position: relative;
841
+ }
842
+
843
+ #graphiql-container .doc-explorer-contents {
844
+ background-color: #ffffff;
845
+ border-top: 1px solid #d6d6d6;
846
+ bottom: 0;
847
+ left: 0;
848
+ min-width: 300px;
849
+ overflow-y: auto;
850
+ padding: 20px 15px;
851
+ position: absolute;
852
+ right: 0;
853
+ top: 47px;
854
+ }
855
+
856
+ #graphiql-container .doc-type-description p:first-child ,
857
+ #graphiql-container .doc-type-description blockquote:first-child {
858
+ margin-top: 0;
859
+ }
860
+
861
+ #graphiql-container .doc-explorer-contents a {
862
+ cursor: pointer;
863
+ text-decoration: none;
864
+ }
865
+
866
+ #graphiql-container .doc-explorer-contents a:hover {
867
+ text-decoration: underline;
868
+ }
869
+
870
+ #graphiql-container .doc-value-description {
871
+ padding: 4px 0 8px 12px;
872
+ }
873
+
874
+ #graphiql-container .doc-category {
875
+ margin: 20px 0;
876
+ }
877
+
878
+ #graphiql-container .doc-category-title {
879
+ border-bottom: 1px solid #e0e0e0;
880
+ color: #777;
881
+ cursor: default;
882
+ font-size: 14px;
883
+ font-variant: small-caps;
884
+ font-weight: bold;
885
+ letter-spacing: 1px;
886
+ margin: 0 -15px 10px 0;
887
+ padding: 10px 0;
888
+ -webkit-user-select: none;
889
+ user-select: none;
890
+ }
891
+
892
+ #graphiql-container .doc-category-item {
893
+ margin: 12px 0;
894
+ color: #555;
895
+ }
896
+
897
+ #graphiql-container .keyword {
898
+ color: #B11A04;
899
+ }
900
+
901
+ #graphiql-container .type-name {
902
+ color: #CA9800;
903
+ }
904
+
905
+ #graphiql-container .field-name {
906
+ color: #1F61A0;
907
+ }
908
+
909
+ #graphiql-container .value-name {
910
+ color: #0B7FC7;
911
+ }
912
+
913
+ #graphiql-container .arg-name {
914
+ color: #8B2BB9;
915
+ }
916
+
917
+ #graphiql-container .arg:after {
918
+ content: ', ';
919
+ }
920
+
921
+ #graphiql-container .arg:last-child:after {
922
+ content: '';
923
+ }
924
+ .CodeMirror-foldmarker {
925
+ color: blue;
926
+ text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
927
+ font-family: arial;
928
+ line-height: .3;
929
+ cursor: pointer;
930
+ }
931
+ .CodeMirror-foldgutter {
932
+ width: .7em;
933
+ }
934
+ .CodeMirror-foldgutter-open,
935
+ .CodeMirror-foldgutter-folded {
936
+ cursor: pointer;
937
+ }
938
+ .CodeMirror-foldgutter-open:after {
939
+ content: "\25BE";
940
+ }
941
+ .CodeMirror-foldgutter-folded:after {
942
+ content: "\25B8";
943
+ }
944
+ /* The lint marker gutter */
945
+ .CodeMirror-lint-markers {
946
+ width: 16px;
947
+ }
948
+
949
+ .CodeMirror-lint-tooltip {
950
+ background-color: infobackground;
951
+ border: 1px solid black;
952
+ border-radius: 4px 4px 4px 4px;
953
+ color: infotext;
954
+ font-family: monospace;
955
+ font-size: 10pt;
956
+ overflow: hidden;
957
+ padding: 2px 5px;
958
+ position: fixed;
959
+ white-space: pre;
960
+ white-space: pre-wrap;
961
+ z-index: 100;
962
+ max-width: 600px;
963
+ opacity: 0;
964
+ transition: opacity .4s;
965
+ -moz-transition: opacity .4s;
966
+ -webkit-transition: opacity .4s;
967
+ -o-transition: opacity .4s;
968
+ -ms-transition: opacity .4s;
969
+ }
970
+
971
+ .CodeMirror-lint-mark-error, .CodeMirror-lint-mark-warning {
972
+ background-position: left bottom;
973
+ background-repeat: repeat-x;
974
+ }
975
+
976
+ .CodeMirror-lint-mark-error {
977
+ background-image:
978
+ url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==")
979
+ ;
980
+ }
981
+
982
+ .CodeMirror-lint-mark-warning {
983
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
984
+ }
985
+
986
+ .CodeMirror-lint-marker-error, .CodeMirror-lint-marker-warning {
987
+ background-position: center center;
988
+ background-repeat: no-repeat;
989
+ cursor: pointer;
990
+ display: inline-block;
991
+ height: 16px;
992
+ width: 16px;
993
+ vertical-align: middle;
994
+ position: relative;
995
+ }
996
+
997
+ .CodeMirror-lint-message-error, .CodeMirror-lint-message-warning {
998
+ padding-left: 18px;
999
+ background-position: top left;
1000
+ background-repeat: no-repeat;
1001
+ }
1002
+
1003
+ .CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
1004
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
1005
+ }
1006
+
1007
+ .CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
1008
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
1009
+ }
1010
+
1011
+ .CodeMirror-lint-marker-multiple {
1012
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
1013
+ background-repeat: no-repeat;
1014
+ background-position: right bottom;
1015
+ width: 100%; height: 100%;
1016
+ }
1017
+ #graphiql-container .spinner-container {
1018
+ position: absolute;
1019
+ top: 50%;
1020
+ height: 36px;
1021
+ width: 36px;
1022
+ left: 50%;
1023
+ transform: translate(-50%, -50%);
1024
+ z-index: 10;
1025
+ }
1026
+
1027
+ #graphiql-container .spinner {
1028
+ vertical-align: middle;
1029
+ display: inline-block;
1030
+ height: 24px;
1031
+ width: 24px;
1032
+ position: absolute;
1033
+ -webkit-animation: rotation .6s infinite linear;
1034
+ -moz-animation: rotation .6s infinite linear;
1035
+ -o-animation: rotation .6s infinite linear;
1036
+ animation: rotation .6s infinite linear;
1037
+ border-left: 6px solid rgba(150, 150, 150, .15);
1038
+ border-right: 6px solid rgba(150, 150, 150, .15);
1039
+ border-bottom: 6px solid rgba(150, 150, 150, .15);
1040
+ border-top: 6px solid rgba(150, 150, 150, .8);
1041
+ border-radius: 100%;
1042
+ }
1043
+
1044
+ @-webkit-keyframes rotation {
1045
+ from { -webkit-transform: rotate(0deg); }
1046
+ to { -webkit-transform: rotate(359deg); }
1047
+ }
1048
+
1049
+ @-moz-keyframes rotation {
1050
+ from { -moz-transform: rotate(0deg); }
1051
+ to { -moz-transform: rotate(359deg); }
1052
+ }
1053
+
1054
+ @-o-keyframes rotation {
1055
+ from { -o-transform: rotate(0deg); }
1056
+ to { -o-transform: rotate(359deg); }
1057
+ }
1058
+
1059
+ @keyframes rotation {
1060
+ from { transform: rotate(0deg); }
1061
+ to { transform: rotate(359deg); }
1062
+ }
1063
+ .CodeMirror-hints {
1064
+ background: white;
1065
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1066
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1067
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1068
+ font-family: 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
1069
+ font-size: 13px;
1070
+ list-style: none;
1071
+ margin: 0;
1072
+ margin-left: -6px;
1073
+ max-height: 14.5em;
1074
+ overflow-y: auto;
1075
+ overflow: hidden;
1076
+ padding: 0;
1077
+ position: absolute;
1078
+ z-index: 10;
1079
+ }
1080
+
1081
+ .CodeMirror-hints-wrapper {
1082
+ background: white;
1083
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1084
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1085
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1086
+ margin-left: -6px;
1087
+ position: absolute;
1088
+ z-index: 10;
1089
+ }
1090
+
1091
+ .CodeMirror-hints-wrapper .CodeMirror-hints {
1092
+ -webkit-box-shadow: none;
1093
+ -moz-box-shadow: none;
1094
+ box-shadow: none;
1095
+ position: relative;
1096
+ margin-left: 0;
1097
+ z-index: 0;
1098
+ }
1099
+
1100
+ .CodeMirror-hint {
1101
+ border-top: solid 1px #f7f7f7;
1102
+ color: #141823;
1103
+ cursor: pointer;
1104
+ margin: 0;
1105
+ max-width: 300px;
1106
+ overflow: hidden;
1107
+ padding: 2px 6px;
1108
+ white-space: pre;
1109
+ }
1110
+
1111
+ li.CodeMirror-hint-active {
1112
+ background-color: #08f;
1113
+ border-top-color: white;
1114
+ color: white;
1115
+ }
1116
+
1117
+ .CodeMirror-hint-information {
1118
+ border-top: solid 1px #c0c0c0;
1119
+ max-width: 300px;
1120
+ padding: 4px 6px;
1121
+ position: relative;
1122
+ z-index: 1;
1123
+ }
1124
+
1125
+ .CodeMirror-hint-information:first-child {
1126
+ border-bottom: solid 1px #c0c0c0;
1127
+ border-top: none;
1128
+ margin-bottom: -1px;
1129
+ }