src/third_party/WebKit/Source/devtools/front_end/inspector.css

   1 /*
   2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 input[type="search"]:focus,
  31 input[type="text"]:focus {
  32     outline: auto 5px -webkit-focus-ring-color;
  33 }
  34
  35 input[type="checkbox"] {
  36     height: 12px;
  37     width: 12px;
  38     margin: auto 3px;
  39     flex-shrink: 0;
  40 }
  41
  42 label:hover {
  43     cursor: pointer;
  44 }
  45
  46 label:hover input {
  47     box-shadow: 0 0 3px highlight;
  48 }
  49
  50 fieldset[disabled] label:hover input {
  51     box-shadow: none;
  52 }
  53
  54 .fill {
  55     position: absolute;
  56     top: 0;
  57     left: 0;
  58     right: 0;
  59     bottom: 0;
  60 }
  61
  62 .view {
  63     position: relative;
  64     flex: auto;
  65 }
  66
  67 .hbox {
  68     display: flex;
  69     flex-direction: row !important;
  70     position: relative;
  71 }
  72
  73 .vbox {
  74     display: flex;
  75     flex-direction: column !important;
  76     position: relative;
  77 }
  78
  79 .flex-auto {
  80     flex: auto;
  81 }
  82
  83 .inline-block {
  84     display: inline-block;
  85 }
  86
  87 .hidden {
  88     display: none !important;
  89 }
  90
  91 .white-background {
  92     background-color: white;
  93 }
  94
  95 .overflow-hidden {
  96     overflow: hidden;
  97 }
  98
  99 .nowrap,
 100 .nowrap-below,
 101 .nowrap-below div,
 102 .nowrap-below span {
 103     white-space: nowrap !important;
 104 }
 105
 106 .toolbar-background {
 107     background-image: linear-gradient(to bottom, rgb(191, 191, 191), rgb(151, 151, 151));
 108     padding-left: 1px;
 109     border-bottom: 1px solid rgb(64%, 64%, 64%);
 110     background-origin: padding-box;
 111     background-clip: padding-box;
 112 }
 113
 114 .toolbar {
 115     flex: 0 0 24px;
 116     display: flex;
 117     flex-direction: row;
 118     position: relative;
 119 }
 120
 121 .toolbar .tabbed-pane-header {
 122     border: none;
 123 }
 124
 125 .toolbar .tabbed-pane-header-contents {
 126     margin: 0;
 127 }
 128
 129 .toolbar .tabbed-pane-header-tab {
 130     border-width: 0 2px 0 2px;
 131     background: none;
 132     padding-right: 3px;
 133 }
 134
 135 .toolbar .tabbed-pane-header-tab.selected {
 136     border-width: 0 2px 0 2px;
 137     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
 138 }
 139
 140 .toolbar button.status-bar-item {
 141     border: none;
 142     margin: 0 -2px;
 143 }
 144
 145 button,
 146 input,
 147 select {
 148   font-family: inherit;
 149   font-size: inherit;
 150 }
 151
 152 body.inactive .toolbar-background {
 153     background-image: linear-gradient(to bottom, rgb(233, 233, 233), rgb(207, 207, 207));
 154 }
 155
 156 body.dock-to-bottom .toolbar-background {
 157     padding-top: 0;
 158 }
 159
 160 body.dock-to-bottom .toolbar-background .tabbed-pane-header {
 161     cursor: ns-resize;
 162 }
 163
 164 body.dock-to-bottom .toolbar-background .tabbed-pane-header .tabbed-pane-header-tabs {
 165     cursor: default;
 166 }
 167
 168 body.platform-windows .toolbar-background,
 169 body.platform-windows.inactive .toolbar-background {
 170     background-image: none;
 171 }
 172
 173 body.undocked.platform-mac-leopard .toolbar-background {
 174     background-image: linear-gradient(to bottom, rgb(175, 175, 175), rgb(151, 151, 151)) !important;
 175     color: #333 !important;
 176 }
 177
 178 body.undocked.platform-mac-leopard.inactive .toolbar-background {
 179     background-image: linear-gradient(to bottom, rgb(221, 221, 221), rgb(207, 207, 207)) !important;
 180     color: #555 !important;
 181 }
 182
 183 body.undocked.platform-mac-snowleopard .toolbar-background {
 184     background-image: linear-gradient(to bottom, rgb(189, 189, 189), rgb(167, 167, 167)) !important;
 185     color: #333 !important;
 186 }
 187
 188 body.undocked.platform-mac-snowleopard.inactive .toolbar-background {
 189     background-image: linear-gradient(to bottom, rgb(228, 228, 228), rgb(216, 216, 216)) !important;
 190     color: #555 !important;
 191 }
 192
 193 body.undocked.platform-mac .toolbar-background {
 194     background-image: linear-gradient(to bottom, rgb(208, 208, 208), rgb(200, 200, 200)) !important;
 195     color: #333 !important;
 196 }
 197
 198 body.undocked.platform-mac.inactive .toolbar-background {
 199     background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(224, 224, 224)) !important;
 200     color: #555 !important;
 201 }
 202
 203 .toolbar > .tabbed-pane-header {
 204     flex: auto;
 205 }
 206
 207 .toolbar-controls-left {
 208     flex: none;
 209     opacity: 0.8;
 210     padding-top: 1px;
 211 }
 212
 213 .toolbar-controls-right {
 214     flex: none;
 215     margin-right: 2px;
 216     padding-top: 1px;
 217 }
 218
 219 .toolbar-controls-right #remote-device-count,
 220 .toolbar-controls-right #error-warning-count,
 221 .toolbar-controls-right .console-status-bar-item,
 222 .toolbar-controls-right .settings-status-bar-item,
 223 .toolbar-controls-right .dock-status-bar-item
 224 {
 225     opacity: 0.8;
 226 }
 227
 228 .scrollable-content {
 229     position: static;
 230     height: 100%;
 231     overflow-y: auto;
 232     width: 100%;
 233     margin-right: 12px;
 234     padding-right: 3px;
 235 }
 236
 237 .scrollable-content::-webkit-scrollbar {
 238     width: 11px;
 239 }
 240
 241 .scrollable-content::-webkit-scrollbar-corner,
 242 .scrollable-content::-webkit-resizer {
 243     display: none;
 244 }
 245
 246 .scrollable-content::-webkit-scrollbar-thumb:vertical {
 247     background: linear-gradient(to right, rgb(192, 192, 192), rgb(214, 214, 214) 40%, rgb(192, 192, 192));
 248     border-radius: 5px;
 249     min-height: 20px;
 250 }
 251
 252 .scrollable-content::-webkit-scrollbar-thumb:vertical:hover,
 253 .scrollable-content::-webkit-scrollbar-thumb:vertical:active {
 254     background: linear-gradient(to right, rgb(230, 230, 230), rgb(252, 252, 252) 40%, rgb(230, 230, 230));
 255 }
 256
 257 .scrollable-content::-webkit-scrollbar-track:vertical {
 258     background: linear-gradient(to right, rgb(128, 128, 128), rgb(164, 164, 164) 25%, rgb(164, 164, 164));
 259     border-radius: 5px;
 260 }
 261
 262 .search-replace {
 263     -webkit-appearance: none;
 264     border: 0;
 265     padding: 0 3px;
 266     margin: 0;
 267     flex: 1;
 268 }
 269
 270 .search-replace:focus {
 271     outline: none;
 272 }
 273
 274 #search-input-field {
 275     height: 18px;
 276 }
 277
 278 .toolbar-search {
 279     border-spacing: 1px;
 280 }
 281
 282 .toolbar-search td {
 283     padding: 0 5px 0 0;
 284 }
 285
 286 .toolbar-search td > span {
 287     display: flex;
 288 }
 289
 290 .toolbar-search-navigation-controls {
 291     vertical-align: top;
 292     background-image: linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206));
 293 }
 294
 295 .toolbar-search-navigation {
 296     display: inline-block;
 297     width: 18px;
 298     height: 18px;
 299     background-repeat: no-repeat;
 300     background-position: 4px 7px;
 301     border-left: 1px solid rgb(170, 170, 170);
 302     opacity: 0.3;
 303 }
 304
 305 .toolbar-search-navigation.enabled {
 306     opacity: 1.0;
 307 }
 308
 309 .toolbar-search label {
 310     margin: auto 0;
 311 }
 312
 313 .toolbar-search button {
 314     border: 1px solid rgb(163, 163, 163);
 315     border-radius: 8px;
 316     margin: 0;
 317     background-image: linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220));
 318     width: 100%;
 319     height: 20px;
 320 }
 321
 322 .toolbar-search button:active {
 323     background-image: linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156));
 324 }
 325
 326 .toolbar-search-control {
 327     display: -webkit-flex;
 328     width: 253px;
 329     position: relative;
 330     background-color: white;
 331     border: 1px solid rgb(163, 163, 163);
 332     height: 20px;
 333     border-radius: 2px;
 334     margin-left: 1px;
 335 }
 336
 337 .toolbar-replace-control {
 338     border: 1px solid rgb(163, 163, 163);
 339     height: 20px;
 340     border-radius: 2px;
 341     width: 100%;
 342     margin: auto 0;
 343 }
 344
 345 .toolbar-search-navigation.enabled:active {
 346     background-position: 4px 7px, 0 0;
 347 }
 348
 349 .toolbar-search-navigation.toolbar-search-navigation-prev {
 350     background-image: url(Images/searchPrev.png);
 351     border-left: 1px solid rgb(163, 163, 163);
 352 }
 353
 354 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
 355     background-image: url(Images/searchPrev.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
 356 }
 357
 358 .toolbar-search-navigation.toolbar-search-navigation-next {
 359     background-image: url(Images/searchNext.png);
 360     border-left: 1px solid rgb(230, 230, 230);
 361 }
 362
 363 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
 364     background-image: url(Images/searchNext.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
 365 }
 366
 367 .search-results-matches {
 368     display: inline-block;
 369     min-height: 10px;
 370     text-align: right;
 371     font-size: 11px;
 372     padding: 1px 4px;
 373     color: rgb(165, 165, 165);
 374 }
 375
 376 .close-button,
 377 .close-button-gray {
 378     background-image: url(Images/statusbarButtonGlyphs.png);
 379     background-size: 320px 144px;
 380     display: inline-block;
 381 }
 382
 383 .close-button {
 384     width: 14px;
 385     height: 14px;
 386     background-position: -128px -96px;
 387 }
 388
 389 .close-button-gray {
 390     width: 13px;
 391     height: 13px;
 392     background-position: -175px -96px;
 393 }
 394
 395 @media (-webkit-min-device-pixel-ratio: 1.5) {
 396 .close-button,
 397 .close-button-gray {
 398     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 399 }
 400 } /* media */
 401
 402 .close-button:hover {
 403     background-position: -96px -96px;
 404 }
 405
 406 .close-button:active {
 407     background-position: -111px -96px;
 408 }
 409
 410 .close-button-gray:hover {
 411     background-position: -143px -96px;
 412 }
 413
 414 .close-button-gray:active {
 415     background-position: -160px -96px;
 416 }
 417
 418 body.undocked .toolbar-item .close-button {
 419     display: none;
 420 }
 421
 422 body.remote .toolbar-item .close-button {
 423     display: none;
 424 }
 425
 426 .panel-status-bar {
 427     border-top: none;
 428     display: flex;
 429     background-color: white;
 430     flex: 0 0 23px;
 431     position: relative;
 432 }
 433
 434 .panel-status-bar > div {
 435     margin: auto 0;
 436 }
 437
 438 .panel-status-bar label {
 439     margin: auto 0;
 440     margin-right: 20px;
 441     display: flex;
 442     white-space: nowrap;
 443     overflow: hidden;
 444 }
 445
 446 .status-bar {
 447     position: relative;
 448     white-space: nowrap;
 449     height: 23px;
 450     overflow: hidden;
 451     width: 100%;
 452     z-index: 12;
 453     border-top: 1px solid rgb(202, 202, 202);
 454     display: -webkit-flex;
 455 }
 456
 457 .status-bar > div {
 458     display: inline-flex;
 459     overflow: visible;
 460 }
 461
 462 .status-bar-item {
 463     display: inline-block;
 464     height: 22px;
 465     padding: 0;
 466     margin-left: -1px;
 467     margin-right: 0;
 468     vertical-align: top;
 469     border: 0 transparent none;
 470     background-color: transparent;
 471     flex: none;
 472 }
 473
 474 .status-bar-text {
 475     padding-left: 5px;
 476     padding-right: 15px;
 477     height: auto;
 478     margin: auto 0;
 479     white-space: nowrap;
 480     overflow: hidden;
 481 }
 482
 483 #drawer-view-anchor {
 484     display: inline-block;
 485 }
 486
 487 .status-bar-item:active {
 488     position: relative;
 489     z-index: 200;
 490 }
 491
 492 .glyph {
 493     position: absolute;
 494     top: -1px;
 495     bottom: 1px;
 496     left: 0;
 497     right: 0;
 498     background-color: rgba(0, 0, 0, 0.75);
 499     z-index: 1;
 500 }
 501
 502 .glyph.shadow {
 503     top: 0;
 504     bottom: 0;
 505     background-color: white;
 506     z-index: 0;
 507 }
 508
 509 .long-click-glyph {
 510     background-color: rgba(0, 0, 0, 0.75);
 511     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 512     -webkit-mask-position: -288px -48px;
 513     -webkit-mask-size: 320px 144px;
 514     z-index: 1;
 515 }
 516
 517 @media (-webkit-min-device-pixel-ratio: 1.5) {
 518 .long-click-glyph {
 519     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 520 }
 521 } /* media */
 522
 523 .long-click-glyph.shadow {
 524     top: 1px;
 525     background-color: white !important;
 526     z-index: 0;
 527 }
 528
 529 button.status-bar-item {
 530     position: relative;
 531     width: 32px;
 532 }
 533
 534 .status-bar button.status-bar-item .glyph {
 535     margin: 0 -1px;
 536 }
 537
 538 button.status-bar-item .glyph.shadow {
 539     background-color: rgba(255, 255, 255, 0.33);
 540 }
 541
 542 button.status-bar-item.toggled-on .glyph:not(.shadow) {
 543     background-color: rgb(66, 129, 235) !important;
 544 }
 545
 546 button.status-bar-item:hover .glyph {
 547     opacity: 1;
 548 }
 549
 550 button.status-bar-item:active .glyph {
 551     opacity: 0.8;
 552 }
 553
 554 button.status-bar-item:disabled {
 555     background-position: 0 0 !important;
 556 }
 557
 558 button.status-bar-item:disabled .glyph {
 559     opacity: 0.5 !important;
 560 }
 561
 562 button.status-bar-item.extension {
 563     background-image: none;
 564 }
 565
 566 .status-bar-select-container {
 567     display: inline-flex;
 568     flex-shrink: 0;
 569 }
 570
 571 .status-bar-select-arrow {
 572     background-image: url(Images/statusbarButtonGlyphs.png);
 573     background-size: 320px 144px;
 574     opacity: 0.7;
 575     width: 12px;
 576     height: 12px;
 577     background-position: -18px -96px;
 578     display: inline-block;
 579     pointer-events: none;
 580     margin: auto 0;
 581 }
 582
 583 @media (-webkit-min-device-pixel-ratio: 1.5) {
 584 .status-bar-select-arrow {
 585     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 586 }
 587 } /* media */
 588
 589 input.status-bar-item {
 590     width: 200px;
 591     height: 20px;
 592     padding: 3px;
 593     margin: 1px 3px;
 594     background-color: white;
 595     border: solid 1px rgb(236, 236, 236);
 596 }
 597
 598 input.status-bar-item:focus,
 599 input.status-bar-item:hover {
 600     border: solid 1px rgb(202, 202, 202);
 601 }
 602
 603 select.status-bar-item {
 604     min-width: 48px;
 605     color: rgb(48, 48, 48);
 606     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 607     -webkit-appearance: none;
 608     border: 0;
 609     border-radius: 0;
 610     padding: 0 15px 0 5px;
 611     margin-right: -10px;
 612     position: relative;
 613     line-height: 22px;
 614 }
 615
 616 .status-bar-item.checkbox {
 617     margin: auto 6px auto 0;
 618     height: auto;
 619     display: flex;
 620 }
 621
 622 .status-bar-item > .glyph {
 623     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 624     -webkit-mask-size: 320px 144px;
 625     opacity: 0.8;
 626 }
 627
 628 .console-filter > .glyph {
 629     -webkit-mask-position: -32px -48px;
 630 }
 631
 632 @media (-webkit-min-device-pixel-ratio: 1.5) {
 633 .status-bar-item > .glyph {
 634     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
 635 }
 636 } /* media */
 637
 638 button.status-bar-item.dock-status-bar-item.toggled-undocked .glyph {
 639     -webkit-mask-position: 0 -48px;
 640 }
 641
 642 button.status-bar-item.dock-status-bar-item.toggled-bottom .glyph {
 643     -webkit-mask-position: -32px -24px;
 644 }
 645
 646 button.status-bar-item.dock-status-bar-item.toggled-right .glyph {
 647     -webkit-mask-position: -256px -48px;
 648 }
 649
 650 button.status-bar-item.dock-status-bar-item.toggled-left .glyph {
 651     -webkit-mask-position: -32px -120px;
 652 }
 653
 654 body.undocked .alternate-status-bar-buttons-bar {
 655     margin-left: 1px;
 656 }
 657
 658 .alternate-status-bar-buttons-bar {
 659     position: absolute;
 660     width: 31px;
 661     bottom: -3px;
 662     background: white;
 663 }
 664
 665 .alternate-status-bar-buttons-bar .status-bar-item {
 666     height: 24px;
 667     margin-top: -1px;
 668     border: 1px solid rgb(202, 202, 202);
 669 }
 670
 671 .alternate-status-bar-buttons-bar .status-bar-item.emulate-active {
 672     background-color: rgb(163,163,163);
 673     border: 1px solid rgb(120, 120, 120);
 674 }
 675
 676 button.status-bar-item.settings-status-bar-item,
 677 button.status-bar-item.settings-status-bar-item:active {
 678     border-right: 0 transparent none;
 679 }
 680
 681 div.resizer-widget {
 682     position: absolute;
 683     top: 0;
 684     right: 0;
 685     height: 24px;
 686     width: 16px;
 687     background-image: url(Images/statusbarResizerHorizontal.png);
 688     background-repeat: no-repeat;
 689     background-position: center;
 690     z-index: 13;
 691 }
 692
 693 .ns-resizer-widget {
 694     cursor: ns-resize;
 695 }
 696
 697 .ew-resizer-widget {
 698     cursor: ew-resize;
 699 }
 700
 701 .settings-status-bar-item .glyph {
 702     -webkit-mask-position: -160px -24px;
 703 }
 704
 705 body.remote .dock-status-bar-item {
 706     display: none;
 707 }
 708
 709 .console-status-bar-item .glyph {
 710     -webkit-mask-position: -64px -24px;
 711 }
 712
 713 .screencast-status-bar-item.toggled-left .glyph {
 714     -webkit-mask-position: -256px -96px;
 715 }
 716
 717 .screencast-status-bar-item.toggled-top .glyph {
 718     -webkit-mask-position: -288px -96px;
 719 }
 720
 721 .screencast-status-bar-item.toggled-disabled .glyph {
 722     -webkit-mask-position: 0px -120px;
 723 }
 724
 725 .clear-status-bar-item .glyph {
 726     -webkit-mask-position: -64px 0;
 727 }
 728
 729 .error-icon-small,
 730 .warning-icon-small,
 731 .device-icon-small,
 732 .red-ball,
 733 .green-ball,
 734 .orange-ball {
 735     background-image: url(Images/statusbarButtonGlyphs.png);
 736     background-size: 320px 144px;
 737     width: 10px;
 738     height: 10px;
 739     display: inline-block;
 740 }
 741
 742 @media (-webkit-min-device-pixel-ratio: 1.5) {
 743 .error-icon-small,
 744 .warning-icon-small,
 745 .device-icon-small,
 746 .red-ball,
 747 .green-ball,
 748 .orange-ball {
 749     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 750 }
 751 } /* media */
 752
 753 .error-icon-small {
 754     background-position: -213px -96px;
 755 }
 756
 757 .warning-icon-small {
 758     background-position: -202px -107px;
 759 }
 760
 761 .device-icon-small {
 762     background-position: -224px -107px;
 763 }
 764
 765 .red-ball {
 766     background-position: -224px -96px;
 767 }
 768
 769 .green-ball {
 770     background-position: -235px -96px;
 771 }
 772
 773 .orange-ball {
 774     background-position: -246px -96px;
 775 }
 776
 777 #error-warning-count, #remote-device-count {
 778     display: inline-block;
 779     padding: 4px 6px 6px 0;
 780     font-size: 11px;
 781     height: 19px;
 782     cursor: pointer;
 783     line-height: 14px;
 784 }
 785
 786 #error-warning-count:hover, #remote-device-count:hover {
 787     border-bottom: 1px solid rgb(96, 96, 96);
 788 }
 789
 790 #error-warning-count .error-icon-small,
 791 #error-warning-count .warning-icon-small,
 792 #remote-device-count .device-icon-small{
 793     vertical-align: -1px;
 794     margin-right: 2px;
 795 }
 796
 797 #error-warning-count .warning-icon-small {
 798     margin-left: 6px;
 799 }
 800
 801 #drawer-tabbed-pane > .tabbed-pane-header {
 802     background-color: rgb(236, 236, 236);
 803 }
 804
 805 #drawer-contents .tabbed-pane-header .tabbed-pane-header-tab {
 806     cursor: default;
 807 }
 808
 809 body.platform-mac .monospace,
 810 body.platform-mac .source-code {
 811     font-size: 11px !important;
 812     font-family: Menlo, monospace;
 813 }
 814
 815 body.platform-mac.platform-mac-tiger .monospace,
 816 body.platform-mac.platform-mac-tiger .source-code {
 817     font-size: 10px !important;
 818     font-family: Monaco, monospace;
 819 }
 820
 821 body.platform-windows .monospace,
 822 body.platform-windows .source-code {
 823     font-size: 12px !important;
 824     font-family: Consolas, Lucida Console, monospace;
 825 }
 826
 827 body.platform-linux .monospace,
 828 body.platform-linux .source-code {
 829     font-size: 11px !important;
 830     font-family: dejavu sans mono, monospace;
 831 }
 832
 833 .console-view {
 834     background-color: white;
 835     overflow: hidden;
 836 }
 837
 838 .console-view-wrapper {
 839     background-color: rgb(236, 236, 236);
 840 }
 841
 842 .console-status-bar,
 843 .console-filters-header {
 844     flex: 0 0 23px;
 845     overflow: hidden;
 846 }
 847
 848 .console-status-bar {
 849     display: flex;
 850 }
 851
 852 #console-messages {
 853     flex: 1 1;
 854     padding: 2px 0;
 855     overflow-y: auto;
 856     word-wrap: break-word;
 857     -webkit-user-select: text;
 858     border-top: 1px solid rgb(230, 230, 230);
 859     -webkit-transform: translateZ(0);
 860 }
 861
 862 #console-prompt {
 863     clear: right;
 864     position: relative;
 865     padding: 1px 22px 1px 0;
 866     margin-left: 24px;
 867     min-height: 16px;
 868     white-space: pre-wrap;
 869     -webkit-user-modify: read-write-plaintext-only;
 870 }
 871
 872 #console-prompt::before {
 873     background-position: -192px -96px;
 874 }
 875
 876 .console-user-command-result.console-log-level::before {
 877     background-position: -202px -96px;
 878 }
 879
 880 .console-message,
 881 .console-user-command {
 882     clear: right;
 883     position: relative;
 884     border-bottom: 1px solid rgb(240, 240, 240);
 885     padding: 1px 22px 1px 0;
 886     margin-left: 24px;
 887     min-height: 16px;
 888 }
 889
 890 .console-mesage:first-child {
 891     border-top: none;
 892 }
 893
 894 .console-adjacent-user-command-result {
 895     border-bottom: none;
 896 }
 897
 898 .console-adjacent-user-command-result + .console-user-command-result.console-log-level::before {
 899     background-image: none;
 900 }
 901
 902 .console-timestamp {
 903     color: gray;
 904     margin-right: 10px;
 905     -webkit-user-select: none;
 906 }
 907
 908 .console-message::before,
 909 .console-user-command::before,
 910 #console-prompt::before,
 911 .console-group-title::before {
 912     position: absolute;
 913     display: block;
 914     content: "";
 915     left: -17px;
 916     top: 0.8em;
 917     width: 10px;
 918     height: 10px;
 919     margin-top: -6px;
 920     -webkit-user-select: none;
 921     background-image: url(Images/statusbarButtonGlyphs.png);
 922     background-size: 320px 144px;
 923 }
 924
 925 @media (-webkit-min-device-pixel-ratio: 1.5) {
 926 .console-message::before,
 927 .console-user-command::before,
 928 #console-prompt::before,
 929 .console-group-title::before {
 930     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 931 }
 932 } /* media */
 933
 934 .console-message > .outline-disclosure li.parent::before {
 935     top: 0;
 936 }
 937
 938 .console-message .outline-disclosure .stacktrace-entry:hover {
 939     background-color: rgba(0, 0, 0, 0.05);
 940 }
 941
 942 .console-message .bubble {
 943     display: inline-block;
 944     height: 14px;
 945     background-color: rgb(128, 151, 189);
 946     vertical-align: middle;
 947     white-space: nowrap;
 948     padding: 1px 4px;
 949     margin-top: -1px;
 950     margin-right: 4px;
 951     margin-left: -18px;
 952     text-align: left;
 953     font-size: 11px;
 954     line-height: normal;
 955     font-weight: bold;
 956     text-shadow: none;
 957     color: white;
 958     border-radius: 7px;
 959 }
 960
 961 .console-message-text {
 962     white-space: pre-wrap;
 963 }
 964
 965 .repeated-message.console-error-level::before,
 966 .repeated-message.console-warning-level:before,
 967 .repeated-message.console-debug-level:before,
 968 .repeated-message.console-info-level:before {
 969     visibility: hidden;
 970 }
 971
 972 .repeated-message .outline-disclosure,
 973 .repeated-message > .console-message-text {
 974     -webkit-flex: 1;
 975 }
 976
 977 .console-info {
 978     color: rgb(128, 128, 128);
 979     font-style: italic;
 980 }
 981
 982 .console-group .console-group > .console-group-messages {
 983     margin-left: 16px;
 984 }
 985
 986 .console-group-title {
 987     font-weight: bold;
 988 }
 989
 990 .console-group-title::before {
 991     -webkit-user-select: none;
 992     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 993     -webkit-mask-size: 320px 144px;
 994     float: left;
 995     width: 8px;
 996     content: "a";
 997     color: transparent;
 998     text-shadow: none;
 999     margin-left: 3px;
1000     margin-top: -7px;
1001 }
1002
1003 @media (-webkit-min-device-pixel-ratio: 1.5) {
1004 .console-group-title::before {
1005     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
1006 }
1007 } /* media */
1008
1009 .console-group .console-group-title::before {
1010     -webkit-mask-position: -20px -96px;
1011     background-color: rgb(110, 110, 110);
1012 }
1013
1014 .console-message-wrapper.collapsed .console-group-title::before {
1015     -webkit-mask-position: -4px -96px;
1016 }
1017
1018 .console-group {
1019     position: relative;
1020 }
1021
1022 .console-message-wrapper {
1023     display: flex;
1024 }
1025
1026 .console-message-wrapper .nesting-level-marker {
1027     width: 14px;
1028     flex: 0 0 auto;
1029     border-right: 1px solid #A3A3A3;
1030     position: relative;
1031 }
1032
1033 .console-message-wrapper:last-child .nesting-level-marker,
1034 .console-message-wrapper .nesting-level-marker.group-closed {
1035     margin-bottom: 4px;
1036 }
1037
1038 .console-message-wrapper:last-child .nesting-level-marker::before,
1039 .console-message-wrapper .nesting-level-marker.group-closed::before
1040 {
1041     content: "";
1042 }
1043
1044 .console-message-wrapper .nesting-level-marker::before {
1045     border-bottom: 1px solid #A3A3A3;
1046     position: absolute;
1047     top: 0;
1048     left: 0;
1049     margin-left: 100%;
1050     width: 3px;
1051     height: 100%;
1052 }
1053
1054 .console-message {
1055     flex: 1 1 auto;
1056 }
1057
1058 .console-error-level .console-message-text,
1059 .console-error-level .section > .header .title {
1060     color: red !important;
1061 }
1062
1063 .console-debug-level .console-message-text {
1064     color: blue;
1065 }
1066
1067 .console-error-level::before,
1068 .console-warning-level::before,
1069 .console-debug-level::before,
1070 .console-info-level::before {
1071     background-image: url(Images/statusbarButtonGlyphs.png);
1072     background-size: 320px 144px;
1073     width: 10px;
1074     height: 10px;
1075 }
1076
1077 @media (-webkit-min-device-pixel-ratio: 1.5) {
1078 .console-error-level::before,
1079 .console-warning-level::before,
1080 .console-debug-level::before,
1081 .console-info-level::before {
1082     background-image: url(Images/statusbarButtonGlyphs_2x.png);
1083 }
1084 } /* media */
1085
1086 .console-warning-level::before {
1087     background-position: -202px -107px;
1088 }
1089
1090 .console-error-level::before {
1091     background-position: -213px -96px;
1092 }
1093
1094 .console-info-level::before {
1095     background-position: -213px -107px;
1096 }
1097
1098 .console-user-command .console-message {
1099     margin-left: -24px;
1100     padding-right: 0;
1101     border-bottom: none;
1102 }
1103
1104 .console-user-command::before {
1105     background-position: -192px -107px;
1106 }
1107
1108 .console-user-command > .console-message-text {
1109     color: rgb(0, 128, 255);
1110 }
1111
1112 #console-messages .link {
1113     text-decoration: underline;
1114 }
1115
1116 #console-messages .link,
1117 #console-messages a {
1118     color: rgb(33%, 33%, 33%);
1119     cursor: pointer;
1120 }
1121
1122 #console-messages .link:hover,
1123 #console-messages a:hover {
1124     color: rgb(15%, 15%, 15%);
1125 }
1126
1127 ol.watch-expressions > li.hovered {
1128     background-color: #F0F0F0;
1129 }
1130
1131 .console-message-url {
1132     float: right;
1133     text-align: right;
1134     max-width: 100%;
1135     margin-left: 4px;
1136 }
1137
1138 .console-group-messages .section {
1139     margin: 0 0 0 12px !important;
1140 }
1141
1142 .console-group-messages .section > .header {
1143     padding: 0 8px 0 0;
1144     background-image: none;
1145     border: none;
1146     min-height: 0;
1147 }
1148
1149 .console-group-messages .section > .header::before {
1150     margin-left: -12px;
1151 }
1152
1153 .console-group-messages .section > .header .title {
1154     color: #222;
1155     font-weight: normal;
1156     line-height: 13px;
1157 }
1158
1159 .console-group-messages .section .properties li .info {
1160     padding-top: 0;
1161     padding-bottom: 0;
1162     color: rgb(60%, 60%, 60%);
1163 }
1164
1165 .console-group-messages .outline-disclosure {
1166     padding-left: 0;
1167 }
1168
1169 .console-group-messages .outline-disclosure > ol {
1170     padding: 0 0 0 12px !important;
1171 }
1172
1173 .console-group-messages .outline-disclosure,
1174 .console-group-messages .outline-disclosure ol {
1175     font-size: inherit;
1176     line-height: 12px;
1177 }
1178
1179 .console-group-messages .outline-disclosure.single-node li {
1180     padding-left: 2px;
1181 }
1182
1183 .console-group-messages .outline-disclosure li .selection {
1184     margin-left: -6px;
1185     margin-right: -6px;
1186 }
1187
1188 .console-group-messages .add-attribute {
1189     display: none;
1190 }
1191
1192 .console-formatted-object,
1193 .console-formatted-node,
1194 .console-formatted-array {
1195     position: relative;
1196     display: inline-block;
1197     vertical-align: top;
1198     color: inherit;
1199 }
1200
1201 .console-formatted-node:hover {
1202     background-color: rgba(56, 121, 217, 0.1);
1203 }
1204
1205 .console-formatted-object .section,
1206 .console-formatted-node .section,
1207 .console-formatted-array .section {
1208     position: static;
1209 }
1210
1211 .console-formatted-object .section > .header::before {
1212     margin-top: 0;
1213 }
1214
1215 .console-formatted-object .properties,
1216 .console-formatted-node .properties {
1217     padding-left: 0 !important;
1218 }
1219
1220 .console-formatted-number,
1221 .console-formatted-boolean {
1222     color: rgb(28, 0, 207);
1223 }
1224
1225 .console-formatted-string,
1226 .console-formatted-regexp,
1227 .console-formatted-symbol {
1228     color: rgb(196, 26, 22);
1229     white-space: pre;
1230     unicode-bidi: -webkit-isolate;
1231 }
1232
1233 .console-formatted-null,
1234 .console-formatted-undefined {
1235     color: rgb(128, 128, 128);
1236 }
1237
1238 .console-formatted-preview-node,
1239 .section .console-formatted-node {
1240     color: rgb(136, 18, 128);
1241 }
1242
1243 .console-object-preview {
1244     font-style: italic;
1245 }
1246
1247 .object-info-state-note {
1248     display: inline-block;
1249     width: 11px;
1250     height: 11px;
1251     background-color: rgb(179, 203, 247);
1252     color: white;
1253     text-align: center;
1254     border-radius: 3px;
1255     line-height: 13px;
1256     margin: 0 6px;
1257     font-size: 9px;
1258 }
1259
1260 .object-info-state-note::before {
1261     content: "i";
1262 }
1263
1264 .section:not(.expanded) .object-info-state-note {
1265     display: none;
1266 }
1267
1268 .error-message {
1269     color: red;
1270 }
1271
1272 .error-input {
1273     background-color: rgb(220, 130, 130);
1274 }
1275
1276 .auto-complete-text,
1277 .editing .auto-complete-text {
1278     color: rgb(128, 128, 128) !important;
1279     -webkit-user-select: none;
1280     -webkit-user-modify: read-only;
1281 }
1282
1283 .panel {
1284     display: none;
1285     overflow: hidden;
1286     position: absolute;
1287     top: 0;
1288     left: 0;
1289     right: 0;
1290     bottom: 0;
1291     z-index: 0;
1292 }
1293
1294 .panel.visible {
1295     display: flex;
1296 }
1297
1298 .panel.extension-panel.visible {
1299     display: flex !important;
1300     flex-direction: column;
1301 }
1302
1303 .extension-view {
1304     flex: auto;
1305 }
1306
1307 iframe.extension {
1308     width: 100%;
1309     height: 100%;
1310 }
1311
1312 iframe.panel.extension {
1313     display: block;
1314     height: 100%;
1315 }
1316
1317 .webkit-line-gutter-backdrop {
1318     /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */
1319     width: 31px;
1320     background-color: rgb(240, 240, 240);
1321     border-right: 1px solid rgb(187, 187, 187);
1322     position: absolute;
1323     z-index: -1;
1324     left: 0;
1325     top: 0;
1326     height: 100%
1327 }
1328
1329 .outline-disclosure li.hovered:not(.selected) .selection {
1330     display: block;
1331     left: 3px;
1332     right: 3px;
1333     background-color: rgba(56, 121, 217, 0.1);
1334     border-radius: 5px;
1335 }
1336
1337 .outline-disclosure li .selection {
1338     display: none;
1339     position: absolute;
1340     left: 0;
1341     right: 0;
1342     height: 15px;
1343     z-index: -1;
1344 }
1345
1346 .outline-disclosure li.selected .selection {
1347     display: block;
1348     background-color: rgb(212, 212, 212);
1349 }
1350
1351 .outline-disclosure li.elements-drag-over .selection {
1352     display: block;
1353     margin-top: -2px;
1354     border-top: 2px solid rgb(56, 121, 217);
1355 }
1356
1357 .outline-disclosure ol:focus li.selected .selection {
1358     background-color: rgb(56, 121, 217);
1359 }
1360
1361 .outline-disclosure ol:focus li.parent.selected::before {
1362     background-color: white;
1363 }
1364
1365 .outline-disclosure > ol {
1366     position: relative;
1367     padding: 2px 6px !important;
1368     margin: 0;
1369     cursor: default;
1370     min-width: 100%;
1371 }
1372
1373 .outline-disclosure,
1374 .outline-disclosure ol {
1375     list-style-type: none;
1376     -webkit-padding-start: 12px;
1377     margin: 0;
1378 }
1379
1380 .source-code {
1381     font-family: monospace;
1382     font-size: 11px !important;
1383     white-space: pre-wrap;
1384 }
1385
1386 .outline-disclosure li {
1387     padding: 0 0 0 14px;
1388     margin-top: 1px;
1389     margin-left: -2px;
1390     word-wrap: break-word;
1391 }
1392
1393 .outline-disclosure ol:focus li.selected {
1394     color: white;
1395 }
1396
1397 .outline-disclosure ol:focus li.selected * {
1398     color: inherit;
1399 }
1400
1401 .outline-disclosure li.parent {
1402     margin-left: -12px
1403 }
1404
1405 .outline-disclosure li .webkit-html-tag.close {
1406     margin-left: -12px;
1407 }
1408
1409 .outline-disclosure li.parent::before {
1410     float: left;
1411     width: 10px;
1412     padding-right: 2px;
1413 }
1414
1415 .outline-disclosure li.parent::before {
1416     -webkit-user-select: none;
1417     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
1418     -webkit-mask-size: 320px 144px;
1419     content: "a";
1420     color: transparent;
1421     text-shadow: none;
1422     position: relative;
1423     top: 2px;
1424     margin-right: 1px;
1425     height: 12px;
1426 }
1427
1428 @media (-webkit-min-device-pixel-ratio: 1.5) {
1429 .outline-disclosure li.parent::before {
1430     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
1431 }
1432 } /* media */
1433
1434 .outline-disclosure li.parent::before {
1435     -webkit-mask-position: -4px -96px;
1436     background-color: rgb(110, 110, 110);
1437 }
1438
1439 .outline-disclosure li.parent.expanded::before {
1440     -webkit-mask-position: -20px -96px;
1441 }
1442
1443 .outline-disclosure ol.children {
1444     display: none;
1445 }
1446
1447 .outline-disclosure ol.children.expanded {
1448     display: block;
1449 }
1450
1451 .placard {
1452     position: relative;
1453     border-top: 1px solid transparent;
1454     padding: 3px 8px 4px 18px;
1455     min-height: 18px;
1456     white-space: nowrap;
1457 }
1458
1459 .placard:nth-of-type(2n) {
1460     background-color: rgb(234, 243, 255);
1461 }
1462
1463 .placard.selected {
1464     border-top: 1px solid rgb(172, 172, 172);
1465     background-image: linear-gradient(to bottom, rgb(182, 182, 182), rgb(162, 162, 162));
1466     background-origin: padding-box;
1467     background-clip: padding-box;
1468 }
1469
1470 :focus .placard.selected {
1471     border-top: 1px solid rgb(70, 103, 215);
1472     background-image: linear-gradient(to bottom, rgb(92, 147, 213), rgb(56, 121, 217));
1473 }
1474
1475 .placard .title {
1476     font-weight: normal;
1477     word-wrap: break-word;
1478     white-space: normal;
1479 }
1480
1481 .placard.selected .title {
1482     color: white;
1483     font-weight: bold;
1484 }
1485
1486 .placard .subtitle {
1487     float: right;
1488     font-size: 10px;
1489     margin-left: 5px;
1490     color: rgba(0, 0, 0, 0.7);
1491     text-overflow: ellipsis;
1492     overflow: hidden;
1493 }
1494
1495 .placard.selected .subtitle {
1496     color: rgba(255, 255, 255, 0.7);
1497 }
1498
1499 .placard .subtitle a {
1500     color: inherit;
1501 }
1502
1503 .placard-label {
1504     text-align: center;
1505 }
1506
1507 .placard-label .title,
1508 .placard-label .subtitle {
1509     font-style: italic;
1510     font-weight: bold;
1511     color: #999;
1512 }
1513
1514 .section {
1515     position: relative;
1516     margin-top: 1px;
1517 }
1518
1519 .events-pane .section {
1520     margin: 0;
1521 }
1522 .events-pane .section:not(:nth-of-type(1)) {
1523     border-top: 1px solid rgb(231, 231, 231);
1524 }
1525
1526 .section > .header {
1527     padding: 0px 8px 0 5px;
1528     min-height: 18px;
1529     white-space: nowrap;
1530     background-origin: padding-box;
1531     background-clip: padding-box;
1532 }
1533
1534 .section > .header::before {
1535     -webkit-user-select: none;
1536     background-image: url(Images/statusbarButtonGlyphs.png);
1537     background-size: 320px 144px;
1538     opacity: 0.5;
1539     content: "a";
1540     color: transparent;
1541     text-shadow: none;
1542     float: left;
1543     width: 8px;
1544     margin-right: 4px;
1545     margin-top: 2px;
1546 }
1547
1548 @media (-webkit-min-device-pixel-ratio: 1.5) {
1549 .section > .header::before {
1550     background-image: url(Images/statusbarButtonGlyphs_2x.png);
1551 }
1552 } /* media */
1553
1554 .section > .header::before {
1555     background-position: -4px -96px;
1556 }
1557
1558 .section.expanded > .header::before {
1559     background-position: -20px -96px;
1560 }
1561
1562 .section > .header .title,
1563 .event-bar .header .title {
1564     font-weight: normal;
1565     word-wrap: break-word;
1566     white-space: normal;
1567     line-height: 18px;
1568 }
1569
1570 .section > .header .title.blank-title {
1571     font-style: italic;
1572 }
1573
1574 .section > .header label,
1575 .event-bar .header label {
1576     display: none;
1577 }
1578
1579 .section.expanded .header label,
1580 .event-bar.expanded .header label {
1581     display: inline;
1582 }
1583
1584 .section > .header .subtitle,
1585 .event-bar .header .subtitle {
1586     float: right;
1587     margin-left: 5px;
1588     max-width: 55%;
1589     text-overflow: ellipsis;
1590     overflow: hidden;
1591 }
1592
1593 .section > .header .subtitle a {
1594     color: inherit;
1595 }
1596
1597 .section .properties,
1598 .event-bar .event-properties {
1599     display: none;
1600 }
1601
1602 .section.expanded .properties,
1603 .event-bar.expanded .event-properties {
1604     display: block;
1605 }
1606
1607 .event-bar .event-properties {
1608     padding-left: 16px;
1609 }
1610
1611 .section.no-affect .properties li {
1612     opacity: 0.5;
1613 }
1614
1615 .section.no-affect .properties li.editing {
1616     opacity: 1.0;
1617 }
1618
1619 .properties-tree {
1620     margin: 0;
1621     padding: 0 6px 2px;
1622     list-style: none;
1623     min-height: 18px;
1624 }
1625
1626 .properties-tree li {
1627     margin-left: 12px;
1628     white-space: nowrap;
1629     text-overflow: ellipsis;
1630     overflow: hidden;
1631     -webkit-user-select: text;
1632     cursor: default;
1633     padding-top: 2px;
1634     line-height: 12px;
1635 }
1636
1637 .properties-tree li.parent {
1638     margin-left: 1px;
1639 }
1640
1641
1642 .properties-tree li.parent::before {
1643     -webkit-user-select: none;
1644     background-image: url(Images/statusbarButtonGlyphs.png);
1645     background-size: 320px 144px;
1646     opacity: 0.5;
1647     content: "a";
1648     width: 8px;
1649     float: left;
1650     margin-right: 4px;
1651     color: transparent;
1652     text-shadow: none;
1653 }
1654
1655 .properties-calculate-value-button:hover {
1656     text-decoration: underline;
1657 }
1658
1659 .properties-accessor-property-name {
1660     font-style: italic;
1661 }
1662
1663 @media (-webkit-min-device-pixel-ratio: 1.5) {
1664 .properties-tree li.parent::before {
1665     background-image: url(Images/statusbarButtonGlyphs_2x.png);
1666 }
1667 } /* media */
1668
1669 .properties-tree li.parent::before {
1670     background-position: -4px -96px;
1671 }
1672
1673 .properties-tree li.parent.expanded::before {
1674     background-position: -20px -96px;
1675 }
1676
1677 .properties-tree li .info {
1678     padding-top: 4px;
1679     padding-bottom: 3px;
1680 }
1681
1682 .properties-tree ol {
1683     display: none;
1684     margin: 0;
1685     -webkit-padding-start: 12px;
1686     list-style: none;
1687 }
1688
1689 .properties-tree ol.expanded {
1690     display: block;
1691 }
1692
1693 .editing {
1694     -webkit-user-select: text;
1695     box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
1696     outline: 1px solid rgb(66%, 66%, 66%) !important;
1697     background-color: white;
1698     -webkit-user-modify: read-write-plaintext-only;
1699     text-overflow: clip !important;
1700     padding-left: 2px;
1701     margin-left: -2px;
1702     padding-right: 2px;
1703     margin-right: -2px;
1704     margin-bottom: -1px;
1705     padding-bottom: 1px;
1706     opacity: 1.0 !important;
1707 }
1708
1709 .editing,
1710 .editing * {
1711     color: #222 !important;
1712     text-decoration: none !important;
1713 }
1714
1715 .child-editing {
1716     color: #222 !important;
1717     text-decoration: none !important;
1718     overflow: visible !important;
1719 }
1720
1721 .editing br {
1722     display: none;
1723 }
1724
1725 .section .properties li.editing {
1726     margin-left: 10px;
1727     text-overflow: clip;
1728 }
1729
1730 li.editing .swatch, li.editing .enabled-button,
1731 li.editing-sub-part .delete-button {
1732     display: none !important;
1733 }
1734
1735 .sidebar-tabbed-pane .watch-expressions {
1736     margin-top: 17px;
1737 }
1738
1739 .properties-tree.watch-expressions {
1740     padding-left: 0 !important;
1741 }
1742
1743 .properties-tree.watch-expressions > li {
1744     padding-left: 4px;
1745 }
1746
1747 .properties-tree.watch-expressions > li > .value {
1748     display: inline;
1749     position: static;
1750 }
1751
1752 .properties-tree.watch-expressions > li:not(.parent) {
1753     margin-left: 1px;
1754     padding-left: 15px;
1755 }
1756
1757 .properties-tree.watch-expressions > li.hovered {
1758     padding-right: 14px;
1759 }
1760
1761 .watch-expressions > li.editing-sub-part .text-prompt {
1762     display: block;
1763     width: 100%;
1764     overflow: hidden;
1765 }
1766
1767 .watch-expressions > li.editing-sub-part .value,
1768 .watch-expressions > li.editing-sub-part .separator  {
1769     display: none;
1770 }
1771
1772 .section .properties li.editing-sub-part {
1773     padding: 3px 6px 8px 18px;
1774     margin: -1px -6px -8px -6px;
1775     text-overflow: clip;
1776 }
1777
1778 .section .properties .delete-button {
1779     width: 10px;
1780     height: 10px;
1781     background-image: url(Images/deleteIcon.png);
1782     background-position: 0 0;
1783     background-color: transparent;
1784     background-repeat: no-repeat;
1785     border: 0 none transparent;
1786     position: absolute;
1787     right: 8px;
1788     display: none;
1789 }
1790
1791 .section .properties li.hovered .delete-button {
1792     display: inline;
1793 }
1794
1795 .section .properties .name,
1796 .event-properties .name,
1797 .console-formatted-object .name {
1798     color: rgb(136, 19, 145);
1799 }
1800
1801 .section .properties .dimmed {
1802     opacity: 0.6;
1803 }
1804
1805 .section .properties .value.error {
1806     color: red;
1807 }
1808
1809 .section .properties .number,
1810 .event-properties .number {
1811     color: blue;
1812 }
1813
1814 .section .properties .keyword,
1815 .event-properties .keyword {
1816     color: rgb(136, 19, 79);
1817 }
1818
1819 .section .properties .color,
1820 .event-properties .color {
1821     color: rgb(118, 15, 21);
1822 }
1823
1824 .swatch {
1825     margin-left: 1px;
1826     margin-right: 2px;
1827     width: 10px;
1828     height: 10px;
1829     position: relative;
1830     top: 1px;
1831     display: inline-block;
1832     background-image: url(Images/checker.png);
1833     -webkit-user-select: none;
1834 }
1835
1836 .swatch-inner {
1837     width: 100%;
1838     height: 100%;
1839     display: inline-block;
1840     border: 1px solid rgba(128, 128, 128, 0.6);
1841 }
1842
1843 .swatch-inner:hover {
1844     border: 1px solid rgba(64, 64, 64, 0.8);
1845 }
1846
1847 .sidebar {
1848     overflow-x: hidden;
1849     background-color: rgb(232, 232, 232);
1850 }
1851
1852 .pane-title-button {
1853     color: rgb(6, 6, 6);
1854     background-color: transparent;
1855     border: 1px solid rgb(165, 165, 165);
1856     background-color: rgb(237, 237, 237);
1857     background-image: linear-gradient(to bottom, rgb(252, 252, 252), rgb(223, 223, 223));
1858     border-radius: 12px;
1859     -webkit-appearance: none;
1860 }
1861
1862 .pane-title-button:active {
1863     background-color: rgb(215, 215, 215);
1864     background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(239, 239, 239));
1865 }
1866
1867 button.show-all-nodes {
1868     font-size: 13px;
1869     margin: 0;
1870     padding: 0 20px;
1871     height: 20px;
1872     color: rgb(6, 6, 6);
1873     background-color: transparent;
1874     border: 1px solid rgb(165, 165, 165);
1875     background-color: rgb(237, 237, 237);
1876     background-image: linear-gradient(to bottom, rgb(252, 252, 252), rgb(223, 223, 223));
1877     border-radius: 12px;
1878     -webkit-appearance: none;
1879 }
1880
1881 body.inactive button.show-all-nodes {
1882     color: rgb(130, 130, 130);
1883     border-color: rgb(212, 212, 212);
1884     background-color: rgb(239, 239, 239);
1885     background-image: linear-gradient(to bottom, rgb(250, 250, 250), rgb(235, 235, 235));
1886 }
1887
1888 button.show-all-nodes:active {
1889     background-color: rgb(215, 215, 215);
1890     background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(239, 239, 239));
1891 }
1892
1893 #console-messages.console-filter-top {
1894     margin-top: 23px;
1895 }
1896
1897 .scope-bar {
1898     line-height: 19px;
1899     padding-right: 10px;
1900     overflow: hidden;
1901 }
1902
1903 .scope-bar li {
1904     display: inline-block;
1905     margin: 0 2px;
1906     padding: 2px 6px;
1907     line-height: 12px;
1908     background: transparent;
1909     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
1910     border-radius: 8px;
1911     vertical-align: middle;
1912 }
1913
1914 .scope-bar-divider {
1915     background-color: rgba(0, 0, 0, 0.4);
1916     height: 16px;
1917     width: 1px;
1918     vertical-align: middle;
1919     display: inline-block;
1920 }
1921
1922 .scope-bar li.selected,
1923 .scope-bar li:hover,
1924 .scope-bar li:active {
1925     color: white;
1926     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
1927 }
1928
1929 .scope-bar li.all {
1930     margin: 0 8px;
1931 }
1932
1933 .scope-bar li:hover {
1934     background: rgba(0, 0, 0, 0.2);
1935 }
1936
1937 .scope-bar li.selected {
1938     background: rgba(0, 0, 0, 0.3);
1939 }
1940
1941 .scope-bar li:active {
1942     background: rgba(0, 0, 0, 0.5);
1943 }
1944
1945
1946 .console-warning-level.repeated-message,
1947 .console-error-level.repeated-message,
1948 .console-log-level.repeated-message,
1949 .console-debug-level.repeated-message,
1950 .console-info-level.repeated-message {
1951     display: -webkit-flex;
1952 }
1953
1954 .console-user-command-result {
1955     display: block;
1956 }
1957
1958 .source-view-frame {
1959     width: 100%;
1960     height: 100%;
1961 }
1962
1963 .sidebar-resizer-vertical {
1964     position: absolute;
1965     top: 0;
1966     bottom: 0;
1967     width: 5px;
1968     z-index: 500;
1969 }
1970
1971 .sidebar-tree,
1972 .sidebar-tree .children {
1973     position: relative;
1974     padding: 0;
1975     margin: 0;
1976     list-style: none;
1977 }
1978
1979 .sidebar-tree-section {
1980     position: relative;
1981     height: 18px;
1982     padding: 1px 10px 6px 10px;
1983     white-space: nowrap;
1984     margin-top: 1px;
1985     color: rgb(92, 110, 129);
1986     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1987 }
1988
1989 .sidebar-tree-item {
1990     position: relative;
1991     height: 36px;
1992     padding: 0 5px 0 5px;
1993     white-space: nowrap;
1994     overflow-x: hidden;
1995     overflow-y: hidden;
1996     margin-top: 1px;
1997     line-height: 34px;
1998     border-top: 1px solid transparent;
1999 }
2000
2001 .sidebar-tree .children {
2002     display: none;
2003 }
2004
2005 .sidebar-tree .children.expanded {
2006     display: block;
2007 }
2008
2009 .sidebar-tree-section + .children > .sidebar-tree-item {
2010     padding-left: 10px !important;
2011 }
2012
2013 .sidebar-tree-section + .children.small > .sidebar-tree-item {
2014     padding-left: 17px !important;
2015 }
2016
2017 .sidebar-tree > .children > .sidebar-tree-item {
2018     padding-left: 37px;
2019 }
2020
2021 .sidebar-tree > .children > .children > .sidebar-tree-item {
2022     padding-left: 37px;
2023 }
2024
2025 .sidebar-tree.hide-disclosure-buttons > .children {
2026     display: none;
2027 }
2028
2029 .sidebar-tree > .children.hide-disclosure-buttons > .children {
2030     display: none;
2031 }
2032
2033 .sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
2034     margin-left: 16px;
2035 }
2036
2037 .sidebar-tree-item .disclosure-button {
2038     float: left;
2039     width: 10px;
2040     height: 10px;
2041     border: 0;
2042     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
2043     -webkit-mask-size: 320px 144px;
2044     -webkit-appearance: none;
2045     background-color: rgba(0, 0, 0, 0.75);
2046     position: relative;
2047     top: 10px;
2048 }
2049
2050 @media (-webkit-min-device-pixel-ratio: 1.5) {
2051 .sidebar-tree-item .disclosure-button {
2052     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
2053 }
2054 } /* media */
2055
2056 .sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
2057     display: none;
2058 }
2059
2060 .sidebar-tree-item .disclosure-button {
2061     -webkit-mask-position: -4px -96px;
2062 }
2063
2064 .sidebar-tree-item.selected .disclosure-button {
2065     background-color: white;
2066     -webkit-mask-position: -4px -96px;
2067 }
2068
2069 .sidebar-tree-item.expanded .disclosure-button {
2070     -webkit-mask-position: -20px -96px;
2071 }
2072
2073 .sidebar-tree-item.selected.expanded .disclosure-button {
2074     background-color: white;
2075     -webkit-mask-position: -20px -96px;
2076 }
2077
2078 .sidebar-tree-item .icon {
2079     float: left;
2080     width: 32px;
2081     height: 32px;
2082     margin-top: 1px;
2083     margin-right: 3px;
2084 }
2085
2086 .sidebar-tree-item.wait .icon {
2087     content: none;
2088 }
2089
2090 .spinner-icon::before,
2091 .sidebar-tree-item.wait .icon::before {
2092     display: block;
2093     width: 24px;
2094     height: 24px;
2095     margin: 4px;
2096     border: 3px solid grey;
2097     border-radius: 12px;
2098     clip: rect(0px, 15px, 15px, 0px);
2099     content: "";
2100     position: absolute;
2101     -webkit-animation: spinner-animation 1s linear infinite;
2102 }
2103
2104 .spinner-icon.small::before,
2105 .sidebar-tree-item.wait.small .icon::before {
2106     width: 14px;
2107     height: 14px;
2108     margin: 1px;
2109     clip: rect(0px, 9px, 9px, 0px);
2110     border-width: 2px;
2111 }
2112
2113 .sidebar-tree-item.wait.selected .icon::before {
2114     border-color: white;
2115 }
2116
2117 @-webkit-keyframes spinner-animation {
2118     from { -webkit-transform: rotate(0); }
2119     to { -webkit-transform: rotate(360deg); }
2120 }
2121
2122 li .status {
2123     float: right;
2124     height: 16px;
2125     margin-top: 9px;
2126     margin-left: 4px;
2127     line-height: 1em;
2128 }
2129
2130 li .status:empty {
2131     display: none;
2132 }
2133
2134 li .status .bubble {
2135     display: inline-block;
2136     height: 14px;
2137     min-width: 16px;
2138     margin-top: 1px;
2139     background-color: rgb(128, 151, 189);
2140     vertical-align: middle;
2141     white-space: nowrap;
2142     padding: 1px 4px;
2143     text-align: center;
2144     font-size: 11px;
2145     line-height: normal;
2146     font-weight: bold;
2147     text-shadow: none;
2148     color: white;
2149     border-radius: 7px;
2150 }
2151
2152 li .status .bubble:empty {
2153     display: none;
2154 }
2155
2156 li.selected .status .bubble {
2157     background-color: white !important;
2158     color: rgb(132, 154, 190) !important;
2159 }
2160
2161 :focus li.selected .status .bubble {
2162     color: rgb(36, 98, 172) !important;
2163 }
2164
2165 body.inactive li.selected .status .bubble {
2166     color: rgb(159, 159, 159) !important;
2167 }
2168
2169 .sidebar-tree.small .sidebar-tree-item,
2170 .sidebar-tree .children.small .sidebar-tree-item,
2171 .sidebar-tree-item.small,
2172 .small .resources-graph-side {
2173     height: 20px;
2174 }
2175
2176 .sidebar-tree.small .sidebar-tree-item .icon,
2177 .sidebar-tree .children.small .sidebar-tree-item .icon,
2178 .sidebar-tree-item.small .icon {
2179     width: 16px;
2180     height: 16px;
2181 }
2182
2183 .sidebar-tree.small .sidebar-tree-item .status,
2184 .sidebar-tree .children.small .sidebar-tree-item .status,
2185 .sidebar-tree-item.small .status {
2186     margin-top: 1px;
2187 }
2188
2189 .sidebar-tree-item.selected {
2190     color: white;
2191     text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
2192     background-origin: padding-box;
2193     background-clip: padding-box;
2194     background-color: rgb(56, 121, 217);
2195 }
2196
2197 :focus .sidebar-tree-item.selected {
2198     background-color: rgb(56, 121, 217);
2199 }
2200
2201 body.inactive .sidebar-tree-item.selected {
2202     background-color: rgb(180,180,180);
2203 }
2204
2205 .sidebar-tree-item .titles {
2206     display: flex;
2207     flex-direction: column;
2208     position: relative;
2209     top: 5px;
2210     line-height: 12px;
2211     padding-bottom: 1px;
2212     text-overflow: ellipsis;
2213     overflow: hidden;
2214     white-space: nowrap;
2215 }
2216
2217 .titles > .title-container {
2218     display: flex;
2219 }
2220
2221 .sidebar-tree-item .titles.no-subtitle {
2222     top: 10px;
2223 }
2224
2225 .sidebar-tree.small .sidebar-tree-item .titles,
2226 .sidebar-tree .children.small .sidebar-tree-item .titles,
2227 .sidebar-tree-item.small .titles {
2228     top: 2px;
2229     line-height: normal;
2230 }
2231
2232 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after,
2233 .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
2234     content: "\A";
2235     white-space: pre;
2236 }
2237
2238 .sidebar-tree-item .subtitle {
2239     font-size: 80%;
2240 }
2241
2242 .sidebar-tree.small .sidebar-tree-item .subtitle,
2243 .sidebar-tree .children.small .sidebar-tree-item .subtitle,
2244 .sidebar-tree-item.small .subtitle {
2245     display: none;
2246 }
2247
2248 .sidebar-tree-item.selected .subtitle {
2249     color: white;
2250 }
2251
2252 .bubble.debug,
2253 .console-debug-level .bubble {
2254     background-color: rgb(0, 0, 255) !important;
2255 }
2256
2257 .bubble.warning,
2258 .console-warning-level .bubble {
2259     background-color: rgb(232, 164, 0) !important;
2260 }
2261
2262 .bubble.error,
2263 .console-error-level .bubble {
2264     background-color: rgb(216, 35, 35) !important;
2265 }
2266
2267 .storage-application-cache-status-icon,
2268 .storage-application-cache-connectivity-icon {
2269     margin: 5px 5px 0;
2270     vertical-align: middle;
2271 }
2272
2273 .status-bar-divider {
2274     margin-left: 7px;
2275     border-right: 1px solid #CCC;
2276 }
2277
2278 .storage-application-cache-status,
2279 .storage-application-cache-connectivity {
2280     position: relative;
2281     top: 4px;
2282 }
2283
2284 .status-bar-items {
2285     position: absolute;
2286     top: 0;
2287     bottom: 0;
2288     left: 0;
2289     overflow: hidden;
2290     border-left: 1px solid rgb(184, 184, 184);
2291     margin-left: -1px;
2292 }
2293
2294 .node-search-status-bar-item .glyph {
2295     -webkit-mask-position: -224px -24px;
2296 }
2297
2298 .emulation-status-bar-item .glyph {
2299     -webkit-mask-position: -164px 0px;
2300 }
2301
2302 .delete-storage-status-bar-item .glyph {
2303     -webkit-mask-position: -128px 0;
2304 }
2305
2306 .clear-storage-status-bar-item .glyph {
2307     -webkit-mask-position: -64px 0;
2308 }
2309
2310 .refresh-storage-status-bar-item .glyph {
2311     -webkit-mask-position: 0 0;
2312 }
2313
2314 .webkit-html-js-node,
2315 .webkit-html-css-node {
2316     white-space: pre;
2317 }
2318
2319 .source-frame-breakpoint-condition {
2320     z-index: 30;
2321     padding: 4px;
2322     background-color: rgb(203, 226, 255);
2323     border-radius: 7px;
2324     border: 2px solid rgb(169, 172, 203);
2325     width: 90%;
2326     pointer-events: auto;
2327 }
2328
2329 .source-frame-breakpoint-message {
2330     background-color: transparent;
2331     font-weight: normal;
2332     font-size: 11px;
2333     text-align: left;
2334     text-shadow: none;
2335     color: rgb(85, 85, 85);
2336     cursor: default;
2337     margin: 0 0 2px 0;
2338 }
2339
2340 #source-frame-breakpoint-condition {
2341     margin: 0;
2342     border: 1px inset rgb(190, 190, 190) !important;
2343     width: 100%;
2344     box-shadow: none !important;
2345     outline: none !important;
2346     -webkit-user-modify: read-write;
2347 }
2348
2349 .source-frame-popover-title {
2350     text-overflow: ellipsis;
2351     overflow: hidden;
2352     white-space: nowrap;
2353     font-weight: bold;
2354     padding-left: 18px;
2355 }
2356
2357 .source-frame-popover-tree {
2358     border-top: 1px solid rgb(194, 194, 147);
2359     overflow: auto;
2360     position: absolute;
2361     top: 15px;
2362     bottom: 0;
2363     left: 0;
2364     right: 0;
2365 }
2366
2367 .source-frame-eval-expression {
2368     outline: 1px solid rgb(163, 41, 34);
2369     background-color: rgb(255, 255, 194);
2370 }
2371
2372 .workers-list {
2373     list-style: none;
2374     margin: 0;
2375     padding: 0;
2376 }
2377
2378 .resource-content-unavailable {
2379     color: rgb(50%, 50%, 50%);
2380     font-style: italic;
2381     font-size: 14px;
2382     text-align: center;
2383     padding: 32px;
2384 }
2385
2386 .node-link {
2387     text-decoration: underline;
2388     cursor: pointer;
2389 }
2390
2391 .cursor-pointer {
2392     cursor: pointer;
2393 }
2394
2395 .cursor-auto {
2396     cursor: auto;
2397 }
2398
2399 .please-wait-msg {
2400     position: absolute;
2401     left: 0;
2402     top: 0;
2403     border: 4px black solid;
2404     border-radius: 4px;
2405     background-color: black;
2406     opacity: 0.85;
2407     color: white;
2408     font-size: 12px;
2409     font-weight: bold;
2410     z-index: 10000;
2411 }
2412
2413 .resource-view.json {
2414     padding: 5px;
2415 }
2416
2417 .resource-view.html iframe {
2418     width: 100%;
2419     height: 100%;
2420     position: absolute;
2421 }
2422
2423 .soft-context-menu-glass-pane {
2424     position: absolute;
2425     top: 0;
2426     bottom: 0;
2427     left: 0;
2428     right: 0;
2429     z-index: 20000;
2430 }
2431
2432 .soft-context-menu {
2433     position: absolute;
2434     border: 1px solid rgba(196, 196, 196, 0.9);
2435     border-top: 1px solid rgba(196, 196, 196, 0.5);
2436     border-bottom: 1px solid rgba(150, 150, 150, 0.9);
2437     padding: 4px 0 4px 0;
2438     border-radius: 4px;
2439     background-color: white;
2440     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
2441 }
2442
2443 .soft-context-menu-item {
2444     width: 100%;
2445     line-height: 13px;
2446     font-size: 14px;
2447     border-top: 1px solid transparent;
2448     border-bottom: 1px solid transparent;
2449     padding: 2px 7px 2px 6px;
2450     margin: 0 13px 0 0;
2451     white-space: nowrap;
2452 }
2453
2454 .soft-context-menu-separator {
2455     height: 10px;
2456     margin: 0 1px;
2457 }
2458
2459 .soft-context-menu-separator > .separator-line {
2460     margin: 0;
2461     height: 5px;
2462     border-bottom: 1px solid rgb(227, 227, 227);
2463     pointer-events: none;
2464 }
2465
2466 .soft-context-menu-item-mouse-over {
2467     border-top: 1px solid rgb(56, 121, 217);
2468     border-bottom: 1px solid rgb(56, 121, 217);
2469     background-color: rgb(56, 121, 217);
2470     color: white;
2471 }
2472
2473 body.platform-mac .soft-context-menu-item-mouse-over {
2474     border-top: 1px solid rgb(90, 131, 236);
2475     border-bottom: 1px solid rgb(18, 88, 233);
2476     background-image: linear-gradient(to bottom, rgb(100, 140, 243), rgb(36, 101, 243));
2477 }
2478
2479 .soft-context-menu-item-checkmark {
2480     color: rgb(108, 108, 108);
2481     pointer-events: none;
2482 }
2483
2484 .soft-context-menu-item-submenu-arrow {
2485     color: #222;
2486     float: right;
2487     pointer-events: none;
2488 }
2489
2490 .soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
2491     color: white;
2492 }
2493
2494 .search-view {
2495     position: absolute;
2496     top: 0;
2497     bottom: 0;
2498     left: 0;
2499     right: 0;
2500 }
2501
2502 .search-drawer-header {
2503     flex: none;
2504     padding: 4px;
2505     display: flex;
2506 }
2507
2508 .search-drawer-header input[type="text"].search-config-search {
2509     -webkit-appearance: none;
2510     padding: 0 3px;
2511     margin: 0;
2512     border: 1px solid rgb(163, 163, 163);
2513     height: 20px;
2514     border-radius: 2px;
2515     color: #303030;
2516 }
2517
2518 .search-drawer-header input[type="search"].search-config-search:focus {
2519     border: 1px solid rgb(190, 190, 190);
2520     outline: none;
2521 }
2522
2523 body.platform-mac .search-drawer-header input[type="search"].search-config-search {
2524     top: 1px;
2525 }
2526
2527 .search-drawer-header label.search-config-label {
2528     margin: auto 0;
2529     margin-left: 8px;
2530     color: #303030;
2531     display: flex;
2532 }
2533
2534 #bottom-status-bar-container {
2535     -webkit-flex: 1 1 0;
2536     width: 0;
2537     overflow: hidden;
2538 }
2539
2540 .search-status-bar-summary {
2541     background-color: rgb(236, 236, 236);
2542     border-top: 1px solid #ccc;
2543     padding-left: 5px;
2544     flex: 0 0 19px;
2545 }
2546
2547 .search-status-bar-summary .progress-bar-container {
2548     margin-top: -4px;
2549 }
2550
2551 .progress-bar-stop-button-item {
2552     width: 19px;
2553     height: 24px;
2554     overflow: hidden;
2555 }
2556
2557 .progress-bar-stop-button .glyph {
2558     -webkit-mask-position: -96px -48px;
2559     background-color: rgb(216, 0, 0) !important;
2560 }
2561
2562 .search-view .search-results {
2563     overflow-y: auto;
2564     flex: auto;
2565 }
2566
2567 #search-results-pane-file-based li {
2568     list-style: none;
2569 }
2570
2571 #search-results-pane-file-based ol {
2572     -webkit-padding-start: 0;
2573     margin-top: 0;
2574 }
2575
2576 #search-results-pane-file-based ol.children {
2577     display: none;
2578 }
2579
2580 #search-results-pane-file-based ol.children.expanded {
2581     display: block;
2582 }
2583
2584 #search-results-pane-file-based li.parent::before {
2585     -webkit-user-select: none;
2586     background-image: url(Images/statusbarButtonGlyphs.png);
2587     background-size: 320px 144px;
2588     opacity: 0.5;
2589     width: 12px;
2590     content: "a";
2591     color: transparent;
2592     margin-left: -5px;
2593     padding-right: 4px;
2594     display: inline-block;
2595 }
2596
2597 @media (-webkit-min-device-pixel-ratio: 1.5) {
2598 #search-results-pane-file-based li.parent::before {
2599     background-image: url(Images/statusbarButtonGlyphs_2x.png);
2600 }
2601 } /* media */
2602
2603 #search-results-pane-file-based li.parent::before {
2604     background-position: -4px -96px;
2605 }
2606
2607 #search-results-pane-file-based li.parent.expanded::before {
2608     background-position: -20px -96px;
2609 }
2610
2611 #search-results-pane-file-based .search-result {
2612     font-size: 11px;
2613     padding: 2px 0 2px 10px;
2614     word-wrap: normal;
2615     white-space: pre;
2616     cursor: pointer;
2617 }
2618
2619 #search-results-pane-file-based .search-result:hover {
2620     background-color: rgba(121, 121, 121, 0.1);
2621 }
2622
2623 #search-results-pane-file-based .search-result .search-result-file-name {
2624     font-weight: bold;
2625     color: #222;
2626 }
2627
2628 #search-results-pane-file-based .search-result .search-result-matches-count {
2629     margin-left: 5px;
2630     color: #222;
2631 }
2632
2633 #search-results-pane-file-based .show-more-matches {
2634     padding: 4px 0;
2635     color: #222;
2636     cursor: pointer;
2637     font-size: 11px;
2638     margin-left: 20px;
2639 }
2640
2641 #search-results-pane-file-based .show-more-matches:hover {
2642     text-decoration: underline;
2643 }
2644
2645 #search-results-pane-file-based .search-match {
2646     word-wrap: normal;
2647     white-space: pre;
2648 }
2649
2650 #search-results-pane-file-based .search-match .search-match-line-number {
2651     color: rgb(128, 128, 128);
2652     text-align: right;
2653     vertical-align: top;
2654     word-break: normal;
2655     padding-right: 4px;
2656     padding-left: 6px;
2657     margin-right: 5px;
2658     border-right: 1px solid #BBB;
2659 }
2660
2661 #search-results-pane-file-based .search-match:not(:hover) .search-match-line-number {
2662     background-color: #F0F0F0;
2663 }
2664
2665 #search-results-pane-file-based .search-match:hover {
2666     background-color: rgba(56, 121, 217, 0.1);
2667 }
2668
2669 #search-results-pane-file-based .search-match .highlighted-match {
2670     background-color: #F1EA00;
2671 }
2672
2673 #search-results-pane-file-based a {
2674     text-decoration: none;
2675     display: block;
2676 }
2677
2678 #search-results-pane-file-based .search-match .search-match-content {
2679     color: #000;
2680 }
2681
2682 .record-cpu-profile-status-bar-item .glyph,
2683 .record-profile-status-bar-item .glyph {
2684     -webkit-mask-position: -288px 0;
2685 }
2686
2687 button.record-cpu-profile-status-bar-item.toggled-on .glyph:not(.shadow),
2688 button.record-profile-status-bar-item.toggled-on .glyph:not(.shadow) {
2689     -webkit-mask-position: -288px -24px;
2690     background-color: rgb(216, 0, 0) !important;
2691 }
2692
2693 .empty-view,
2694 .storage-view .storage-table-error {
2695     position: absolute;
2696     top: 0;
2697     bottom: 25%;
2698     left: 0;
2699     right: 0;
2700     font-size: 24px;
2701     color: rgb(75%, 75%, 75%);
2702     margin-top: auto;
2703     margin-bottom: auto;
2704     height: 50px;
2705     line-height: 26px;
2706     text-align: center;
2707     font-weight: bold;
2708     padding: 10px;
2709     white-space: pre-wrap;
2710 }
2711
2712 /* Custom popup scrollers */
2713
2714 .custom-popup-horizontal-scroll ::-webkit-scrollbar,
2715 .custom-popup-vertical-scroll ::-webkit-scrollbar {
2716     width: 11px;
2717     height: 11px;
2718 }
2719
2720 .custom-popup-horizontal-scroll ::-webkit-scrollbar-corner,
2721 .custom-popup-vertical-scroll ::-webkit-scrollbar-corner {
2722     display: none;
2723 }
2724
2725 .custom-popup-horizontal-scroll ::-webkit-resizer,
2726 .custom-popup-vertical-scroll ::-webkit-resizer {
2727     display: none;
2728 }
2729
2730 .custom-popup-horizontal-scroll ::-webkit-scrollbar-button,
2731 .custom-popup-vertical-scroll ::-webkit-scrollbar-button {
2732     display: none;
2733 }
2734
2735 /* Custom Horizontal Scrollbar Styles */
2736
2737 .custom-popup-horizontal-scroll ::-webkit-scrollbar:horizontal:corner-present {
2738     border-right-width: 0;
2739 }
2740
2741 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal {
2742     -webkit-border-image: url(Images/thumbHoriz.png) 0 11 0 11;
2743     border-color: transparent;
2744     border-width: 0 11px;
2745     min-width: 20px;
2746 }
2747
2748 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:hover {
2749     -webkit-border-image: url(Images/thumbHoverHoriz.png) 0 11 0 11;
2750 }
2751
2752 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:active {
2753     -webkit-border-image: url(Images/thumbActiveHoriz.png) 0 11 0 11;
2754 }
2755
2756 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:start {
2757     margin-left: 5px;
2758 }
2759
2760 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end {
2761     margin-right: 5px;
2762 }
2763
2764 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end:corner-present {
2765     margin-right: 4px;
2766 }
2767
2768 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:decrement {
2769     -webkit-border-image: url(Images/trackHoriz.png) 0 11 0 11;
2770     border-color: transparent;
2771     border-width: 0 0 0 11px;
2772 }
2773
2774 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:increment {
2775     -webkit-border-image: url(Images/trackHoriz.png) 0 11 0 11;
2776     border-color: transparent;
2777     border-width: 0 11px 0 0;
2778 }
2779
2780 /* Custom Vertical Scrollbar Styles */
2781
2782 .custom-popup-vertical-scroll ::-webkit-scrollbar:vertical:corner-present {
2783     border-bottom-width: 0;
2784 }
2785
2786 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical {
2787     -webkit-border-image: url(Images/thumbVert.png) 11 0 11 0;
2788     border-color: transparent;
2789     border-width: 11px 0;
2790     min-height: 20px;
2791 }
2792
2793 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:hover {
2794     -webkit-border-image: url(Images/thumbHoverVert.png) 11 0 11 0;
2795 }
2796
2797 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:active {
2798     -webkit-border-image: url(Images/thumbActiveVert.png) 11 0 11 0;
2799 }
2800
2801 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:start {
2802     margin-top: 5px;
2803 }
2804
2805 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:end {
2806     margin-bottom: 5px;
2807 }
2808
2809 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:end:corner-present {
2810     margin-bottom: 4px;
2811 }
2812
2813 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:decrement {
2814     -webkit-border-image: url(Images/trackVert.png) 11 0 11 0;
2815     border-color: transparent;
2816     border-width: 11px 0 0 0;
2817 }
2818
2819 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment {
2820     -webkit-border-image: url(Images/trackVert.png) 11 0 11 0;
2821     border-color: transparent;
2822     border-width: 0 0 11px 0;
2823 }
2824
2825 .console-context {
2826     max-width: 200px;
2827 }
2828
2829 .root-view {
2830     overflow: hidden;
2831     position: absolute !important;
2832     left: 0;
2833     top: 0;
2834 }
2835
2836 .search-bar {
2837     flex: 0 0 23px;
2838     background-color: rgb(236, 236, 236);
2839 }
2840
2841 .search-bar.replaceable {
2842     flex: 0 0 44px;
2843 }
2844
2845 .progress-bar-container {
2846     display: inline-flex;
2847     margin: 0 8px;
2848     -webkit-flex: 1 0;
2849 }
2850
2851 .progress-bar-container span {
2852     padding: 6px;
2853 }
2854
2855 .progress-bar-container progress {
2856     margin-top: 7px;
2857     -webkit-flex: 1 0;
2858 }
2859
2860 body.platform-mac .progress-bar-container progress {
2861     margin-top: 6px;
2862 }
2863
2864 .progress-bar-container button.status-bar-item {
2865     border-left: none;
2866     margin-top: 1px;
2867 }
2868
2869 .elements-tree-outline li.parent::before {
2870     top: 0 !important;
2871 }
2872
2873 .elements-tree-outline li.shadow-root + ol {
2874     margin-left: 5px;
2875     padding-left: 5px;
2876     border-left: 1px solid gray;
2877 }
2878
2879 #drawer-editor-view {
2880     flex: auto;
2881 }
2882
2883 .toolbar-close-button-item {
2884     display: inline-block;
2885     float: right;
2886     padding-right: 4px;
2887     padding-top: 4px;
2888     padding-left: 2px;
2889 }
2890
2891 body.undocked .toolbar-close-button-item {
2892     display: none;
2893 }
2894
2895 .root-view > .split-view > .split-view-sidebar {
2896     position: relative;
2897 }
2898
2899 select.drop-down-menu {
2900     border: none;
2901     -webkit-appearance: none;
2902 }
2903
2904 .viewport-control-gap-element {
2905     color: transparent;
2906 }