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