Web Inspector: Combine style-related panes into a single tab when Elements panel...
[WebKit-https.git] / 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 }