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