1 | * {
|
2 | box-sizing: border-box;
|
3 | }
|
4 |
|
5 | body, html, #root {
|
6 | height: 100%;
|
7 | }
|
8 |
|
9 | .App {
|
10 | outline: none;
|
11 | height: 100%;
|
12 | font-size: 0.85rem;
|
13 | line-height: 1.4rem;
|
14 | font-family: "Menlo", consolas, monospace;
|
15 | }
|
16 |
|
17 | .App.top {
|
18 | padding-top: 2.6rem;
|
19 | }.ArrayType {
|
20 |
|
21 | }.Autocomplete {
|
22 | color: #BDBDBD;
|
23 | z-index: -10;
|
24 | position: absolute;
|
25 | }
|
26 |
|
27 | .Autocomplete .matching {
|
28 | color: transparent;
|
29 | }
|
30 | .theme-dark,
|
31 | .theme-dark .Line,
|
32 | .theme-dark .Input {
|
33 | background: #282c34;
|
34 | color: #abb2bf;
|
35 | }
|
36 |
|
37 | .theme-dark.top .Input {
|
38 | background: black;
|
39 | box-shadow: 0px 1px 1px rgba(146, 145, 145, 0.26);
|
40 | }
|
41 |
|
42 | .theme-dark .string.bareString {
|
43 | color: #abb2bf;
|
44 | }
|
45 |
|
46 | .theme-dark .string.quote:before,
|
47 | .theme-dark .string.quote:after {
|
48 | color: #abb2bf;
|
49 | }
|
50 |
|
51 | .theme-dark .Line {
|
52 | border-bottom: 1px solid rgb(84, 84, 84);
|
53 | }
|
54 |
|
55 | .theme-dark .Input,
|
56 | .theme-dark .Input textarea,
|
57 | .theme-dark .prompt.input {
|
58 | color: rgb(222, 222, 222);
|
59 | }
|
60 |
|
61 | .theme-dark .function.function em,
|
62 | .theme-dark .Line em {
|
63 | color: #c678dd;
|
64 | }
|
65 |
|
66 | .theme-dark .number {
|
67 | color: #d19a66;
|
68 | }
|
69 |
|
70 | .theme-dark .string {
|
71 | color: #98c379;
|
72 | }
|
73 |
|
74 | .theme-dark .icon {
|
75 | background-color: rgb(99, 104, 115);
|
76 | }
|
77 |
|
78 | .theme-dark .Line .response.error {
|
79 | background: rgb(39, 5, 5);
|
80 | }
|
81 |
|
82 | .theme-dark a {
|
83 | color: #c678dd;
|
84 | }
|
85 | .Filter {
|
86 | height: 1rem;
|
87 | display: inline-block;
|
88 | }
|
89 |
|
90 | .Filter .inner {
|
91 | border-radius: 20px;
|
92 | display: inline-block;
|
93 | border: 1px solid #2196F3;
|
94 | background: white;
|
95 |
|
96 | padding-right: 1rem;
|
97 | position: relative;
|
98 | left: 1.75rem;
|
99 | z-index: 0;
|
100 | line-height: 1rem;
|
101 | }
|
102 |
|
103 | .Filter.is-hidden .inner {
|
104 | display: none;
|
105 | }
|
106 |
|
107 | .Filter.is-visible .icon {
|
108 | opacity: .99;
|
109 | background-color: #2196F3;
|
110 | }
|
111 |
|
112 | .Filter input {
|
113 | font-family: "Menlo", consolas, monospace;
|
114 | color: #333;
|
115 | width: 8rem;
|
116 | outline: 0;
|
117 | border: 0;
|
118 | background: transparent;
|
119 | padding: .25rem .5rem;
|
120 | font-size: .75rem;
|
121 | }
|
122 | .Input {
|
123 | display: block;
|
124 | width: 100%;
|
125 | z-index: 10;
|
126 | position: relative;
|
127 | }
|
128 |
|
129 | .top .Input {
|
130 | position: fixed;
|
131 | top: 0;
|
132 | left: 0;
|
133 | right: 0;
|
134 | background: #E6E8F2;
|
135 |
|
136 | box-shadow: 0px 1px 1px rgba(0,0,0,.4);
|
137 | }
|
138 |
|
139 | .Input:before {
|
140 | position: absolute;
|
141 | content: '';
|
142 | background-image: svg-load('../svg/prompt.svg');
|
143 | background-size: contain;
|
144 | top: 0.9rem;
|
145 | left: 0.4rem;
|
146 | width: 12px;
|
147 | height: 12px;
|
148 | background-position: 50% 50%;
|
149 | background-repeat: no-repeat;
|
150 | }
|
151 |
|
152 | .Line .input:before {
|
153 | background-image: svg-load('../svg/in.svg');
|
154 | }
|
155 |
|
156 | .Input .cli,
|
157 | .Autocomplete {
|
158 | resize: none;
|
159 | background: none;
|
160 | font-family: "Menlo", consolas, monospace;
|
161 | border: 0;
|
162 | padding: 0.6rem;
|
163 | padding-left: 1.4rem;
|
164 | display: block;
|
165 | position: relative;
|
166 | z-index: 2;
|
167 | width: 100%;
|
168 | outline: none;
|
169 | font-size: inherit;
|
170 | line-height: inherit;
|
171 | }
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 | .Suggest
|
178 | {
|
179 | font-size: inherit;
|
180 | font-family: "Menlo", consolas, monospace;
|
181 |
|
182 | line-height: inherit;
|
183 |
|
184 | position: absolute;
|
185 | top: 0;
|
186 | right: 0;
|
187 | left: 0;
|
188 | z-index: 1;
|
189 | }
|
190 |
|
191 | .Suggest__list
|
192 | {
|
193 | display: block;
|
194 | position: absolute;
|
195 | right: 0;
|
196 | bottom: 100%;
|
197 | left: 0;
|
198 |
|
199 | padding: 0.7rem 0.7rem 0.7rem 1.4rem;
|
200 | margin: 0 0 2px 0;
|
201 |
|
202 | border-top: solid 1px;
|
203 | }
|
204 |
|
205 | .Suggest__list_drop_down
|
206 | {
|
207 | top: 200%;
|
208 | bottom: auto;
|
209 | }
|
210 |
|
211 | .Suggest_theme_dark .Suggest__list
|
212 | {
|
213 | background-color: #282C34;
|
214 | }
|
215 |
|
216 | .Suggest_theme_light .Suggest__list
|
217 | {
|
218 | background-color: #FFF;
|
219 | }
|
220 |
|
221 | .Suggest__item
|
222 | {
|
223 | font-size: 0.9em;
|
224 |
|
225 | display: inline-block;
|
226 |
|
227 | margin: 0 1rem 0 0;
|
228 | }
|
229 |
|
230 | .Suggest__item_is_selected
|
231 | {
|
232 | color: yellow;
|
233 | }
|
234 |
|
235 | .Suggest__help
|
236 | {
|
237 | white-space: pre;
|
238 |
|
239 | opacity: 0.3;
|
240 |
|
241 | padding: 0.6rem 0.6rem 0.6rem 1.4rem;
|
242 | }
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 | .Line {
|
250 | line-height: 1.4rem;
|
251 |
|
252 | border-bottom: 1px solid #eee;
|
253 | position: relative;
|
254 | }
|
255 |
|
256 | .Line .input,
|
257 | .Line .output {
|
258 | display: flex;
|
259 | max-width: 100%;
|
260 | position: relative;
|
261 | padding: 0.6rem;
|
262 | padding-left: 1.4rem;
|
263 | }
|
264 |
|
265 | .Line .input {
|
266 | white-space: pre;
|
267 | }
|
268 |
|
269 | .Line .input.prompt {
|
270 | white-space: pre-wrap;
|
271 | overflow-x: auto;
|
272 | }
|
273 |
|
274 | .Line .prompt:before {
|
275 | position: absolute;
|
276 | content: '';
|
277 | background-size: contain;
|
278 | top: 0.8rem;
|
279 | left: 0.4rem;
|
280 | width: 12px;
|
281 | height: 12px;
|
282 |
|
283 | background-position: 50% 50%;
|
284 | background-repeat: no-repeat;
|
285 | }
|
286 |
|
287 | .Line .input:before {
|
288 | background-image: svg-load('../svg/in.svg');
|
289 | top: 0.9rem;
|
290 | }
|
291 |
|
292 | .Line .prompt.error {
|
293 | background: #FFEFEF;
|
294 | }
|
295 |
|
296 | .Line .output:before {
|
297 | background-image: svg-load('../svg/out.svg');
|
298 | }
|
299 |
|
300 | .Line .output.log:before {
|
301 | background-image: none;
|
302 | }
|
303 |
|
304 | .Line .error.output:before {
|
305 | background-image: svg-load('../svg/error.svg');
|
306 | }
|
307 |
|
308 | .Line:hover .LineNav,
|
309 | .Line:focus .LineNav {
|
310 | display: block;
|
311 | }
|
312 |
|
313 | .Line.out:before {
|
314 | content: '';
|
315 | display: block;
|
316 | position: absolute;
|
317 | width: 2px;
|
318 | height: calc(100% - 2rem);
|
319 | background: blue;
|
320 | left: 0.5rem;
|
321 | }
|
322 |
|
323 | .Line em {
|
324 | user-select: none;
|
325 | padding-right: 5px;
|
326 | cursor: pointer;
|
327 | color: #2196F3;
|
328 | }
|
329 |
|
330 | .Line .error em,
|
331 | .Line .error .bareString {
|
332 | color: #F44336;
|
333 | }
|
334 |
|
335 | .Line .sep {
|
336 | padding-right: 1ch;
|
337 | }
|
338 |
|
339 | .Line .type em:hover {
|
340 | text-decoration: underline;
|
341 | }
|
342 |
|
343 | .ArrayType.closed {
|
344 | cursor: pointer;
|
345 | }
|
346 |
|
347 | .Line .type.closed * em:hover {
|
348 | text-decoration: none;
|
349 | }
|
350 |
|
351 | .ArrayType.closed > div {
|
352 | display: inline-block;
|
353 | }
|
354 |
|
355 | .group {
|
356 | margin-left: 0.5rem;
|
357 |
|
358 | }
|
359 |
|
360 | .key-value {
|
361 | line-height: 1.2rem;
|
362 | white-space: nowrap;
|
363 | display: flex;
|
364 | }
|
365 |
|
366 | .closed .key-value {
|
367 | display: inline;
|
368 | }
|
369 |
|
370 | .index {
|
371 | user-select: none;
|
372 | vertical-align: text-bottom;
|
373 | }
|
374 |
|
375 | .key, .index {
|
376 | line-height: 1.2rem;
|
377 | color: #979797;
|
378 | margin-right: .5rem;
|
379 | }
|
380 |
|
381 |
|
382 | .arb-info {
|
383 | color: #999;
|
384 | }
|
385 |
|
386 | .Line > .output > .type {
|
387 | overflow-x: auto;
|
388 | }
|
389 | .LineNav {
|
390 | position: absolute;
|
391 | right: .25rem;
|
392 | top: .5rem;
|
393 | z-index: 10;
|
394 | user-select: none;
|
395 | }
|
396 |
|
397 | .bottom .LineNav {
|
398 | top: auto;
|
399 | bottom: .5rem;
|
400 | }
|
401 |
|
402 | .icon {
|
403 | user-select: none;
|
404 | border: 0;
|
405 | background: none;
|
406 | overflow: hidden;
|
407 | text-indent: -9999px;
|
408 | display: inline-block;
|
409 | border-radius: 2px;
|
410 | width: 1rem;
|
411 | height: 1rem;
|
412 | margin: 0 0.25rem;
|
413 | padding: 0;
|
414 | vertical-align: top;
|
415 | cursor: pointer;
|
416 | opacity: 0.3;
|
417 | border-radius: 100px;
|
418 | padding: 12px;
|
419 | background-color: #ddd;
|
420 | background-repeat: no-repeat;
|
421 | background-position: center;
|
422 | background-size: 60%;
|
423 | outline: none;
|
424 | z-index: 10;
|
425 | }
|
426 |
|
427 | .icon:hover {
|
428 | |
429 |
|
430 |
|
431 |
|
432 |
|
433 |
|
434 | opacity: 0.99;
|
435 | background-color: #2196F3;
|
436 | box-shadow: 0 0 4px 0px #2196F3;
|
437 | }
|
438 |
|
439 | .icon:active {
|
440 | box-shadow: 0 0 0 1px #2196F3;
|
441 | }
|
442 |
|
443 | .icon.copy {
|
444 | background-image: svg-load('../svg/copy.svg');
|
445 | }
|
446 |
|
447 | .icon.link {
|
448 | background-image: svg-load('../svg/link.svg');
|
449 | }
|
450 |
|
451 | .icon.search {
|
452 | background-image: svg-load('../svg/search.svg');
|
453 | }
|
454 |
|
455 | .icon.expand {
|
456 | background-image: svg-load('../svg/expand.svg');
|
457 | padding: 0;
|
458 | background-color: transparent;
|
459 | margin: 0;
|
460 | margin-left: -0.5rem;
|
461 | margin-top: 0.4rem;
|
462 | background-size: contain;
|
463 | height: 8px;
|
464 | width: 8px;
|
465 | }
|
466 |
|
467 | .icon.expand:hover {
|
468 | background-color: transparent;
|
469 | box-shadow: none;
|
470 | }
|
471 | .type {
|
472 | display: inline-block;
|
473 | line-height: 1.2rem;
|
474 | min-height: 1.2rem;
|
475 | }
|
476 |
|
477 | .type + .type {
|
478 | margin-left: 0.75rem;
|
479 | }
|
480 |
|
481 | .type.object.closed .header,
|
482 | .type.object.closed .group,
|
483 | .type.object.closed .group > div {
|
484 | display: inline;
|
485 | }
|
486 |
|
487 | .type.closed .type {
|
488 | display: inline;
|
489 | }
|
490 |
|
491 | .string {
|
492 | position: relative;
|
493 | color: #4CAF50;
|
494 | white-space: nowrap;
|
495 | }
|
496 |
|
497 | .string.quote:before,
|
498 | .string.quote:after {
|
499 | content: '"';
|
500 | color: #111;
|
501 | }
|
502 |
|
503 | .bareString.string {
|
504 | color: #111;
|
505 | }
|
506 |
|
507 | .string.toggle {
|
508 | white-space: normal;
|
509 | white-space: pre-wrap;
|
510 | }
|
511 |
|
512 | .number {
|
513 | color: #0000c0;
|
514 | }
|
515 |
|
516 | .bool {
|
517 | color: #E91E63;
|
518 | }
|
519 |
|
520 | .function.function em {
|
521 | color: #1976D2;
|
522 | }
|
523 |
|
524 | .undefined {
|
525 | color: #aaa;
|
526 | }
|
527 |
|
528 | .null {
|
529 | color: #9C27B0;
|
530 | }
|
531 | body {
|
532 | margin: 0;
|
533 | padding: 0;
|
534 | font-family: sans-serif;
|
535 | }
|