1:root.theme-light,
2:root .theme-light {
3  --theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
4}
5
6* {
7  box-sizing: border-box;
8}
9
10html,
11body {
12  height: 100%;
13  margin: 0;
14  padding: 0;
15  width: 100%;
16}
17
18#mount {
19  display: flex;
20  height: 100%;
21}
22
23
24::-webkit-scrollbar {
25  width: 8px;
26  height: 8px;
27  background: transparent;
28}
29
30::-webkit-scrollbar-track {
31  border-radius: 8px;
32  background: transparent;
33}
34
35::-webkit-scrollbar-thumb {
36  border-radius: 8px;
37  background: rgba(113,113,113,0.5);
38}
39
40:root.theme-dark .CodeMirror-scrollbar-filler {
41  background: transparent;
42}
43.landing-page {
44  flex: 1;
45  display: flex;
46  width: 100%;
47  height: 100%;
48  flex-direction: row;
49}
50
51.landing-page .sidebar {
52  display: flex;
53  background-color: var(--theme-tab-toolbar-background);
54  width: 200px;
55  height: 100%;
56  flex-direction: column;
57}
58
59.landing-page .sidebar h1 {
60  color: var(--theme-body-color);
61  font-size: 24px;
62  margin: 0;
63  line-height: 30px;
64  font-weight: normal;
65  padding: 40px 20px;
66}
67
68.landing-page .sidebar ul {
69  list-style: none;
70  padding: 0;
71  line-height: 30px;
72  font-size: 18px;
73}
74
75.landing-page .sidebar li {
76  padding: 5px 20px;
77}
78
79.landing-page .sidebar li.selected {
80  background: var(--theme-search-overlays-semitransparent);
81  transition: all 0.25s ease;
82}
83
84.landing-page .sidebar li:hover {
85  background: var(--theme-selection-background);
86  cursor: pointer;
87}
88
89.landing-page .sidebar li a {
90  color: var(--theme-body-color);
91}
92
93.landing-page .sidebar li:hover a {
94  color: var(--theme-selection-color);
95}
96
97.landing-page .panel {
98  display: flex;
99  flex: 1;
100  height: 100%;
101  overflow: auto;
102  flex-direction: column;
103}
104
105.landing-page .panel .title {
106  margin: 20px 40px;
107  width: calc(100% - 80px);
108  font-size: 16px;
109  border-bottom: 1px solid var(--theme-splitter-color);
110  height: 54px;
111}
112
113.landing-page .panel h2 {
114  color: var(--theme-body-color);
115  font-weight: normal;
116}
117
118.landing-page .panel .center {
119  flex: 1;
120  display: flex;
121  flex-direction: column;
122}
123
124.landing-page .panel .center .center-message {
125  margin: 40px;
126  font-size: 16px;
127  line-height: 25px;
128  padding: 10px;
129}
130
131.landing-page .center a {
132  color: var(--theme-highlight-bluegrey);
133  text-decoration: none;
134}
135
136.landing-page .tab-group {
137  margin: 40px;
138}
139
140.landing-page .tab-list {
141  list-style: none;
142  padding: 0px;
143  margin: 0px;
144}
145
146.landing-page .tab {
147  border-bottom: 1px solid var(--theme-splitter-color);
148  padding: 10px;
149  font-family: sans-serif;
150}
151
152.landing-page .tab:hover {
153  background-color: var(--theme-toolbar-background);
154  cursor: pointer;
155}
156
157.landing-page .tab-title {
158  line-height: 25px;
159  font-size: 16px;
160  color: var(--theme-highlight-bluegrey);
161}
162
163.landing-page .tab-url {
164  color: var(--theme-comment);
165}
166
167.landing-page .panel .center .footer-note {
168  flex: 1;
169  padding: 50px;
170  font-size: 14px;
171  color: var(--theme-comment);
172  bottom: 0;
173  position: absolute;
174}
175/* vim:set ts=2 sw=2 sts=2 et: */
176
177/* This Source Code Form is subject to the terms of the Mozilla Public
178 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
179 * You can obtain one at http://mozilla.org/MPL/2.0/. */
180
181:root.theme-light,
182:root .theme-light {
183  --theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
184  --theme-faded-tab-color: #7e7e7e;
185}
186
187:root.theme-dark,
188:root .theme-dark {
189  --theme-faded-tab-color: #6e7d8c;
190}
191
192* {
193  box-sizing: border-box;
194}
195
196html,
197body {
198  height: 100%;
199  margin: 0;
200  padding: 0;
201  width: 100%;
202}
203
204#mount {
205  display: flex;
206  height: 100%;
207}
208
209.debugger {
210  display: flex;
211  flex: 1;
212  height: 100%;
213}
214
215.center-pane {
216  display: flex;
217  position: relative;
218  flex: 1;
219  background-color: var(--theme-tab-toolbar-background);
220  overflow: hidden;
221}
222
223.editor-container {
224  display: flex;
225  flex: 1;
226}
227
228.subsettings:hover {
229  cursor: pointer;
230}
231
232.search-container {
233  position: absolute;
234  top: 0;
235  left: 0;
236  width: 100%;
237  height: 100%;
238  display: flex;
239  z-index: 200;
240  background-color: var(--theme-search-overlays-semitransparent);
241}
242
243.search-container .autocomplete {
244  flex: 1;
245}
246
247.search-container .close-button {
248  width: 16px;
249  margin-top: 25px;
250  margin-right: 20px;
251}
252
253.welcomebox {
254  width: calc(100% - 1px);
255
256  /* Offsetting it by 30px for the sources-header area */
257  height: calc(100% - 30px);
258  position: absolute;
259  top: 30px;
260  left: 0;
261  padding: 50px 0;
262  text-align: center;
263  font-size: 1.25em;
264  color: var(--theme-comment-alt);
265  background-color: var(--theme-tab-toolbar-background);
266  font-weight: lighter;
267  z-index: 100;
268}
269menupopup {
270  position: fixed;
271  z-index: 10000;
272  background: white;
273  border: 1px solid #cccccc;
274  padding: 5px 0;
275  background: #f2f2f2;
276  border-radius: 5px;
277  color: #585858;
278  box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8);
279  min-width: 130px;
280}
281
282menuitem {
283  display: block;
284  padding: 0 20px;
285  line-height: 20px;
286  font-weight: 500;
287  font-size: 13px;
288}
289
290menuitem:hover {
291  background: #3780fb;
292  color: white;
293  cursor: pointer;
294}
295
296menuseparator {
297  border-bottom: 1px solid #cacdd3;
298  width: 100%;
299  height: 5px;
300  display: block;
301  margin-bottom: 5px;
302}
303
304#contextmenu-mask.show {
305  position: fixed;
306  top: 0;
307  left: 0;
308  width: 100%;
309  height: 100%;
310  z-index: 999;
311}
312/* vim:set ts=2 sw=2 sts=2 et: */
313/* This Source Code Form is subject to the terms of the Mozilla Public
314 * License, v. 2.0. If a copy of the MPL was not distributed with this
315 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
316
317.split-box {
318  display: flex;
319  flex: 1;
320  min-width: 0;
321  height: 100%;
322  width: 100%;
323}
324
325.split-box.vert {
326  flex-direction: row;
327}
328
329.split-box.horz {
330  flex-direction: column;
331}
332
333.split-box > .uncontrolled {
334  display: flex;
335  flex: 1;
336  min-width: 0;
337  overflow: auto;
338}
339
340.split-box > .controlled {
341  display: flex;
342  overflow: auto;
343}
344
345.split-box > .splitter {
346  background-image: none;
347  border: 0;
348  border-style: solid;
349  border-color: transparent;
350  background-color: var(--theme-splitter-color);
351  background-clip: content-box;
352  position: relative;
353
354  box-sizing: border-box;
355
356  /* Positive z-index positions the splitter on top of its siblings and makes
357     it clickable on both sides. */
358  z-index: 1;
359}
360
361.split-box.vert > .splitter {
362  min-width: calc(var(--devtools-splitter-inline-start-width) +
363    var(--devtools-splitter-inline-end-width) + 1px);
364
365  border-left-width: var(--devtools-splitter-inline-start-width);
366  border-right-width: var(--devtools-splitter-inline-end-width);
367
368  margin-left: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
369  margin-right: calc(-1 * var(--devtools-splitter-inline-end-width));
370
371  cursor: ew-resize;
372}
373
374.split-box.horz > .splitter {
375  min-height: calc(var(--devtools-splitter-top-width) +
376    var(--devtools-splitter-bottom-width) + 1px);
377
378  border-top-width: var(--devtools-splitter-top-width);
379  border-bottom-width: var(--devtools-splitter-bottom-width);
380
381  margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
382  margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
383
384  cursor: ns-resize;
385}
386
387.split-box.disabled {
388  pointer-events: none;
389}
390
391/**
392 * Make sure splitter panels are not processing any mouse
393 * events. This is good for performance during splitter
394 * bar dragging.
395 */
396.split-box.dragging > .controlled,
397.split-box.dragging > .uncontrolled {
398  pointer-events: none;
399}
400/* vim:set ts=2 sw=2 sts=2 et: */
401/* This Source Code Form is subject to the terms of the Mozilla Public
402 * License, v. 2.0. If a copy of the MPL was not distributed with this
403 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
404
405.theme-dark,
406.theme-light {
407  --number-color: var(--theme-highlight-green);
408  --string-color: var(--theme-highlight-orange);
409  --null-color: var(--theme-comment);
410  --object-color: var(--theme-body-color);
411  --caption-color: var(--theme-highlight-blue);
412  --location-color: var(--theme-content-color1);
413  --source-link-color: var(--theme-highlight-blue);
414  --node-color: var(--theme-highlight-bluegrey);
415  --reference-color: var(--theme-highlight-purple);
416}
417
418.theme-firebug {
419  --number-color: #000088;
420  --string-color: #FF0000;
421  --null-color: #787878;
422  --object-color: DarkGreen;
423  --caption-color: #444444;
424  --location-color: #555555;
425  --source-link-color: blue;
426  --node-color: rgb(0, 0, 136);
427  --reference-color: rgb(102, 102, 255);
428}
429
430/******************************************************************************/
431
432.objectLink:hover {
433  cursor: pointer;
434  text-decoration: underline;
435}
436
437.inline {
438  display: inline;
439  white-space: normal;
440}
441
442.objectBox-object {
443  font-weight: bold;
444  color: var(--object-color);
445  white-space: pre-wrap;
446}
447
448.objectBox-string,
449.objectBox-text,
450.objectLink-textNode,
451.objectBox-table {
452  white-space: pre-wrap;
453}
454
455.objectBox-number,
456.objectLink-styleRule,
457.objectLink-element,
458.objectLink-textNode,
459.objectBox-array > .length {
460  color: var(--number-color);
461}
462
463.objectBox-string {
464  color: var(--string-color);
465}
466
467.objectLink-function,
468.objectBox-stackTrace,
469.objectLink-profile {
470  color: var(--object-color);
471}
472
473.objectLink-Location {
474  font-style: italic;
475  color: var(--location-color);
476}
477
478.objectBox-null,
479.objectBox-undefined,
480.objectBox-hint,
481.logRowHint {
482  font-style: italic;
483  color: var(--null-color);
484}
485
486.objectLink-sourceLink {
487  position: absolute;
488  right: 4px;
489  top: 2px;
490  padding-left: 8px;
491  font-weight: bold;
492  color: var(--source-link-color);
493}
494
495/******************************************************************************/
496
497.objectLink-event,
498.objectLink-eventLog,
499.objectLink-regexp,
500.objectLink-object,
501.objectLink-Date {
502  font-weight: bold;
503  color: var(--object-color);
504  white-space: pre-wrap;
505}
506
507/******************************************************************************/
508
509.objectLink-object .nodeName,
510.objectLink-NamedNodeMap .nodeName,
511.objectLink-NamedNodeMap .objectEqual,
512.objectLink-NamedNodeMap .arrayLeftBracket,
513.objectLink-NamedNodeMap .arrayRightBracket,
514.objectLink-Attr .attrEqual,
515.objectLink-Attr .attrTitle {
516  color: var(--node-color);
517}
518
519.objectLink-object .nodeName {
520  font-weight: normal;
521}
522
523/******************************************************************************/
524
525.objectLeftBrace,
526.objectRightBrace,
527.arrayLeftBracket,
528.arrayRightBracket {
529  cursor: pointer;
530  font-weight: bold;
531}
532
533.objectLeftBrace,
534.arrayLeftBracket {
535  margin-right: 4px;
536}
537
538.objectRightBrace,
539.arrayRightBracket {
540  margin-left: 4px;
541}
542
543/******************************************************************************/
544/* Cycle reference*/
545
546.objectLink-Reference {
547  font-weight: bold;
548  color: var(--reference-color);
549}
550
551.objectBox-array > .objectTitle {
552  font-weight: bold;
553  color: var(--object-color);
554}
555
556.caption {
557  font-weight: bold;
558  color:  var(--caption-color);
559}
560
561/******************************************************************************/
562/* Themes */
563
564.theme-dark .objectBox-null,
565.theme-dark .objectBox-undefined,
566.theme-light .objectBox-null,
567.theme-light .objectBox-undefined {
568  font-style: normal;
569}
570
571.theme-dark .objectBox-object,
572.theme-light .objectBox-object {
573  font-weight: normal;
574  white-space: pre-wrap;
575}
576
577.theme-dark .caption,
578.theme-light .caption {
579  font-weight: normal;
580}
581/* vim:set ts=2 sw=2 sts=2 et: */
582
583/* This Source Code Form is subject to the terms of the Mozilla Public
584 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
585 * You can obtain one at http://mozilla.org/MPL/2.0/. */
586
587.search-container {
588  position: absolute;
589  top: 30px;
590  left: 0;
591  width: calc(100% - 1px);
592  height: calc(100% - 31px);
593  display: flex;
594  z-index: 200;
595  background-color: var(--theme-body-background);
596}
597
598.search-container .autocomplete {
599  flex: 1;
600}
601
602.searchinput-container {
603  display: flex;
604}
605
606.searchinput-container .close-btn-big {
607  border-bottom: 1px solid var(--theme-splitter-color);
608}
609
610.autocomplete {
611  width: 100%;
612}
613
614.autocomplete .results * {
615  -moz-user-select: none;
616  user-select: none;
617}
618
619.autocomplete .results-summary {
620  margin: 10px;
621}
622
623.autocomplete ul {
624  list-style: none;
625  width: 100%;
626  max-height: calc(100% - 32px);
627  margin: 0px;
628  padding: 0px;
629  overflow: auto;
630}
631
632.autocomplete li {
633  border: 2px solid var(--theme-splitter-color);
634  background-color: var(--theme-tab-toolbar-background);
635  padding: 10px;
636  margin: 10px;
637}
638
639.autocomplete li:hover {
640  background: var(--theme-tab-toolbar-background);
641  cursor: pointer;
642}
643
644.autocomplete li.selected {
645  border: 2px solid var(--theme-selection-background);
646}
647
648.autocomplete li .title {
649  line-height: 1.5em;
650  word-break: break-all;
651}
652
653.autocomplete li .subtitle {
654  line-height: 1.5em;
655  color: grey;
656  word-break: break-all;
657}
658
659.autocomplete input {
660  width: 100%;
661  border: none;
662  background-color: var(--theme-body-background);
663  color: var(--theme-comment);
664  border-bottom: 1px solid var(--theme-splitter-color);
665  outline: none;
666  line-height: 30px;
667  font-size: 14px;
668  height: 40px;
669  padding-left: 30px;
670}
671
672.autocomplete input::placeholder {
673  color: var(--theme-body-color-inactive);
674}
675
676.autocomplete .magnifying-glass svg {
677  width: 16px;
678  position: absolute;
679  top: 12px;
680  left: 10px;
681}
682
683.autocomplete.focused .magnifying-glass path,
684.autocomplete.focused .magnifying-glass ellipse {
685  stroke: var(--theme-highlight-blue);
686}
687
688.autocomplete .magnifying-glass path,
689.autocomplete .magnifying-glass ellipse {
690  stroke: var(--theme-splitter-color);
691}
692
693.autocomplete .no-result-msg {
694  display: flex;
695  align-items: center;
696  justify-content: center;
697  width: 100%;
698  height: 100%;
699  color: var(--theme-graphs-full-red);
700  font-size: 24px;
701}
702
703.autocomplete .no-result-msg .sad-face {
704  width: 24px;
705  margin-right: 4px;
706  line-height: 0;
707}
708
709.autocomplete .no-result-msg .sad-face svg {
710  fill: var(--theme-graphs-full-red);
711}
712.close-btn path {
713  fill: var(--theme-body-color);
714}
715
716.close-btn .close {
717  cursor: pointer;
718  width: 12px;
719  height: 12px;
720  padding: 2px;
721  text-align: center;
722  margin-top: 2px;
723  line-height: 5px;
724  transition: all 0.25s easeinout;
725}
726
727.close-btn .close svg {
728  width: 6px;
729}
730
731.close-btn .close:hover {
732  background: var(--theme-selection-background);
733  border-radius: 2px;
734}
735
736.close-btn .close:hover path {
737  fill: white;
738}
739
740.close-btn-big {
741  padding: 13px;
742  width: 40px;
743  height: 40px;
744}
745
746.close-btn-big path {
747  fill: var(--theme-body-color);
748}
749
750.close-btn-big .close {
751  cursor: pointer;
752  display: inline-block;
753  padding: 2px;
754  text-align: center;
755  transition: all 0.25s easeinout;
756  line-height: 100%;
757  width: 16px;
758  height: 16px;
759}
760
761.close-btn-big .close svg {
762  width: 9px;
763  height: 9px;
764}
765
766.close-btn-big .close:hover {
767  background: var(--theme-selection-background);
768  border-radius: 2px;
769}
770
771.close-btn-big .close:hover path {
772  fill: white;
773}
774.tree {
775  -webkit-user-select: none;
776  -moz-user-select: none;
777  -ms-user-select: none;
778  -o-user-select: none;
779  user-select: none;
780
781  flex: 1;
782  white-space: nowrap;
783  overflow: auto;
784}
785
786.tree button {
787  display: block;
788}
789
790.tree .node {
791  padding: 2px 5px;
792  position: relative;
793}
794
795.tree .node.focused {
796  color: white;
797  background-color: var(--theme-selection-background);
798}
799
800html:not([dir="rtl"]) .tree .node > div {
801  margin-left: 10px;
802}
803
804html[dir="rtl"] .tree .node > div {
805  margin-right: 10px;
806}
807
808.tree .node.focused svg {
809  fill: white;
810}
811
812.tree-node button {
813  position: fixed;
814}
815.sources-panel {
816  flex: 1;
817  display: flex;
818  flex-direction: column;
819  overflow: hidden;
820}
821
822.sources-panel * {
823  -moz-user-select: none;
824  user-select: none;
825}
826
827.sources-header {
828  height: 30px;
829  border-bottom: 1px solid var(--theme-splitter-color);
830  padding-top: 0px;
831  padding-bottom: 0px;
832  line-height: 30px;
833  font-size: 1.2em;
834  display: flex;
835  align-items: baseline;
836  justify-content: space-between;
837  -moz-user-select: none;
838  user-select: none;
839}
840
841html:not([dir="rtl"]) .sources-header {
842  padding-left: 10px;
843}
844
845html[dir="rtl"] .sources-header {
846  padding-right: 10px;
847}
848
849.sources-header-info {
850  font-size: 12px;
851  color: var(--theme-comment-alt);
852  font-weight: lighter;
853  white-space: nowrap;
854}
855
856html:not([dir="rtl"]) .sources-header-info {
857  padding-right: 10px;
858  float: right;
859}
860
861html[dir="rtl"] .sources-header-info {
862  padding-left: 10px;
863  float: left;
864}
865
866.sources-list {
867  flex: 1;
868  display: flex;
869  overflow: hidden;
870}
871
872.arrow,
873.folder,
874.domain,
875.file,
876.worker {
877  fill: var(--theme-splitter-color);
878}
879
880.domain,
881.file,
882.worker {
883  position: relative;
884  top: 1px;
885}
886
887.worker,
888.folder {
889  position: relative;
890  top: 2px;
891}
892
893.domain svg,
894.folder svg,
895.worker svg {
896  width: 15px;
897}
898
899.file svg {
900  width: 13px;
901}
902
903html:not([dir="rtl"]) .file svg,
904html:not([dir="rtl"]) .domain svg,
905html:not([dir="rtl"]) .folder svg,
906html:not([dir="rtl"]) .worker svg {
907  margin-right: 5px;
908}
909
910html[dir="rtl"] .file svg,
911html[dir="rtl"] .domain svg,
912html[dir="rtl"] .folder svg,
913html[dir="rtl"] .worker svg {
914  margin-left: 5px;
915}
916
917.tree {
918  -webkit-user-select: none;
919  -moz-user-select: none;
920  -ms-user-select: none;
921  -o-user-select: none;
922  user-select: none;
923
924  flex: 1;
925  white-space: nowrap;
926  overflow: auto;
927}
928
929.tree button {
930  display: block;
931}
932
933.tree .node {
934  padding: 2px 5px;
935  position: relative;
936  cursor: pointer;
937}
938
939.tree .node:hover {
940  background: var(--theme-tab-toolbar-background);
941}
942
943.tree .node.focused {
944  color: white;
945  background-color: var(--theme-selection-background);
946}
947
948.tree .node > div {
949  margin-left: 10px;
950}
951
952.tree .node.focused svg {
953  fill: white;
954}
955
956.sources-list .tree-node button {
957  position: fixed;
958}
959
960.source-footer {
961  background: var(--theme-body-background);
962  border-top: 1px solid var(--theme-splitter-color);
963  position: absolute;
964  bottom: 0;
965  left: 0;
966  right: 1px;
967  opacity: 1;
968  z-index: 100;
969  -moz-user-select: none;
970  user-select: none;
971}
972
973html:not([dir="rtl"]) .source-footer .command-bar {
974  float: right;
975}
976
977html[dir="rtl"] .source-footer .command-bar {
978  float: left;
979}
980
981.source-footer .command-bar * {
982  -moz-user-select: none;
983  user-select: none;
984}
985
986.command-bar > span {
987  cursor: pointer;
988  width: 1em;
989  height: 1.1em;
990  display: inline-block;
991  text-align: center;
992  transition: opacity 200ms;
993}
994
995html:not([dir="rtl"]) .command-bar > span {
996  margin-right: 0.7em;
997}
998
999html[dir="rtl"] .command-bar > span {
1000  margin-left: 0.7em;
1001}
1002
1003.source-footer .prettyPrint.pretty {
1004  stroke: var(--theme-highlight-blue);
1005}
1006
1007.source-footer input:focus {
1008  border-color: var(--theme-highlight-blue);
1009  outline: none;
1010}
1011
1012.source-footer input {
1013  line-height: 16px;
1014  margin: 7px;
1015  border-radius: 2px;
1016  border: 1px solid var(--theme-splitter-color);
1017  padding-left: 4px;
1018  font-size: 10px;
1019}
1020.search-bar {
1021  width: calc(100% - 1px);
1022  height: 40px;
1023  background: white;
1024  border-bottom: 1px solid var(--theme-splitter-color);
1025  display: flex;
1026}
1027
1028.search-bar i {
1029  display: block;
1030  padding: 13px 0 0 13px;
1031  width: 40px;
1032}
1033
1034.search-bar i svg {
1035  width: 16px;
1036}
1037
1038.search-bar input {
1039  border: none;
1040  line-height: 30px;
1041  font-size: 14px;
1042  background-color: var(--theme-body-background);
1043  color: var(--theme-comment);
1044  width: calc(100% - 38px);
1045  flex: 1;
1046}
1047
1048.search-bar .magnifying-glass {
1049  background-color: var(--theme-body-background);
1050  width: 40px;
1051}
1052
1053.search-bar .magnifying-glass path,
1054.search-bar .magnifying-glass ellipse {
1055  stroke: var(--theme-splitter-color);
1056}
1057
1058.search-bar input::placeholder {
1059  color: var(--theme-body-color-inactive);
1060}
1061
1062.search-bar input:focus {
1063  outline-width: 0;
1064}
1065
1066.search-bar input.empty {
1067  color: var(--theme-highlight-orange);
1068}
1069
1070.search-bar .summary {
1071  line-height: 40px;
1072  padding-right: 10px;
1073  color: var(--theme-body-color-inactive);
1074}
1075/* vim:set ts=2 sw=2 sts=2 et: */
1076
1077/* This Source Code Form is subject to the terms of the Mozilla Public
1078 * License, v. 2.0. If a copy of the MPL was not distributed with this
1079 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1080
1081/**
1082 * There's a known codemirror flex issue with chrome that this addresses.
1083 * BUG https://github.com/devtools-html/debugger.html/issues/63
1084 */
1085.editor-wrapper {
1086  position: absolute;
1087  height: calc(100% - 31px);
1088  width: 100%;
1089  top: 30px;
1090  left: 0px;
1091}
1092
1093html[dir="rtl"] .editor-mount {
1094  direction: ltr;
1095}
1096
1097.editor-wrapper .breakpoints {
1098  position: absolute;
1099  top: 0;
1100  left: 0;
1101}
1102
1103.editor.new-breakpoint svg {
1104  fill: var(--theme-selection-background);
1105  width: 60px;
1106  height: 14px;
1107  position: absolute;
1108  top: 0px;
1109  right: -4px;
1110}
1111
1112.new-breakpoint.has-condition svg {
1113  fill: var(--theme-graphs-yellow);
1114}
1115
1116.editor.new-breakpoint.breakpoint-disabled svg {
1117  opacity: 0.3;
1118}
1119
1120.CodeMirror {
1121  width: 100%;
1122  height: 100%;
1123}
1124
1125.editor-wrapper .editor-mount {
1126  width: 100%;
1127  height: calc(100% - 32px);
1128  background-color: var(--theme-body-background);
1129}
1130
1131.search-bar ~ .editor-mount {
1132  height: calc(100% - 72px);
1133}
1134
1135.CodeMirror-linenumber {
1136  font-size: 11px;
1137  line-height: 14px;
1138}
1139
1140/* set the linenumber white when there is a breakpoint */
1141.new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {
1142  color: white;
1143}
1144
1145/* move the breakpoint below the linenumber */
1146.new-breakpoint .CodeMirror-gutter-elt:last-child {
1147  z-index: 0;
1148}
1149
1150.editor-wrapper .CodeMirror-line {
1151  font-size: 11px;
1152  line-height: 14px;
1153}
1154
1155.debug-line .CodeMirror-line {
1156  background-color: var(--breakpoint-active-color) !important;
1157}
1158
1159/* Don't display the highlight color since the debug line
1160   is already highlighted */
1161.debug-line .CodeMirror-activeline-background {
1162  display: none;
1163}
1164
1165.highlight-line .CodeMirror-line {
1166  animation: fade-highlight-out 1.5s normal forwards;
1167}
1168
1169@keyframes fade-highlight-out {
1170  0% { background-color: var(--theme-highlight-gray); }
1171  100% { background-color: transparent; }
1172}
1173
1174.welcomebox {
1175  width: calc(100% - 1px);
1176
1177  /* Offsetting it by 30px for the sources-header area */
1178  height: calc(100% - 30px);
1179  position: absolute;
1180  top: 30px;
1181  left: 0;
1182  padding: 50px 0;
1183  text-align: center;
1184  font-size: 1.25em;
1185  color: var(--theme-comment-alt);
1186  background-color: var(--theme-tab-toolbar-background);
1187  font-weight: lighter;
1188  z-index: 100;
1189  -moz-user-select: none;
1190  user-select: none;
1191}
1192
1193.conditional-breakpoint-panel {
1194  cursor: initial;
1195  margin: 1em 0;
1196  position: relative;
1197  background: var(--theme-toolbar-background);
1198  border-top: 1px solid var(--theme-splitter-color);
1199  border-bottom: 1px solid var(--theme-splitter-color);
1200}
1201
1202.conditional-breakpoint-panel input {
1203  margin: 5px 10px;
1204  width: calc(100% - 2em);
1205  border: none;
1206  background: var(--theme-toolbar-background);
1207  font-size: 14px;
1208  color: var(--theme-comment);
1209  line-height: 30px;
1210}
1211
1212.conditional-breakpoint-panel input:focus {
1213  outline-width: 0;
1214}
1215.breakpoints-list * {
1216  -moz-user-select: none;
1217  user-select: none;
1218}
1219
1220.breakpoints-list .breakpoint {
1221  font-size: 12px;
1222  color: var(--theme-content-color1);
1223  padding: 0.5em 1px;
1224  line-height: 1em;
1225  position: relative;
1226  border-left: 4px solid transparent;
1227  transition: all 0.25s ease;
1228}
1229
1230.breakpoints-list .breakpoint:last-of-type {
1231  padding-bottom: 0.45em;
1232}
1233
1234.breakpoints-list .breakpoint.paused {
1235  background-color: var(--theme-toolbar-background-alt);
1236  border-color: var(--breakpoint-active-color);
1237}
1238
1239.breakpoints-list .breakpoint.disabled .breakpoint-label {
1240  color: var(--theme-content-color3);
1241  transition: color 0.5s linear;
1242}
1243
1244.breakpoints-list .breakpoint:hover {
1245  cursor: pointer;
1246  background-color: var(--theme-search-overlays-semitransparent);
1247}
1248
1249.breakpoints-list .breakpoint.paused:hover {
1250  border-color: var(--breakpoint-active-color-hover);
1251}
1252
1253.breakpoints-list .breakpoint-checkbox {
1254  margin-left: 0;
1255}
1256
1257.breakpoints-list .breakpoint-label {
1258  display: inline-block;
1259  padding-left: 2px;
1260  padding-bottom: 4px;
1261}
1262
1263.breakpoints-list .pause-indicator {
1264  flex: 0 1 content;
1265  order: 3;
1266}
1267
1268.breakpoint-snippet {
1269  color: var(--theme-comment);
1270  padding-left: 18px;
1271}
1272
1273.breakpoint .close-btn {
1274  position: absolute;
1275  right: 6px;
1276  top: 12px;
1277}
1278
1279.breakpoint .close {
1280  display: none;
1281}
1282
1283.breakpoint:hover .close {
1284  display: block;
1285}
1286.input-expression {
1287  width: 100%;
1288  padding: 5px;
1289  margin: 0px;
1290  border: none;
1291  cursor: hand;
1292}
1293
1294.expression-container {
1295  border: 1px;
1296  padding: 5px 2px 5px 5px;
1297  margin: 1px;
1298  width: 100%;
1299  color: var(--theme-body-color) !important;
1300  background-color: var(--theme-tab-toolbar-background);
1301}
1302
1303.expression-container:hover {
1304  background-color: var(--theme-selection-background);
1305  color: var(--theme-body-background) !important;
1306}
1307
1308.expression-output-container .close-btn {
1309  width: 6px;
1310  height: 6px;
1311  float: right;
1312  margin-right: 6px;
1313  display: block;
1314  cursor: pointer;
1315}
1316
1317.expression-input {
1318  cursor: pointer;
1319  max-width: 50%;
1320}
1321
1322.expression-value {
1323  overflow-x: scroll;
1324  color: var(--theme-content-color2);
1325  max-width: 50% !important;
1326}
1327
1328.expression-error {
1329  color: var(--theme-highlight-red);
1330}
1331.arrow svg {
1332  fill: var(--theme-splitter-color);
1333  margin-top: 3px;
1334  transition: transform 0.25s ease;
1335  width: 10px;
1336}
1337
1338html:not([dir="rtl"]) .arrow svg {
1339  margin-right: 5px;
1340  transform: rotate(-90deg);
1341}
1342
1343html[dir="rtl"] .arrow svg {
1344  margin-left: 5px;
1345  transform: rotate(90deg);
1346}
1347
1348/* TODO (Amit): html is just for specificity. keep it like this? */
1349html .arrow.expanded svg {
1350  transform: rotate(0deg);
1351}
1352
1353.arrow.hidden {
1354  visibility: hidden;
1355}
1356
1357.object-label {
1358  color: var(--theme-highlight-blue);
1359}
1360
1361.objectBox-object,
1362.objectBox-string,
1363.objectBox-text,
1364.objectBox-table,
1365.objectLink-textNode,
1366.objectLink-event,
1367.objectLink-eventLog,
1368.objectLink-regexp,
1369.objectLink-object,
1370.objectLink-Date,
1371.theme-dark .objectBox-object,
1372.theme-light .objectBox-object {
1373  white-space: nowrap;
1374}
1375
1376.scopes-list .tree-node {
1377  overflow: hidden;
1378}
1379.frames ul {
1380  list-style: none;
1381  margin: 0;
1382  padding: 0;
1383}
1384
1385.frames ul li {
1386  cursor: pointer;
1387  padding: 7px 10px 7px 21px;
1388  clear: both;
1389  overflow: hidden;
1390}
1391
1392/* Style the focused call frame like so:
1393.frames ul li:focus {
1394  border: 3px solid red;
1395}
1396*/
1397
1398.frames ul li * {
1399  -moz-user-select: none;
1400  user-select: none;
1401}
1402
1403.frames ul li:nth-of-type(2n) {
1404  background-color: var(--theme-tab-toolbar-background);
1405}
1406
1407.frames .location {
1408  float: right;
1409  color: var(--theme-comment);
1410  font-weight: lighter;
1411}
1412
1413.frames .title {
1414  float: left;
1415  text-overflow: ellipsis;
1416  overflow: hidden;
1417  margin-right: 1em;
1418}
1419
1420.frames ul li.selected,
1421.frames ul li.selected .location {
1422  background-color: var(--theme-selection-background);
1423  color: white;
1424}
1425
1426.show-more {
1427  cursor: pointer;
1428  text-align: center;
1429  padding: 8px 0px;
1430  border-top: 1px solid var(--theme-splitter-color);
1431  background-color: var(--theme-tab-toolbar-background);
1432}
1433
1434.show-more:hover {
1435  background-color: var(--theme-search-overlays-semitransparent);
1436}
1437.accordion {
1438  background-color: var(--theme-body-background);
1439  width: 100%;
1440}
1441
1442.accordion ._header {
1443  background-color: var(--theme-toolbar-background);
1444  border-bottom: 1px solid var(--theme-splitter-color);
1445  cursor: pointer;
1446  font-size: 12px;
1447  padding: 5px;
1448  transition: all 0.25s ease;
1449  width: 100%;
1450
1451  -webkit-user-select: none;
1452  -moz-user-select: none;
1453  -ms-user-select: none;
1454  -o-user-select: none;
1455  user-select: none;
1456}
1457
1458.accordion ._header:hover {
1459  background-color: var(--theme-search-overlays-semitransparent);
1460}
1461
1462.accordion ._header:hover svg {
1463  fill: var(--theme-comment-alt);
1464}
1465
1466.accordion ._content {
1467  border-bottom: 1px solid var(--theme-splitter-color);
1468  font-size: 12px;
1469}
1470.right-sidebar {
1471  display: flex;
1472  flex-direction: column;
1473  flex: 1;
1474  white-space: nowrap;
1475}
1476
1477.right-siderbar * {
1478  -moz-user-select: none;
1479  user-select: none;
1480}
1481
1482.right-sidebar .accordion {
1483  overflow-y: auto;
1484  overflow-x: hidden;
1485}
1486
1487.right-sidebar .command-bar {
1488  border-bottom: 1px solid var(--theme-splitter-color);
1489}
1490
1491.command-bar {
1492  height: 30px;
1493}
1494
1495html:not([dir="rtl"]) .command-bar {
1496  padding: 8px 5px 10px 1px;
1497}
1498
1499html[dir="rtl"] .command-bar {
1500  padding: 8px 1px 10px 5px;
1501}
1502
1503.command-bar > span {
1504  cursor: pointer;
1505  width: 16px;
1506  height: 17px;
1507  display: inline-block;
1508  text-align: center;
1509  transition: all 0.25s ease;
1510}
1511
1512:root.theme-dark .command-bar > span {
1513  fill: var(--theme-body-color);
1514}
1515
1516:root.theme-dark .command-bar > span:hover {
1517  fill: var(--theme-selection-color);
1518}
1519
1520html:not([dir="rtl"]) .command-bar > span {
1521  margin-right: 0.7em;
1522}
1523
1524html[dir="rtl"] .command-bar > span {
1525  margin-left: 0.7em;
1526}
1527
1528.command-bar > span.disabled {
1529  opacity: 0.3;
1530  cursor: default;
1531}
1532
1533html:not([dir="rtl"]) .command-bar .stepOut {
1534  margin-right: 2em;
1535}
1536
1537html[dir="rtl"] .command-bar .stepOut {
1538  margin-left: 2em;
1539}
1540
1541.command-bar .subSettings {
1542  float: right;
1543}
1544
1545.pane {
1546  color: var(--theme-body-color);
1547}
1548
1549.pane .pane-info {
1550  font-style: italic;
1551  text-align: center;
1552  padding: 0.5em;
1553  -moz-user-select: none;
1554  user-select: none;
1555}
1556
1557.toggleBreakpoints.breakpoints-disabled path {
1558  stroke: var(--theme-highlight-blue);
1559}
1560
1561span.pause-exceptions.uncaught {
1562  stroke: var(--theme-highlight-purple);
1563}
1564
1565span.pause-exceptions.all {
1566  stroke: var(--theme-highlight-blue);
1567}
1568.source-header {
1569  border-bottom: 1px solid var(--theme-splitter-color);
1570  height: 30px;
1571  flex: 1;
1572}
1573
1574.source-header * {
1575  -moz-user-select: none;
1576  user-select: none;
1577}
1578
1579.source-tabs {
1580  min-width: 50px;
1581  max-width: calc(100% - 60px);
1582  overflow: hidden;
1583  float: left;
1584}
1585
1586.source-header .new-tab-btn {
1587  width: 16px;
1588  display: inline-block;
1589  position: relative;
1590  top: 4px;
1591  margin: 4px;
1592  line-height: 0;
1593}
1594
1595.source-header .new-tab-btn path {
1596  fill: var(--theme-splitter-color);
1597}
1598
1599.source-header .new-tab-btn:hover path {
1600  fill: var(--theme-comment);
1601}
1602
1603.source-tab {
1604  background-color: var(--theme-toolbar-background-alt);
1605  color: var(--theme-faded-tab-color);
1606  border: 1px solid var(--theme-splitter-color);
1607  border-top-left-radius: 2px;
1608  border-top-right-radius: 2px;
1609  height: 23px;
1610  line-height: 20px;
1611  display: inline-block;
1612  border-bottom: none;
1613  position: relative;
1614  transition: all 0.25s ease;
1615  min-width: 40px;
1616  overflow: hidden;
1617}
1618
1619html:not([dir="rtl"]) .source-tab {
1620  padding: 2px 20px 2px 12px;
1621  margin: 6px 0 0 8px;
1622}
1623
1624html[dir="rtl"] .source-tab {
1625  padding: 2px 12px 2px 20px;
1626  margin: 6px 8px 0 0;
1627}
1628
1629.source-tab:hover {
1630  background: var(--theme-toolbar-background);
1631  cursor: pointer;
1632}
1633
1634.source-tab.active {
1635  color: var(--theme-body-color);
1636  background-color: var(--theme-body-background);
1637}
1638
1639.source-tab path {
1640  fill: var(--theme-faded-tab-color);
1641}
1642
1643.source-tab.active path {
1644  fill: var(--theme-body-color);
1645}
1646
1647.source-tab .close-btn {
1648  position: absolute;
1649  top: 3px;
1650}
1651
1652.source-tab .filename {
1653  text-overflow: ellipsis;
1654  overflow: hidden;
1655}
1656
1657html:not([dir="rtl"]) .source-tab .close-btn {
1658  right: 4px;
1659}
1660
1661html[dir="rtl"] .source-tab .close-btn {
1662  left: 4px;
1663}
1664
1665.source-tab .close {
1666  display: none;
1667}
1668
1669.source-tab:hover .close {
1670  display: block;
1671}
1672.dropdown {
1673  background: var(--theme-body-background);
1674  border: 1px solid var(--theme-splitter-color);
1675  box-shadow: 0 4px 4px 0 var(--theme-search-overlays-semitransparent);
1676  max-height: 300px;
1677  position: absolute;
1678  right: 8px;
1679  top: 35px;
1680  width: 150px;
1681  z-index: 1000;
1682}
1683
1684.dropdown-button {
1685  position: absolute;
1686  right: 12px;
1687  top: 5px;
1688  font-size: 16px;
1689  color: var(--theme-body-color);
1690  cursor: pointer;
1691}
1692
1693.dropdown li {
1694  transition: all 0.25s ease;
1695  padding: 2px 10px 10px 5px;
1696  overflow: hidden;
1697  height: 30px;
1698  text-overflow: ellipsis;
1699}
1700
1701.dropdown li:hover {
1702  background-color: var(--theme-search-overlays-semitransparent);
1703  cursor: pointer;
1704}
1705
1706.dropdown ul {
1707  list-style: none;
1708  line-height: 2em;
1709  font-size: 1em;
1710  margin: 0;
1711  padding: 0;
1712}
1713
1714.dropdown-mask {
1715  position: fixed;
1716  width: 100%;
1717  height: 100%;
1718  background: transparent;
1719  z-index: 999;
1720  left: 0;
1721  top: 0;
1722}
1723
1724/*# sourceMappingURL=styles.css.map*/