Bumping the PLT count back to 5.
[WebKit-https.git] / WebKit / WebInspector / webInspector / inspector.css
1 /*
2  * Copyright (C) 2006 Apple Computer, Inc.  All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  *
8  * 1.  Redistributions of source code must retain the above copyright
9  *     notice, this list of conditions and the following disclaimer. 
10  * 2.  Redistributions in binary form must reproduce the above copyright
11  *     notice, this list of conditions and the following disclaimer in the
12  *     documentation and/or other materials provided with the distribution. 
13  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
14  *     its contributors may be used to endorse or promote products derived
15  *     from this software without specific prior written permission. 
16  *
17  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
18  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
20  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
21  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
22  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
23  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
24  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
26  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27  */
28
29 html {
30     height: 100%;
31 }
32
33 body {
34     overflow: hidden;
35     height: 100%;
36 }
37
38 * {
39     -apple-user-select: none;
40 }
41
42 a:link {
43     color: inherit;
44 }
45
46 button {
47     -apple-dashboard-region: dashboard-region(control rectangle);
48 }
49
50 .disabled {
51     color: rgba(255,255,255,0.5);
52 }
53
54 #body {
55     position: absolute;
56     background-color: rgba(20,20,20,0.9);
57     border-radius: 8px;
58     top: 0;
59     height: 100%;
60     left: 0;
61     right: 0;
62     color: white;
63     font-family: Lucida Grande, sans-serif;
64     font-size: 12px;
65     text-shadow: black 0px 1px 2px;
66 }
67
68 #title {
69     position: absolute;
70     background-color: rgba(255,255,255,0.1);
71     border-top-left-radius: 8px;
72     border-top-right-radius: 8px;
73     height: 20px;
74     top: 0;
75     left: 0;
76     right: 0;
77     text-align: center;
78     font-size: 11px;
79     line-height: 20px;
80 }
81
82 #header {
83     position: absolute;
84     height: 26px;
85     top: 0;
86     left: 0;
87     right: 0;
88 }
89
90 #search {
91     font-size: 11px;
92     position: absolute;
93     top: 1px;
94     right: 10px;
95     width: 90px;
96 }
97
98 #searchCount {
99     font-size: 11px;
100     position: absolute;
101     top: 5px;
102     right: 170px;
103     width: 100px;
104     text-align: right;
105     display: none;
106     z-index: 100;
107 }
108
109 #treePopup {
110     position: absolute;
111     top: 4px;
112     left: 54px;
113     right: 106px;
114 }
115
116 #treePopupButton {
117     position: absolute;
118     top: 0;
119     left: 0;
120     right: 0;
121 }
122
123 #realTreePopup {
124     opacity: 0;
125     position: absolute;
126     top: 0;
127     left: 0;
128     width: 100%;
129     z-index: 10;
130     margin: 0;
131     padding: 0;
132 }
133
134 #treePopupTitleArea {
135     overflow: hidden;
136     white-space: nowrap;
137 }
138
139 #traverse {
140     position: absolute;
141     top: 4px;
142     left: 8px;
143     width: 50px;
144 }
145
146 #traverseUp .middle {
147     right: 0;
148 }
149
150 #traverseUp .middle > img {
151     position: absolute;
152     top: 4px;
153     left: 1px;
154 }
155
156 #traverseDown .middle {
157     left: 1px;
158 }
159
160 #traverseDown .middle > img {
161     position: absolute;
162     top: 5px;
163     left: 5px;
164 }
165
166 #traverseUp {
167     position: absolute;
168     top: 0;
169     left: 0;
170     width: 20px;
171 }
172
173 #traverseDown {
174     position: absolute;
175     top: 0;
176     left: 20px;
177     width: 21px;
178 }
179
180 #traverseDown > img {
181     position: absolute;
182     top: 0;
183     left: 0;
184 }
185
186 #tabs {
187     position: absolute;
188     top: 3px;
189     left: 50%;
190     margin-left: -130px;
191 }
192
193 #tabs .middle {
194     left: 0;
195     right: 0;
196     text-align: center;
197 }
198
199 #tabs button > img {
200     position: absolute;
201     top: 0;
202     left: 0;
203 }
204
205 #nodeButton {
206     position: absolute;
207     top: 0;
208     left: 0;
209     width: 60px;
210 }
211
212 #nodeButton .middle {
213     padding-right: 6px;
214     left: 6px;
215     right: 0;
216 }
217
218 #metricsButton {
219     position: absolute;
220     top: 0;
221     left: 115px;
222     width: 65px;
223 }
224
225 #styleButton {
226     position: absolute;
227     top: 0;
228     left: 60px;
229     width: 55px;
230 }
231
232 #propertiesButton {
233     position: absolute;
234     top: 0;
235     left: 180px;
236     width: 80px;
237 }
238
239 #propertiesButton .middle {
240     padding-left: 6px;
241     left: 0;
242     right: 6px;
243 }
244
245 #title button.close {
246     position: absolute;
247     top: 4px;
248     left: 5px;
249     border: 0;
250     background-color: transparent;
251     background-image: url( Images/close.png );
252     background-repeat: no-repeat;
253     height: 13px;
254     width: 13px;
255 }
256
257 #title button.close[disabled] {
258     opacity: 0.5;
259 }
260
261 #title button.close:active {
262     background-image: url( Images/closePressed.png );
263 }
264
265 #title button.menu {
266     position: absolute;
267     top: 4px;
268     right: 5px;
269     border: 0;
270     background-color: transparent;
271     background-image: url( Images/menu.png );
272     background-repeat: no-repeat;
273     height: 13px;
274     width: 13px;
275 }
276
277 #title button.menu[disabled] {
278     opacity: 0.5;
279 }
280
281 #title button.menu:active {
282     background-image: url( Images/menuPressed.png );
283 }
284
285 button.popup {
286     height: 20px;
287     border: 0;
288     background-color: transparent;
289     color: white;
290     padding: 0;
291     margin: 0;
292 }
293
294 button.popup .left {
295     position: absolute;
296     top: 0;
297     left: 0;
298     height: 20px;
299     width: 6px;
300     background-image: url( Images/popupLeft.png );
301     background-repeat: no-repeat;
302 }
303
304 button.popup .middle {
305     position: absolute;
306     top: 0;
307     left: 6px;
308     right: 19px;
309     height: 20px;
310     line-height: 1em;
311     background-image: url( Images/popupFill.png );
312     background-repeat: repeat-x;
313     line-height: 17px;
314     text-align: left;
315     padding: 0 2px;
316     overflow: hidden;
317     text-overflow: ellipsis;
318 }
319
320 button.popup .right {
321     position: absolute;
322     top: 0;
323     right: 0;
324     height: 20px;
325     width: 19px;
326     background-image: url( Images/popupRight.png );
327     background-repeat: no-repeat;
328 }
329
330 button.popup[disabled] {
331     opacity: 0.5;
332 }
333
334 button.popup[disabled] .left {
335     background-image: url( Images/popupLeft.png ) !important;
336 }
337
338 button.popup[disabled] .middle {
339     background-image: url( Images/popupFill.png ) !important;
340 }
341
342 button.popup[disabled] .right {
343     background-image: url( Images/popupRight.png ) !important;
344 }
345
346 button.popup:active .left {
347     background-image: url( Images/popupLeftPressed.png );
348 }
349
350 button.popup:active .middle {
351     background-image: url( Images/popupFillPressed.png );
352     text-shadow: black 1px -1px 3px;
353 }
354
355 button.popup:active .right {
356     background-image: url( Images/popupRightPressed.png );
357 }
358
359 button.square {
360     height: 20px;
361     border: 0;
362     background-color: transparent;
363     color: white;
364     padding: 0;
365     margin: 0;
366 }
367
368 button.square .left {
369     position: absolute;
370     top: 0;
371     left: 0;
372     height: 20px;
373     width: 6px;
374     background-image: url( Images/popupLeft.png );
375     background-repeat: no-repeat;
376 }
377
378 button.square .middle {
379     position: absolute;
380     top: 0;
381     left: 6px;
382     right: 6px;
383     height: 20px;
384     line-height: 1em;
385     background-image: url( Images/popupFill.png );
386     background-repeat: repeat-x;
387     line-height: 17px;
388     text-align: left;
389     padding: 0 2px;
390 }
391
392 button.square .right {
393     position: absolute;
394     top: 0;
395     right: 0;
396     height: 20px;
397     width: 6px;
398     background-image: url( Images/squareButtonRight.png );
399     background-repeat: no-repeat;
400 }
401
402 button.square[disabled] {
403     opacity: 0.5;
404 }
405
406 button.square[disabled] .left {
407     background-image: url( Images/popupLeft.png ) !important;
408 }
409
410 button.square[disabled] .middle {
411     background-image: url( Images/popupFill.png ) !important;
412 }
413
414 button.square[disabled] .right {
415     background-image: url( Images/squareButtonRight.png ) !important;
416 }
417
418 button.square:active .left, button.square.selected .left {
419     background-image: url( Images/popupLeftPressed.png );
420 }
421
422 button.square:active .middle, button.square.selected .middle {
423     background-image: url( Images/popupFillPressed.png );
424     text-shadow: black 1px -1px 3px;
425 }
426
427 button.square.selected .middle {
428     font-weight: bold;
429 }
430
431 button.square:active .right, button.square.selected .right {
432     background-image: url( Images/squareButtonRightPressed.png );
433 }
434
435 #resize {
436     position: absolute;
437     right: 0;
438     bottom: 0;
439     width: 16px;
440     height: 16px;
441     z-index: 10;
442     -apple-dashboard-region: dashboard-region(resize rectangle);
443     background-image: url( file:///System/Library/WidgetResources/resize.png );
444     background-repeat: no-repeat;
445 }
446
447 #top {
448     position: absolute;
449     top: 20px;
450     left: 0;
451     right: 0;
452     height: 170px;
453 }
454
455 #bottom {
456     position: absolute;
457     top: 200px;
458     left: 0;
459     right: 0;
460     bottom: 0;
461 }
462
463 #bottom .pane {
464     position: absolute;
465     top: 28px;
466     left: 10px;
467     right: 10px;
468     bottom: 12px;
469 }
470
471 #splitter {
472     position: absolute;
473     top: 190px;
474     left: 5px;
475     right: 5px;
476     height: 10px;
477     cursor: move;
478     z-index: 10;
479     -apple-dashboard-region: dashboard-region(control rectangle);
480 }
481
482 #splitter hr {
483     position: absolute;
484     top: 4px;
485     left: 0;
486     right: 0;
487     padding: 0;
488     margin: 0;
489     opacity: 0.85;
490 }
491
492 #tree {
493     background-color: rgba(0,0,0,0.2);
494     border: 1px solid rgba(255,255,255,0.4);
495     position: absolute;
496     top: 26px;  
497     bottom: 4px;
498     left: 10px;
499     right: 10px;
500     -apple-dashboard-region: dashboard-region(control rectangle);
501 }
502
503 #treeScrollArea {
504     position: absolute;
505     top: 0; 
506     left: 3px;
507     right: 23px;
508     bottom: 0;
509 }
510
511 #treeOutlineView {
512     position: absolute;
513     top: 0;
514     left: 0;
515     width: 100%;
516     height: 100%;
517 }
518
519 #treeScrollbar {
520     position: absolute;
521     top: 2px;
522     bottom: 2px;
523     right: 2px;
524     width: 19px;
525     display: block;
526 }
527
528 button.toggle {
529     width: 8px;
530     height: 8px;
531     border: 0;
532     margin: 0 2px;
533     padding: 0;
534     background-color: transparent;
535 }
536
537 button.toggle.down {
538     background-image: url( Images/downTriangle.png );
539 }
540
541 button.toggle.right {
542     background-image: url( Images/rightTriangle.png );
543 }
544
545 #noSelection {
546     font-size: 16px;
547     font-weight: bold;
548     color: rgba(255,255,255,0.4);
549     text-align: center;
550     margin-top: 40%;
551 }
552
553 #nodePane {
554     display: -apple-box;
555     -apple-box-orient: vertical;
556 }
557
558 .infoRow {
559     display: -apple-box;
560     -apple-box-orient: horizontal;
561     margin-top: 2px;
562 }
563
564 .infoRow.header {
565     margin-top: 6px;
566     border-bottom: 1px solid rgba(255,255,255,0.4);
567     margin-bottom: 3px;
568 }
569
570 .infoRow .label {
571     display: block;
572     font-weight: bold;
573     text-align: right;
574     padding-right: 3px;
575     width: 100px;
576 }
577
578 .infoRow .value {
579     display: -apple-box;
580     -apple-box-flex: 1;
581     -apple-dashboard-region: dashboard-region(control rectangle);
582     -apple-user-select: text;
583     white-space: nowrap;
584 }
585
586 /* This is a workaround for text-overflow: ellipsis not working on boxes. */
587 /* http://bugzilla.opendarwin.org/show_bug.cgi?id=5990 */
588 .infoRow .value div {
589     width: 100%;
590     overflow: hidden;
591     text-overflow: ellipsis;
592     -apple-user-select: text;
593 }
594
595 #elementAttributes {
596     display: -apple-box;
597     -apple-box-flex: 3;
598     -apple-box-orient: vertical;
599     min-height: 60px;
600     max-height: 160px;
601 }
602
603 #elementAttributesList {
604     -apple-dashboard-region: dashboard-region(control rectangle);
605 }
606
607 .attributeList {
608     padding: 0;
609     margin: 0;
610     list-style-type: none;
611     white-space: nowrap;
612 }
613
614 .attributeList ul {
615     list-style-type: none;
616     -apple-padding-start: 10px;
617 }
618
619 .attributeList li {
620     line-height: 14px;
621     height: 16px;
622     overflow: hidden;
623     text-overflow: ellipsis;
624 }
625
626 .attributeList li span {
627     -apple-user-select: text;
628 }
629
630 .attributeList li .property::after {
631     margin: 0.3em;
632     content: "=";
633 }
634
635 .attributeList li .value {
636     color: rgb(255,255,180);
637 }
638
639 .attributeList li .value::before, .attributeList li .value::after {
640     content: "\"";
641 }
642
643 .attributeList li .mapped {
644     margin-left: 0.5em;
645     color: rgba(255,255,255,0.6);
646 }
647
648 #nodeContents {
649     display: -apple-box;
650     -apple-box-flex: 12;
651     -apple-box-orient: vertical;
652     overflow: hidden;
653 }
654
655 #nodeContentsScrollview {
656     -apple-dashboard-region: dashboard-region(control rectangle);
657     -apple-user-select: text;
658     overflow: hidden;
659     font-size: 11px;
660     word-wrap: break-word;
661 }
662
663 .scrollArea {
664     display: -apple-box;
665     -apple-box-orient: horizontal;
666     -apple-box-flex: 1;
667 }
668
669 .scrollArea > .view {
670     position: relative;
671     display: -apple-box;
672     -apple-box-flex: 1;
673 }
674
675 .scrollArea > .view > div {
676     position: absolute;
677     top: 0;
678     bottom: 0;
679     left: 0;
680     right: 0;
681     overflow: hidden;
682 }
683
684 .scrollArea > .scrollbar {
685     position: relative;
686     margin-left: 2px;
687     width: 19px;
688     -apple-dashboard-region: dashboard-region(control rectangle);
689 }
690
691 #stylePane {
692     display: -apple-box;
693     -apple-box-flex: 1;
694     -apple-box-orient: vertical;
695     overflow: hidden;
696 }
697
698 #noStyle {
699     font-size: 16px;
700     font-weight: bold;
701     color: rgba(255,255,255,0.4);
702     text-align: center;
703     margin-top: 40%;
704 }
705
706 #styleRules {
707     background-color: rgba(0,0,0,0.2);
708     border: 1px solid rgba(255,255,255,0.4);
709     margin-bottom: 6px;
710     padding: 3px;
711 }
712
713 #styleRulesScrollview {
714     display: -apple-box;
715     -apple-box-orient: vertical;
716     -apple-dashboard-region: dashboard-region(control rectangle);
717     -apple-box-flex: 1;
718 }
719
720 #styleRulesScrollview hr.divider {
721     margin: 3px auto;
722     opacity: 0.8;
723 }
724
725 #styleRulesScrollview > .row {
726     padding: 1px 6px;
727 }
728
729 #styleRulesScrollview > .row.focused {
730     background-color: rgba(128,128,255,0.25);
731     border-radius: 6px;
732     text-shadow: black 1px 2px 3px;
733 }
734
735 #styleRulesScrollview > .row > .cell {
736     overflow: hidden;
737     text-overflow: ellipsis;
738     white-space: nowrap;
739 }
740
741 #styleRulesScrollview .cell.stylesheet {
742     color: rgba(255,255,255,0.6);
743     font-size: 10px;
744     padding-bottom: 2px;
745 }
746
747 #styleProperties {
748     background-color: rgba(0,0,0,0.2);
749     border: 1px solid rgba(255,255,255,0.4);
750     -apple-box-flex: 1;
751     -apple-dashboard-region: dashboard-region(control rectangle);
752     padding: 3px;
753 }
754
755 .treeList {
756     padding: 0;
757     margin: 0;
758     list-style-type: none;
759     white-space: nowrap;
760 }
761
762 .treeList ul {
763     list-style-type: none;
764     -apple-padding-start: 10px;
765 }
766
767 .treeList li {
768     line-height: 14px;
769     height: 16px;
770     padding-left: 14px;
771     overflow: hidden;
772     text-overflow: ellipsis;
773 }
774
775 .treeList li button {
776     position: relative;
777     top: 4px;
778     left: 1px;
779     float: left;
780     background-image: url( Images/rightTriangle.png );
781     width: 8px;
782     height: 8px;
783     border: 0;
784     margin: 0 2px;
785     padding: 0;
786     background-color: transparent;
787 }
788
789 .treeList li.hasChildren {
790     padding-left: 2px;
791 }
792
793 .treeList li.focused {
794     background-color: rgba(128,128,255,0.25);
795     border-radius: 4px;
796     text-shadow: black 1px 2px 3px;
797 }
798
799 .treeList li.expanded button {
800     background-image: url( Images/downTriangle.png );
801 }
802
803 .treeList li span {
804     -apple-user-select: text;
805 }
806
807 .treeList li .property::after {
808     content: ": ";
809 }
810
811 .treeList li .value {
812     color: rgb(255,255,180);
813 }
814
815 .treeList li.implicit .value {
816     color: rgb(180,255,180);
817 }
818
819 .treeList li .value::after {
820     content: ";";
821 }
822
823 .treeList li.overloaded {
824     text-decoration: line-through;
825 }