1/* 2 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. 3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> 4 * 5 * Redistribution and use in source and binary forms, with or without 6 * modification, are permitted provided that the following conditions 7 * are met: 8 * 9 * 1. Redistributions of source code must retain the above copyright 10 * notice, this list of conditions and the following disclaimer. 11 * 2. Redistributions in binary form must reproduce the above copyright 12 * notice, this list of conditions and the following disclaimer in the 13 * documentation and/or other materials provided with the distribution. 14 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of 15 * its contributors may be used to endorse or promote products derived 16 * from this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY 19 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 20 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY 22 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 23 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 24 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 25 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF 27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 */ 29 30#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 719li.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