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