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