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*/