Source/WebCore/inspector/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     padding-left: 0;
  32 }
  33
  34 #elements-content > ol {
  35     display: inline-block;
  36     min-height: 100%;
  37 }
  38
  39 #elements-content .editing {
  40     margin-left: 8px;
  41 }
  42
  43 #elements-content .elements-gutter-decoration {
  44     position: absolute;
  45     left: 1px;
  46     margin-top: 2px;
  47     height: 8px;
  48     width: 8px;
  49     border-radius: 4px;
  50     border: 1px solid orange;
  51     background-color: orange;
  52 }
  53
  54 #elements-content .elements-gutter-decoration.elements-has-decorated-children {
  55     opacity: 0.5;
  56 }
  57
  58 .elements-tree-editor {
  59     -webkit-user-select: text;
  60     -webkit-user-modify: read-write-plaintext-only;
  61 }
  62
  63 .metrics {
  64     padding: 8px;
  65     font-size: 10px;
  66     text-align: center;
  67     white-space: nowrap;
  68 }
  69
  70 .metrics .label {
  71     position: absolute;
  72     font-size: 10px;
  73     color: black;
  74     margin-left: 3px;
  75     padding-left: 2px;
  76     padding-right: 2px;
  77 }
  78
  79 .metrics .position {
  80     border: 1px rgb(66%, 66%, 66%) dotted;
  81     background-color: white;
  82     display: inline-block;
  83     text-align: center;
  84     padding: 3px;
  85     margin: 3px;
  86 }
  87
  88 .metrics .margin {
  89     border: 1px dashed;
  90     background-color: white;
  91     display: inline-block;
  92     text-align: center;
  93     vertical-align: middle;
  94     padding: 3px;
  95     margin: 3px;
  96 }
  97
  98 .metrics .border {
  99     border: 1px black solid;
 100     background-color: white;
 101     display: inline-block;
 102     text-align: center;
 103     vertical-align: middle;
 104     padding: 3px;
 105     margin: 3px;
 106 }
 107
 108 .metrics .padding {
 109     border: 1px grey dashed;
 110     background-color: white;
 111     display: inline-block;
 112     text-align: center;
 113     vertical-align: middle;
 114     padding: 3px;
 115     margin: 3px;
 116 }
 117
 118 .metrics .content {
 119     position: static;
 120     border: 1px gray solid;
 121     background-color: white;
 122     display: inline-block;
 123     text-align: center;
 124     vertical-align: middle;
 125     padding: 3px;
 126     margin: 3px;
 127     min-width: 80px;
 128     text-align: center;
 129     overflow: visible;
 130 }
 131
 132 .metrics .content span {
 133     display: inline-block;
 134 }
 135
 136 .metrics .editing {
 137     position: relative;
 138     z-index: 100;
 139 }
 140
 141 .metrics .left {
 142     display: inline-block;
 143     vertical-align: middle;
 144 }
 145
 146 .metrics .right {
 147     display: inline-block;
 148     vertical-align: middle;
 149 }
 150
 151 .metrics .top {
 152     display: inline-block;
 153 }
 154
 155 .metrics .bottom {
 156     display: inline-block;
 157 }
 158
 159
 160 .styles-section {
 161     padding: 2px 2px 4px 4px;
 162     min-height: 18px;
 163     white-space: nowrap;
 164     -webkit-background-origin: padding;
 165     -webkit-background-clip: padding;
 166     -webkit-user-select: text;
 167 }
 168
 169 .styles-section:not(.first-styles-section) {
 170     border-top: 1px solid rgb(191, 191, 191);
 171 }
 172
 173 .styles-section.read-only {
 174     background-color: rgb(240, 240, 240);
 175 }
 176
 177 .styles-section .properties li.not-parsed-ok {
 178     margin-left: 0px;
 179 }
 180
 181 .styles-section.computed-style .properties li.not-parsed-ok {
 182     margin-left: -6px;
 183 }
 184
 185 .styles-section .properties li.not-parsed-ok img.exclamation-mark {
 186     content: url(Images/warningIcon.png);
 187     opacity: 0.75;
 188     position: relative;
 189     float: left;
 190     width: 12px;
 191     height: 10px;
 192     margin: 0 6px 0 0;
 193     left: -38px; /* outdent to compensate for the top-level property indent */
 194     padding-left: 2px;
 195     vertical-align: baseline;
 196     -webkit-user-select: none;
 197     cursor: default;
 198     z-index: 1;
 199 }
 200
 201 .styles-section.computed-style .properties li.not-parsed-ok img.exclamation-mark {
 202     left: 0;
 203 }
 204
 205 .styles-section .header {
 206     white-space: nowrap;
 207     -webkit-background-origin: padding;
 208     -webkit-background-clip: padding;
 209 }
 210
 211 .styles-section .header .title {
 212     word-wrap: break-word;
 213     white-space: normal;
 214 }
 215
 216 .styles-section .header .title .media, .styles-section .header .title .media .subtitle {
 217     color: rgb(128, 128, 128);
 218     overflow: hidden;
 219 }
 220
 221 .styles-section .header .subtitle {
 222     color: rgb(85, 85, 85);
 223     float: right;
 224     margin-left: 5px;
 225     max-width: 100%;
 226     text-overflow: ellipsis;
 227     overflow: hidden;
 228     white-space: nowrap;
 229 }
 230
 231 .styles-section .header .subtitle a {
 232     color: inherit;
 233 }
 234
 235 .styles-section .selector {
 236     color: #777;
 237 }
 238
 239 .styles-section .selector-matches {
 240     color: black;
 241 }
 242
 243 .styles-section a[data-uncopyable] {
 244     display: inline-block;
 245 }
 246
 247 .styles-section a[data-uncopyable]::before {
 248     content: attr(data-uncopyable);
 249     text-decoration: underline;
 250 }
 251
 252 .styles-section .properties {
 253     display: none;
 254     margin: 0;
 255     padding: 2px 4px 0 6px;
 256     list-style: none;
 257     clear: both;
 258 }
 259
 260 .styles-section.matched-styles .properties {
 261     padding-left: 0;
 262 }
 263
 264 .styles-section.no-affect .properties li {
 265     opacity: 0.5;
 266 }
 267
 268 .styles-section.no-affect .properties li.editing {
 269     opacity: 1.0;
 270 }
 271
 272 .styles-section.expanded .properties {
 273     display: block;
 274 }
 275
 276 .styles-section .properties li {
 277     margin-left: 12px;
 278     padding-left: 22px;
 279     white-space: normal;
 280     text-overflow: ellipsis;
 281     overflow: hidden;
 282     cursor: auto;
 283 }
 284
 285 .styles-section.computed-style.expanded .properties > li {
 286     padding-left: 0;
 287 }
 288
 289 .styles-section.computed-style.expanded .properties > li .webkit-css-property {
 290     margin-left: 0;
 291 }
 292
 293 .styles-section .properties li .webkit-css-property {
 294     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 */
 295 }
 296
 297 .styles-section.expanded .properties > li {
 298     padding-left: 38px;
 299 }
 300
 301 .styles-section .properties > li .webkit-css-property {
 302     margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the "padding-left" shift in .styles-section .properties > li */
 303 }
 304
 305 .styles-section .properties > li.child-editing {
 306     padding-left: 8px;
 307 }
 308
 309 .styles-section .properties > li.child-editing .webkit-css-property {
 310     margin-left: 0;
 311 }
 312
 313 .styles-section.matched-styles .properties li {
 314     margin-left: 0 !important;
 315 }
 316
 317 .styles-section .properties li.child-editing {
 318     word-wrap: break-word !important;
 319     white-space: normal !important;
 320     padding-left: 0;
 321 }
 322
 323 .styles-section .properties ol {
 324     display: none;
 325     margin: 0;
 326     -webkit-padding-start: 12px;
 327     list-style: none;
 328 }
 329
 330 .styles-section .properties ol.expanded {
 331     display: block;
 332 }
 333
 334 .styles-section .properties li.parent::before {
 335     content: none;
 336 }
 337
 338 .styles-section .properties li.parent.expanded::before {
 339     content: none;
 340 }
 341
 342 .styles-section.matched-styles .properties li.parent .expand-element {
 343     content: url(Images/treeRightTriangleBlack.png);
 344     margin-right: 1px;
 345     margin-left: -5px;
 346     opacity: 0.6;
 347 }
 348
 349 .styles-section.matched-styles .properties li.parent.expanded .expand-element {
 350     content: url(Images/treeDownTriangleBlack.png);
 351 }
 352
 353 .styles-section.computed-style .properties li.parent::before {
 354     content: url(Images/treeRightTriangleBlack.png);
 355     opacity: 0.75;
 356     float: left;
 357     width: 8px;
 358     height: 8px;
 359     margin-top: 0;
 360     padding-right: 3px;
 361     -webkit-user-select: none;
 362     cursor: default;
 363 }
 364
 365 .styles-section.computed-style .properties li.parent.expanded::before {
 366     content: url(Images/treeDownTriangleBlack.png);
 367     margin-top: 1px;
 368 }
 369
 370 .styles-section .properties li .info {
 371     padding-top: 4px;
 372     padding-bottom: 3px;
 373 }
 374
 375 .styles-section.matched-styles:not(.read-only):hover .properties .enabled-button {
 376     visibility: visible;
 377 }
 378
 379 .styles-section.matched-styles:not(.read-only) .properties li.disabled .enabled-button {
 380     visibility: visible;
 381 }
 382
 383 .styles-section .properties .enabled-button {
 384     visibility: hidden;
 385     float: left;
 386     font-size: 10px;
 387     margin: 0;
 388     vertical-align: top;
 389     position: relative;
 390     z-index: 1;
 391     width: 18px;
 392     left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */
 393 }
 394
 395 .styles-section.matched-styles .properties ol.expanded {
 396     margin-left: 16px;
 397 }
 398
 399 .styles-section .properties .overloaded,
 400 .styles-section .properties .inactive,
 401 .styles-section .properties .disabled,
 402 .styles-section .properties .not-parsed-ok {
 403     text-decoration: line-through;
 404 }
 405
 406 .styles-section.computed-style .properties .disabled {
 407     text-decoration: none;
 408     opacity: 0.5;
 409 }
 410
 411 .styles-section .properties .implicit, .styles-section .properties .inherited {
 412     opacity: 0.5;
 413 }
 414
 415 .styles-element-state-pane {
 416     background-color: rgb(240, 240, 240);
 417     overflow: hidden;
 418     margin-top: -38px;
 419     -webkit-transition: margin-top 0.1s ease-in-out;
 420     padding-left: 2px;
 421 }
 422
 423 .styles-element-state-pane.expanded {
 424     border-bottom: 1px solid rgb(189, 189, 189);
 425     margin-top: 0;
 426 }
 427
 428 .styles-element-state-pane > table {
 429     width: 100%;
 430     border-spacing: 0;
 431 }
 432
 433 .styles-element-state-pane input {
 434     margin: 2px;
 435     vertical-align: -2px;
 436 }
 437
 438 .styles-selector {
 439     cursor: text;
 440 }
 441
 442 .body .styles-section .properties .inherited {
 443     display: none;
 444 }
 445
 446 .body.show-inherited .styles-section .properties .inherited {
 447     display: block;
 448 }
 449
 450 .add-attribute {
 451     margin-left: 1px;
 452     margin-right: 1px;
 453     white-space: nowrap;
 454 }
 455
 456 .section .event-bars {
 457     display: none;
 458 }
 459
 460 .section.expanded .event-bars {
 461     display: block;
 462 }
 463
 464 .event-bar {
 465     position: relative;
 466     margin-left: 10px;
 467 }
 468
 469 .event-bar:first-child {
 470     margin-top: 1px;
 471 }
 472
 473 .event-bars .event-bar .header {
 474     padding: 0 8px 0 18px;
 475     min-height: 16px;
 476     opacity: 1.0;
 477     white-space: nowrap;
 478     -webkit-background-origin: padding;
 479     -webkit-background-clip: padding;
 480 }
 481
 482 .event-bars .event-bar .header .title {
 483     font-weight: normal;
 484     color: black;
 485     text-shadow: white 0 1px 0;
 486 }
 487
 488 .event-bars .event-bar .header .subtitle {
 489     color: rgba(90, 90, 90, 0.75);
 490 }
 491
 492 .event-bars .event-bar .header::before {
 493     position: absolute;
 494     top: 2px;
 495     left: 7px;
 496     width: 8px;
 497     height: 8px;
 498     opacity: 0.75;
 499     content: url(Images/treeRightTriangleBlack.png) !important;
 500 }
 501
 502 .event-bars .event-bar.expanded .header::before {
 503     content: url(Images/treeDownTriangleBlack.png) !important;
 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
 521 .sidebar-pane.composite {
 522     overflow: hidden;
 523     position: absolute;
 524 }
 525
 526 .sidebar-pane.composite > .body {
 527     height: 100%;
 528 }
 529
 530 .sidebar-pane.composite .metrics {
 531     border-bottom: 1px solid rgb(64%, 64%, 64%);
 532     height: 206px;
 533     display: -webkit-box;
 534     -webkit-box-orient: vertical;
 535     -webkit-box-align: center;
 536     -webkit-box-pack: center;
 537 }
 538
 539 .sidebar-pane.composite .sidebar-pane-toolbar {
 540     margin-top: 4px;
 541     margin-bottom: -4px;
 542     position: relative;
 543 }
 544
 545 .sidebar-pane.composite .sidebar-pane-toolbar > .sidebar-pane-subtitle {
 546     left: 8px;
 547 }
 548
 549 .sidebar-pane.composite .styles-section.read-only {
 550     background-color: inherit;
 551 }
 552
 553 .panel.elements .sidebar-pane-toolbar > select {
 554     float: right;
 555     width: 23px;
 556     height: 17px;
 557     color: transparent;
 558     background-color: transparent;
 559     border: none;
 560     background-repeat: no-repeat;
 561     margin: 1px 0 0 0;
 562     padding: 0;
 563     -webkit-border-radius: 0;
 564     -webkit-appearance: none;
 565 }
 566
 567 .panel.elements .sidebar-pane-toolbar > select:hover {
 568     background-position: -23px 0px;
 569 }
 570
 571 .panel.elements .sidebar-pane-toolbar > select:active {
 572     background-position: -46px 0px;
 573 }
 574
 575 .panel.elements .sidebar-pane-toolbar > select.select-settings {
 576     background-image: url(Images/paneSettingsButtons.png);
 577 }
 578
 579 .panel.elements .sidebar-pane-toolbar > select.select-filter {
 580     background-image: url(Images/paneFilterButtons.png);
 581 }
 582
 583 .panel.elements .sidebar-pane-toolbar > select > option, .panel.elements .sidebar-pane-toolbar > select > hr {
 584     color: black;
 585 }