1 /* 2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. 3 * Copyright (C) 2009 Anthony Ricaud <rik (at) 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 html { 31 height: 100%; 32 } 33 34 body { 35 cursor: default; 36 position: absolute; 37 top: 0; 38 bottom: 0; 39 left: 0; 40 right: 0; 41 overflow: hidden; 42 font-family: Lucida Grande, sans-serif; 43 font-size: 10px; 44 margin: 0; 45 -webkit-text-size-adjust: none; 46 -webkit-user-select: none; 47 } 48 49 * { 50 -webkit-box-sizing: border-box; 51 } 52 53 :focus { 54 outline: none; 55 } 56 57 input[type="search"]:focus, input[type="text"]:focus { 58 outline: auto 5px -webkit-focus-ring-color; 59 } 60 61 iframe, a img { 62 border: none; 63 } 64 65 img { 66 -webkit-user-drag: none; 67 } 68 69 .hidden { 70 display: none !important; 71 } 72 73 #toolbar { 74 position: absolute; 75 top: 0; 76 left: 0; 77 right: 0; 78 height: 56px; 79 padding: 0 5px; 80 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151))); 81 border-bottom: 1px solid rgb(80, 80, 80); 82 -webkit-box-orient: horizontal; 83 -webkit-background-origin: padding; 84 -webkit-background-clip: padding; 85 } 86 87 body.inactive #toolbar { 88 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(207, 207, 207))); 89 border-bottom: 1px solid rgb(64%, 64%, 64%); 90 } 91 92 body.detached.platform-mac-leopard:not(.remote) #toolbar, 93 body.detached.platform-mac-snowleopard:not(.remote) #toolbar { 94 background: transparent; 95 } 96 97 body.attached #toolbar { 98 height: 34px; 99 border-top: 1px solid rgb(100, 100, 100); 100 cursor: row-resize; 101 padding-left: 0; 102 } 103 104 body.attached.port-qt #toolbar { 105 cursor: auto; 106 } 107 108 body.attached.inactive #toolbar { 109 border-top: 1px solid rgb(64%, 64%, 64%); 110 } 111 112 .toolbar-item { 113 margin: 0; 114 padding: 0 6px; 115 background-color: transparent; 116 border-style: none; 117 border-color: transparent; 118 } 119 120 .toolbar-item.toggleable { 121 padding-top: 4px; 122 } 123 124 .toolbar-item.toggleable.toggled-on { 125 border-width: 0 2px 0 2px; 126 padding: 4px 4px 0 4px; 127 -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2; 128 } 129 130 .toolbar-icon { 131 display: inline-block; 132 width: 32px; 133 height: 32px; 134 -webkit-background-size: 100% auto; 135 } 136 137 body.attached .toolbar-icon, 138 #toolbar-dropdown .toolbar-icon { 139 width: 24px; 140 height: 24px; 141 vertical-align: middle; 142 } 143 144 .toolbar-item:active .toolbar-icon { 145 background-position: 0 32px; 146 } 147 148 body.attached .toolbar-item:active .toolbar-icon { 149 background-position: 0 24px; 150 } 151 152 .toolbar-label { 153 font-size: 11px; 154 font-family: Lucida Grande, sans-serif; 155 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 156 } 157 158 .toolbar-item.toggleable:active .toolbar-label { 159 text-shadow: none; 160 } 161 162 body.attached .toolbar-label, 163 #toolbar-dropdown .toolbar-label { 164 display: inline-block; 165 margin-left: 3px; 166 position: relative; 167 top: 2px; 168 } 169 170 body.attached #search-toolbar-label { 171 display: none; 172 } 173 174 #toolbar-controls { 175 float: right; 176 display: -webkit-box; 177 -webkit-box-align: center; 178 height: 100%; 179 } 180 181 #toolbar-dropdown-arrow { 182 font-size: 16px; 183 font-weight: bold; 184 border: 0; 185 background-color: transparent; 186 -webkit-border-radius: 5px; 187 text-shadow: none; 188 } 189 190 body.attached #toolbar-dropdown-arrow { 191 font-size: 14px; 192 padding-bottom: 4px; 193 } 194 195 #toolbar-dropdown-arrow.dropdown-visible { 196 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 251, 0.9)), to(rgba(231, 231, 231, 0.9))); 197 } 198 199 #toolbar-dropdown-arrow:hover { 200 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(191, 191, 191, 0.7)), to(rgba(171, 171, 171, 0.5))); 201 } 202 203 #toolbar-dropdown-arrow:active { 204 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(111, 111, 111, 0.8)), to(rgba(91, 91, 91, 0.8))); 205 } 206 207 #toolbar-dropdown { 208 position: absolute; 209 z-index: 1000; 210 -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); 211 border: 1px solid rgb(128, 128, 128); 212 padding: 4px; 213 background-color: inherit; 214 background-image: inherit; 215 } 216 217 body.detached.platform-mac-leopard #toolbar-dropdown, 218 body.detached.platform-mac-snowleopard #toolbar-dropdown { 219 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151))); 220 } 221 222 #toolbar-dropdown .scrollable-content { 223 display: -webkit-box; 224 -webkit-box-orient: vertical; 225 -webkit-box-align: start; 226 } 227 228 #toolbar-dropdown .toolbar-item { 229 display: -webkit-box; 230 -webkit-box-orient: horizontal; 231 margin: 0px 2px; 232 padding: 4px; 233 width: 100%; 234 border: 1px solid rgba(0, 0, 0, 0); 235 } 236 237 #toolbar-dropdown .toolbar-item.toggleable.toggled-on { 238 border: 1px solid rgba(100, 100, 120, 0.4); 239 -webkit-border-image: none; 240 background: -webkit-gradient(linear, left top, left bottom, from(rgba(128, 128, 128, 0.6)), to(rgba(128, 128, 128, 0.6)), color-stop(20%, rgba(158, 158, 158, 0.2)), color-stop(80%, rgba(158, 158, 158, 0.2))); 241 } 242 243 #toolbar-dropdown .toolbar-item:hover { 244 -webkit-border-image: none; 245 border: 1px solid rgba(100, 100, 120, 0.8); 246 } 247 248 #toolbar-dropdown .toolbar-item.toggleable.toggled-on:hover { 249 border: 1px solid rgba(100, 100, 120, 1); 250 } 251 252 #toolbar-dropdown .toolbar-icon { 253 margin-right: 0.5em; 254 } 255 256 #toolbar-dropdown .toolbar-item:active .toolbar-icon { 257 background-position: 0 24px; 258 } 259 260 .scrollable-content { 261 position: static; 262 height: 100%; 263 overflow-y: auto; 264 width: 100%; 265 margin-right: 12px; 266 padding-right: 3px; 267 } 268 269 .scrollable-content::-webkit-scrollbar { 270 width: 11px; 271 } 272 273 .scrollable-content::-webkit-scrollbar-corner, 274 .scrollable-content::-webkit-resizer { 275 display: none; 276 } 277 278 .scrollable-content::-webkit-scrollbar-thumb:vertical { 279 background: -webkit-gradient(linear, left top, right top, from(rgb(192, 192, 192)), to(rgb(192, 192, 192)), color-stop(40%, rgb(214, 214, 214))); 280 border-radius: 5px; 281 min-height: 20px; 282 } 283 284 .scrollable-content::-webkit-scrollbar-thumb:vertical:hover, 285 .scrollable-content::-webkit-scrollbar-thumb:vertical:active { 286 background: -webkit-gradient(linear, left top, right top, from(rgb(230, 230, 230)), to(rgb(230, 230, 230)), color-stop(40%, rgb(252, 252, 252))); 287 } 288 289 .scrollable-content::-webkit-scrollbar-track:vertical { 290 background: -webkit-gradient(linear, left top, right top, from(rgb(128, 128, 128)), to(rgb(164, 164, 164)), color-stop(25%, rgb(164, 164, 164))); 291 border-radius: 5px; 292 } 293 294 .toolbar-search-item { 295 display: -webkit-box; 296 -webkit-box-orient: vertical; 297 -webkit-box-align: center; 298 -webkit-box-pack: end; 299 } 300 301 #search { 302 width: 205px; 303 font-size: 16px; 304 } 305 306 body.attached #search { 307 font-size: 11px; 308 } 309 310 #search-results-matches { 311 font-size: 11px; 312 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 313 } 314 315 .toolbar-item.elements .toolbar-icon { 316 background-image: url(Images/elementsIcon.png); 317 } 318 319 .toolbar-item.resources .toolbar-icon { 320 background-image: url(Images/resourcesIcon.png); 321 } 322 323 .toolbar-item.network .toolbar-icon { 324 background-image: url(Images/networkIcon.png); 325 } 326 327 .toolbar-item.scripts .toolbar-icon { 328 background-image: url(Images/scriptsIcon.png); 329 } 330 331 .toolbar-item.timeline .toolbar-icon { 332 background-image: url(Images/timelineIcon.png); 333 } 334 335 .toolbar-item.profiles .toolbar-icon { 336 background-image: url(Images/profilesIcon.png); 337 } 338 339 .toolbar-item.audits .toolbar-icon { 340 background-image: url(Images/auditsIcon.png); 341 } 342 343 .toolbar-item.console .toolbar-icon { 344 background-image: url(Images/consoleIcon.png); 345 } 346 347 #close-button-left, #close-button-right { 348 width: 14px; 349 height: 14px; 350 background-image: url(Images/closeButtons.png); 351 background-position: 0 0; 352 background-color: transparent; 353 border: 0 none transparent; 354 margin-top: 4px; 355 } 356 357 #close-button-left:hover, #close-button-right:hover { 358 background-position: 14px 0; 359 } 360 361 #close-button-left:active, #close-button-right:active { 362 background-position: 28px 0; 363 } 364 365 .close-left { 366 float: left; 367 } 368 369 body.detached .toolbar-item.close-left, body.detached .toolbar-item.close-right { 370 display: none; 371 } 372 373 body.attached.port-qt .toolbar-item.close-left, body.attached.port-qt .toolbar-item.close-right { 374 display: none; 375 } 376 377 body.platform-mac .toolbar-item.close-right { 378 display: none; 379 } 380 381 body:not(.platform-mac) .toolbar-item.close-left { 382 display: none; 383 } 384 385 .toolbar-item.close-left { 386 margin-top: 5px; 387 } 388 389 #main { 390 position: absolute; 391 z-index: 1; 392 top: 56px; 393 left: 0; 394 right: 0; 395 bottom: 0; 396 overflow: hidden; 397 background-color: white; 398 } 399 400 body.attached #main { 401 top: 34px; 402 } 403 404 #main-panels { 405 position: absolute; 406 top: 0; 407 left: 0; 408 right: 0; 409 bottom: 23px; 410 overflow: hidden; 411 } 412 413 #main-status-bar { 414 position: absolute; 415 bottom: 0; 416 left: 0; 417 right: 0; 418 } 419 420 body.drawer-visible #main-status-bar { 421 height: 24px; 422 background-image: url(Images/statusbarResizerVertical.png), url(Images/statusbarBackground.png); 423 background-repeat: no-repeat, repeat-x; 424 background-position: right center, center; 425 cursor: row-resize; 426 } 427 428 body.drawer-visible #main-status-bar * { 429 cursor: default; 430 } 431 432 body.drawer-visible #main-panels { 433 bottom: 24px; 434 } 435 436 .status-bar { 437 background-color: rgb(235, 235, 235); 438 background-image: url(Images/statusbarBackground.png); 439 background-repeat: repeat-x; 440 white-space: nowrap; 441 height: 23px; 442 overflow: hidden; 443 z-index: 12; 444 } 445 446 .status-bar > div { 447 display: inline-block; 448 vertical-align: top; 449 } 450 451 .status-bar-item { 452 display: inline-block; 453 height: 24px; 454 padding: 0; 455 margin-left: -1px; 456 margin-right: 0; 457 vertical-align: top; 458 border: 0 transparent none; 459 background-color: transparent; 460 } 461 462 .status-bar-item:active { 463 position: relative; 464 z-index: 200; 465 } 466 467 .glyph { 468 position: absolute; 469 top: 0; 470 left: 0; 471 right: 0; 472 bottom: 0; 473 background-color: rgba(0, 0, 0, 0.75); 474 z-index: 1; 475 } 476 477 .glyph.shadow { 478 top: 1px; 479 background-color: white !important; 480 z-index: 0; 481 } 482 483 button.status-bar-item { 484 position: relative; 485 width: 32px; 486 background-image: url(Images/statusbarButtons.png); 487 background-position: 0 0; 488 } 489 490 button.status-bar-item:active { 491 background-position: 32px 0 !important; 492 } 493 494 button.status-bar-item .glyph.shadow { 495 background-color: rgba(255, 255, 255, 0.33) !important; 496 } 497 498 button.status-bar-item.toggled-on .glyph { 499 background-color: rgb(66, 129, 235); 500 } 501 502 button.status-bar-item:disabled { 503 opacity: 0.5; 504 background-position: 0 0 !important; 505 } 506 507 select.status-bar-item { 508 min-width: 48px; 509 border-width: 0 17px 0 2px; 510 padding: 0 2px 0 6px; 511 font-weight: bold; 512 color: rgb(48, 48, 48); 513 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; 514 -webkit-border-image: url(Images/statusbarMenuButton.png) 0 17 0 2; 515 -webkit-border-radius: 0; 516 -webkit-appearance: none; 517 } 518 519 select.status-bar-item:active { 520 color: black; 521 -webkit-border-image: url(Images/statusbarMenuButtonSelected.png) 0 17 0 2; 522 } 523 524 #dock-status-bar-item .glyph { 525 -webkit-mask-image: url(Images/undockButtonGlyph.png); 526 } 527 528 body.detached #dock-status-bar-item .glyph { 529 -webkit-mask-image: url(Images/dockButtonGlyph.png); 530 } 531 532 body.port-qt #dock-status-bar-item { 533 display: none 534 } 535 536 #console-status-bar-item .glyph { 537 -webkit-mask-image: url(Images/consoleButtonGlyph.png); 538 } 539 540 .clear-status-bar-item .glyph { 541 -webkit-mask-image: url(Images/clearConsoleButtonGlyph.png); 542 } 543 544 #counters { 545 position: absolute; 546 right: 16px; 547 top: 0; 548 cursor: pointer; 549 padding: 6px 2px 6px 0px; 550 font-size: 10px; 551 height: 19px; 552 } 553 554 #error-warning-count { 555 display: inline; 556 } 557 558 #error-warning-count:hover { 559 border-bottom: 1px solid rgb(96, 96, 96); 560 } 561 562 #error-count::before { 563 content: url(Images/errorIcon.png); 564 width: 10px; 565 height: 10px; 566 vertical-align: -1px; 567 margin-right: 2px; 568 } 569 570 #error-count + #warning-count { 571 margin-left: 6px; 572 } 573 574 #warning-count::before { 575 content: url(Images/warningIcon.png); 576 width: 10px; 577 height: 10px; 578 vertical-align: -1px; 579 margin-right: 2px; 580 } 581 582 #drawer { 583 display: none; 584 position: absolute; 585 bottom: 0; 586 left: 0; 587 right: 0; 588 height: 200px; 589 background-color: white; 590 background-image: url(Images/statusbarBottomBackground.png); 591 background-repeat: repeat-x; 592 background-position: bottom; 593 } 594 595 body.drawer-visible #drawer { 596 display: block; 597 } 598 599 #drawer-status-bar { 600 position: absolute; 601 bottom: 0; 602 left: 0; 603 right: 0; 604 background: none; 605 } 606 607 .monospace { 608 font-size: 10px !important; 609 font-family: monospace; 610 } 611 612 body.platform-mac .monospace, body.platform-mac .source-code { 613 font-family: Monaco, monospace; 614 } 615 616 /* Keep .platform-mac to make the rule more specific than the general one above. */ 617 body.platform-mac.platform-mac-snowleopard .monospace, 618 body.platform-mac.platform-mac-snowleopard .source-code { 619 font-size: 11px !important; 620 font-family: Menlo, monospace; 621 } 622 623 body.platform-windows .monospace, body.platform-windows .source-code { 624 font-size: 12px !important; 625 font-family: Consolas, Lucida Console, monospace; 626 } 627 628 body.platform-linux .monospace, body.platform-linux .source-code { 629 font-size: 11px !important; 630 font-family: dejavu sans mono, monospace; 631 } 632 633 #console-messages { 634 position: absolute; 635 z-index: 0; 636 top: 0; 637 left: 0; 638 right: 0; 639 bottom: 23px; 640 padding: 2px 0; 641 overflow-y: overlay; 642 word-wrap: break-word; 643 -webkit-user-select: text; 644 -webkit-text-size-adjust: auto; 645 } 646 647 #console-prompt { 648 position: relative; 649 padding: 1px 22px 1px 24px; 650 min-height: 16px; 651 white-space: pre-wrap; 652 -webkit-user-modify: read-write-plaintext-only; 653 } 654 655 #console-prompt::before { 656 background-image: url(Images/userInputIcon.png); 657 } 658 659 .console-user-command-result.console-log-level::before { 660 background-image: url(Images/userInputResultIcon.png); 661 } 662 663 .console-message, .console-user-command { 664 position: relative; 665 border-bottom: 1px solid rgb(240, 240, 240); 666 padding: 1px 22px 1px 24px; 667 min-height: 16px; 668 } 669 670 .console-adjacent-user-command-result { 671 border-bottom: none; 672 } 673 674 .console-adjacent-user-command-result + .console-user-command-result.console-log-level::before { 675 background-image: none; 676 } 677 678 .console-message::before, .console-user-command::before, #console-prompt::before, .console-group-title::before { 679 position: absolute; 680 display: block; 681 content: ""; 682 left: 7px; 683 top: 0.8em; 684 width: 10px; 685 height: 10px; 686 margin-top: -5px; 687 -webkit-user-select: none; 688 } 689 690 .console-message .bubble { 691 display: inline-block; 692 height: 14px; 693 background-color: rgb(128, 151, 189); 694 vertical-align: middle; 695 white-space: nowrap; 696 padding: 1px 4px; 697 margin-top: -2px; 698 margin-right: 4px; 699 text-align: left; 700 font-size: 11px; 701 line-height: normal; 702 font-family: Helvetica, Arial, sans-serif; 703 font-weight: bold; 704 text-shadow: none; 705 color: white; 706 -webkit-border-radius: 7px; 707 } 708 709 .console-message-text { 710 white-space: pre-wrap; 711 } 712 713 .repeated-message { 714 padding-left: 6px; 715 } 716 717 .repeated-message.console-error-level::before, .repeated-message.console-warning-level:before, .repeated-message.console-debug-level:before { 718 visibility: hidden; 719 } 720 721 .console-group .console-group > .console-group-messages { 722 margin-left: 16px; 723 } 724 725 .console-group-title { 726 font-weight: bold; 727 } 728 729 .console-group-title::before { 730 background-image: url(Images/disclosureTriangleSmallDown.png); 731 top: 0.6em; 732 width: 11px; 733 height: 12px; 734 } 735 736 .console-group.collapsed .console-group-title::before { 737 background-image: url(Images/disclosureTriangleSmallRight.png); 738 } 739 740 .console-group.collapsed > .console-group-messages { 741 display: none; 742 } 743 744 .console-error-level .console-message-text { 745 color: red; 746 } 747 748 .console-debug-level .console-message-text { 749 color: blue; 750 } 751 752 .console-debug-level::before { 753 background-image: url(Images/searchSmallBrightBlue.png); 754 } 755 756 .console-error-level::before { 757 background-image: url(Images/errorIcon.png); 758 } 759 760 .console-warning-level::before { 761 background-image: url(Images/warningIcon.png); 762 } 763 764 .console-user-command .console-message { 765 margin-left: -24px; 766 padding-right: 0; 767 border-bottom: none; 768 } 769 770 .console-user-command::before { 771 background-image: url(Images/userInputPreviousIcon.png); 772 } 773 774 .console-user-command > .console-message-text { 775 color: rgb(0, 128, 255); 776 } 777 778 #console-messages a { 779 color: rgb(33%, 33%, 33%); 780 cursor: pointer; 781 } 782 783 #console-messages a:hover { 784 color: rgb(15%, 15%, 15%); 785 } 786 787 .console-message-url { 788 float: right; 789 margin-left: 4px; 790 } 791 792 .console-group-messages .section { 793 margin: 0 0 0 12px !important; 794 } 795 796 .console-group-messages .section .header { 797 padding: 0 8px 0 0; 798 background-image: none; 799 border: none; 800 min-height: 0; 801 } 802 803 .console-group-messages .section .header::before { 804 position: absolute; 805 top: 1px; 806 left: 1px; 807 width: 8px; 808 height: 8px; 809 content: url(Images/treeRightTriangleBlack.png); 810 } 811 812 .console-group-messages .section.expanded .header::before { 813 content: url(Images/treeDownTriangleBlack.png); 814 } 815 816 .console-group-messages .section .header .title { 817 color: black; 818 font-weight: normal; 819 } 820 821 .console-group-messages .section .properties li .info { 822 padding-top: 0; 823 padding-bottom: 0; 824 color: rgb(60%, 60%, 60%); 825 } 826 827 .console-group-messages .outline-disclosure { 828 padding-left: 0; 829 } 830 831 .console-group-messages .outline-disclosure > ol { 832 padding: 0 0 0 12px !important; 833 } 834 835 .console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol { 836 font-size: inherit; 837 line-height: 12px; 838 } 839 840 .console-group-messages .outline-disclosure.single-node li { 841 padding-left: 2px; 842 } 843 844 .console-group-messages .outline-disclosure li .selection { 845 margin-left: -6px; 846 margin-right: -6px; 847 } 848 849 .console-group-messages .add-attribute { 850 display: none; 851 } 852 853 .console-formatted-object, .console-formatted-node { 854 position: relative; 855 display: inline-block; 856 vertical-align: top; 857 } 858 859 .console-formatted-object .section, .console-formatted-node .section { 860 position: static; 861 } 862 863 .console-formatted-object .properties, .console-formatted-node .properties { 864 padding-left: 0 !important; 865 } 866 867 .console-formatted-number { 868 color: rgb(28, 0, 207); 869 } 870 871 .console-formatted-string, .console-formatted-regexp { 872 color: rgb(196, 26, 22); 873 white-space: pre; 874 } 875 876 .console-formatted-null, .console-formatted-undefined { 877 color: rgb(128, 128, 128); 878 } 879 880 .error-message { 881 color: red; 882 } 883 884 .auto-complete-text, .editing .auto-complete-text { 885 color: rgb(128, 128, 128) !important; 886 -webkit-user-select: none; 887 -webkit-user-modify: read-only; 888 } 889 890 .panel { 891 display: none; 892 overflow: hidden; 893 position: absolute; 894 top: 0; 895 left: 0; 896 right: 0; 897 bottom: 0; 898 } 899 900 .panel.visible { 901 display: block; 902 } 903 904 .webkit-line-gutter-backdrop { 905 /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */ 906 width: 31px; 907 background-color: rgb(240, 240, 240); 908 border-right: 1px solid rgb(187, 187, 187); 909 position: absolute; 910 z-index: -1; 911 left: 0; 912 top: 0; 913 height: 100% 914 } 915 916 .resource-view { 917 display: none; 918 position: absolute; 919 top: 0; 920 right: 0; 921 left: 0; 922 bottom: 0; 923 overflow: auto; 924 } 925 926 .resource-view.visible { 927 display: block; 928 } 929 930 .resource-view.font { 931 font-size: 60px; 932 white-space: pre-wrap; 933 word-wrap: break-word; 934 text-align: center; 935 padding: 15px; 936 } 937 938 .resource-view.image > .image { 939 padding: 20px 20px 10px 20px; 940 text-align: center; 941 } 942 943 .resource-view.image > .info { 944 padding-bottom: 10px; 945 font-size: 11px; 946 -webkit-user-select: text; 947 } 948 949 .resource-view.image img.resource-image-view { 950 max-width: 100%; 951 max-height: 1000px; 952 background-image: url(Images/checker.png); 953 -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); 954 -webkit-user-select: text; 955 -webkit-user-drag: auto; 956 } 957 958 .resource-url { 959 vertical-align: middle; 960 } 961 962 .resource-status-image { 963 margin-top: -3px; 964 vertical-align: middle; 965 } 966 967 .resource-view.image .title { 968 text-align: center; 969 font-size: 13px; 970 } 971 972 .resource-view.image .infoList { 973 margin: 0; 974 } 975 976 .resource-view.image .infoList dt { 977 font-weight: bold; 978 display: inline-block; 979 width: 50%; 980 text-align: right; 981 color: rgb(76, 76, 76); 982 } 983 984 .resource-view.image .infoList dd { 985 display: inline-block; 986 padding-left: 8px; 987 width: 50%; 988 text-align: left; 989 margin: 0; 990 } 991 992 .resource-view.image .infoList dd::after { 993 white-space: pre; 994 content: "\A"; 995 } 996 997 .resource-timing-row { 998 position: relative; 999 height: 12px; 1000 } 1001 1002 .resource-timing-bar { 1003 position: absolute; 1004 background-color: red; 1005 border-left: 1px solid red; 1006 opacity: 0.4; 1007 } 1008 1009 .resource-timing-bar-title { 1010 position: absolute; 1011 } 1012 1013 #elements-content { 1014 display: block; 1015 overflow: auto; 1016 padding: 0; 1017 position: absolute; 1018 top: 0; 1019 left: 0; 1020 right: 325px; 1021 bottom: 0; 1022 } 1023 1024 #elements-content.nowrap { 1025 white-space: nowrap; 1026 } 1027 1028 #elements-content > ol { 1029 display: inline-block; 1030 } 1031 1032 #elements-sidebar { 1033 position: absolute; 1034 top: 0; 1035 right: 0; 1036 bottom: 0; 1037 width: 325px; 1038 border-left: 1px solid rgb(64%, 64%, 64%); 1039 cursor: default; 1040 overflow: auto; 1041 } 1042 1043 .crumbs { 1044 display: inline-block; 1045 font-size: 11px; 1046 line-height: 19px; 1047 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; 1048 color: rgb(20, 20, 20); 1049 margin-left: -1px; 1050 padding-right: 12px; 1051 } 1052 1053 .crumbs .crumb { 1054 height: 24px; 1055 border-width: 0 12px 0 2px; 1056 -webkit-border-image: url(Images/segment.png) 0 12 0 2; 1057 margin-right: -12px; 1058 padding-left: 18px; 1059 padding-right: 2px; 1060 white-space: nowrap; 1061 line-height: 23px; 1062 float: right; 1063 } 1064 1065 .crumbs .crumb.collapsed > * { 1066 display: none; 1067 } 1068 1069 .crumbs .crumb.collapsed::before { 1070 content: "\2026"; 1071 font-weight: bold; 1072 } 1073 1074 .crumbs .crumb.compact .extra { 1075 display: none; 1076 } 1077 1078 .crumbs .crumb.dimmed { 1079 color: rgba(0, 0, 0, 0.45); 1080 } 1081 1082 .crumbs .crumb.start { 1083 padding-left: 7px; 1084 } 1085 1086 .crumbs .crumb.end { 1087 border-width: 0 2px 0 2px; 1088 padding-right: 6px; 1089 -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 2; 1090 } 1091 1092 .crumbs .crumb.selected { 1093 -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2; 1094 color: black; 1095 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 1096 } 1097 1098 .crumbs .crumb.selected:hover { 1099 -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2; 1100 } 1101 1102 .crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover { 1103 -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 2; 1104 } 1105 1106 .crumbs .crumb:hover { 1107 -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2; 1108 color: black; 1109 } 1110 1111 .crumbs .crumb.dimmed:hover { 1112 -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2; 1113 color: rgba(0, 0, 0, 0.75); 1114 } 1115 1116 .crumbs .crumb.end:hover { 1117 -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 2; 1118 } 1119 1120 .outline-disclosure li.hovered:not(.selected) .selection { 1121 display: block; 1122 left: 3px; 1123 right: 3px; 1124 background-color: rgba(56, 121, 217, 0.1); 1125 -webkit-border-radius: 5px; 1126 } 1127 1128 .outline-disclosure li.highlighted .highlight { 1129 background-color: rgb(255, 230, 179); 1130 -webkit-border-radius: 4px; 1131 padding-bottom: 2px; 1132 margin-bottom: -2px; 1133 } 1134 1135 .outline-disclosure li.selected.highlighted .highlight { 1136 background-color: transparent; 1137 padding-bottom: 0; 1138 margin-bottom: 0; 1139 } 1140 1141 .outline-disclosure li .selection { 1142 display: none; 1143 position: absolute; 1144 left: 0; 1145 right: 0; 1146 height: 15px; 1147 z-index: -1; 1148 } 1149 1150 .outline-disclosure li.selected .selection { 1151 display: block; 1152 background-color: rgb(212, 212, 212); 1153 } 1154 1155 .outline-disclosure ol:focus li.selected .selection { 1156 background-color: rgb(56, 121, 217); 1157 } 1158 1159 .outline-disclosure { 1160 font-size: 11px; 1161 } 1162 1163 .outline-disclosure > ol { 1164 position: relative; 1165 padding: 2px 6px !important; 1166 margin: 0; 1167 color: black; 1168 cursor: default; 1169 min-width: 100%; 1170 } 1171 1172 .outline-disclosure, .outline-disclosure ol { 1173 list-style-type: none; 1174 -webkit-padding-start: 12px; 1175 margin: 0; 1176 } 1177 1178 .source-code { 1179 font-family: monospace; 1180 font-size: 10px !important; 1181 white-space: pre-wrap; 1182 } 1183 1184 .outline-disclosure li { 1185 padding: 0 0 0 14px; 1186 margin-top: 1px; 1187 margin-bottom: 1px; 1188 word-wrap: break-word; 1189 text-indent: -2px; 1190 } 1191 1192 .resources .outline-disclosure li { 1193 text-indent: -1px; 1194 } 1195 1196 .outline-disclosure ol:focus li.selected { 1197 color: white; 1198 } 1199 1200 .outline-disclosure ol:focus li.selected * { 1201 color: inherit; 1202 } 1203 1204 .outline-disclosure li.parent { 1205 text-indent: -12px 1206 } 1207 1208 .outline-disclosure li .webkit-html-tag.close { 1209 margin-left: -12px; 1210 } 1211 1212 .outline-disclosure li.parent::before { 1213 content: url(Images/treeRightTriangleBlack.png); 1214 float: left; 1215 width: 8px; 1216 height: 8px; 1217 margin-top: 1px; 1218 padding-right: 2px; 1219 } 1220 1221 .outline-disclosure li.parent::before { 1222 content: url(Images/treeRightTriangleBlack.png); 1223 } 1224 1225 .outline-disclosure ol:focus li.parent.selected::before { 1226 content: url(Images/treeRightTriangleWhite.png); 1227 } 1228 1229 .outline-disclosure li.parent.expanded::before { 1230 content: url(Images/treeDownTriangleBlack.png); 1231 } 1232 1233 .outline-disclosure ol:focus li.parent.expanded.selected::before { 1234 content: url(Images/treeDownTriangleWhite.png); 1235 } 1236 1237 .outline-disclosure ol.children { 1238 display: none; 1239 } 1240 1241 .outline-disclosure ol.children.expanded { 1242 display: block; 1243 } 1244 1245 .add-attribute { 1246 margin-left: 1px; 1247 margin-right: 1px; 1248 white-space: nowrap; 1249 } 1250 1251 .placard { 1252 position: relative; 1253 margin-top: 1px; 1254 padding: 3px 8px 4px 18px; 1255 min-height: 18px; 1256 white-space: nowrap; 1257 } 1258 1259 .placard:nth-of-type(2n) { 1260 background-color: rgb(234, 243, 255); 1261 } 1262 1263 .placard.selected { 1264 border-top: 1px solid rgb(145, 160, 192); 1265 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177))); 1266 -webkit-background-origin: padding; 1267 -webkit-background-clip: padding; 1268 } 1269 1270 :focus .placard.selected { 1271 border-top: 1px solid rgb(68, 128, 200); 1272 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170))); 1273 } 1274 1275 body.inactive .placard.selected { 1276 border-top: 1px solid rgb(151, 151, 151); 1277 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138))); 1278 } 1279 1280 .placard .title { 1281 color: black; 1282 font-weight: normal; 1283 word-wrap: break-word; 1284 white-space: normal; 1285 } 1286 1287 .placard.selected .title { 1288 color: white; 1289 font-weight: bold; 1290 } 1291 1292 .placard .subtitle { 1293 float: right; 1294 font-size: 10px; 1295 margin-left: 5px; 1296 max-width: 55%; 1297 color: rgba(0, 0, 0, 0.7); 1298 text-overflow: ellipsis; 1299 overflow: hidden; 1300 } 1301 1302 .placard.selected .subtitle { 1303 color: rgba(255, 255, 255, 0.7); 1304 } 1305 1306 .placard .subtitle a { 1307 color: inherit; 1308 } 1309 1310 .section { 1311 position: relative; 1312 margin-top: 1px; 1313 } 1314 1315 .watch-expressions-buttons-container { 1316 text-align: center; 1317 } 1318 1319 .events-pane .section:not(:nth-of-type(1)) { 1320 border-top: 1px solid rgb(191, 191, 191); 1321 } 1322 1323 .event-bar:first-child { 1324 margin-top: 1px; 1325 } 1326 1327 .section .header { 1328 color: black; 1329 padding: 0 8px 0 18px; 1330 min-height: 18px; 1331 white-space: nowrap; 1332 -webkit-background-origin: padding; 1333 -webkit-background-clip: padding; 1334 } 1335 1336 .section .header::before { 1337 position: absolute; 1338 top: 2px; 1339 left: 7px; 1340 width: 8px; 1341 height: 8px; 1342 content: url(Images/treeRightTriangleBlack.png); 1343 opacity: 0.8; 1344 } 1345 1346 .section.expanded .header::before { 1347 content: url(Images/treeDownTriangleBlack.png); 1348 } 1349 1350 .section .header .title, .event-bar .header .title { 1351 font-weight: normal; 1352 word-wrap: break-word; 1353 white-space: normal; 1354 line-height: 18px; 1355 } 1356 1357 .section .header .title.blank-title { 1358 font-style: italic; 1359 } 1360 1361 .section .header label, .event-bar .header label { 1362 display: none; 1363 } 1364 1365 .section.expanded .header label, .event-bar.expanded .header label { 1366 display: inline; 1367 } 1368 1369 .section .header .subtitle, .event-bar .header .subtitle { 1370 float: right; 1371 margin-left: 5px; 1372 max-width: 55%; 1373 text-overflow: ellipsis; 1374 overflow: hidden; 1375 } 1376 1377 .section .header .subtitle a { 1378 color: inherit; 1379 } 1380 1381 .section .properties, .event-bar .event-properties { 1382 display: none; 1383 } 1384 1385 .section.expanded .properties, .event-bar.expanded .event-properties { 1386 display: block; 1387 padding-left: 16px; 1388 } 1389 1390 .section.no-affect .properties li { 1391 opacity: 0.5; 1392 } 1393 1394 .section.no-affect .properties li.editing { 1395 opacity: 1.0; 1396 } 1397 1398 .properties-tree { 1399 margin: 0; 1400 padding: 0 6px 2px; 1401 list-style: none; 1402 min-height: 18px; 1403 } 1404 1405 .properties-tree li { 1406 margin-left: 12px; 1407 white-space: nowrap; 1408 text-overflow: ellipsis; 1409 overflow: hidden; 1410 -webkit-user-select: text; 1411 cursor: auto; 1412 } 1413 1414 .properties-tree li.parent { 1415 margin-left: 1px; 1416 } 1417 1418 .properties-tree li.parent::before { 1419 content: url(Images/treeRightTriangleBlack.png); 1420 opacity: 0.75; 1421 float: left; 1422 width: 8px; 1423 height: 8px; 1424 margin-top: 0; 1425 padding-right: 3px; 1426 -webkit-user-select: none; 1427 cursor: default; 1428 } 1429 1430 .properties-tree li.parent.expanded::before { 1431 content: url(Images/treeDownTriangleBlack.png); 1432 margin-top: 1px; 1433 } 1434 1435 .properties-tree li .info { 1436 padding-top: 4px; 1437 padding-bottom: 3px; 1438 } 1439 1440 .properties-tree ol { 1441 display: none; 1442 margin: 0; 1443 -webkit-padding-start: 12px; 1444 list-style: none; 1445 } 1446 1447 .properties-tree ol.expanded { 1448 display: block; 1449 } 1450 1451 .event-listener-breakpoints .event-category { 1452 font-size: 11px; 1453 font-weight: bold; 1454 color: rgb(96, 96, 96); 1455 padding-top: 2px; 1456 } 1457 1458 .event-listener-breakpoints.properties-tree .children li { 1459 margin-left: 12px; 1460 height: 16px; 1461 } 1462 1463 .event-listener-breakpoints .checkbox-elem { 1464 font-size: 10px; 1465 float: left; 1466 top: -2px; 1467 position: relative; 1468 left: -1px; 1469 } 1470 1471 .section .event-bars { 1472 display: none; 1473 } 1474 1475 .section.expanded .event-bars { 1476 display: block; 1477 } 1478 1479 .event-bar { 1480 position: relative; 1481 margin-left: 10px; 1482 } 1483 1484 .event-bars .event-bar .header { 1485 padding: 0 8px 0 18px; 1486 min-height: 16px; 1487 opacity: 1.0; 1488 white-space: nowrap; 1489 -webkit-background-origin: padding; 1490 -webkit-background-clip: padding; 1491 } 1492 1493 .event-bars .event-bar .header .title { 1494 font-weight: normal; 1495 color: black; 1496 text-shadow: white 0 1px 0; 1497 } 1498 1499 .event-bars .event-bar .header .subtitle { 1500 color: rgba(90, 90, 90, 0.75); 1501 } 1502 1503 .event-bars .event-bar .header::before { 1504 position: absolute; 1505 top: 2px; 1506 left: 7px; 1507 width: 8px; 1508 height: 8px; 1509 opacity: 0.75; 1510 content: url(Images/treeRightTriangleBlack.png); 1511 } 1512 1513 .event-bars .event-bar.expanded .header::before { 1514 content: url(Images/treeDownTriangleBlack.png); 1515 } 1516 1517 .editing { 1518 -webkit-user-select: text; 1519 -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; 1520 outline: 1px solid rgb(66%, 66%, 66%) !important; 1521 background-color: white; 1522 -webkit-user-modify: read-write-plaintext-only; 1523 text-overflow: clip !important; 1524 padding-left: 2px; 1525 margin-left: -2px; 1526 padding-right: 2px; 1527 margin-right: -2px; 1528 margin-bottom: -1px; 1529 padding-bottom: 1px; 1530 opacity: 1.0 !important; 1531 } 1532 1533 .editing, .editing * { 1534 color: black !important; 1535 text-decoration: none !important; 1536 } 1537 1538 .child-editing { 1539 color: black !important; 1540 text-decoration: none !important; 1541 overflow: visible !important; 1542 } 1543 1544 .editing br { 1545 display: none; 1546 } 1547 1548 .elements-tree-editor { 1549 -webkit-user-select: text; 1550 -webkit-user-modify: read-write-plaintext-only; 1551 } 1552 1553 .section .properties li.editing { 1554 margin-left: 10px; 1555 text-overflow: clip; 1556 } 1557 1558 li.editing .swatch, li.editing .enabled-button, li.editing-sub-part .delete-button { 1559 display: none !important; 1560 } 1561 1562 .watch-expressions > li.editing-sub-part .name { 1563 display: block; 1564 width: 100%; 1565 } 1566 1567 .watch-expressions > li.editing-sub-part .value, .watch-expressions > li.editing-sub-part .separator { 1568 display: none; 1569 } 1570 1571 .watch-expressions-error-level { 1572 color: red; 1573 } 1574 1575 .section .properties li.editing-sub-part { 1576 padding: 3px 6px 8px 18px; 1577 margin: -3px -6px -8px -6px; 1578 text-overflow: clip; 1579 } 1580 1581 /* FIXME: need a better icon (comment in bug 27514) */ 1582 .section .properties .delete-button { 1583 width: 10px; 1584 height: 10px; 1585 background-image: url(Images/errorIcon.png); 1586 background-position: 0 0; 1587 background-color: transparent; 1588 background-repeat: no-repeat; 1589 border: 0 none transparent; 1590 } 1591 1592 .section .properties .name, .event-properties .name { 1593 color: rgb(136, 19, 145); 1594 } 1595 1596 .section .properties .value.dimmed { 1597 color: rgb(100, 100, 100); 1598 } 1599 1600 .section .properties .value.error { 1601 color: red; 1602 } 1603 1604 .section .properties .number, .event-properties .number { 1605 color: blue; 1606 } 1607 1608 .section .properties .keyword, .event-properties .keyword { 1609 color: rgb(136, 19, 79); 1610 } 1611 1612 .section .properties .color, .event-properties .color { 1613 color: rgb(118, 15, 21); 1614 } 1615 1616 .swatch { 1617 display: inline-block; 1618 vertical-align: baseline; 1619 margin-left: 1px; 1620 margin-right: 2px; 1621 margin-bottom: -1px; 1622 width: 1em; 1623 height: 1em; 1624 border: 1px solid rgba(128, 128, 128, 0.6); 1625 } 1626 1627 .swatch:hover { 1628 border: 1px solid rgba(64, 64, 64, 0.8); 1629 } 1630 1631 .pane:not(.expanded) + .pane, .pane:first-of-type { 1632 margin-top: -1px; 1633 } 1634 1635 .pane > .title { 1636 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209))); 1637 height: 20px; 1638 padding: 0 5px; 1639 border-top: 1px solid rgb(189, 189, 189); 1640 border-bottom: 1px solid rgb(189, 189, 189); 1641 font-weight: bold; 1642 font-size: 12px; 1643 line-height: 18px; 1644 color: rgb(110, 110, 110); 1645 text-shadow: white 0 1px 0; 1646 -webkit-background-origin: padding; 1647 -webkit-background-clip: padding; 1648 } 1649 1650 .pane > .title:active { 1651 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(231, 231, 231)), color-stop(0.05, rgb(231, 231, 231)), color-stop(0.05, rgb(207, 207, 207)), to(rgb(186, 186, 186))); 1652 border-top: 1px solid rgb(178, 178, 178); 1653 border-bottom: 1px solid rgb(178, 178, 178); 1654 } 1655 1656 .pane > .title::before { 1657 content: url(Images/disclosureTriangleSmallRightBlack.png); 1658 float: left; 1659 width: 11px; 1660 height: 12px; 1661 margin-right: 2px; 1662 margin-top: 1px; 1663 } 1664 1665 .pane.expanded > .title::before { 1666 content: url(Images/disclosureTriangleSmallDownBlack.png); 1667 } 1668 1669 .pane > .title > select { 1670 float: right; 1671 width: 23px; 1672 height: 17px; 1673 color: transparent; 1674 background-color: transparent; 1675 border: none; 1676 background-image: url(Images/paneSettingsButtons.png); 1677 background-repeat: no-repeat; 1678 margin: 1px 0 0 0; 1679 padding: 0; 1680 -webkit-border-radius: 0; 1681 -webkit-appearance: none; 1682 } 1683 1684 .pane > .title > select:hover { 1685 background-position: -23px 0px; 1686 } 1687 1688 .pane > .title > select:active { 1689 background-position: -46px 0px; 1690 } 1691 1692 .pane > .title > select > option, .pane > .title > select > hr { 1693 color: black; 1694 } 1695 1696 .pane > .title > button.add { 1697 float: right; 1698 width: 23px; 1699 height: 17px; 1700 color: transparent; 1701 background-color: transparent; 1702 border: none; 1703 background-image: url(Images/paneAddButtons.png); 1704 background-repeat: no-repeat; 1705 margin: 1px 0 0 0; 1706 padding: 0; 1707 -webkit-border-radius: 0; 1708 -webkit-appearance: none; 1709 } 1710 1711 .pane > .title > button.add:hover { 1712 background-position: -23px 0px; 1713 } 1714 1715 .pane > .title > button.add:active { 1716 background-position: -46px 0px; 1717 } 1718 1719 .pane > .body { 1720 position: relative; 1721 display: none; 1722 overflow-y: auto; 1723 overflow-x: hidden; 1724 } 1725 1726 .pane > .body .info { 1727 text-align: center; 1728 font-style: italic; 1729 font-size: 10px; 1730 padding: 6px; 1731 color: black; 1732 } 1733 1734 .pane > .body .placard + .info { 1735 border-top: 1px solid rgb(189, 189, 189); 1736 background-color: rgb(255, 255, 194); 1737 } 1738 1739 .pane.expanded > .body, .pane.expanded > .growbar { 1740 display: block; 1741 } 1742 1743 .pane > .body .breakpoint-condition { 1744 display: block; 1745 margin-top: 4px; 1746 margin-bottom: 4px; 1747 margin-left: 25px; 1748 margin-right: 10px; 1749 } 1750 1751 .pane.expanded:nth-last-of-type(1) { 1752 border-bottom: 1px solid rgb(189, 189, 189); 1753 } 1754 1755 .pane > .growbar { 1756 display: none; 1757 background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png); 1758 background-repeat: no-repeat, repeat-x; 1759 background-position: center center, bottom; 1760 height: 5px; 1761 } 1762 1763 .sidebar-pane-subtitle { 1764 position: absolute; 1765 right: 0; 1766 font-weight: normal; 1767 } 1768 1769 body.platform-windows .sidebar-pane-subtitle { 1770 padding-top: 1px; 1771 } 1772 1773 .sidebar-pane-subtitle input, .section .header input[type=checkbox] { 1774 font-size: inherit; 1775 hight: 1em; 1776 width: 1em; 1777 margin-left: 0; 1778 margin-top: 0; 1779 margin-bottom: 0.25em; 1780 vertical-align: bottom; 1781 } 1782 1783 .metrics { 1784 padding: 8px; 1785 font-size: 10px; 1786 text-align: center; 1787 white-space: nowrap; 1788 } 1789 1790 .metrics .label { 1791 position: absolute; 1792 margin-top: -10px; 1793 font-size: 9px; 1794 color: grey; 1795 background-color: white; 1796 margin-left: 3px; 1797 padding-left: 2px; 1798 padding-right: 2px; 1799 } 1800 1801 .metrics .position { 1802 border: 1px rgb(66%, 66%, 66%) dotted; 1803 display: inline-block; 1804 text-align: center; 1805 padding: 3px; 1806 margin: 3px; 1807 } 1808 1809 .metrics .margin { 1810 border: 1px dashed; 1811 display: inline-block; 1812 text-align: center; 1813 vertical-align: middle; 1814 padding: 3px; 1815 margin: 3px; 1816 } 1817 1818 .metrics .border { 1819 border: 1px black solid; 1820 display: inline-block; 1821 text-align: center; 1822 vertical-align: middle; 1823 padding: 3px; 1824 margin: 3px; 1825 } 1826 1827 .metrics .padding { 1828 border: 1px grey dashed; 1829 display: inline-block; 1830 text-align: center; 1831 vertical-align: middle; 1832 padding: 3px; 1833 margin: 3px; 1834 } 1835 1836 .metrics .content { 1837 position: static; 1838 border: 1px grey solid; 1839 display: inline-block; 1840 text-align: center; 1841 vertical-align: middle; 1842 padding: 3px; 1843 margin: 3px; 1844 min-width: 80px; 1845 text-align: center; 1846 overflow: visible; 1847 } 1848 1849 .metrics .content span { 1850 display: inline-block; 1851 } 1852 1853 .metrics .editing { 1854 position: relative; 1855 z-index: 100; 1856 } 1857 1858 .metrics .left { 1859 display: inline-block; 1860 vertical-align: middle; 1861 } 1862 1863 .metrics .right { 1864 display: inline-block; 1865 vertical-align: middle; 1866 } 1867 1868 .metrics .top { 1869 display: inline-block; 1870 } 1871 1872 .metrics .bottom { 1873 display: inline-block; 1874 } 1875 1876 .sidebar { 1877 position: absolute; 1878 top: 0; 1879 bottom: 0; 1880 left: 0; 1881 width: 200px; 1882 overflow-y: auto; 1883 overflow-x: hidden; 1884 background-color: rgb(214, 221, 229); 1885 border-right: 1px solid rgb(64%, 64%, 64%); 1886 } 1887 1888 body.inactive .sidebar { 1889 background-color: rgb(232, 232, 232); 1890 } 1891 1892 .frame-storage-tree-item .icon { 1893 content: url(Images/frame.png); 1894 } 1895 1896 .database-storage-tree-item .icon { 1897 content: url(Images/database.png); 1898 } 1899 1900 .database-table-storage-tree-item .icon { 1901 content: url(Images/databaseTable.png); 1902 } 1903 1904 .domstorage-storage-tree-item.local-storage .icon { 1905 content: url(Images/localStorage.png); 1906 } 1907 1908 .domstorage-storage-tree-item.session-storage .icon { 1909 content: url(Images/sessionStorage.png); 1910 } 1911 1912 .cookie-storage-tree-item .icon { 1913 content: url(Images/cookie.png); 1914 } 1915 1916 .application-cache-storage-tree-item .icon { 1917 content: url(Images/applicationCache.png); 1918 } 1919 1920 /* FIXME: Make separate png for file-system */ 1921 .file-system-storage-tree-item .icon { 1922 content: url(Images/applicationCache.png); 1923 } 1924 1925 #storage-views { 1926 position: absolute; 1927 top: 0; 1928 right: 0; 1929 left: 200px; 1930 bottom: 0; 1931 } 1932 1933 .resources.panel .sidebar { 1934 padding-left: 0; 1935 z-index: 10; 1936 } 1937 1938 .resources.panel .sidebar li { 1939 height: 17px; 1940 white-space: nowrap; 1941 text-indent: 0; 1942 margin-left: -2px; 1943 } 1944 1945 .resources.panel .sidebar li.parent { 1946 text-indent: 0; 1947 margin-left: -12px; 1948 } 1949 1950 .resources.panel .sidebar li.selected { 1951 color: white; 1952 text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0; 1953 font-weight: bold; 1954 } 1955 1956 .resources.panel .sidebar li.selected .selection { 1957 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177))); 1958 border-top: 1px solid #979797; 1959 height: 17px; 1960 } 1961 1962 .resources.panel .sidebar :focus li.selected .selection { 1963 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170))); 1964 border-top: 1px solid rgb(68, 128, 200); 1965 } 1966 1967 body.inactive .resources.panel .sidebar li.selected .selection { 1968 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138))); 1969 border-top: 1px solid rgb(151, 151, 151); 1970 } 1971 1972 .resources.panel .sidebar .icon { 1973 width: 16px; 1974 height: 16px; 1975 float: left; 1976 } 1977 1978 .resources.panel .base-storage-tree-element-title { 1979 overflow: hidden; 1980 position: relative; 1981 text-overflow: ellipsis; 1982 padding-left: 2px; 1983 top: 1px; 1984 } 1985 1986 li.selected .base-storage-tree-element-subtitle { 1987 color: white; 1988 } 1989 1990 .base-storage-tree-element-subtitle { 1991 padding-left: 2px; 1992 color: rgb(80, 80, 80); 1993 text-shadow: none; 1994 } 1995 1996 .resources.panel .status { 1997 float: right; 1998 height: 16px; 1999 margin-top: 1px; 2000 margin-left: 4px; 2001 line-height: 1em; 2002 } 2003 2004 .resources.panel li .status .bubble { 2005 height: 13px; 2006 padding-top: 0; 2007 } 2008 2009 .storage-view { 2010 display: none; 2011 overflow: hidden; 2012 position: absolute; 2013 top: 0; 2014 left: 0; 2015 right: 0; 2016 bottom: 0; 2017 } 2018 2019 .storage-view.visible { 2020 display: block; 2021 } 2022 2023 .storage-view { 2024 overflow: hidden; 2025 } 2026 2027 .storage-view .data-grid { 2028 border: none; 2029 height: 100%; 2030 } 2031 2032 .storage-empty-view, .storage-view .storage-table-error { 2033 position: absolute; 2034 top: 0; 2035 bottom: 25%; 2036 left: 0; 2037 right: 0; 2038 font-size: 24px; 2039 color: rgb(75%, 75%, 75%); 2040 margin-top: auto; 2041 margin-bottom: auto; 2042 height: 50px; 2043 line-height: 26px; 2044 text-align: center; 2045 font-weight: bold; 2046 padding: 10px; 2047 white-space: pre-wrap; 2048 } 2049 2050 .storage-view .storage-table-error { 2051 color: rgb(66%, 33%, 33%); 2052 } 2053 2054 .data-grid { 2055 position: relative; 2056 border: 1px solid #aaa; 2057 } 2058 2059 .data-grid .highlight { 2060 background-color: rgb(255, 230, 179); 2061 } 2062 2063 .data-grid tr.selected .highlight { 2064 background-color: transparent; 2065 } 2066 2067 .data-grid table { 2068 table-layout: fixed; 2069 border-spacing: 0; 2070 border-collapse: collapse; 2071 width: 100%; 2072 font-size: 10px; 2073 font-family: Lucida Grande, sans-serif; 2074 } 2075 2076 .data-grid .data-container { 2077 position: absolute; 2078 top: 16px; 2079 bottom: 0; 2080 left: 0; 2081 right: 0; 2082 padding-right: 14px; 2083 overflow-x: hidden; 2084 overflow-y: overlay; 2085 } 2086 2087 .data-grid.inline .data-container { 2088 position: static; 2089 } 2090 2091 .data-grid th { 2092 text-align: left; 2093 background-image: url(Images/glossyHeader.png); 2094 background-repeat: repeat-x; 2095 border-right: 1px solid rgb(179, 179, 179); 2096 border-bottom: 1px solid rgb(179, 179, 179); 2097 height: 15px; 2098 font-weight: normal; 2099 vertical-align: middle; 2100 padding: 0 4px; 2101 white-space: nowrap; 2102 } 2103 2104 .data-grid th.corner { 2105 width: 15px; 2106 border-right: 0 none transparent; 2107 } 2108 2109 .data-grid tr.filler { 2110 display: table-row !important; 2111 height: auto !important; 2112 } 2113 2114 .data-grid tr.filler td { 2115 height: auto !important; 2116 padding: 0 !important; 2117 } 2118 2119 .data-grid table.data { 2120 position: absolute; 2121 left: 0; 2122 top: 0; 2123 right: 16px; 2124 bottom: 0; 2125 height: 100%; 2126 border-top: 0 none transparent; 2127 background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, white), color-stop(0.5, rgb(234, 243, 255)), to(rgb(234, 243, 255))); 2128 -webkit-background-size: 1px 32px; 2129 } 2130 2131 .data-grid.inline table.data { 2132 position: static; 2133 } 2134 2135 .data-grid table.data tr { 2136 display: none; 2137 } 2138 2139 .data-grid table.data tr.revealed { 2140 display: table-row; 2141 } 2142 2143 .data-grid td { 2144 vertical-align: top; 2145 height: 12px; 2146 line-height: 12px; 2147 padding: 2px 4px; 2148 white-space: nowrap; 2149 border-right: 1px solid #aaa; 2150 -webkit-user-select: text; 2151 } 2152 2153 .data-grid td > div, .data-grid th > div { 2154 white-space: nowrap; 2155 text-overflow: ellipsis; 2156 overflow: hidden; 2157 } 2158 2159 .data-grid .centered div { 2160 text-align: center; 2161 } 2162 2163 .data-grid .right div { 2164 text-align: right; 2165 } 2166 2167 .data-grid th.sortable div { 2168 position: relative; 2169 } 2170 2171 .data-grid th.sortable:active { 2172 background-image: url(Images/glossyHeaderPressed.png); 2173 } 2174 2175 .data-grid th.sort-ascending, .data-grid th.sort-descending { 2176 border-right: 1px solid rgb(107, 140, 196); 2177 border-bottom: 1px solid rgb(107, 140, 196); 2178 background-image: url(Images/glossyHeaderSelected.png); 2179 background-repeat: repeat-x; 2180 } 2181 2182 .data-grid th.sortable.sort-ascending:active, .data-grid th.sortable.sort-descending:active { 2183 background-image: url(Images/glossyHeaderSelectedPressed.png); 2184 } 2185 2186 .data-grid th.sort-ascending > div::after { 2187 position: absolute; 2188 top: 0; 2189 bottom: 0; 2190 right: 0; 2191 height: 12px; 2192 margin-bottom: auto; 2193 margin-top: auto; 2194 width: 8px; 2195 content: url(Images/treeUpTriangleBlack.png); 2196 } 2197 2198 .data-grid th.sort-descending > div::after { 2199 position: absolute; 2200 top: 0; 2201 bottom: 0; 2202 right: 0; 2203 height: 8px; 2204 margin-bottom: auto; 2205 margin-top: auto; 2206 width: 8px; 2207 content: url(Images/treeDownTriangleBlack.png); 2208 } 2209 2210 .data-grid button { 2211 line-height: 19px; 2212 } 2213 2214 body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending { 2215 background-image: url(Images/glossyHeader.png); 2216 border-right: 1px solid rgb(179, 179, 179); 2217 border-bottom: 1px solid rgb(179, 179, 179); 2218 } 2219 2220 .data-grid tr.parent td.disclosure::before { 2221 float: left; 2222 content: url(Images/treeRightTriangleBlack.png); 2223 width: 8px; 2224 height: 8px; 2225 margin-right: 2px; 2226 -webkit-user-select: none; 2227 } 2228 2229 .data-grid tr.expanded td.disclosure::before { 2230 content: url(Images/treeDownTriangleBlack.png); 2231 width: 8px; 2232 height: 8px; 2233 margin-top: 1px; 2234 } 2235 2236 .data-grid tr.selected { 2237 background-color: rgb(212, 212, 212); 2238 color: inherit; 2239 } 2240 2241 .data-grid:focus tr.selected { 2242 background-color: rgb(56, 121, 217); 2243 color: white; 2244 } 2245 2246 .data-grid:focus tr.parent.selected td.disclosure::before { 2247 content: url(Images/treeRightTriangleWhite.png); 2248 } 2249 2250 .data-grid:focus tr.expanded.selected td.disclosure::before { 2251 content: url(Images/treeDownTriangleWhite.png); 2252 } 2253 2254 .data-grid tr:not(.parent) td.disclosure { 2255 text-indent: 10px; 2256 } 2257 2258 .data-grid-resizer { 2259 position: absolute; 2260 top: 0; 2261 bottom: 0; 2262 width: 5px; 2263 z-index: 500; 2264 cursor: col-resize; 2265 } 2266 2267 .storage-view.query { 2268 padding: 2px 0; 2269 overflow-y: overlay; 2270 overflow-x: hidden; 2271 -webkit-text-size-adjust: auto; 2272 } 2273 2274 .database-query-prompt { 2275 position: relative; 2276 padding: 1px 22px 1px 24px; 2277 min-height: 16px; 2278 white-space: pre-wrap; 2279 -webkit-user-modify: read-write-plaintext-only; 2280 -webkit-user-select: text; 2281 } 2282 2283 .database-user-query::before, .database-query-prompt::before, .database-query-result::before { 2284 position: absolute; 2285 display: block; 2286 content: ""; 2287 left: 7px; 2288 top: 0.8em; 2289 width: 10px; 2290 height: 10px; 2291 margin-top: -5px; 2292 -webkit-user-select: none; 2293 } 2294 2295 .database-query-prompt::before { 2296 background-image: url(Images/userInputIcon.png); 2297 } 2298 2299 .database-user-query { 2300 position: relative; 2301 border-bottom: 1px solid rgb(245, 245, 245); 2302 padding: 1px 22px 1px 24px; 2303 min-height: 16px; 2304 } 2305 2306 .database-user-query::before { 2307 background-image: url(Images/userInputPreviousIcon.png); 2308 } 2309 2310 .database-query-text { 2311 color: rgb(0, 128, 255); 2312 -webkit-user-select: text; 2313 } 2314 2315 .database-query-result { 2316 position: relative; 2317 padding: 1px 22px 1px 24px; 2318 min-height: 16px; 2319 margin-left: -24px; 2320 padding-right: 0; 2321 } 2322 2323 .database-query-result.error { 2324 color: red; 2325 -webkit-user-select: text; 2326 } 2327 2328 .database-query-result.error::before { 2329 background-image: url(Images/errorIcon.png); 2330 } 2331 2332 .panel-enabler-view { 2333 z-index: 1000; 2334 position: absolute; 2335 top: 0; 2336 left: 0; 2337 right: 0; 2338 bottom: 0; 2339 background-color: white; 2340 font-size: 13px; 2341 text-align: center; 2342 overflow-x: hidden; 2343 overflow-y: overlay; 2344 display: none; 2345 } 2346 2347 .panel-enabler-view.visible { 2348 display: block; 2349 } 2350 2351 .panel-enabler-view .panel-enabler-view-content { 2352 position: absolute; 2353 top: 0; 2354 left: 0; 2355 right: 0; 2356 bottom: 0; 2357 max-height: 390px; 2358 margin: auto; 2359 white-space: nowrap; 2360 } 2361 2362 .panel-enabler-view h1 { 2363 color: rgb(110, 116, 128); 2364 font-size: 16px; 2365 line-height: 20px; 2366 font-weight: normal; 2367 margin-top: 0; 2368 } 2369 2370 .panel-enabler-disclaimer { 2371 font-size: 10px; 2372 color: rgb(110, 116, 128); 2373 margin-bottom: 12px; 2374 margin-left: 20px; 2375 } 2376 2377 .panel-enabler-disclaimer:empty { 2378 display: none; 2379 } 2380 2381 .panel-enabler-view img, div.welcome-instructions-aligner { 2382 height: 100%; 2383 min-height: 200px; 2384 max-width: 100%; 2385 top: 0; 2386 bottom: 0; 2387 padding: 20px 0 20px 20px; 2388 margin: auto; 2389 vertical-align: middle; 2390 } 2391 2392 .panel-enabler-view img.hidden { 2393 display: initial !important; 2394 width: 0; 2395 } 2396 2397 .panel-enabler-view form { 2398 display: inline-block; 2399 vertical-align: middle; 2400 width: 330px; 2401 margin: 0; 2402 padding: 15px; 2403 white-space: normal; 2404 } 2405 2406 .panel-enabler-view label { 2407 position: relative; 2408 display: block; 2409 text-align: left; 2410 word-break: break-word; 2411 margin: 0 0 5px 20px; 2412 } 2413 2414 .panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes { 2415 color: rgb(6, 6, 6); 2416 background-color: transparent; 2417 border: 1px solid rgb(165, 165, 165); 2418 background-color: rgb(237, 237, 237); 2419 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223))); 2420 -webkit-border-radius: 12px; 2421 -webkit-appearance: none; 2422 } 2423 2424 .panel-enabler-view button:not(.status-bar-item) { 2425 font-size: 13px; 2426 margin: 6px 0 0 0; 2427 padding: 3px 20px; 2428 height: 24px; 2429 } 2430 2431 button.show-all-nodes { 2432 font-size: 13px; 2433 margin: 0; 2434 padding: 0 20px; 2435 height: 20px; 2436 } 2437 2438 .panel-enabler-view.welcome { 2439 z-index: auto; 2440 } 2441 2442 .panel-enabler-view.welcome div.welcome-instructions-aligner { 2443 display: inline-block; 2444 width: 0; 2445 } 2446 2447 .panel-enabler-view.welcome .instructions { 2448 display: inline-block; 2449 vertical-align: middle; 2450 margin: 0; 2451 white-space: normal; 2452 line-height: 175%; 2453 } 2454 2455 .panel-enabler-view.welcome .message { 2456 margin-bottom: 2ex; 2457 } 2458 2459 .panel-enabler-view.welcome button.status-bar-item { 2460 background-image: none; 2461 vertical-align: top; 2462 } 2463 2464 .pane button { 2465 margin: 6px 0 6px 3px; 2466 padding: 2px 9px; 2467 } 2468 2469 .panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active { 2470 background-color: rgb(215, 215, 215); 2471 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239))); 2472 } 2473 2474 body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled, body.inactive button.show-all-nodes { 2475 color: rgb(130, 130, 130); 2476 border-color: rgb(212, 212, 212); 2477 background-color: rgb(239, 239, 239); 2478 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235))); 2479 } 2480 2481 .panel-enabler-view input { 2482 height: 17px; 2483 width: 17px; 2484 border: 1px solid rgb(165, 165, 165); 2485 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223))); 2486 -webkit-border-radius: 8px; 2487 -webkit-appearance: none; 2488 vertical-align: middle; 2489 margin: 0 5px 5px 0; 2490 } 2491 2492 .panel-enabler-view input:active { 2493 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239))); 2494 } 2495 2496 .panel-enabler-view input:checked { 2497 background: url(Images/radioDot.png) center no-repeat, 2498 -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223))); 2499 } 2500 2501 .panel-enabler-view.scripts img { 2502 content: url(Images/scriptsSilhouette.png); 2503 } 2504 2505 .panel-enabler-view.profiles img { 2506 content: url(Images/profilesSilhouette.png); 2507 } 2508 2509 button.enable-toggle-status-bar-item .glyph { 2510 -webkit-mask-image: url(Images/enableOutlineButtonGlyph.png); 2511 } 2512 2513 button.enable-toggle-status-bar-item.toggled-on .glyph { 2514 -webkit-mask-image: url(Images/enableSolidButtonGlyph.png); 2515 } 2516 2517 .scripts-pause-on-exceptions-status-bar-item .glyph { 2518 -webkit-mask-image: url(Images/pauseOnExceptionButtonGlyph.png); 2519 } 2520 2521 .scripts-pause-on-exceptions-status-bar-item.toggled-all .glyph { 2522 background-color: rgb(66, 129, 235); 2523 } 2524 2525 .scripts-pause-on-exceptions-status-bar-item.toggled-uncaught .glyph { 2526 background-color: purple; 2527 } 2528 2529 #scripts-status-bar { 2530 position: absolute; 2531 top: -1px; 2532 left: 0; 2533 right: 0; 2534 height: 24px; 2535 } 2536 2537 #scripts-files { 2538 max-width: 250px; 2539 } 2540 2541 #scripts-files option.extension-script { 2542 color: rgb(70, 134, 240); 2543 } 2544 2545 #scripts-functions { 2546 max-width: 150px; 2547 } 2548 2549 #scripts-status-bar .status-bar-item img { 2550 margin-top: 2px; 2551 } 2552 2553 #scripts-back img { 2554 content: url(Images/back.png); 2555 } 2556 2557 #scripts-forward img { 2558 content: url(Images/forward.png); 2559 } 2560 2561 #scripts-pause img { 2562 content: url(Images/debuggerPause.png); 2563 } 2564 2565 #scripts-pause.paused img { 2566 content: url(Images/debuggerContinue.png); 2567 } 2568 2569 #scripts-step-over img { 2570 content: url(Images/debuggerStepOver.png); 2571 } 2572 2573 #scripts-step-into img { 2574 content: url(Images/debuggerStepInto.png); 2575 } 2576 2577 #scripts-step-out img { 2578 content: url(Images/debuggerStepOut.png); 2579 } 2580 2581 .toggle-breakpoints .glyph { 2582 -webkit-mask-image: url(Images/breakpointsActivateButtonGlyph.png); 2583 background-color: rgb(96, 96, 96) !important; 2584 } 2585 2586 .toggle-breakpoints.toggled-on .glyph { 2587 -webkit-mask-image: url(Images/breakpointsDeactivateButtonGlyph.png); 2588 } 2589 2590 #scripts-debugger-status { 2591 position: absolute; 2592 line-height: 24px; 2593 top: 0; 2594 right: 8px; 2595 } 2596 2597 #scripts-sidebar-resizer-widget { 2598 position: absolute; 2599 top: 0; 2600 bottom: 0; 2601 right: 225px; 2602 width: 16px; 2603 cursor: col-resize; 2604 background-image: url(Images/statusbarResizerHorizontal.png); 2605 background-repeat: no-repeat; 2606 background-position: center; 2607 } 2608 2609 #scripts-sidebar-buttons { 2610 position: absolute; 2611 right: 0; 2612 top: 0; 2613 bottom: 0; 2614 width: 225px; 2615 overflow: hidden; 2616 border-left: 1px solid rgb(64%, 64%, 64%); 2617 } 2618 2619 #script-resource-views { 2620 display: block; 2621 padding: 0; 2622 position: absolute; 2623 top: 23px; 2624 left: 0; 2625 right: 225px; 2626 bottom: 0; 2627 } 2628 2629 .script-view { 2630 display: none; 2631 overflow: hidden; 2632 position: absolute; 2633 top: 0; 2634 left: 0; 2635 right: 0; 2636 bottom: 0; 2637 } 2638 2639 .script-view.visible { 2640 display: block; 2641 } 2642 2643 #scripts-sidebar { 2644 position: absolute; 2645 top: 23px; 2646 right: 0; 2647 bottom: 0; 2648 width: 225px; 2649 border-left: 1px solid rgb(64%, 64%, 64%); 2650 cursor: default; 2651 overflow: auto; 2652 } 2653 2654 .resources-larger-resources-status-bar-item .glyph { 2655 -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png); 2656 } 2657 2658 #resources-filter, #console-filter.console-filter-top { 2659 background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217))); 2660 border-bottom: 1px solid rgb(64%, 64%, 64%); 2661 width: 100%; 2662 } 2663 2664 #console-messages.console-filter-top { 2665 margin-top: 23px; 2666 } 2667 2668 #console-filter { 2669 margin-top: 1px; 2670 } 2671 2672 .tabbed-pane { 2673 -webkit-box-orient: vertical; 2674 height: 100%; 2675 } 2676 2677 .tabbed-pane-content { 2678 -webkit-box-flex: 1; 2679 position: relative; 2680 } 2681 2682 .tabbed-pane-header { 2683 height: 23px; 2684 padding: 0 10px; 2685 border-bottom: 1px solid rgb(163, 163, 163); 2686 } 2687 2688 .tabbed-pane-header li { 2689 display: inline-block; 2690 margin-top: 2px; 2691 font-size: 11px; 2692 font-weight: bold; 2693 color: rgb(46, 46, 46); 2694 background: transparent; 2695 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 2696 vertical-align: middle; 2697 padding: 3px 7px 2px; 2698 height: 21px; 2699 border: 1px solid transparent; 2700 border-bottom: none; 2701 } 2702 2703 .tabbed-pane-header li.selected { 2704 background-color: white; 2705 border: 1px solid rgb(163, 163, 163); 2706 border-bottom: none; 2707 } 2708 2709 .scope-bar { 2710 height: 23px; 2711 padding: 2px 10px 0; 2712 overflow: hidden; 2713 } 2714 2715 .scope-bar li { 2716 display: inline-block; 2717 margin: 1px 2px 0 0; 2718 padding: 1px 7px 3px; 2719 font-size: 11px; 2720 line-height: 12px; 2721 font-weight: bold; 2722 color: rgb(46, 46, 46); 2723 background: transparent; 2724 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 2725 -webkit-border-radius: 8px; 2726 vertical-align: middle; 2727 } 2728 2729 .scope-bar-divider { 2730 margin: 1px 9px 0 8px; 2731 background-color: rgba(0, 0, 0, 0.4); 2732 height: 16px; 2733 width: 1px; 2734 vertical-align: middle; 2735 display: inline-block; 2736 } 2737 2738 .scope-bar li.selected, .scope-bar li:hover, .scope-bar li:active { 2739 color: white; 2740 text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0; 2741 } 2742 2743 .scope-bar li:hover { 2744 background: rgba(0, 0, 0, 0.2); 2745 } 2746 2747 .scope-bar li.selected { 2748 background: rgba(0, 0, 0, 0.3); 2749 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5); 2750 } 2751 2752 .scope-bar li:active { 2753 background: rgba(0, 0, 0, 0.5); 2754 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5); 2755 } 2756 2757 #resources-container { 2758 position: absolute; 2759 top: 23px; 2760 left: 0; 2761 bottom: 0; 2762 right: 0; 2763 border-right: 0 none transparent; 2764 overflow-y: auto; 2765 overflow-x: hidden; 2766 } 2767 2768 #resources-container.viewing-resource { 2769 right: auto; 2770 width: 200px; 2771 border-right: 1px solid rgb(64%, 64%, 64%); 2772 } 2773 2774 #resources-container.viewing-resource #resources-sidebar { 2775 width: 100%; 2776 border-right: 0 none transparent; 2777 } 2778 2779 #resources-sidebar { 2780 min-height: 100%; 2781 bottom: auto; 2782 overflow: visible; 2783 } 2784 2785 #resources-container-content { 2786 position: absolute; 2787 top: 0; 2788 right: 0; 2789 left: 200px; 2790 min-height: 100%; 2791 } 2792 2793 #resources-container.viewing-resource #resources-container-content { 2794 display: none; 2795 } 2796 2797 #resources-summary { 2798 position: absolute; 2799 padding-top: 20px; 2800 top: 0; 2801 left: 0; 2802 right: 0; 2803 height: 93px; 2804 margin-left: -1px; 2805 border-left: 1px solid rgb(102, 102, 102); 2806 background-color: rgb(101, 111, 130); 2807 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5))); 2808 background-repeat: repeat-x; 2809 background-position: bottom; 2810 text-align: center; 2811 text-shadow: black 0 1px 1px; 2812 white-space: nowrap; 2813 color: white; 2814 -webkit-background-size: 1px 6px; 2815 -webkit-background-origin: padding; 2816 -webkit-background-clip: padding; 2817 z-index: 400; 2818 } 2819 2820 .summary-graph-legend { 2821 margin-top: -10px; 2822 padding-left: 15px; 2823 } 2824 2825 .summary-graph-legend-item { 2826 display: inline-block; 2827 font-weight: bold; 2828 margin-right: 15px; 2829 vertical-align: top; 2830 } 2831 2832 .summary-graph-legend-item.total { 2833 margin-left: 10px; 2834 } 2835 2836 .summary-graph-legend-label { 2837 display: inline-block; 2838 text-align: left; 2839 } 2840 2841 .summary-graph-legend-header { 2842 font-size: 12px; 2843 } 2844 2845 .summary-graph-legend-value { 2846 font-size: 10px; 2847 } 2848 2849 .summary-graph-legend-swatch { 2850 vertical-align: top; 2851 margin-top: 1px; 2852 margin-right: 3px; 2853 } 2854 2855 .resources-dividers { 2856 position: absolute; 2857 left: 0; 2858 right: 0; 2859 height: 100%; 2860 top: 0; 2861 z-index: -100; 2862 } 2863 2864 .resources-event-dividers { 2865 position: absolute; 2866 left: 0; 2867 right: 5px; 2868 height: 100%; 2869 top: 0; 2870 z-index: 300; 2871 pointer-events: none; 2872 } 2873 2874 .timeline .resources-event-dividers { 2875 height: 19px; 2876 } 2877 2878 .resources-dividers-label-bar { 2879 position: absolute; 2880 top: 0; 2881 left: 0px; 2882 right: 0; 2883 background-color: rgba(255, 255, 255, 0.8); 2884 background-clip: padding; 2885 border-bottom: 1px solid rgba(0, 0, 0, 0.3); 2886 height: 20px; 2887 z-index: 200; 2888 } 2889 2890 .resources-divider { 2891 position: absolute; 2892 width: 1px; 2893 top: 0; 2894 bottom: 0; 2895 background-color: rgba(0, 0, 0, 0.1); 2896 } 2897 2898 .resources-event-divider-padding { 2899 position: absolute; 2900 width: 8px; 2901 top: 0; 2902 bottom: 0; 2903 pointer-events: auto; 2904 } 2905 2906 .resources-event-divider { 2907 position: absolute; 2908 width: 2px; 2909 top: 0; 2910 bottom: 0; 2911 z-index: 300; 2912 } 2913 2914 .resources-red-divider { 2915 background-color: rgba(255, 0, 0, 0.5); 2916 } 2917 2918 .resources-blue-divider { 2919 background-color: rgba(0, 0, 255, 0.5); 2920 } 2921 2922 .resources-orange-divider { 2923 background-color: rgba(255, 178, 23, 0.5); 2924 } 2925 2926 .resources-divider.last { 2927 background-color: transparent; 2928 } 2929 2930 .resources-divider-label { 2931 position: absolute; 2932 top: 4px; 2933 right: 3px; 2934 font-size: 9px; 2935 color: rgb(50%, 50%, 50%); 2936 white-space: nowrap; 2937 } 2938 2939 .memory-graph-label { 2940 position: absolute; 2941 top: 5px; 2942 left: 5px; 2943 font-size: 9px; 2944 color: rgb(50%, 50%, 50%); 2945 white-space: nowrap; 2946 } 2947 2948 .resources-graph-label { 2949 position: absolute; 2950 top: 0; 2951 bottom: 0; 2952 margin: auto -7px; 2953 height: 13px; 2954 line-height: 13px; 2955 font-size: 9px; 2956 color: rgba(0, 0, 0, 0.75); 2957 text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0; 2958 z-index: 150; 2959 overflow: hidden; 2960 text-align: center; 2961 font-weight: bold; 2962 opacity: 0; 2963 -webkit-transition: opacity 250ms ease-in-out; 2964 } 2965 2966 .resources-graph-side:hover .resources-graph-label { 2967 opacity: 1; 2968 } 2969 2970 .resources-graph-label:empty { 2971 display: none; 2972 } 2973 2974 .resources-graph-label.waiting { 2975 margin-right: 5px; 2976 } 2977 2978 .resources-graph-label.waiting-right { 2979 margin-left: 5px; 2980 } 2981 2982 .resources-graph-label.before { 2983 color: rgba(0, 0, 0, 0.7); 2984 text-shadow: none; 2985 text-align: right; 2986 margin-right: 2px; 2987 } 2988 2989 .resources-graph-label.before::after { 2990 padding-left: 2px; 2991 height: 6px; 2992 content: url(Images/graphLabelCalloutLeft.png); 2993 } 2994 2995 .resources-graph-label.after { 2996 color: rgba(0, 0, 0, 0.7); 2997 text-shadow: none; 2998 text-align: left; 2999 margin-left: 2px; 3000 } 3001 3002 .resources-graph-label.after::before { 3003 padding-right: 2px; 3004 height: 6px; 3005 content: url(Images/graphLabelCalloutRight.png); 3006 } 3007 3008 .resources-graph-bar { 3009 position: absolute; 3010 top: 0; 3011 bottom: 0; 3012 margin: auto -7px; 3013 border-width: 6px 7px; 3014 height: 13px; 3015 min-width: 14px; 3016 opacity: 0.65; 3017 -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7; 3018 } 3019 3020 .resources-category-documents, .resources-category-stylesheets, .resources-category-images, 3021 .resources-category-scripts, .resources-category-xhr, .resources-category-fonts, 3022 .resources-category-websockets, .resources-category-other { 3023 display: none; 3024 } 3025 3026 .filter-all .resources-category-documents, .filter-documents .resources-category-documents, 3027 .filter-all .resources-category-stylesheets, .filter-stylesheets .resources-category-stylesheets, 3028 .filter-all .resources-category-images, .filter-images .resources-category-images, 3029 .filter-all .resources-category-scripts, .filter-scripts .resources-category-scripts, 3030 .filter-all .resources-category-xhr, .filter-xhr .resources-category-xhr, 3031 .filter-all .resources-category-fonts, .filter-fonts .resources-category-fonts, 3032 .filter-all .resources-category-websockets, .filter-websockets .resources-category-websockets, 3033 .filter-all .resources-category-other, .filter-other .resources-category-other, 3034 .resource-sidebar-tree-item.selected { 3035 display: list-item; 3036 } 3037 3038 .console-warning-level, .console-error-level, .console-log-level { 3039 display: none; 3040 } 3041 3042 .filter-all .console-warning-level, .filter-warnings .console-warning-level, 3043 .filter-all .console-error-level, .filter-errors .console-error-level, 3044 .filter-all .console-log-level, .filter-logs .console-log-level { 3045 display: block; 3046 } 3047 3048 .console-user-command-result { 3049 display: block; 3050 } 3051 3052 .resources-graph-bar.waiting, .resources-graph-bar.waiting-right { 3053 opacity: 0.35; 3054 } 3055 3056 .resource-cached .resources-graph-bar { 3057 -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7; 3058 } 3059 3060 .resources-category-documents .resources-graph-bar { 3061 -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7; 3062 } 3063 3064 .resources-category-documents.resource-cached .resources-graph-bar { 3065 -webkit-border-image: url(Images/timelineHollowPillBlue.png) 6 7 6 7; 3066 } 3067 3068 .resources-category-stylesheets .resources-graph-bar { 3069 -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7; 3070 } 3071 3072 .resources-category-stylesheets.resource-cached .resources-graph-bar { 3073 -webkit-border-image: url(Images/timelineHollowPillGreen.png) 6 7 6 7; 3074 } 3075 3076 .resources-category-images .resources-graph-bar { 3077 -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7; 3078 } 3079 3080 .resources-category-images.resource-cached .resources-graph-bar { 3081 -webkit-border-image: url(Images/timelineHollowPillPurple.png) 6 7 6 7; 3082 } 3083 3084 .resources-category-fonts .resources-graph-bar { 3085 -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7; 3086 } 3087 3088 .resources-category-fonts.resource-cached .resources-graph-bar { 3089 -webkit-border-image: url(Images/timelineHollowPillRed.png) 6 7 6 7; 3090 } 3091 3092 .resources-category-scripts .resources-graph-bar { 3093 -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7; 3094 } 3095 3096 .resources-category-scripts.resource-cached .resources-graph-bar { 3097 -webkit-border-image: url(Images/timelineHollowPillOrange.png) 6 7 6 7; 3098 } 3099 3100 .resources-category-xhr .resources-graph-bar { 3101 -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7; 3102 } 3103 3104 .resources-category-xhr.resource-cached .resources-graph-bar { 3105 -webkit-border-image: url(Images/timelineHollowPillYellow.png) 6 7 6 7; 3106 } 3107 3108 /* FIXME: Create bar images for WebSocket. */ 3109 .resources-category-websockets .resources-graph-bar { 3110 -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7; 3111 } 3112 3113 .resources-category-websockets.resource-cached .resources-graph-bar { 3114 -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7; 3115 } 3116 3117 #resource-views { 3118 position: absolute; 3119 top: 23px; 3120 right: 0; 3121 left: 200px; 3122 bottom: 0; 3123 } 3124 3125 .source-view-frame { 3126 width: 100%; 3127 height: 100%; 3128 } 3129 3130 .sidebar-resizer-vertical { 3131 position: absolute; 3132 top: 0; 3133 bottom: 0; 3134 width: 5px; 3135 z-index: 500; 3136 cursor: col-resize; 3137 } 3138 3139 .resources .sidebar-resizer-vertical { 3140 top: 23px; 3141 } 3142 3143 .sidebar-tree, .sidebar-tree .children { 3144 position: relative; 3145 padding: 0; 3146 margin: 0; 3147 list-style: none; 3148 font-size: 11px; 3149 } 3150 3151 .sidebar-tree-section { 3152 position: relative; 3153 height: 18px; 3154 padding: 4px 10px 6px 10px; 3155 white-space: nowrap; 3156 margin-top: 1px; 3157 color: rgb(92, 110, 129); 3158 font-weight: bold; 3159 text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; 3160 } 3161 3162 .sidebar-tree-item { 3163 position: relative; 3164 height: 36px; 3165 padding: 0 5px 0 5px; 3166 white-space: nowrap; 3167 margin-top: 1px; 3168 line-height: 34px; 3169 border-top: 1px solid transparent; 3170 } 3171 3172 .sidebar-tree .children { 3173 display: none; 3174 } 3175 3176 .sidebar-tree .children.expanded { 3177 display: block; 3178 } 3179 3180 .sidebar-tree-section + .children > .sidebar-tree-item { 3181 padding-left: 10px !important; 3182 } 3183 3184 .sidebar-tree-section + .children.small > .sidebar-tree-item { 3185 padding-left: 17px !important; 3186 } 3187 3188 .sidebar-tree > .children > .sidebar-tree-item { 3189 padding-left: 37px; 3190 } 3191 3192 .sidebar-tree > .children > .children > .sidebar-tree-item { 3193 padding-left: 37px; 3194 } 3195 3196 .sidebar-tree.hide-disclosure-buttons > .children { 3197 display: none; 3198 } 3199 3200 .sidebar-tree > .children.hide-disclosure-buttons > .children { 3201 display: none; 3202 } 3203 3204 .sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon { 3205 margin-left: 16px; 3206 } 3207 3208 .sidebar-tree-item .disclosure-button { 3209 float: left; 3210 width: 16px; 3211 height: 100%; 3212 border: 0; 3213 background-color: transparent; 3214 background-image: url(Images/disclosureTriangleSmallRight.png); 3215 background-repeat: no-repeat; 3216 background-position: center; 3217 -webkit-apearance: none; 3218 } 3219 3220 .sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button { 3221 display: none; 3222 } 3223 3224 body.inactive .sidebar-tree-item .disclosure-button { 3225 background-image: url(Images/disclosureTriangleSmallRightBlack.png); 3226 } 3227 3228 body.inactive .sidebar-tree-item.expanded .disclosure-button { 3229 background-image: url(Images/disclosureTriangleSmallDownBlack.png); 3230 } 3231 3232 body.inactive .sidebar-tree-item .disclosure-button:active { 3233 background-image: url(Images/disclosureTriangleSmallRightDownBlack.png); 3234 } 3235 3236 .sidebar-tree-item.selected .disclosure-button { 3237 background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important; 3238 } 3239 3240 .sidebar-tree-item.expanded .disclosure-button { 3241 background-image: url(Images/disclosureTriangleSmallDown.png); 3242 } 3243 3244 .sidebar-tree-item.selected.expanded .disclosure-button { 3245 background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important; 3246 } 3247 3248 .sidebar-tree-item.selected .disclosure-button:active { 3249 background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important; 3250 } 3251 3252 .sidebar-tree-item .disclosure-button:active { 3253 background-image: url(Images/disclosureTriangleSmallRightDown.png); 3254 } 3255 3256 .sidebar-tree-item .icon { 3257 float: left; 3258 width: 32px; 3259 height: 32px; 3260 margin-top: 1px; 3261 margin-right: 3px; 3262 } 3263 3264 li .status { 3265 float: right; 3266 height: 16px; 3267 margin-top: 9px; 3268 margin-left: 4px; 3269 line-height: 1em; 3270 } 3271 3272 li .status:empty { 3273 display: none; 3274 } 3275 3276 li .status .bubble { 3277 display: inline-block; 3278 height: 14px; 3279 min-width: 16px; 3280 margin-top: 1px; 3281 background-color: rgb(128, 151, 189); 3282 vertical-align: middle; 3283 white-space: nowrap; 3284 padding: 1px 4px; 3285 text-align: center; 3286 font-size: 11px; 3287 line-height: normal; 3288 font-family: Helvetica, Arial, sans-serif; 3289 font-weight: bold; 3290 text-shadow: none; 3291 color: white; 3292 -webkit-border-radius: 7px; 3293 } 3294 3295 li .status .bubble:empty { 3296 display: none; 3297 } 3298 3299 li.selected .status .bubble { 3300 background-color: white !important; 3301 color: rgb(132, 154, 190) !important; 3302 } 3303 3304 :focus li.selected .status .bubble { 3305 color: rgb(36, 98, 172) !important; 3306 } 3307 3308 body.inactive li.selected .status .bubble { 3309 color: rgb(159, 159, 159) !important; 3310 } 3311 3312 .sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side { 3313 height: 20px; 3314 } 3315 3316 .sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon { 3317 width: 16px; 3318 height: 16px; 3319 } 3320 3321 .sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status { 3322 margin-top: 1px; 3323 } 3324 3325 .sidebar-tree-item.selected { 3326 color: white; 3327 border-top: 1px solid rgb(145, 160, 192); 3328 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177))); 3329 text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0; 3330 font-weight: bold; 3331 -webkit-background-origin: padding; 3332 -webkit-background-clip: padding; 3333 } 3334 3335 :focus .sidebar-tree-item.selected { 3336 border-top: 1px solid rgb(68, 128, 200); 3337 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170))); 3338 } 3339 3340 body.inactive .sidebar-tree-item.selected { 3341 border-top: 1px solid rgb(151, 151, 151); 3342 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138))); 3343 } 3344 3345 .sidebar-tree-item .titles { 3346 position: relative; 3347 top: 5px; 3348 line-height: 11px; 3349 padding-bottom: 1px; 3350 text-overflow: ellipsis; 3351 overflow: hidden; 3352 white-space: nowrap; 3353 } 3354 3355 .sidebar-tree-item .titles.no-subtitle { 3356 top: 10px; 3357 } 3358 3359 .sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles { 3360 top: 2px; 3361 line-height: normal; 3362 } 3363 3364 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after { 3365 content: "\A"; 3366 white-space: pre; 3367 } 3368 3369 .sidebar-tree-item .subtitle { 3370 font-size: 9px; 3371 color: rgba(0, 0, 0, 0.7); 3372 } 3373 3374 .sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle { 3375 display: none; 3376 } 3377 3378 .sidebar-tree-item.selected .subtitle { 3379 color: rgba(255, 255, 255, 0.9); 3380 } 3381 3382 #resources-graphs { 3383 position: absolute; 3384 left: 0; 3385 right: 0; 3386 max-height: 100%; 3387 top: 112px; 3388 } 3389 3390 .resources-graph-side { 3391 position: relative; 3392 height: 36px; 3393 padding: 0 5px; 3394 white-space: nowrap; 3395 margin-top: 1px; 3396 border-top: 1px solid transparent; 3397 overflow: hidden; 3398 } 3399 3400 .resources-graph-bar-area { 3401 position: absolute; 3402 top: 0; 3403 bottom: 0; 3404 right: 8px; 3405 left: 9px; 3406 } 3407 3408 #resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) { 3409 background-color: rgba(0, 0, 0, 0.05); 3410 } 3411 3412 #resources-container:not(.viewing-resource) .resources-graph-side:nth-of-type(2n) { 3413 background-color: rgba(0, 0, 0, 0.05); 3414 } 3415 3416 .resources-time-graph-sidebar-item .icon { 3417 content: url(Images/resourcesTimeGraphIcon.png); 3418 } 3419 3420 .resources-size-graph-sidebar-item .icon { 3421 content: url(Images/resourcesSizeGraphIcon.png); 3422 } 3423 3424 .resources-size-graph-sidebar-item .icon { 3425 content: url(Images/resourcesSizeGraphIcon.png); 3426 } 3427 3428 .resource-sidebar-tree-item .icon { 3429 content: url(Images/resourcePlainIcon.png); 3430 } 3431 3432 .children.small .resource-sidebar-tree-item .icon { 3433 content: url(Images/resourcePlainIconSmall.png); 3434 } 3435 3436 .resource-sidebar-tree-item.resources-category-documents .icon { 3437 content: url(Images/resourceDocumentIcon.png); 3438 } 3439 3440 .children.small .resource-sidebar-tree-item.resources-category-documents .icon { 3441 content: url(Images/resourceDocumentIconSmall.png); 3442 } 3443 3444 .resource-sidebar-tree-item.resources-category-stylesheets .icon { 3445 content: url(Images/resourceCSSIcon.png); 3446 } 3447 3448 .children.small .resource-sidebar-tree-item.resources-category-stylesheets .icon { 3449 content: url(Images/resourceDocumentIconSmall.png); 3450 } 3451 3452 .resource-sidebar-tree-item.resources-category-images .icon { 3453 position: relative; 3454 background-image: url(Images/resourcePlainIcon.png); 3455 background-repeat: no-repeat; 3456 content: ""; 3457 } 3458 3459 .resources-category-images .image-resource-icon-preview { 3460 position: absolute; 3461 margin: auto; 3462 top: 3px; 3463 bottom: 4px; 3464 left: 5px; 3465 right: 5px; 3466 max-width: 18px; 3467 max-height: 21px; 3468 min-width: 1px; 3469 min-height: 1px; 3470 } 3471 3472 .children.small .resource-sidebar-tree-item.resources-category-images .icon { 3473 background-image: url(Images/resourcePlainIconSmall.png); 3474 content: ""; 3475 } 3476 3477 .children.small .resources-category-images .image-resource-icon-preview { 3478 top: 2px; 3479 bottom: 1px; 3480 left: 3px; 3481 right: 3px; 3482 max-width: 8px; 3483 max-height: 11px; 3484 } 3485 3486 .resource-sidebar-tree-item.resources-category-fonts .icon { 3487 content: url(Images/resourcePlainIcon.png); 3488 } 3489 3490 .children.small .resource-sidebar-tree-item.resources-category-fonts .icon { 3491 content: url(Images/resourcePlainIconSmall.png); 3492 } 3493 3494 .resource-sidebar-tree-item.resources-category-scripts .icon { 3495 content: url(Images/resourceJSIcon.png); 3496 } 3497 3498 .children.small .resource-sidebar-tree-item.resources-category-scripts .icon { 3499 content: url(Images/resourceDocumentIconSmall.png); 3500 } 3501 3502 .resource-sidebar-tree-item.resources-category-xhr .icon { 3503 content: url(Images/resourcePlainIcon.png); 3504 } 3505 3506 .children.small .resource-sidebar-tree-item.resources-category-xhr .icon { 3507 content: url(Images/resourceDocumentIconSmall.png); 3508 } 3509 3510 .bubble.debug, .console-debug-level .bubble { 3511 background-color: rgb(0, 0, 255) !important; 3512 } 3513 3514 .bubble.warning, .console-warning-level .bubble { 3515 background-color: rgb(232, 164, 0) !important; 3516 } 3517 3518 .bubble.error, .console-error-level .bubble { 3519 background-color: rgb(216, 35, 35) !important; 3520 } 3521 3522 .bubble.search-matches { 3523 background-image: url(Images/searchSmallWhite.png); 3524 background-repeat: no-repeat; 3525 background-position: 3px 2px; 3526 padding-left: 13px !important; 3527 } 3528 3529 li.selected .bubble.search-matches { 3530 background-image: url(Images/searchSmallBlue.png); 3531 } 3532 3533 :focus li.selected .bubble.search-matches { 3534 background-image: url(Images/searchSmallBrightBlue.png); 3535 } 3536 3537 body.inactive li.selected .bubble.search-matches { 3538 background-image: url(Images/searchSmallGray.png); 3539 } 3540 3541 /* Timeline Style */ 3542 3543 #timeline-overview-panel { 3544 position: absolute; 3545 top: 0; 3546 left: 0; 3547 right: 0; 3548 height: 80px; 3549 } 3550 3551 #timeline-overview-panel .timeline-graph-bar { 3552 pointer-events: none; 3553 } 3554 3555 .timeline-sidebar-background { 3556 top: 90px; 3557 bottom: 0; 3558 } 3559 3560 .timeline .sidebar { 3561 overflow-y: hidden; 3562 z-index: 100; 3563 min-height: 100%; 3564 bottom: auto; 3565 } 3566 3567 #timeline-overview-separator { 3568 position: absolute; 3569 top: 80px; 3570 left: 0; 3571 right: 0; 3572 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213))); 3573 border-top: 1px solid rgb(140, 140, 140); 3574 border-bottom: 1px solid rgb(115, 115, 115); 3575 height: 10px; 3576 } 3577 3578 #timeline-overview-sidebar { 3579 position: absolute; 3580 width: 200px; 3581 top: 0px; 3582 bottom: 0px; 3583 left: 0px; 3584 padding-top: 2px; 3585 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209))); 3586 border-right: 1px solid rgb(163, 163, 163); 3587 } 3588 3589 #timeline-overview-grid { 3590 position: absolute; 3591 top: 0px; 3592 bottom: 0px; 3593 left: 200px; 3594 right: 0px; 3595 background-color: rgb(255, 255, 255); 3596 } 3597 3598 .timeline-window-selector { 3599 position: absolute; 3600 top: 0; 3601 bottom: 0; 3602 background-color: rgba(125, 173, 217, 0.5); 3603 z-index: 250; 3604 } 3605 3606 #timeline-overview-window { 3607 background-color: white; 3608 position: absolute; 3609 left: 0; 3610 right: 0; 3611 top: 0; 3612 bottom: 60px; 3613 z-index: 150; 3614 } 3615 3616 .timeline-overview-dividers-background { 3617 left: 0%; 3618 right: 0%; 3619 top: 0px; 3620 bottom: 60px; 3621 background-color: black; 3622 position: absolute; 3623 } 3624 3625 .timeline-overview-window-rulers { 3626 top: 0; 3627 bottom: 0; 3628 position: absolute; 3629 opacity: 0.2; 3630 border-right: 1px solid black; 3631 border-left: 1px solid black; 3632 z-index: 150; 3633 } 3634 3635 .timeline-window-resizer { 3636 position: absolute; 3637 top: 0px; 3638 bottom: 60px; 3639 width: 5px; 3640 margin-left: -3px; 3641 margin-right: -2px; 3642 background-color: rgb(153, 153, 153); 3643 z-index: 500; 3644 cursor: col-resize; 3645 -webkit-border-radius: 2px; 3646 -webkit-box-shadow: white 1px 0 0, white -1px 0 0, white 0 1px 0, white 0 -1px 0; 3647 } 3648 3649 #timeline-overview-grid #resources-graphs { 3650 position: absolute; 3651 top: 0; 3652 left: 0; 3653 right: 0; 3654 height: 80px; 3655 } 3656 3657 #timeline-container { 3658 position: absolute; 3659 top: 90px; 3660 left: 0; 3661 bottom: 0; 3662 right: 0; 3663 border-right: 0 none transparent; 3664 overflow-y: auto; 3665 overflow-x: hidden; 3666 } 3667 3668 .timeline-category-statusbar-item { 3669 height: 24px; 3670 line-height: 24px; 3671 padding-left: 6px; 3672 white-space: nowrap; 3673 text-overflow: ellipsis; 3674 overflow: hidden; 3675 font-weight: bold; 3676 } 3677 3678 .timeline-category-statusbar-item .timeline-category-checkbox { 3679 width: 10px; 3680 height: 11px; 3681 margin: 0 3px 0 5px; 3682 padding: 0; 3683 background-image: url(Images/timelineCheckmarks.png); 3684 background-repeat: no-repeat; 3685 background-position: 0 -66px; 3686 vertical-align: -1px; 3687 -webkit-appearance: none; 3688 } 3689 3690 .timeline-category-statusbar-item .timeline-category-checkbox:checked { 3691 background-position-x: -10px; 3692 } 3693 3694 .timeline-category-statusbar-item.timeline-category-loading .timeline-category-checkbox { 3695 background-position-y: 0; 3696 } 3697 3698 .timeline-category-statusbar-item.timeline-category-scripting .timeline-category-checkbox { 3699 background-position-y: -33px; 3700 } 3701 3702 .timeline-category-statusbar-item.timeline-category-rendering .timeline-category-checkbox { 3703 background-position-y: -11px; 3704 } 3705 3706 .timeline-tree-item { 3707 height: 18px; 3708 line-height: 15px; 3709 padding-right: 5px; 3710 padding-left: 10px; 3711 padding-top: 2px; 3712 white-space: nowrap; 3713 text-overflow: ellipsis; 3714 overflow: hidden; 3715 } 3716 3717 .timeline-expandable { 3718 position: absolute; 3719 border-left: 1px solid rgb(163, 163, 163); 3720 } 3721 3722 .timeline-expandable-left { 3723 position: absolute; 3724 top: 0; 3725 bottom: 0; 3726 left: 0; 3727 width: 3px; 3728 border-top: 1px solid rgb(163, 163, 163); 3729 border-bottom: 1px solid rgb(163, 163, 163); 3730 } 3731 3732 .timeline-expandable-collapsed { 3733 background-image: url(Images/disclosureTriangleSmallRightBlack.png); 3734 background-position-x: 1px; 3735 background-position-y: 2px; 3736 background-repeat: no-repeat; 3737 } 3738 3739 .timeline-expandable-expanded { 3740 background-image: url(Images/disclosureTriangleSmallDownBlack.png); 3741 background-position-x: 1px; 3742 background-position-y: 3px; 3743 background-repeat: no-repeat; 3744 } 3745 3746 .timeline-tree-item .type { 3747 padding-left: 14px; 3748 } 3749 3750 .timeline-tree-item .count { 3751 font-family: Helvetica, Arial, sans-serif; 3752 font-weight: bold; 3753 } 3754 3755 .timeline-tree-item .timeline-tree-icon { 3756 background-image: url(Images/timelineDots.png); 3757 margin-top: 2px; 3758 width: 12px; 3759 height: 12px; 3760 position: absolute; 3761 } 3762 3763 .timeline-tree-item.even { 3764 background-color: rgba(0, 0, 0, 0.05); 3765 } 3766 3767 .timeline-tree-item .data.dimmed { 3768 color: rgba(0, 0, 0, 0.7); 3769 } 3770 3771 #timeline-overview-timelines, 3772 #timeline-overview-memory { 3773 position: absolute; 3774 left: 0; 3775 right: 0; 3776 bottom: 0; 3777 top: 20px; 3778 z-index: 160; 3779 } 3780 3781 #timeline-overview-memory > canvas { 3782 position: absolute; 3783 left: 0; 3784 right: 0; 3785 bottom: 0; 3786 top: 5px; 3787 } 3788 3789 3790 #timeline-graphs { 3791 position: absolute; 3792 left: 0; 3793 right: 0; 3794 max-height: 100%; 3795 top: 19px; 3796 } 3797 3798 .timeline-graph-side { 3799 position: relative; 3800 height: 18px; 3801 padding: 0 5px; 3802 white-space: nowrap; 3803 margin-top: 0px; 3804 border-top: 1px solid transparent; 3805 overflow: hidden; 3806 pointer-events: none; 3807 } 3808 3809 .timeline-overview-graph-side { 3810 height: 20px; 3811 z-index: 170; 3812 pointer-events: none; 3813 } 3814 3815 .timeline-overview-graph-side .timeline-graph-bar { 3816 height: 13px; 3817 } 3818 3819 .timeline-graph-bar-area { 3820 position: absolute; 3821 top: 0; 3822 bottom: 0; 3823 right: 0; 3824 left: 3px; 3825 pointer-events: none; 3826 } 3827 3828 .timeline-graph-bar { 3829 position: absolute; 3830 top: 0; 3831 bottom: 0; 3832 margin: auto -2px; 3833 border-width: 4px 4px 5px; 3834 height: 9px; 3835 min-width: 5px; 3836 opacity: 0.8; 3837 -webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4; 3838 z-index: 180; 3839 pointer-events: visibleFill; 3840 } 3841 3842 .timeline-graph-bar.with-children { 3843 opacity: 0.2; 3844 } 3845 3846 .timeline-graph-bar.cpu { 3847 opacity: 0.6; 3848 } 3849 3850 .timeline-graph-side.even { 3851 background-color: rgba(0, 0, 0, 0.05); 3852 } 3853 3854 .timeline-category-loading .timeline-graph-bar { 3855 -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4; 3856 } 3857 3858 .timeline-category-scripting .timeline-graph-bar { 3859 -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4; 3860 } 3861 3862 .timeline-category-rendering .timeline-graph-bar { 3863 -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4; 3864 } 3865 3866 .timeline-aggregated-category { 3867 display: inline-block; 3868 height: 11px; 3869 margin-right: 2px; 3870 margin-left: 6px; 3871 position: relative; 3872 top: 2px; 3873 width: 10px; 3874 } 3875 3876 .timeline-loading { 3877 -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4; 3878 } 3879 3880 .timeline-scripting { 3881 -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4; 3882 } 3883 3884 .timeline-rendering { 3885 -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4; 3886 } 3887 3888 .popover .timeline-aggregated-category.timeline-loading { 3889 margin-left: 0px; 3890 } 3891 3892 .timeline-category-loading .timeline-tree-icon { 3893 background-position-y: 0px; 3894 } 3895 3896 .timeline-category-scripting .timeline-tree-icon { 3897 background-position-y: 48px; 3898 } 3899 3900 .timeline-category-rendering .timeline-tree-icon { 3901 background-position-y: 72px; 3902 } 3903 3904 .timeline-details { 3905 -webkit-user-select: text; 3906 vertical-align: top; 3907 } 3908 3909 .timeline-function-name { 3910 text-align: right; 3911 } 3912 3913 .timeline-stacktrace-title { 3914 padding-top: 4px; 3915 } 3916 3917 .timeline-details-row-title { 3918 font-weight: bold; 3919 text-align: right; 3920 white-space: nowrap; 3921 } 3922 3923 .timeline-details-row-data { 3924 white-space: nowrap; 3925 } 3926 3927 .timeline-details-title { 3928 border-bottom: 1px solid #B8B8B8; 3929 font-size: 11px; 3930 font-weight: bold; 3931 padding-bottom: 5px; 3932 padding-top: 0px; 3933 white-space: nowrap; 3934 } 3935 3936 .timeline-filter-status-bar-item .glyph { 3937 -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png); 3938 } 3939 3940 .timeline-filter-status-bar-item.toggled-on .glyph { 3941 background-color: rgb(66, 129, 235) !important; 3942 } 3943 3944 .garbage-collect-status-bar-item .glyph { 3945 -webkit-mask-image: url(Images/garbageCollectButtonGlyph.png); 3946 } 3947 3948 .timeline-records-counter, .storage-application-cache-status, .storage-application-cache-connectivity { 3949 font-size: 11px; 3950 text-shadow: white 0 1px 0; 3951 } 3952 3953 #main-status-bar > .timeline-records-counter { 3954 float: right; 3955 margin-top: 4px; 3956 margin-right: 25px; 3957 } 3958 3959 #counters > .timeline-records-counter { 3960 float: left; 3961 margin-top: -2px; 3962 } 3963 3964 .storage-application-cache-status-icon, .storage-application-cache-connectivity-icon { 3965 margin-bottom: -3px; 3966 margin-left: 5px; 3967 vertical-align: middle; 3968 } 3969 3970 .status-bar-divider { 3971 margin-left: 7px; 3972 border-right: 1px solid #CCC; 3973 } 3974 3975 .storage-application-cache-status, .storage-application-cache-connectivity { 3976 position: relative; 3977 top: 4px; 3978 } 3979 3980 /* Profiler Style */ 3981 3982 #profile-views { 3983 position: absolute; 3984 top: 0; 3985 right: 0; 3986 left: 200px; 3987 bottom: 0; 3988 } 3989 3990 .status-bar-items { 3991 position: absolute; 3992 top: 0; 3993 bottom: 0; 3994 left: 200px; 3995 overflow: hidden; 3996 border-left: 1px solid rgb(184, 184, 184); 3997 margin-left: -1px; 3998 } 3999 4000 .profile-sidebar-tree-item .icon { 4001 content: url(Images/profileIcon.png); 4002 } 4003 4004 .profile-sidebar-tree-item.small .icon { 4005 content: url(Images/profileSmallIcon.png); 4006 } 4007 4008 .profile-group-sidebar-tree-item .icon { 4009 content: url(Images/profileGroupIcon.png); 4010 } 4011 4012 .profile-view { 4013 display: none; 4014 overflow: hidden; 4015 position: absolute; 4016 top: 0; 4017 left: 0; 4018 right: 0; 4019 bottom: 0; 4020 } 4021 4022 .profile-view.visible { 4023 display: block; 4024 } 4025 4026 .profile-view .data-grid { 4027 border: none; 4028 height: 100%; 4029 } 4030 4031 .profile-view .data-grid th.average-column { 4032 text-align: center; 4033 } 4034 4035 .profile-view .data-grid td.average-column { 4036 text-align: right; 4037 } 4038 4039 .profile-view .data-grid th.self-column { 4040 text-align: center; 4041 } 4042 4043 .profile-view .data-grid td.self-column { 4044 text-align: right; 4045 } 4046 4047 .profile-view .data-grid th.total-column { 4048 text-align: center; 4049 } 4050 4051 .profile-view .data-grid td.total-column { 4052 text-align: right; 4053 } 4054 4055 .profile-view .data-grid .calls-column { 4056 text-align: center; 4057 } 4058 4059 .profile-node-file { 4060 float: right; 4061 color: gray; 4062 margin-top: -1px; 4063 } 4064 4065 .data-grid tr.selected .profile-node-file { 4066 color: rgb(33%, 33%, 33%); 4067 } 4068 4069 .data-grid:focus tr.selected .profile-node-file { 4070 color: white; 4071 } 4072 4073 button.enable-toggle-status-bar-item .glyph { 4074 } 4075 4076 .record-profile-status-bar-item .glyph { 4077 -webkit-mask-image: url(Images/recordButtonGlyph.png); 4078 } 4079 4080 .record-profile-status-bar-item.toggled-on .glyph { 4081 -webkit-mask-image: url(Images/recordToggledButtonGlyph.png); 4082 background-color: rgb(216, 0, 0) !important; 4083 } 4084 4085 /* FIXME: should have its own glyph. */ 4086 .heap-snapshot-status-bar-item .glyph { 4087 -webkit-mask-image: url(Images/focusButtonGlyph.png); 4088 } 4089 4090 .node-search-status-bar-item .glyph { 4091 -webkit-mask-image: url(Images/nodeSearchButtonGlyph.png); 4092 } 4093 4094 .percent-time-status-bar-item .glyph { 4095 -webkit-mask-image: url(Images/percentButtonGlyph.png); 4096 } 4097 4098 .focus-profile-node-status-bar-item .glyph { 4099 -webkit-mask-image: url(Images/focusButtonGlyph.png); 4100 } 4101 4102 .exclude-profile-node-status-bar-item .glyph { 4103 -webkit-mask-image: url(Images/excludeButtonGlyph.png); 4104 } 4105 4106 .reset-profile-status-bar-item .glyph { 4107 -webkit-mask-image: url(Images/reloadButtonGlyph.png); 4108 } 4109 4110 .delete-storage-status-bar-item .glyph { 4111 -webkit-mask-image: url(Images/excludeButtonGlyph.png); 4112 } 4113 4114 .refresh-storage-status-bar-item .glyph { 4115 -webkit-mask-image: url(Images/reloadButtonGlyph.png); 4116 } 4117 4118 ol.breakpoint-list { 4119 -webkit-padding-start: 0; 4120 list-style: none; 4121 margin: 0; 4122 } 4123 4124 .breakpoint-list li { 4125 white-space: nowrap; 4126 text-overflow: ellipsis; 4127 overflow: hidden; 4128 padding: 2px 0; 4129 color: black; 4130 } 4131 4132 .breakpoint-list li:hover { 4133 color: rgb(15%, 15%, 15%); 4134 } 4135 4136 .breakpoint-list .checkbox-elem { 4137 font-size: 10px; 4138 margin: 0 4px; 4139 vertical-align: top; 4140 position: relative; 4141 z-index: 1; 4142 } 4143 4144 .breakpoint-list .source-text { 4145 white-space: nowrap; 4146 text-overflow: ellipsis; 4147 overflow: hidden; 4148 margin: 2px 0 0px 20px; 4149 } 4150 4151 .pane .breakpoint-hit { 4152 background-color: rgb(255, 255, 194); 4153 } 4154 4155 li.breakpoint-hit .breakpoint-hit-marker { 4156 background-color: rgb(255, 255, 194); 4157 height: 18px; 4158 left: 0px; 4159 margin-top: -16px; 4160 position: absolute; 4161 right: 0px; 4162 z-index: -1; 4163 } 4164 4165 .webkit-html-js-node, .webkit-html-css-node { 4166 white-space: pre; 4167 } 4168 4169 .source-frame-breakpoint-condition { 4170 z-index: 30; 4171 padding: 4px; 4172 background-color: rgb(203, 226, 255); 4173 -webkit-border-radius: 7px; 4174 border: 2px solid rgb(169, 172, 203); 4175 width: 90%; 4176 } 4177 4178 .source-frame-breakpoint-message { 4179 background-color: transparent; 4180 font-family: Lucida Grande, sans-serif; 4181 font-weight: normal; 4182 font-size: 11px; 4183 text-align: left; 4184 text-shadow: none; 4185 color: rgb(85, 85, 85); 4186 cursor: default; 4187 margin: 0 0 2px 0; 4188 } 4189 4190 #source-frame-breakpoint-condition { 4191 margin: 0; 4192 border: 1px inset rgb(190, 190, 190) !important; 4193 width: 100%; 4194 box-shadow: none !important; 4195 outline: none !important; 4196 -webkit-user-modify: read-write; 4197 } 4198 4199 .source-frame-popover-title { 4200 text-overflow: ellipsis; 4201 overflow: hidden; 4202 white-space: nowrap; 4203 font-weight: bold; 4204 padding-left: 18px; 4205 } 4206 4207 .source-frame-popover-tree { 4208 border-top: 1px solid rgb(194, 194, 147); 4209 overflow: auto; 4210 position: absolute; 4211 top: 15px; 4212 bottom: 0; 4213 left: 0; 4214 right: 0; 4215 } 4216 4217 .source-frame-eval-expression { 4218 border: 1px solid rgb(163, 41, 34); 4219 margin: -1px; 4220 background-color: rgb(255, 255, 194); 4221 } 4222 4223 .styles-sidebar-separator { 4224 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209))); 4225 padding: 0 5px; 4226 border-top: 1px solid rgb(189, 189, 189); 4227 border-bottom: 1px solid rgb(189, 189, 189); 4228 color: rgb(110, 110, 110); 4229 text-shadow: white 0 1px 0; 4230 white-space: nowrap; 4231 text-overflow: ellipsis; 4232 overflow: hidden; 4233 font-size: 11px; 4234 } 4235 4236 .styles-selector { 4237 cursor: text; 4238 } 4239 4240 .workers-list { 4241 list-style: none; 4242 margin: 0; 4243 padding: 0; 4244 } 4245 4246 .workers-list > li { 4247 overflow: hidden; 4248 text-overflow: ellipsis; 4249 white-space: nowrap; 4250 margin-left: 1em; 4251 font-size: 12px; 4252 } 4253 4254 a.worker-item { 4255 color: rgb(33%, 33%, 33%); 4256 cursor: pointer; 4257 text-decoration: none; 4258 } 4259 4260 .styles-section { 4261 padding: 2px 2px 4px 4px; 4262 min-height: 18px; 4263 white-space: nowrap; 4264 -webkit-background-origin: padding; 4265 -webkit-background-clip: padding; 4266 -webkit-user-select: text; 4267 } 4268 4269 .styles-section:not(.first-styles-section) { 4270 border-top: 1px solid rgb(191, 191, 191); 4271 } 4272 4273 .styles-section.read-only { 4274 background-color: rgb(240, 240, 240); 4275 } 4276 4277 .styles-section .properties li.not-parsed-ok { 4278 margin-left: 0px; 4279 } 4280 4281 .styles-section .properties li.not-parsed-ok::before { 4282 content: url(Images/warningIcon.png); 4283 opacity: 0.75; 4284 float: left; 4285 width: 8px; 4286 height: 8px; 4287 margin-top: 0; 4288 padding-right: 5px; 4289 vertical-align: sub; 4290 -webkit-user-select: none; 4291 cursor: default; 4292 } 4293 4294 .styles-section .header { 4295 white-space: nowrap; 4296 -webkit-background-origin: padding; 4297 -webkit-background-clip: padding; 4298 } 4299 4300 .styles-section .header .title { 4301 word-wrap: break-word; 4302 white-space: normal; 4303 } 4304 4305 .styles-section .header .subtitle { 4306 color: rgb(85, 85, 85); 4307 float: right; 4308 margin-left: 5px; 4309 max-width: 65%; 4310 text-overflow: ellipsis; 4311 overflow: hidden; 4312 } 4313 4314 .styles-section .header .subtitle a { 4315 color: inherit; 4316 } 4317 4318 .styles-section .properties { 4319 display: none; 4320 margin: 0; 4321 padding: 2px 4px 0 8px; 4322 list-style: none; 4323 } 4324 4325 .styles-section.no-affect .properties li { 4326 opacity: 0.5; 4327 } 4328 4329 .styles-section.no-affect .properties li.editing { 4330 opacity: 1.0; 4331 } 4332 4333 .styles-section.expanded .properties { 4334 display: block; 4335 } 4336 4337 .styles-section .properties li { 4338 margin-left: 12px; 4339 white-space: nowrap; 4340 text-overflow: ellipsis; 4341 overflow: hidden; 4342 cursor: auto; 4343 } 4344 4345 .styles-section .properties li.parent { 4346 margin-left: 1px; 4347 } 4348 4349 .styles-section .properties ol { 4350 display: none; 4351 margin: 0; 4352 -webkit-padding-start: 12px; 4353 list-style: none; 4354 } 4355 4356 .styles-section .properties ol.expanded { 4357 display: block; 4358 } 4359 4360 .styles-section .properties li.parent::before { 4361 content: url(Images/treeRightTriangleBlack.png); 4362 opacity: 0.75; 4363 float: left; 4364 width: 8px; 4365 height: 8px; 4366 margin-top: 0; 4367 padding-right: 3px; 4368 -webkit-user-select: none; 4369 cursor: default; 4370 } 4371 4372 .styles-section .properties li.parent.expanded::before { 4373 content: url(Images/treeDownTriangleBlack.png); 4374 margin-top: 1px; 4375 } 4376 4377 .styles-section .properties li .info { 4378 padding-top: 4px; 4379 padding-bottom: 3px; 4380 } 4381 4382 .styles-section:hover .properties .enabled-button { 4383 display: block; 4384 } 4385 4386 .styles-section .properties li.disabled .enabled-button { 4387 display: block; 4388 } 4389 4390 .styles-section .properties .enabled-button { 4391 display: none; 4392 float: right; 4393 font-size: 10px; 4394 margin: 0 0 0 4px; 4395 vertical-align: top; 4396 position: relative; 4397 z-index: 1; 4398 } 4399 4400 .styles-section .properties .overloaded, .styles-section .properties .inactive, .styles-section .properties .disabled { 4401 text-decoration: line-through; 4402 } 4403 4404 .styles-section.computed-style .properties .disabled { 4405 text-decoration: none; 4406 opacity: 0.5; 4407 } 4408 4409 .styles-section .properties .implicit, .styles-section .properties .inherited { 4410 opacity: 0.5; 4411 } 4412 4413 4414 .body .styles-section .properties .inherited { 4415 display: none; 4416 } 4417 4418 .body.show-inherited .styles-section .properties .inherited { 4419 display: block; 4420 } 4421 4422 a.worker-item:hover { 4423 color: rgb(15%, 15%, 15%); 4424 } 4425 4426 .resource-content-unavailable { 4427 color: rgb(50%, 50%, 50%); 4428 font-style: italic; 4429 font-size: 14px; 4430 text-align: center; 4431 padding: 32px; 4432 } 4433 4434 .node-link { 4435 text-decoration: underline; 4436 cursor: pointer; 4437 } 4438 4439 .cursor-pointer { 4440 cursor: pointer; 4441 } 4442 4443 .cursor-auto { 4444 cursor: auto; 4445 } 4446 4447 .please-wait-msg { 4448 position: absolute; 4449 left: 0; 4450 top: 0; 4451 border: 4px black solid; 4452 border-radius: 4px; 4453 background-color: black; 4454 opacity: 0.85; 4455 color: white; 4456 font-size: 12px; 4457 font-weight: bold; 4458 z-index: 10000; 4459 } 4460 4461 .resource-view.json { 4462 padding: 5px; 4463 } 4464