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

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