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