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 #elements-content { 31 flex: 1 1; 32 overflow: auto; 33 padding-left: 0; 34 -webkit-transform: translateZ(0); 35 } 36 37 #elements-crumbs { 38 flex: 0 0 19px; 39 background-color: white; 40 border-top: 1px solid #ccc; 41 overflow: hidden; 42 height: 19px; 43 width: 100%; 44 } 45 46 #elements-content > ol { 47 display: inline-block; 48 min-height: 100%; 49 -webkit-transform: translateZ(0); 50 } 51 52 .elements-tree-outline.pick-node-mode { 53 cursor: pointer; 54 } 55 56 #elements-content .editing { 57 margin-left: 8px; 58 } 59 60 #elements-content .elements-gutter-decoration { 61 position: absolute; 62 left: 1px; 63 margin-top: 2px; 64 height: 8px; 65 width: 8px; 66 border-radius: 4px; 67 border: 1px solid orange; 68 background-color: orange; 69 } 70 71 #elements-content .elements-gutter-decoration.elements-has-decorated-children { 72 opacity: 0.5; 73 } 74 75 #elements-content .CodeMirror { 76 /* Consistent with the .editing class in inspectorStyle.css */ 77 box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; 78 outline: 1px solid rgb(66%, 66%, 66%) !important; 79 background-color: white; 80 } 81 82 #elements-content .CodeMirror pre { 83 padding: 0; 84 } 85 86 #elements-content .CodeMirror-lines { 87 padding: 0; 88 } 89 90 .elements-tree-editor { 91 -webkit-user-select: text; 92 -webkit-user-modify: read-write-plaintext-only; 93 } 94 95 .metrics { 96 padding: 8px; 97 font-size: 10px; 98 text-align: center; 99 white-space: nowrap; 100 } 101 102 .metrics .label { 103 position: absolute; 104 font-size: 10px; 105 margin-left: 3px; 106 padding-left: 2px; 107 padding-right: 2px; 108 } 109 110 .metrics .position { 111 border: 1px rgb(66%, 66%, 66%) dotted; 112 background-color: white; 113 display: inline-block; 114 text-align: center; 115 padding: 3px; 116 margin: 3px; 117 } 118 119 .metrics .margin { 120 border: 1px dashed; 121 background-color: white; 122 display: inline-block; 123 text-align: center; 124 vertical-align: middle; 125 padding: 3px; 126 margin: 3px; 127 } 128 129 .metrics .border { 130 border: 1px black solid; 131 background-color: white; 132 display: inline-block; 133 text-align: center; 134 vertical-align: middle; 135 padding: 3px; 136 margin: 3px; 137 } 138 139 .metrics .padding { 140 border: 1px grey dashed; 141 background-color: white; 142 display: inline-block; 143 text-align: center; 144 vertical-align: middle; 145 padding: 3px; 146 margin: 3px; 147 } 148 149 .metrics .content { 150 position: static; 151 border: 1px gray solid; 152 background-color: white; 153 display: inline-block; 154 text-align: center; 155 vertical-align: middle; 156 padding: 3px; 157 margin: 3px; 158 min-width: 80px; 159 overflow: visible; 160 } 161 162 .metrics .content span { 163 display: inline-block; 164 } 165 166 .metrics .editing { 167 position: relative; 168 z-index: 100; 169 cursor: text; 170 } 171 172 .metrics .left { 173 display: inline-block; 174 vertical-align: middle; 175 } 176 177 .metrics .right { 178 display: inline-block; 179 vertical-align: middle; 180 } 181 182 .metrics .top { 183 display: inline-block; 184 } 185 186 .metrics .bottom { 187 display: inline-block; 188 } 189 190 .styles-section { 191 padding: 2px 2px 4px 4px; 192 min-height: 18px; 193 white-space: nowrap; 194 background-origin: padding; 195 background-clip: padding; 196 -webkit-user-select: text; 197 border-bottom: 1px solid rgb(191, 191, 191); 198 position: relative; 199 } 200 201 .styles-pane .sidebar-separator { 202 border-top: 0px none; 203 } 204 205 .styles-section.user-rule { 206 display: none; 207 } 208 209 .show-user-styles .styles-section.user-rule { 210 display: block; 211 } 212 213 .styles-sidebar-placeholder { 214 height: 16px; 215 } 216 217 .styles-section.read-only:not(.computed-style) { 218 background-color: rgb(240, 240, 240); 219 } 220 221 .styles-section .properties li.not-parsed-ok { 222 margin-left: 0; 223 } 224 225 .styles-section.computed-style .properties li.not-parsed-ok { 226 margin-left: -6px; 227 } 228 229 .styles-section .properties li.filter-match, 230 .styles-section .simple-selector.filter-match { 231 background-color: rgba(255, 255, 0, 0.5); 232 } 233 234 .styles-section .properties li.overloaded.filter-match { 235 background-color: rgba(255, 255, 0, 0.25); 236 } 237 238 .styles-section .properties li.not-parsed-ok .exclamation-mark { 239 display: inline-block; 240 position: relative; 241 width: 11px; 242 height: 10px; 243 margin: 0 7px 0 0; 244 top: 1px; 245 left: -36px; /* outdent to compensate for the top-level property indent */ 246 -webkit-user-select: none; 247 cursor: default; 248 z-index: 1; 249 } 250 251 .styles-section .header { 252 white-space: nowrap; 253 background-origin: padding; 254 background-clip: padding; 255 } 256 257 .styles-section .header .title { 258 word-wrap: break-word; 259 white-space: normal; 260 } 261 262 .styles-section .header .title .media, 263 .styles-section .header .title .media .subtitle { 264 color: rgb(128, 128, 128); 265 overflow: hidden; 266 } 267 268 .styles-section .header .subtitle { 269 color: rgb(85, 85, 85); 270 float: right; 271 margin-left: 5px; 272 max-width: 100%; 273 text-overflow: ellipsis; 274 overflow: hidden; 275 white-space: nowrap; 276 } 277 278 .styles-section .header .subtitle a { 279 color: inherit; 280 } 281 282 .styles-section .selector { 283 color: #888; 284 } 285 286 .styles-section .simple-selector.selector-matches { 287 color: #222; 288 } 289 290 .styles-section a[data-uncopyable] { 291 display: inline-block; 292 } 293 294 .styles-section a[data-uncopyable]::before { 295 content: attr(data-uncopyable); 296 text-decoration: underline; 297 } 298 299 .styles-section .properties { 300 display: none; 301 margin: 0; 302 padding: 2px 4px 0 0; 303 list-style: none; 304 clear: both; 305 } 306 307 .styles-section.matched-styles .properties { 308 padding-left: 0; 309 } 310 311 .styles-section.no-affect .properties li { 312 opacity: 0.5; 313 } 314 315 .styles-section.no-affect .properties li.editing { 316 opacity: 1.0; 317 } 318 319 .styles-section.expanded .properties { 320 display: block; 321 } 322 323 .styles-section .properties li { 324 margin-left: 12px; 325 padding-left: 22px; 326 white-space: normal; 327 text-overflow: ellipsis; 328 overflow: hidden; 329 cursor: auto; 330 } 331 332 .styles-section.computed-style.expanded .properties > li { 333 padding-left: 0; 334 } 335 336 .styles-section.computed-style.expanded .properties > li .webkit-css-property { 337 margin-left: 0; 338 } 339 340 .styles-section .properties li .webkit-css-property { 341 margin-left: -22px; /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the "padding-left" shift in .styles-section .properties li */ 342 } 343 344 .styles-section.expanded .properties > li { 345 padding-left: 38px; 346 } 347 348 .styles-section .properties > li .webkit-css-property { 349 margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the "padding-left" shift in .styles-section .properties > li */ 350 } 351 352 .styles-section .properties > li.child-editing { 353 padding-left: 8px; 354 } 355 356 .styles-section .properties > li.child-editing .webkit-css-property { 357 margin-left: 0; 358 } 359 360 .styles-section.matched-styles .properties li { 361 margin-left: 0 !important; 362 } 363 364 .styles-section .properties li.child-editing { 365 word-wrap: break-word !important; 366 white-space: normal !important; 367 padding-left: 0; 368 } 369 370 .styles-section .properties ol { 371 display: none; 372 margin: 0; 373 -webkit-padding-start: 12px; 374 list-style: none; 375 } 376 377 .styles-section .properties ol.expanded { 378 display: block; 379 } 380 381 .styles-section.matched-styles .properties li.parent .expand-element { 382 -webkit-user-select: none; 383 background-image: url(Images/statusbarButtonGlyphs.png); 384 background-size: 320px 144px; 385 margin-right: 2px; 386 margin-left: -6px; 387 opacity: 0.55; 388 width: 8px; 389 height: 10px; 390 display: inline-block; 391 } 392 393 @media (-webkit-min-device-pixel-ratio: 1.5) { 394 .styles-section.matched-styles .properties li.parent .expand-element { 395 background-image: url(Images/statusbarButtonGlyphs_2x.png); 396 } 397 } /* media */ 398 399 .styles-section.matched-styles .properties li.parent .expand-element { 400 background-position: -4px -96px; 401 } 402 403 .styles-section.matched-styles .properties li.parent.expanded .expand-element { 404 background-position: -20px -96px; 405 } 406 407 .styles-section .properties li .info { 408 padding-top: 4px; 409 padding-bottom: 3px; 410 } 411 412 .styles-section.matched-styles:not(.read-only):hover .properties .enabled-button { 413 visibility: visible; 414 } 415 416 .styles-section.matched-styles:not(.read-only) .properties li.disabled .enabled-button { 417 visibility: visible; 418 } 419 420 .styles-section .properties .enabled-button { 421 visibility: hidden; 422 float: left; 423 font-size: 10px; 424 margin: 0; 425 vertical-align: top; 426 position: relative; 427 z-index: 1; 428 width: 18px; 429 left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */ 430 top: 1px; 431 } 432 433 .styles-section.matched-styles .properties ol.expanded { 434 margin-left: 16px; 435 } 436 437 .styles-section .properties .overloaded:not(.has-ignorable-error), 438 .styles-section .properties .inactive, 439 .styles-section .properties .disabled, 440 .styles-section .properties .not-parsed-ok:not(.has-ignorable-error) { 441 text-decoration: line-through; 442 } 443 444 .styles-section .properties .has-ignorable-error .webkit-css-property { 445 color: inherit; 446 } 447 448 .styles-section.computed-style .properties .disabled { 449 text-decoration: none; 450 opacity: 0.5; 451 } 452 453 .styles-section .properties .implicit, 454 .styles-section .properties .inherited { 455 opacity: 0.5; 456 } 457 458 .styles-section .properties .has-ignorable-error { 459 color: gray; 460 } 461 462 .styles-element-state-pane { 463 overflow: hidden; 464 margin-top: -56px; 465 padding-top: 18px; 466 height: 56px; 467 -webkit-transition: margin-top 0.1s ease-in-out; 468 padding-left: 2px; 469 } 470 471 .styles-element-state-pane.expanded { 472 border-bottom: 1px solid rgb(189, 189, 189); 473 margin-top: 0; 474 } 475 476 .styles-element-state-pane > table { 477 width: 100%; 478 border-spacing: 0; 479 } 480 481 .styles-element-state-pane label { 482 display: flex; 483 margin: 1px; 484 } 485 486 .styles-selector { 487 cursor: text; 488 } 489 490 .body .styles-section .properties .inherited { 491 display: none; 492 } 493 494 .styles-section.styles-show-inherited .properties .inherited { 495 display: block; 496 } 497 498 .add-attribute { 499 margin-left: 1px; 500 margin-right: 1px; 501 white-space: nowrap; 502 } 503 504 .section .event-bars { 505 display: none; 506 } 507 508 .section.expanded .event-bars { 509 display: block; 510 } 511 512 .event-bar { 513 position: relative; 514 margin-left: 10px; 515 } 516 517 .event-bar:first-child { 518 margin-top: 1px; 519 } 520 521 .event-bars .event-bar .header { 522 padding: 0 8px 0 6px; 523 min-height: 16px; 524 opacity: 1.0; 525 white-space: nowrap; 526 background-origin: padding; 527 background-clip: padding; 528 } 529 530 .event-bars .event-bar .header .title { 531 font-weight: normal; 532 text-shadow: white 0 1px 0; 533 } 534 535 .event-bars .event-bar .header .subtitle { 536 color: rgba(90, 90, 90, 0.75); 537 } 538 539 .event-bars .event-bar .header::before { 540 -webkit-user-select: none; 541 background-image: url(Images/statusbarButtonGlyphs.png); 542 background-size: 320px 144px; 543 opacity: 0.5; 544 content: "a"; 545 color: transparent; 546 text-shadow: none; 547 float: left; 548 width: 8px; 549 margin-right: 4px; 550 margin-top: 2px; 551 } 552 553 @media (-webkit-min-device-pixel-ratio: 1.5) { 554 .event-bars .event-bar .header::before { 555 background-image: url(Images/statusbarButtonGlyphs_2x.png); 556 } 557 } /* media */ 558 559 .event-bars .event-bar .header::before { 560 background-position: -4px -96px; 561 } 562 563 .event-bars .event-bar.expanded .header::before { 564 background-position: -20px -96px; 565 } 566 567 .image-preview-container { 568 background: transparent; 569 text-align: center; 570 } 571 572 .image-preview-container img { 573 margin: 2px auto; 574 max-width: 100px; 575 max-height: 100px; 576 background-image: url(Images/checker.png); 577 -webkit-user-select: text; 578 -webkit-user-drag: auto; 579 } 580 581 .sidebar-pane.composite { 582 position: absolute; 583 } 584 585 .sidebar-pane.composite > .body { 586 height: 100%; 587 } 588 589 .sidebar-pane.composite .metrics { 590 border-bottom: 1px solid rgb(64%, 64%, 64%); 591 height: 206px; 592 display: flex; 593 flex-direction: column; 594 -webkit-align-items: center; 595 -webkit-justify-content: center; 596 } 597 598 .sidebar-pane .metrics-and-styles, 599 .sidebar-pane .metrics-and-computed { 600 display: flex !important; 601 flex-direction: column !important; 602 position: relative; 603 } 604 605 .sidebar-pane .style-panes-wrapper { 606 transform: translateZ(0); 607 flex: 1; 608 overflow-y: auto; 609 position: relative; 610 } 611 612 .sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar, 613 .sidebar-pane.composite .metrics-and-styles .sidebar-pane-toolbar { 614 position: absolute; 615 } 616 617 .sidebar-pane-filter-box { 618 display: flex; 619 border-top: 1px solid rgb(191, 191, 191); 620 flex-basis: 19px; 621 } 622 623 .sidebar-pane-filter-box > input { 624 outline: none !important; 625 border: none; 626 width: 100%; 627 margin: 0 4px; 628 background: transparent; 629 } 630 631 .styles-filter-engaged { 632 background-color: rgba(255, 255, 0, 0.5); 633 } 634 635 .sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar { 636 margin-top: 4px; 637 margin-bottom: -4px; 638 position: relative; 639 } 640 641 .sidebar-pane.composite .platform-fonts .body { 642 padding: 1ex; 643 -webkit-user-select: text; 644 } 645 646 .sidebar-pane.composite .platform-fonts .sidebar-separator { 647 border-top: none; 648 } 649 650 .sidebar-pane.composite .platform-fonts .stats-section { 651 margin-bottom: 5px; 652 } 653 654 .sidebar-pane.composite .platform-fonts .font-stats-item { 655 padding-left: 1em; 656 } 657 658 .sidebar-pane.composite .platform-fonts .font-stats-item .delimeter { 659 margin: 0 1ex 0 1ex; 660 } 661 662 .sidebar-pane.composite .metrics-and-styles .metrics { 663 border-bottom: none; 664 } 665 666 .sidebar-pane > .body > .split-view { 667 position: absolute; 668 top: 0; 669 bottom: 0; 670 left: 0; 671 right: 0; 672 } 673 674 .panel.elements .sidebar-pane-toolbar > select { 675 float: right; 676 width: 23px; 677 height: 17px; 678 color: transparent; 679 background-color: transparent; 680 border: none; 681 background-repeat: no-repeat; 682 margin: 1px 0 0 0; 683 padding: 0; 684 border-radius: 0; 685 -webkit-appearance: none; 686 } 687 688 .panel.elements .sidebar-pane-toolbar > select:hover { 689 background-position: -23px 0; 690 } 691 692 .panel.elements .sidebar-pane-toolbar > select:active { 693 background-position: -46px 0; 694 } 695 696 .panel.elements .sidebar-pane-toolbar > select.select-filter { 697 background-image: url(Images/paneFilterButtons.png); 698 } 699 .panel.elements .sidebar-pane-toolbar > select > option, 700 .panel.elements .sidebar-pane-toolbar > select > hr { 701 color: black; 702 } 703 704 .styles-section:not(.read-only) .properties .webkit-css-property.styles-panel-hovered, 705 .styles-section:not(.read-only) .properties .value .styles-panel-hovered, 706 .styles-section:not(.read-only) .properties .value.styles-panel-hovered, 707 .styles-section:not(.read-only) span.simple-selector.styles-panel-hovered { 708 text-decoration: underline; 709 cursor: default; 710 } 711 712 .styles-clipboard-only { 713 display: inline-block; 714 width: 0; 715 opacity: 0; 716 pointer-events: none; 717 } 718 719 li.child-editing .styles-clipboard-only { 720 display: none; 721 } 722 723 /* Breadcrumbs */ 724 725 .crumbs { 726 display: inline-block; 727 pointer-events: auto; 728 cursor: default; 729 font-size: 11px; 730 line-height: 17px; 731 } 732 733 .crumbs .crumb { 734 display: inline-block; 735 padding: 0 7px; 736 height: 18px; 737 white-space: nowrap; 738 } 739 740 .crumbs .crumb.collapsed > * { 741 display: none; 742 } 743 744 .crumbs .crumb.collapsed::before { 745 content: "\2026"; 746 font-weight: bold; 747 } 748 749 .crumbs .crumb.compact .extra { 750 display: none; 751 } 752 753 .crumbs .crumb.selected, .crumbs .crumb.selected:hover { 754 background-color: rgb(56, 121, 217); 755 color: white; 756 text-shadow: rgba(255, 255, 255, 0.5) 0 0 0; 757 } 758 759 .crumbs .crumb:hover { 760 background-color: rgb(216, 216, 216); 761 } 762 763 .elements-tree-element-pick-node-1 { 764 border-radius: 3px; 765 padding: 1px 0 1px 0; 766 -webkit-animation: elements-tree-element-pick-node-animation-1 0.5s 1; 767 } 768 769 .elements-tree-element-pick-node-2 { 770 border-radius: 3px; 771 padding: 1px 0 1px 0; 772 -webkit-animation: elements-tree-element-pick-node-animation-2 0.5s 1; 773 } 774 775 @-webkit-keyframes elements-tree-element-pick-node-animation-1 { 776 from { background-color: rgb(255, 210, 126); } 777 to { background-color: inherit; } 778 } 779 780 @-webkit-keyframes elements-tree-element-pick-node-animation-2 { 781 from { background-color: rgb(255, 210, 126); } 782 to { background-color: inherit; } 783 } 784 785 .sidebar-separator { 786 background-color: rgb(230, 230, 230); 787 padding: 0 5px; 788 border-top: 1px solid rgb(189, 189, 189); 789 border-bottom: 1px solid rgb(189, 189, 189); 790 color: rgb(50, 50, 50); 791 white-space: nowrap; 792 text-overflow: ellipsis; 793 overflow: hidden; 794 line-height: 16px; 795 } 796