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