Web Inspector: Fonts refactoring
[WebKit-https.git] / Source / WebCore / inspector / front-end / inspector.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 input[type="search"]:focus, input[type="text"]:focus {
31     outline: auto 5px -webkit-focus-ring-color;
32 }
33
34 .fill {
35     position: absolute;
36     top: 0;
37     left: 0;
38     right: 0;
39     bottom: 0;
40 }
41
42 .hidden {
43     display: none;
44 }
45
46 .nowrap {
47     white-space: nowrap !important;
48 }
49
50 #toolbar {
51     position: absolute;
52     top: 0;
53     left: 0;
54     right: 0;
55     height: 26px;
56     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
57     padding-top: 1px;
58     padding-left: 5px;
59     border-bottom: 1px solid rgb(80, 80, 80);
60     -webkit-flex-direction: row;
61     -webkit-background-origin: padding;
62     -webkit-background-clip: padding;
63 }
64
65 body.show-toolbar-icons #toolbar {
66     height: 56px;
67 }
68
69 body.show-toolbar-icons.dock-to-bottom #toolbar {
70     height: 34px;
71 }
72
73 body.inactive #toolbar {
74     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(207, 207, 207)));
75     border-bottom: 1px solid rgb(64%, 64%, 64%);
76 }
77
78 body.undocked.platform-mac-leopard #toolbar,
79 body.undocked.platform-mac-snowleopard #toolbar {
80     background: transparent;
81 }
82
83 body.dock-to-bottom #toolbar {
84     padding-top: 0;
85     border-top: 1px solid rgb(100, 100, 100);
86     cursor: ns-resize;
87 }
88
89 body.dock-to-bottom.port-qt #toolbar {
90     cursor: auto;
91 }
92
93 body.dock-to-bottom.inactive #toolbar {
94     border-top: 1px solid rgb(64%, 64%, 64%);
95 }
96
97 .toolbar-item {
98     margin: 0;
99     padding-right: 6px;
100     background-color: transparent;
101     border-style: none;
102     border-color: transparent;
103     color: inherit;
104     font-family: inherit;
105     font-size: inherit;
106 }
107
108 body:not(.show-toolbar-icons) .toolbar-item {
109     height: 24px;
110 }
111
112 body.dock-to-bottom:not(.show-toolbar-icons) .toolbar-item.toggleable {
113     padding: 0 11px;
114 }
115
116 body.dock-to-bottom:not(.show-toolbar-icons) .toolbar-item.toggleable.toggled-on {
117     padding: 0 9px;
118 }
119
120 body.show-toolbar-icons .toolbar-item.toggleable {
121     padding-top: 4px;
122     padding-bottom: 4px;
123 }
124
125 body.show-toolbar-icons.dock-to-bottom .toolbar-item.toggleable {
126     margin: 1px 0;
127     padding-bottom: 2px;
128 }
129
130 .toolbar-item.toggleable.toggled-on {
131     border-width: 0 2px 0 2px;
132     padding-left: 4px;
133     padding-right: 4px;
134     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
135 }
136
137 .toolbar-icon {
138     display: none;
139     width: 32px;
140     height: 32px;
141     background-image: url(Images/toolbarIcons.png);
142     vertical-align: top;
143 }
144
145 body.dock-to-bottom .toolbar-icon {
146     width: 24px;
147     height: 24px;
148     vertical-align: middle;
149     background-image: url(Images/toolbarIconsSmall.png);
150 }
151
152 body.show-toolbar-icons .toolbar-icon {
153     display: inline-block;
154 }
155
156 body.dock-to-bottom .toolbar-icon.custom-toolbar-icon {
157     background-position-x: -32px;
158 }
159
160 .toolbar-item:active .toolbar-icon {
161     background-position-y: 32px;
162 }
163
164 body.dock-to-bottom .toolbar-item:active .toolbar-icon {
165     background-position-y: 24px;
166 }
167
168 .toolbar-label {
169     line-height: 23px;
170     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
171 }
172
173 body.show-toolbar-icons .toolbar-label {
174     line-height: 15px;
175 }
176
177 .toolbar-item.toggleable:active .toolbar-label {
178     text-shadow: none;
179 }
180
181 body.show-toolbar-icons.dock-to-bottom .toolbar-label {
182     display: inline-block;
183     margin-left: 3px;
184     top: 0;
185 }
186
187 body.dock-to-bottom #search-toolbar-label {
188     display: none;
189 }
190
191 #toolbar-controls {
192     float: right;
193     display: -webkit-flex;
194     -webkit-align-items: center;
195     height: 100%;
196 }
197
198 #toolbar-dropdown-arrow {
199     font-size: 14px;
200     font-weight: bold;
201     border: 0;
202     background-color: transparent;
203     -webkit-border-radius: 5px;
204     text-shadow: none;
205     cursor: default;
206     margin: 0;
207     /* A line height of 0 allows precise text positioning using padding. */
208     line-height: 0;
209     padding: 11px 6px 11px;
210 }
211
212 #toolbar-dropdown-arrow.dropdown-visible {
213     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 251, 0.9)), to(rgba(231, 231, 231, 0.9)));
214 }
215
216 #toolbar-dropdown-arrow:hover {
217     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(191, 191, 191, 0.7)), to(rgba(171, 171, 171, 0.5)));
218 }
219
220 #toolbar-dropdown-arrow:active {
221     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(111, 111, 111, 0.8)), to(rgba(91, 91, 91, 0.8)));
222 }
223
224 #toolbar-dropdown {
225     position: absolute;
226     z-index: 1000;
227     -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
228     border: 1px solid rgb(128, 128, 128);
229     background-color: inherit;
230     background-image: inherit;
231 }
232
233 body.show-toolbar-icons #toolbar-dropdown {
234     padding: 4px;
235 }
236
237 body.undocked.platform-mac-leopard #toolbar-dropdown,
238 body.undocked.platform-mac-snowleopard #toolbar-dropdown {
239     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
240 }
241
242 #toolbar-dropdown .scrollable-content {
243     display: -webkit-flex;
244     -webkit-flex-direction: column;
245     -webkit-align-items: flex-start;
246     padding-right: 0;
247 }
248
249 #toolbar-dropdown .toolbar-item {
250     display: -webkit-flex;
251     -webkit-flex-direction: row;
252     width: 100%;
253     border: 1px solid rgba(0, 0, 0, 0);
254 }
255
256 body.show-toolbar-icons #toolbar-dropdown .toolbar-item {
257     position: relative;
258     left: -2px;
259     margin: 0px 2px;
260     padding: 4px;
261 }
262
263 #toolbar-dropdown .toolbar-item.toggleable.toggled-on {
264     border: 1px solid rgba(100, 100, 120, 0.4);
265     -webkit-border-image: none;
266     background: -webkit-gradient(linear, left top, left bottom, from(rgba(128, 128, 128, 0.6)), to(rgba(128, 128, 128, 0.6)), color-stop(20%, rgba(158, 158, 158, 0.2)), color-stop(80%, rgba(158, 158, 158, 0.2)));
267 }
268
269 #toolbar-dropdown .toolbar-item.toggleable:hover {
270     background: -webkit-gradient(linear, left top, left bottom, from(rgba(128, 128, 128, 0.6)), to(rgba(128, 128, 128, 0.3)), color-stop(20%, rgba(158, 158, 158, 0.2)), color-stop(80%, rgba(158, 158, 158, 0.1)));
271 }
272
273 #toolbar-dropdown .toolbar-icon {
274     margin-right: 0.5em;
275 }
276
277 #toolbar-dropdown .toolbar-label {
278     line-height: 22px;
279     top: 0;
280 }
281
282 body.show-toolbar-icons #toolbar-dropdown .toolbar-label {
283     line-height: 32px;
284 }
285
286 #toolbar-panels-menu {
287     font-size: 17px;
288     font-weight: bold;
289     border: 0;
290     background-color: transparent;
291     -webkit-border-radius: 5px;
292     text-shadow: none;
293     cursor: default;
294     margin: 0;
295     /* A line height of 0 allows precise text positioning using padding. */
296     line-height: 0;
297     padding: 13px 6px 11px;
298 }
299
300 #toolbar-panels-menu:hover {
301     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(191, 191, 191, 0.7)), to(rgba(171, 171, 171, 0.5)));
302 }
303
304 #toolbar-panels-menu:active {
305     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(111, 111, 111, 0.8)), to(rgba(91, 91, 91, 0.8)));
306 }
307
308 .scrollable-content {
309     position: static;
310     height: 100%;
311     overflow-y: auto;
312     width: 100%;
313     margin-right: 12px;
314     padding-right: 3px;
315 }
316
317 .scrollable-content::-webkit-scrollbar {
318     width: 11px;
319 }
320
321 .scrollable-content::-webkit-scrollbar-corner,
322 .scrollable-content::-webkit-resizer {
323     display: none;
324 }
325
326 .scrollable-content::-webkit-scrollbar-thumb:vertical {
327     background: -webkit-gradient(linear, left top, right top, from(rgb(192, 192, 192)), to(rgb(192, 192, 192)), color-stop(40%, rgb(214, 214, 214)));
328     border-radius: 5px;
329     min-height: 20px;
330 }
331
332 .scrollable-content::-webkit-scrollbar-thumb:vertical:hover,
333 .scrollable-content::-webkit-scrollbar-thumb:vertical:active {
334     background: -webkit-gradient(linear, left top, right top, from(rgb(230, 230, 230)), to(rgb(230, 230, 230)), color-stop(40%, rgb(252, 252, 252)));
335 }
336
337 .scrollable-content::-webkit-scrollbar-track:vertical {
338     background: -webkit-gradient(linear, left top, right top, from(rgb(128, 128, 128)), to(rgb(164, 164, 164)), color-stop(25%, rgb(164, 164, 164)));
339     border-radius: 5px;
340 }
341
342 .search-replace {
343     -webkit-appearance: none;
344     border: 0;
345     padding: 0 2px;
346     margin: 0;
347     width: 165px;
348 }
349
350 .filter {
351     -webkit-appearance: none;
352     border: 0;
353     padding: 0 2px;
354     margin: 0;
355     width: 251px;
356 }
357
358 .search-replace:focus {
359     outline: none;
360 }
361
362 .toolbar-search {
363     border-spacing: 1px;
364 }
365
366 .toolbar-search td {
367     padding: 0 5px 0 0;
368 }
369
370 .toolbar-search-navigation-controls {
371     position: absolute;
372     top: 0;
373     right: 0;
374     height: 18px;
375     background-image: -webkit-linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206));
376 }
377
378 .toolbar-search-navigation {
379     display: inline-block;
380     width: 18px;
381     height: 18px;
382     background-repeat: no-repeat;
383     background-position: 4px 7px;
384     border-left: 1px solid rgb(170, 170, 170);
385     opacity: 0.3;
386 }
387
388 .toolbar-search-navigation.enabled {
389     opacity: 1.0;
390 }
391
392 .toolbar-search input[type="checkbox"] {
393     position: relative;
394     margin-top: -1px;
395     margin-left: 15px;
396     top: 2px;
397 }
398
399 .toolbar-search button {
400     border: 1px solid rgb(163, 163, 163);
401     border-radius: 8px;
402     margin: 0 0px;
403     font-size: 11px;
404     background-image: -webkit-linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220));
405     width: 100%;
406 }
407
408 .toolbar-search button:active {
409     background-image: -webkit-linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156));
410 }
411
412 .toolbar-search-control {
413     display: inline-block;
414     position: relative;
415     background-color: white;
416     border: 1px solid rgb(163, 163, 163);
417     height: 20px;
418     border-radius: 2px;
419     padding-top: 1px;
420 }
421
422 .toolbar-replace-control {
423     border: 1px solid rgb(163, 163, 163);
424     height: 20px;
425     border-radius: 2px;
426     width: 100%;
427 }
428
429 .toolbar-search-navigation.enabled:active {
430     background-position: 4px 7px, 0px 0px;
431 }
432
433 .toolbar-search-navigation.toolbar-search-navigation-prev {
434     background-image: url(Images/searchPrev.png);
435     border-left: 1px solid rgb(163, 163, 163);
436 }
437
438 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
439     background-image: url(Images/searchPrev.png), -webkit-linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
440 }
441
442 .toolbar-search-navigation.toolbar-search-navigation-next {
443     background-image: url(Images/searchNext.png);
444     border-left: 1px solid rgb(230, 230, 230);
445 }
446
447 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
448     background-image: url(Images/searchNext.png), -webkit-linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
449 }
450
451 .search-results-matches {
452     display: inline-block;
453     min-width: 50px;
454     min-height: 10px;
455     margin-right: 36px;
456     text-align: right;
457     font-size: 11px;
458     padding: 0 4px;
459     color: rgb(165, 165, 165);
460 }
461
462 .toolbar-item.elements .toolbar-icon {
463     background-position-x: 0;
464 }
465
466 .toolbar-item.resources .toolbar-icon {
467     background-position-x: -32px;
468 }
469
470 body.dock-to-bottom .toolbar-item.resources .toolbar-icon {
471     background-position-x: -24px;
472 }
473
474 .toolbar-item.network .toolbar-icon {
475     background-position-x: -64px;
476 }
477
478 body.dock-to-bottom .toolbar-item.network .toolbar-icon {
479     background-position-x: -48px;
480 }
481
482 .toolbar-item.scripts .toolbar-icon {
483     background-position-x: -96px;
484 }
485
486 body.dock-to-bottom .toolbar-item.scripts .toolbar-icon {
487     background-position-x: -72px;
488 }
489
490 .toolbar-item.timeline .toolbar-icon {
491     background-position-x: -128px;
492 }
493
494 body.dock-to-bottom .toolbar-item.timeline .toolbar-icon {
495     background-position-x: -96px;
496 }
497
498 .toolbar-item.profiles .toolbar-icon {
499     background-position-x: -160px;
500 }
501
502 .toolbar-item.cpu-profiler .toolbar-icon {
503     background-position-x: -160px;
504 }
505
506 .toolbar-item.css-profiler .toolbar-icon {
507     background-position-x: -160px;
508 }
509
510 .toolbar-item.heap-profiler .toolbar-icon {
511     background-position-x: -160px;
512 }
513
514 .toolbar-item.canvas-profiler .toolbar-icon {
515     background-position-x: -160px;
516 }
517
518 .toolbar-item.memory-chart-profiler .toolbar-icon {
519     background-position-x: -160px;
520 }
521
522 .toolbar-item.memory-snapshot-profiler .toolbar-icon {
523     background-position-x: -160px;
524 }
525
526 body.dock-to-bottom .toolbar-item.profiles .toolbar-icon {
527     background-position-x: -120px;
528 }
529
530 .toolbar-item.audits .toolbar-icon {
531     background-position-x: -192px;
532 }
533
534 body.dock-to-bottom .toolbar-item.audits .toolbar-icon {
535     background-position-x: -144px;
536 }
537
538 .toolbar-item.console .toolbar-icon {
539     background-position-x: -224px;
540 }
541
542 body.dock-to-bottom .toolbar-item.console .toolbar-icon {
543     background-position-x: -168px;
544 }
545
546 #close-button-left, #close-button-right {
547     width: 14px;
548     height: 14px;
549     background-image: url(Images/closeButtons.png);
550     background-position: 0 0;
551 }
552
553 #close-button-left:hover, #close-button-right:hover {
554     background-position: 14px 0;
555 }
556
557 #close-button-left:active, #close-button-right:active {
558     background-position: 28px 0;
559 }
560
561 .close-left {
562     float: left;
563 }
564
565 body.undocked .toolbar-item.close-left, body.undocked .toolbar-item.close-right {
566     display: none;
567 }
568
569 body.dock-to-bottom.port-qt .toolbar-item.close-left, body.dock-to-bottom.port-qt .toolbar-item.close-right {
570     display: none;
571 }
572
573 body.platform-mac .toolbar-item.close-right {
574     display: none;
575 }
576
577 body.remote .toolbar-item.close-left, body.remote .toolbar-item.close-right {
578     display: none;
579 }
580
581 body:not(.platform-mac) .toolbar-item.close-left {
582     display: none;
583 }
584
585 .toolbar-item.close-left, .toolbar-item.close-right {
586   display: -webkit-flex;
587   -webkit-align-items: center;
588   height: 100%;
589   cursor: default;
590 }
591
592 #main {
593     position: absolute;
594     z-index: 1;
595     top: 26px;
596     left: 0;
597     right: 0;
598     bottom: 0;
599     overflow: hidden;
600     background-color: white;
601 }
602
603 .animate-slow * {
604     -webkit-transition-duration: 2.5s !important;
605 }
606
607 .animate #main {
608     -webkit-transition: bottom 100ms linear;
609 }
610
611 body.show-toolbar-icons #main {
612     top: 56px;
613 }
614
615 body.show-toolbar-icons.dock-to-bottom #main {
616     top: 34px;
617 }
618
619 #main-panels {
620     position: absolute;
621     top: 0;
622     left: 0;
623     right: 0;
624     bottom: 23px;
625     overflow: hidden;
626 }
627
628 body.drawer-visible #main-panels {
629     bottom: 24px;
630 }
631
632 #main-status-bar {
633     position: absolute;
634     bottom: 0;
635     left: 0;
636     right: 0;
637 }
638
639 .status-bar {
640     white-space: nowrap;
641     height: 23px;
642     overflow: hidden;
643     z-index: 12;
644     background-image: -webkit-linear-gradient(rgb(253,253,253), rgb(230,230,230) 75%, rgb(230,230,230));
645     border-top: 1px solid rgb(202, 202, 202);
646     display: -webkit-flex;
647 }
648
649 .status-bar > div {
650     display: inline-block;
651     vertical-align: top;
652     overflow: visible;
653 }
654
655 .status-bar-item {
656     display: inline-block;
657     pointer-events: auto;
658     cursor: default;
659     height: 22px;
660     padding: 0;
661     margin-left: -1px;
662     margin-right: 0;
663     vertical-align: top;
664     border: 0 transparent none;
665     background-color: transparent;
666 }
667
668 #floating-status-bar-container {
669     position: absolute;
670     left: 0;
671     right: 0;
672     bottom: 0;
673     display: none;
674     border-bottom: 1px solid rgb(202, 202, 202);
675     cursor: ns-resize;
676     height: 24px;
677 }
678
679 .animate #floating-status-bar-container {
680     -webkit-transition: padding 100ms linear;
681 }
682
683 body.drawer-visible #floating-status-bar-container {
684     display: -webkit-flex;
685 }
686
687 #floating-status-bar-resizer {
688     content: url(Images/statusbarResizerVertical.png);
689     margin-top: 7px;
690     pointer-events: none;
691     height: 8px;
692 }
693
694 #panel-status-bar {
695     -webkit-flex: 1 0;
696     display: -webkit-flex;
697     pointer-events: none;
698 }
699
700 #drawer-view-anchor {
701     display: inline-block;
702 }
703
704 .status-bar-item:active {
705     position: relative;
706     z-index: 200;
707 }
708
709 .glyph {
710     position: absolute;
711     top: -1px;
712     bottom: 1px;
713     left: 0;
714     right: 0;
715     background-color: rgba(0, 0, 0, 0.75);
716     z-index: 1;
717 }
718
719 .glyph.shadow {
720     top: 0;
721     bottom: 0;
722     background-color: white !important;
723     z-index: 0;
724 }
725
726 .long-click-glyph {
727     background-color: rgba(0, 0, 0, 0.75);
728     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
729     -webkit-mask-position: -288px -48px;
730     -webkit-mask-size: 320px 72px;
731     z-index: 1;
732 }
733
734 @media (-webkit-min-device-pixel-ratio: 1.5) {
735 .long-click-glyph {
736     -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
737 }
738 }
739
740 .long-click-glyph.shadow {
741     top: 1px;
742     background-color: white !important;
743     z-index: 0;
744 }
745
746 button.status-bar-item {
747     position: relative;
748     width: 32px;
749     border-left: 1px solid rgb(202, 202, 202);
750     border-right: 1px solid rgb(202, 202, 202);
751 }
752
753 .status-bar button.status-bar-item .glyph {
754     margin: 0 -1px;
755 }
756
757 .status-bar button.status-bar-item img {
758     margin-top: 1px;
759 }
760
761 .status-bar select.status-bar-item:active,
762 .status-bar button.status-bar-item:active {
763     border-left: 1px solid rgb(120, 120, 120);
764     border-right: 1px solid rgb(120, 120, 120);
765 }
766
767 button.status-bar-item .glyph.shadow {
768     background-color: rgba(255, 255, 255, 0.33) !important;
769 }
770
771 button.status-bar-item.toggled-on .glyph {
772     background-color: rgb(66, 129, 235);
773 }
774
775 button.status-bar-item:disabled {
776     opacity: 0.5;
777     background-position: 0 0 !important;
778 }
779
780 button.status-bar-item.extension {
781     background-image: none;
782     background-color: auto;
783 }
784
785 .status-bar-select-container {
786     display: inline-block;
787     background-image: url(Images/disclosureTriangleSmallDown.png);
788     background-repeat: no-repeat;
789     background-position-x: right;
790     background-position-y: 5px;
791     padding-right: 10px;
792     border-right: 5px solid transparent;
793 }
794
795 select.status-bar-item {
796     min-width: 48px;
797     font-weight: bold;
798     color: rgb(48, 48, 48);
799     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
800     -webkit-appearance: none;
801     border: 0;
802     border-radius: 0;
803     padding: 0 15px 0 5px;
804     margin-right: -15px;
805     position: relative;
806     top: -1px;
807 }
808
809 select.status-bar-item, select.status-bar-item:hover {
810     border-left: 1px solid rgb(202, 202, 202);
811     border-right: 1px solid rgb(202, 202, 202);
812 }
813
814 .status-bar-item > .glyph {
815     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
816     -webkit-mask-size: 320px 72px;
817 }
818
819 @media (-webkit-min-device-pixel-ratio: 1.5) {
820 .status-bar-item > .glyph {
821     -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
822 }
823 }
824
825 button.dock-status-bar-item.status-bar-item.toggled-undock .glyph {
826     -webkit-mask-position: 0 -48px;
827 }
828
829 button.dock-status-bar-item.status-bar-item.toggled-bottom .glyph {
830     -webkit-mask-position: -32px -24px;
831     background-color: rgba(0, 0, 0, 0.75);
832 }
833
834 button.dock-status-bar-item.status-bar-item.toggled-right .glyph {
835     -webkit-mask-position: -256px -48px;
836     background-color: rgba(0, 0, 0, 0.75);
837 }
838
839 body.undocked .alternate-status-bar-buttons-bar {
840     margin-left: 1px;
841 }
842
843 .alternate-status-bar-buttons-bar {
844     position: absolute;
845     width: 31px;
846     bottom: -3px;
847     background: white;
848 }
849
850 .alternate-status-bar-buttons-bar .status-bar-item {
851     height: 24px;
852     margin-top: -1px;
853     border: 1px solid rgb(202, 202, 202);
854     border-bottom: 1px solid transparent;
855 }
856
857 .alternate-status-bar-buttons-bar .status-bar-item.emulate-active {
858     background-color: rgb(163,163,163);
859     border: 1px solid rgb(120, 120, 120);
860     border-bottom: 1px solid transparent;
861 }
862
863 button.status-bar-item.settings-status-bar-item,
864 button.status-bar-item.settings-status-bar-item:active {
865     border-right: 0 transparent none;
866 }
867
868 .settings-status-bar-item .glyph {
869     -webkit-mask-position: -160px -24px;
870 }
871
872 body.remote .dock-status-bar-item,
873 body.port-qt .dock-status-bar-item {
874     display: none;
875 }
876
877 .console-status-bar-item .glyph {
878     -webkit-mask-position: -64px -24px;
879 }
880
881 .clear-status-bar-item .glyph {
882     -webkit-mask-position: -64px 0;
883 }
884
885 #error-warning-count {
886     padding: 5px 2px 6px 0px;
887     font-size: 10px;
888     height: 19px;
889     cursor: pointer;
890 }
891
892 #error-warning-count:hover {
893     border-bottom: 1px solid rgb(96, 96, 96);
894 }
895
896 #error-count-img {
897     content: url(Images/errorIcon.png);
898     width: 10px;
899     height: 10px;
900     vertical-align: -1px;
901     margin-right: 2px;
902 }
903
904 #error-count + #warning-count-img {
905     margin-left: 6px;
906 }
907
908 #warning-count-img {
909     content: url(Images/warningIcon.png);
910     width: 10px;
911     height: 10px;
912     vertical-align: -1px;
913     margin-right: 2px;
914 }
915
916 #drawer {
917     display: none;
918     position: absolute;
919     bottom: 0;
920     left: 0;
921     right: 0;
922     height: 200px;
923     background-color: white;
924 }
925
926 .animate #drawer {
927     -webkit-transition: height 100ms linear;
928 }
929
930 #drawer-contents {
931     position: absolute;
932     top: 0;
933     bottom: 24px;
934     left: 0;
935     right: 0;
936 }
937
938 body.drawer-visible #drawer {
939     display: block;
940 }
941
942 body.platform-mac .monospace, body.platform-mac .source-code {
943     font-size: 11px !important;
944     font-family: Menlo, monospace;
945 }
946
947 body.platform-mac.platform-mac-tiger .monospace,
948 body.platform-mac.platform-mac-tiger .source-code {
949     font-size: 10px !important;
950     font-family: Monaco, monospace;
951 }
952
953 body.platform-windows .monospace, body.platform-windows .source-code {
954     font-size: 12px !important;
955     font-family: Consolas, Lucida Console, monospace;
956 }
957
958 body.platform-linux .monospace, body.platform-linux .source-code {
959     font-size: 11px !important;
960     font-family: dejavu sans mono, monospace;
961 }
962
963 #console-view {
964     position: absolute;
965     top: 0;
966     bottom: 0;
967     left: 0;
968     right: 0;
969     overflow-y: auto;
970 }
971
972 #console-messages {
973     position: absolute;
974     z-index: 0;
975     top: 0;
976     left: 0;
977     right: 0;
978     bottom: 0;
979     padding: 2px 0;
980     overflow-y: overlay;
981     word-wrap: break-word;
982     -webkit-user-select: text;
983 }
984
985 #console-prompt {
986     clear: right;
987     position: relative;
988     border-top: 1px solid rgb(240, 240, 240);
989     padding: 1px 22px 1px 0px;
990     margin-left: 24px;
991     min-height: 16px;
992     white-space: pre-wrap;
993     -webkit-user-modify: read-write-plaintext-only;
994 }
995
996 #console-prompt::before {
997     background-image: url(Images/userInputIcon.png);
998 }
999
1000 .console-user-command-result.console-log-level::before {
1001     background-image: url(Images/userInputResultIcon.png);
1002 }
1003
1004 .console-message, .console-user-command {
1005     clear: right;
1006     position: relative;
1007     border-top: 1px solid rgb(240, 240, 240);
1008     padding: 1px 22px 1px 0px;
1009     margin-left: 24px;
1010     min-height: 16px;
1011 }
1012
1013 .console-mesage:first-child {
1014     border-top: none;
1015 }
1016
1017 .console-adjacent-user-command-result {
1018     border-bottom: none;
1019 }
1020
1021 .console-adjacent-user-command-result + .console-user-command-result.console-log-level::before {
1022     background-image: none;
1023 }
1024
1025 .console-message::before, .console-user-command::before, #console-prompt::before, .console-group-title::before {
1026     position: absolute;
1027     display: block;
1028     content: "";
1029     left: -17px;
1030     top: 0.8em;
1031     width: 10px;
1032     height: 10px;
1033     margin-top: -6px;
1034     -webkit-user-select: none;
1035 }
1036
1037 .console-message .bubble {
1038     display: inline-block;
1039     height: 14px;
1040     background-color: rgb(128, 151, 189);
1041     vertical-align: middle;
1042     white-space: nowrap;
1043     padding: 1px 4px;
1044     margin-top: -1px;
1045     margin-right: 4px;
1046     margin-left: -18px;
1047     text-align: left;
1048     font-size: 11px;
1049     line-height: normal;
1050     font-weight: bold;
1051     text-shadow: none;
1052     color: white;
1053     -webkit-border-radius: 7px;
1054 }
1055
1056 .console-message-text {
1057     white-space: pre-wrap;
1058 }
1059
1060 .repeated-message.console-error-level::before, .repeated-message.console-warning-level:before, .repeated-message.console-debug-level:before {
1061     visibility: hidden;
1062 }
1063
1064 .repeated-message .outline-disclosure, .repeated-message > .console-message-text {
1065     -webkit-flex: 1;
1066 }
1067
1068 .console-info {
1069     color: rgb(128, 128, 128);
1070     font-style: italic;
1071 }
1072
1073 .console-group .console-group > .console-group-messages {
1074     margin-left: 16px;
1075 }
1076
1077 .console-group-title {
1078     font-weight: bold;
1079 }
1080
1081 .console-group-title::before {
1082     background-image: url(Images/disclosureTriangleSmallDown.png);
1083     top: 0.6em;
1084     width: 11px;
1085     height: 12px;
1086     left: -16px;
1087     position: absolute;
1088 }
1089
1090 .console-group.collapsed .console-group-title::before {
1091     background-image: url(Images/disclosureTriangleSmallRight.png);
1092 }
1093
1094 .console-group.collapsed > .console-group-messages {
1095     display: none;
1096 }
1097
1098 .console-group {
1099     position: relative;
1100 }
1101
1102 .console-group-bracket {
1103     position:absolute;
1104     top: 15px;
1105     left: 13px;
1106     bottom: 5px;
1107     width: 3px;
1108     border-style: solid;
1109     border-color: #A3A3A3;
1110     border-width: 0px 0px 1px 1px;
1111 }
1112
1113 .console-group.collapsed > .console-group-bracket {
1114     display: none;
1115 }
1116
1117 .console-error-level .console-message-text, .console-error-level .section .header .title {
1118     color: red !important;
1119 }
1120
1121 .console-debug-level .console-message-text {
1122     color: blue;
1123 }
1124
1125 .console-debug-level::before {
1126     background-image: url(Images/searchSmallBrightBlue.png);
1127 }
1128
1129 .console-error-level::before {
1130     background-image: url(Images/errorIcon.png);
1131 }
1132
1133 .console-warning-level::before {
1134     background-image: url(Images/warningIcon.png);
1135     margin-top: -7px;
1136 }
1137
1138 .console-user-command .console-message {
1139     margin-left: -24px;
1140     padding-right: 0;
1141     border-bottom: none;
1142 }
1143
1144 .console-user-command::before {
1145     background-image: url(Images/userInputPreviousIcon.png);
1146 }
1147
1148 .console-user-command > .console-message-text {
1149     color: rgb(0, 128, 255);
1150 }
1151
1152 #console-messages a {
1153     color: rgb(33%, 33%, 33%);
1154     cursor: pointer;
1155 }
1156
1157 #console-messages a:hover {
1158     color: rgb(15%, 15%, 15%);
1159 }
1160
1161 ol.watch-expressions > li.hovered {
1162     background-color: #F0F0F0;
1163 }
1164
1165 .console-message-url {
1166     float: right;
1167     text-align: right;
1168     max-width: 100%;
1169     margin-left: 4px;
1170 }
1171
1172 .console-group-messages .section {
1173     margin: 0 0 0 12px !important;
1174 }
1175
1176 .console-group-messages .section .header {
1177     padding: 0 8px 0 0;
1178     background-image: none;
1179     border: none;
1180     min-height: 0;
1181 }
1182
1183 .console-group-messages .section .header::before {
1184     position: absolute;
1185     top: 1px;
1186     left: 1px;
1187     width: 8px;
1188     height: 8px;
1189     content: url(Images/treeRightTriangleBlack.png);
1190 }
1191
1192 .console-group-messages .section.expanded .header::before {
1193     content: url(Images/treeDownTriangleBlack.png);
1194 }
1195
1196 .console-group-messages .section .header .title {
1197     color: black;
1198     font-weight: normal;
1199     line-height: 13px;
1200 }
1201
1202 .console-group-messages .section .properties li .info {
1203     padding-top: 0;
1204     padding-bottom: 0;
1205     color: rgb(60%, 60%, 60%);
1206 }
1207
1208 .console-group-messages .outline-disclosure {
1209     padding-left: 0;
1210 }
1211
1212 .console-group-messages .outline-disclosure > ol {
1213     padding: 0 0 0 12px !important;
1214 }
1215
1216 .console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
1217     font-size: inherit;
1218     line-height: 12px;
1219 }
1220
1221 .console-group-messages .outline-disclosure.single-node li {
1222     padding-left: 2px;
1223 }
1224
1225 .console-group-messages .outline-disclosure li .selection {
1226     margin-left: -6px;
1227     margin-right: -6px;
1228 }
1229
1230 .console-group-messages .add-attribute {
1231     display: none;
1232 }
1233
1234 .console-formatted-object, .console-formatted-node, .console-formatted-array {
1235     position: relative;
1236     display: inline-block;
1237     vertical-align: top;
1238     color: black;
1239 }
1240
1241 .console-formatted-node:hover {
1242     background-color: rgba(56, 121, 217, 0.1);
1243 }
1244
1245 .console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section {
1246     position: static;
1247 }
1248
1249 .console-formatted-object .properties, .console-formatted-node .properties {
1250     padding-left: 0 !important;
1251 }
1252
1253 .console-formatted-number {
1254     color: rgb(28, 0, 207);
1255 }
1256
1257 .console-formatted-string, .console-formatted-regexp {
1258     color: rgb(196, 26, 22);
1259     white-space: pre;
1260 }
1261
1262 .console-formatted-null, .console-formatted-undefined {
1263     color: rgb(128, 128, 128);
1264 }
1265
1266 .console-formatted-preview-node,
1267 .section .console-formatted-node {
1268     color: rgb(136, 18, 128);
1269 }
1270
1271 .console-object-preview {
1272     font-style: italic;
1273 }
1274
1275 .object-info-state-note {
1276     display: none;
1277     width: 11px;
1278     height: 11px;
1279     background-color: rgb(179, 203, 247);
1280     color: white;
1281     text-align: center;
1282     border-radius: 3px;
1283     line-height: 13px;
1284     margin: 0 6px;
1285     font-size: 9px;
1286 }
1287
1288 .object-info-state-note::before {
1289     content: "i";
1290 }
1291
1292 .section.expanded .object-info-state-note {
1293     display: inline-block;
1294 }
1295
1296 .error-message {
1297     color: red;
1298 }
1299
1300 .error-input {
1301     background-color: rgb(220, 130, 130);
1302 }
1303
1304 .auto-complete-text, .editing .auto-complete-text {
1305     color: rgb(128, 128, 128) !important;
1306     -webkit-user-select: none;
1307     -webkit-user-modify: read-only;
1308 }
1309
1310 .panel {
1311     display: none;
1312     overflow: hidden;
1313     position: absolute;
1314     top: 0;
1315     left: 0;
1316     right: 0;
1317     bottom: 0;
1318 }
1319
1320 .panel.visible {
1321     display: block;
1322 }
1323
1324 iframe.extension {
1325     width: 100%;
1326     height: 100%;
1327 }
1328
1329 iframe.panel.extension {
1330     display: block;
1331     height: 100%;
1332 }
1333
1334 .webkit-line-gutter-backdrop {
1335     /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */
1336     width: 31px;
1337     background-color: rgb(240, 240, 240);
1338     border-right: 1px solid rgb(187, 187, 187);
1339     position: absolute;
1340     z-index: -1;
1341     left: 0;
1342     top: 0;
1343     height: 100%
1344 }
1345
1346 .outline-disclosure li.hovered:not(.selected) .selection {
1347     display: block;
1348     left: 3px;
1349     right: 3px;
1350     background-color: rgba(56, 121, 217, 0.1);
1351     -webkit-border-radius: 5px;
1352 }
1353
1354 .outline-disclosure li.highlighted .highlight {
1355     background-color: rgb(255, 230, 179);
1356     -webkit-border-radius: 4px;
1357     padding-bottom: 2px;
1358     margin-bottom: -2px;
1359 }
1360
1361 .outline-disclosure li.selected.highlighted .highlight {
1362     background-color: transparent;
1363     padding-bottom: 0;
1364     margin-bottom: 0;
1365 }
1366
1367 .outline-disclosure li .selection {
1368     display: none;
1369     position: absolute;
1370     left: 0;
1371     right: 0;
1372     height: 15px;
1373     z-index: -1;
1374 }
1375
1376 .outline-disclosure li.selected .selection {
1377     display: block;
1378     background-color: rgb(212, 212, 212);
1379 }
1380
1381 .outline-disclosure li.elements-drag-over .selection {
1382     display: block;
1383     margin-top: -2px;
1384     border-top: 2px solid rgb(56, 121, 217);
1385 }
1386
1387 .outline-disclosure ol:focus li.selected .selection {
1388     background-color: rgb(56, 121, 217);
1389 }
1390
1391 .outline-disclosure ol.search-match-not-found li.selected .selection {
1392     border: 1px solid rgb(56, 121, 217);
1393     background-color: white;
1394 }
1395
1396 .outline-disclosure > ol {
1397     position: relative;
1398     padding: 2px 6px !important;
1399     margin: 0;
1400     cursor: default;
1401     min-width: 100%;
1402 }
1403
1404 .outline-disclosure, .outline-disclosure ol {
1405     list-style-type: none;
1406     -webkit-padding-start: 12px;
1407     margin: 0;
1408 }
1409
1410 .source-code {
1411     font-family: monospace;
1412     font-size: 11px !important;
1413     white-space: pre-wrap;
1414 }
1415
1416 .outline-disclosure li {
1417     padding: 0 0 0 14px;
1418     margin-top: 1px;
1419     margin-left: -2px;
1420     word-wrap: break-word;
1421 }
1422
1423 .outline-disclosure ol:focus li.selected {
1424     color: white;
1425 }
1426
1427 .outline-disclosure ol.search-match-found li.selected {
1428     color: white;
1429 }
1430
1431 .outline-disclosure ol:focus li.selected * {
1432     color: inherit;
1433 }
1434
1435 .outline-disclosure ol.search-match-found li.selected * {
1436     color: inherit;
1437 }
1438
1439 .outline-disclosure li.parent {
1440     margin-left: -12px
1441 }
1442
1443 .outline-disclosure li .webkit-html-tag.close {
1444     margin-left: -12px;
1445 }
1446
1447 .webkit-html-tag.shadow, .webkit-html-fragment.shadow {
1448     opacity: 0.6;
1449 }
1450
1451 .outline-disclosure li.parent::before {
1452     float: left;
1453     width: 8px;
1454     height: 8px;
1455     padding-right: 2px;
1456 }
1457
1458 .outline-disclosure li.parent::before {
1459     content: url(Images/treeRightTriangleBlack.png);
1460 }
1461
1462 .outline-disclosure ol:focus li.parent.selected::before {
1463     content: url(Images/treeRightTriangleWhite.png);
1464 }
1465
1466 .outline-disclosure ol.search-match-found li.parent.selected::before {
1467     content: url(Images/treeRightTriangleWhite.png);
1468 }
1469
1470 .outline-disclosure li.parent.expanded::before {
1471     content: url(Images/treeDownTriangleBlack.png);
1472 }
1473
1474 .outline-disclosure ol:focus li.parent.expanded.selected::before {
1475     content: url(Images/treeDownTriangleWhite.png);
1476 }
1477
1478 .outline-disclosure ol.search-match-found li.parent.expanded.selected::before {
1479     content: url(Images/treeDownTriangleWhite.png);
1480 }
1481
1482 .outline-disclosure ol.children {
1483     display: none;
1484 }
1485
1486 .outline-disclosure ol.children.expanded {
1487     display: block;
1488 }
1489
1490 .placard {
1491     position: relative;
1492     margin-top: 1px;
1493     padding: 3px 8px 4px 18px;
1494     min-height: 18px;
1495     white-space: nowrap;
1496 }
1497
1498 .placard:nth-of-type(2n) {
1499     background-color: rgb(234, 243, 255);
1500 }
1501
1502 .placard.selected {
1503     border-top: 1px solid rgb(172, 172, 172);
1504     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(182, 182, 182)), to(rgb(162, 162, 162)));
1505     -webkit-background-origin: padding;
1506     -webkit-background-clip: padding;
1507 }
1508
1509 :focus .placard.selected {
1510     border-top: 1px solid rgb(70, 103, 215);
1511     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(56, 121, 217)));
1512 }
1513
1514 .placard .title {
1515     color: black;
1516     font-weight: normal;
1517     word-wrap: break-word;
1518     white-space: normal;
1519 }
1520
1521 .placard.selected .title {
1522     color: white;
1523     font-weight: bold;
1524 }
1525
1526 .placard .subtitle {
1527     float: right;
1528     font-size: 10px;
1529     margin-left: 5px;
1530     color: rgba(0, 0, 0, 0.7);
1531     text-overflow: ellipsis;
1532     overflow: hidden;
1533 }
1534
1535 .placard.selected .subtitle {
1536     color: rgba(255, 255, 255, 0.7);
1537 }
1538
1539 .placard .subtitle a {
1540     color: inherit;
1541 }
1542
1543 .section {
1544     position: relative;
1545     margin-top: 1px;
1546 }
1547
1548 .events-pane .section {
1549     margin: 0;
1550 }
1551 .events-pane .section:not(:nth-of-type(1)) {
1552     border-top: 1px solid rgb(231, 231, 231);
1553 }
1554
1555 .section .header {
1556     color: black;
1557     padding: 0 8px 0 18px;
1558     min-height: 18px;
1559     white-space: nowrap;
1560     -webkit-background-origin: padding;
1561     -webkit-background-clip: padding;
1562 }
1563
1564 .section .header::before {
1565     position: absolute;
1566     top: 2px;
1567     left: 7px;
1568     width: 8px;
1569     height: 8px;
1570     content: url(Images/treeRightTriangleBlack.png);
1571     opacity: 0.8;
1572 }
1573
1574 .section.expanded .header::before {
1575     content: url(Images/treeDownTriangleBlack.png);
1576 }
1577
1578 .section .header .title, .event-bar .header .title {
1579     font-weight: normal;
1580     word-wrap: break-word;
1581     white-space: normal;
1582     line-height: 18px;
1583 }
1584
1585 .section .header .title.blank-title {
1586     font-style: italic;
1587 }
1588
1589 .section .header label, .event-bar .header label {
1590     display: none;
1591 }
1592
1593 .section.expanded .header label, .event-bar.expanded .header label {
1594     display: inline;
1595 }
1596
1597 .section .header .subtitle, .event-bar .header .subtitle {
1598     float: right;
1599     margin-left: 5px;
1600     max-width: 55%;
1601     text-overflow: ellipsis;
1602     overflow: hidden;
1603 }
1604
1605 .section .header .subtitle a {
1606     color: inherit;
1607 }
1608
1609 .section .properties, .event-bar .event-properties {
1610     display: none;
1611 }
1612
1613 .section.expanded .properties, .event-bar.expanded .event-properties {
1614     display: block;
1615 }
1616
1617 .event-bar .event-properties {
1618     padding-left: 16px;
1619 }
1620
1621 .section.no-affect .properties li {
1622     opacity: 0.5;
1623 }
1624
1625 .section.no-affect .properties li.editing {
1626     opacity: 1.0;
1627 }
1628
1629 .properties-tree {
1630     margin: 0;
1631     padding: 0 6px 2px;
1632     list-style: none;
1633     min-height: 18px;
1634 }
1635
1636 .properties-tree li {
1637     margin-left: 12px;
1638     white-space: nowrap;
1639     text-overflow: ellipsis;
1640     overflow: hidden;
1641     -webkit-user-select: text;
1642     cursor: default;
1643 }
1644
1645 .properties-tree li.parent {
1646     margin-left: 1px;
1647 }
1648
1649 .properties-tree li.parent::before {
1650     content: url(Images/treeRightTriangleBlack.png);
1651     opacity: 0.75;
1652     float: left;
1653     width: 8px;
1654     height: 8px;
1655     margin-top: 0;
1656     padding-right: 3px;
1657     -webkit-user-select: none;
1658 }
1659
1660 .properties-tree li.parent.expanded::before {
1661     content: url(Images/treeDownTriangleBlack.png);
1662     margin-top: 1px;
1663 }
1664
1665 .properties-tree li .info {
1666     padding-top: 4px;
1667     padding-bottom: 3px;
1668 }
1669
1670 .properties-tree ol {
1671     display: none;
1672     margin: 0;
1673     -webkit-padding-start: 12px;
1674     list-style: none;
1675 }
1676
1677 .properties-tree ol.expanded {
1678     display: block;
1679 }
1680
1681 .editing {
1682     -webkit-user-select: text;
1683     -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
1684     outline: 1px solid rgb(66%, 66%, 66%) !important;
1685     background-color: white;
1686     -webkit-user-modify: read-write-plaintext-only;
1687     text-overflow: clip !important;
1688     padding-left: 2px;
1689     margin-left: -2px;
1690     padding-right: 2px;
1691     margin-right: -2px;
1692     margin-bottom: -1px;
1693     padding-bottom: 1px;
1694     opacity: 1.0 !important;
1695 }
1696
1697 .editing, .editing * {
1698     color: black !important;
1699     text-decoration: none !important;
1700 }
1701
1702 .child-editing {
1703     color: black !important;
1704     text-decoration: none !important;
1705     overflow: visible !important;
1706 }
1707
1708 .editing br {
1709     display: none;
1710 }
1711
1712 .section .properties li.editing {
1713     margin-left: 10px;
1714     text-overflow: clip;
1715 }
1716
1717 li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-button {
1718     display: none !important;
1719 }
1720
1721 .properties-tree.watch-expressions {
1722     padding-bottom: 8px;
1723     padding-left: 4px !important;
1724 }
1725
1726 .properties-tree.watch-expressions > li {
1727     padding-top: 2px;
1728     padding-left: 4px;
1729 }
1730
1731 .properties-tree.watch-expressions > li > .value {
1732     display: inline;
1733     position: static;
1734 }
1735
1736 .properties-tree.watch-expressions > li:not(.parent) {
1737     margin-left: 1px;
1738     padding-left: 15px;
1739 }
1740
1741 .properties-tree.watch-expressions > li.hovered {
1742     padding-right: 14px;
1743 }
1744
1745 .watch-expressions > li.editing-sub-part .text-prompt {
1746     display: block;
1747     width: 100%;
1748 }
1749
1750 .watch-expressions > li.editing-sub-part .value, .watch-expressions > li.editing-sub-part .separator  {
1751     display: none;
1752 }
1753
1754 .section .properties li.editing-sub-part {
1755     padding: 3px 6px 8px 18px;
1756     margin: -3px -6px -8px -6px;
1757     text-overflow: clip;
1758 }
1759
1760 .section .properties .delete-button {
1761     width: 10px;
1762     height: 10px;
1763     background-image: url(Images/deleteIcon.png);
1764     background-position: 0 0;
1765     background-color: transparent;
1766     background-repeat: no-repeat;
1767     border: 0 none transparent;
1768     position: absolute;
1769     right: 8px;
1770     display: none;
1771 }
1772
1773 .section .properties li.hovered .delete-button {
1774     display: inline;
1775 }
1776
1777 .section .properties .name, .event-properties .name, .console-formatted-object .name {
1778     color: rgb(136, 19, 145);
1779 }
1780
1781 .section .properties .dimmed {
1782     opacity: 0.6;
1783 }
1784
1785 .section .properties .value.error {
1786     color: red;
1787 }
1788
1789 .section .properties .number, .event-properties .number {
1790     color: blue;
1791 }
1792
1793 .section .properties .keyword, .event-properties .keyword {
1794     color: rgb(136, 19, 79);
1795 }
1796
1797 .section .properties .color, .event-properties .color {
1798     color: rgb(118, 15, 21);
1799 }
1800
1801 .swatch {
1802     margin-left: 1px;
1803     margin-right: 2px;
1804     margin-bottom: -1px;
1805     width: 1em;
1806     height: 1em;
1807     display: inline-block;
1808     background-image: url(Images/checker.png);
1809 }
1810
1811 .swatch-inner {
1812     width: 100%;
1813     height: 100%;
1814     display: inline-block;
1815     border: 1px solid rgba(128, 128, 128, 0.6);
1816 }
1817
1818 .swatch-inner:hover {
1819     border: 1px solid rgba(64, 64, 64, 0.8);
1820 }
1821
1822 .sidebar {
1823     overflow-x: hidden;
1824     background-color: rgb(214, 221, 229);
1825 }
1826
1827 body.inactive .sidebar {
1828     background-color: rgb(232, 232, 232);
1829 }
1830
1831 .pane-title-button {
1832     color: rgb(6, 6, 6);
1833     background-color: transparent;
1834     border: 1px solid rgb(165, 165, 165);
1835     background-color: rgb(237, 237, 237);
1836     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
1837     -webkit-border-radius: 12px;
1838     -webkit-appearance: none;
1839 }
1840
1841 .pane-title-button:active {
1842     background-color: rgb(215, 215, 215);
1843     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
1844 }
1845
1846 button.show-all-nodes {
1847     font-size: 13px;
1848     margin: 0;
1849     padding: 0 20px;
1850     height: 20px;
1851     color: rgb(6, 6, 6);
1852     background-color: transparent;
1853     border: 1px solid rgb(165, 165, 165);
1854     background-color: rgb(237, 237, 237);
1855     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
1856     -webkit-border-radius: 12px;
1857     -webkit-appearance: none;
1858 }
1859
1860 body.inactive button.show-all-nodes {
1861     color: rgb(130, 130, 130);
1862     border-color: rgb(212, 212, 212);
1863     background-color: rgb(239, 239, 239);
1864     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235)));
1865 }
1866
1867 button.show-all-nodes:active {
1868     background-color: rgb(215, 215, 215);
1869     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
1870 }
1871
1872 button.enable-toggle-status-bar-item .glyph {
1873     -webkit-mask-position: -192px 0;
1874 }
1875
1876 button.enable-toggle-status-bar-item.toggled-on .glyph {
1877     -webkit-mask-position: -96px -24px;
1878 }
1879
1880 #console-messages.console-filter-top {
1881     margin-top: 23px;
1882 }
1883
1884 .scope-bar {
1885     line-height: 19px;
1886     padding-right: 10px;
1887     overflow: hidden;
1888 }
1889
1890 .scope-bar li {
1891     display: inline-block;
1892     margin: 0 2px;
1893     padding: 2px 6px;
1894     line-height: 12px;
1895     font-weight: bold;
1896     color: rgb(46, 46, 46);
1897     background: transparent;
1898     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
1899     -webkit-border-radius: 8px;
1900     vertical-align: middle;
1901 }
1902
1903 .scope-bar-divider {
1904     background-color: rgba(0, 0, 0, 0.4);
1905     height: 16px;
1906     width: 1px;
1907     vertical-align: middle;
1908     display: inline-block;
1909 }
1910
1911 .scope-bar li.selected, .scope-bar li:hover, .scope-bar li:active {
1912     color: white;
1913     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
1914 }
1915
1916 .scope-bar li.all {
1917     margin: 0 8px;
1918 }
1919
1920 .scope-bar li:hover {
1921     background: rgba(0, 0, 0, 0.2);
1922 }
1923
1924 .scope-bar li.selected {
1925     background: rgba(0, 0, 0, 0.3);
1926     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
1927 }
1928
1929 .scope-bar li:active {
1930     background: rgba(0, 0, 0, 0.5);
1931     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
1932 }
1933
1934 .console-warning-level, .console-error-level, .console-log-level, .console-debug-level {
1935     display: none;
1936 }
1937
1938 .filter-all .console-warning-level, .filter-warnings .console-warning-level,
1939 .filter-all .console-error-level, .filter-errors .console-error-level,
1940 .filter-all .console-log-level, .filter-logs .console-log-level,
1941 .filter-all .console-debug-level, .filter-debug .console-debug-level {
1942     display: block;
1943 }
1944
1945 .filter-all .console-warning-level.repeated-message, .filter-warnings .console-warning-level.repeated-message,
1946 .filter-all .console-error-level.repeated-message, .filter-errors .console-error-level.repeated-message,
1947 .filter-all .console-log-level.repeated-message, .filter-logs .console-log-level.repeated-message,
1948 .filter-all .console-debug-level.repeated-message, .filter-debug .console-debug-level.repeated-message {
1949     display: -webkit-flex;
1950 }
1951
1952 .console-user-command-result {
1953     display: block;
1954 }
1955
1956 .source-view-frame {
1957     width: 100%;
1958     height: 100%;
1959 }
1960
1961 .sidebar-resizer-vertical {
1962     position: absolute;
1963     top: 0;
1964     bottom: 0;
1965     width: 5px;
1966     z-index: 500;
1967     cursor: ew-resize;
1968 }
1969
1970 .sidebar-tree, .sidebar-tree .children {
1971     position: relative;
1972     padding: 0;
1973     margin: 0;
1974     list-style: none;
1975 }
1976
1977 .sidebar-tree-section {
1978     position: relative;
1979     height: 18px;
1980     padding: 1px 10px 6px 10px;
1981     white-space: nowrap;
1982     margin-top: 1px;
1983     color: rgb(92, 110, 129);
1984     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1985 }
1986
1987 .sidebar-tree-item {
1988     position: relative;
1989     height: 36px;
1990     padding: 0 5px 0 5px;
1991     white-space: nowrap;
1992     overflow-x: hidden;
1993     overflow-y: hidden;
1994     margin-top: 1px;
1995     line-height: 34px;
1996     border-top: 1px solid transparent;
1997 }
1998
1999 .sidebar-tree .children {
2000     display: none;
2001 }
2002
2003 .sidebar-tree .children.expanded {
2004     display: block;
2005 }
2006
2007 .sidebar-tree-section + .children > .sidebar-tree-item {
2008     padding-left: 10px !important;
2009 }
2010
2011 .sidebar-tree-section + .children.small > .sidebar-tree-item {
2012     padding-left: 17px !important;
2013 }
2014
2015 .sidebar-tree > .children > .sidebar-tree-item {
2016     padding-left: 37px;
2017 }
2018
2019 .sidebar-tree > .children > .children > .sidebar-tree-item {
2020     padding-left: 37px;
2021 }
2022
2023 .sidebar-tree.hide-disclosure-buttons > .children {
2024     display: none;
2025 }
2026
2027 .sidebar-tree > .children.hide-disclosure-buttons > .children {
2028     display: none;
2029 }
2030
2031 .sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
2032     margin-left: 16px;
2033 }
2034
2035 .sidebar-tree-item .disclosure-button {
2036     float: left;
2037     width: 16px;
2038     height: 100%;
2039     border: 0;
2040     background-color: transparent;
2041     background-image: url(Images/disclosureTriangleSmallRight.png);
2042     background-repeat: no-repeat;
2043     background-position: center;
2044     -webkit-apearance: none;
2045 }
2046
2047 .sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
2048     display: none;
2049 }
2050
2051 body.inactive .sidebar-tree-item .disclosure-button {
2052     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
2053 }
2054
2055 body.inactive .sidebar-tree-item.expanded .disclosure-button {
2056     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
2057 }
2058
2059 body.inactive .sidebar-tree-item .disclosure-button:active {
2060     background-image: url(Images/disclosureTriangleSmallRightDownBlack.png);
2061 }
2062
2063 .sidebar-tree-item.selected .disclosure-button {
2064     background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important;
2065 }
2066
2067 .sidebar-tree-item.expanded .disclosure-button {
2068     background-image: url(Images/disclosureTriangleSmallDown.png);
2069 }
2070
2071 .sidebar-tree-item.selected.expanded .disclosure-button {
2072     background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important;
2073 }
2074
2075 .sidebar-tree-item.selected .disclosure-button:active {
2076     background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important;
2077 }
2078
2079 .sidebar-tree-item .disclosure-button:active {
2080     background-image: url(Images/disclosureTriangleSmallRightDown.png);
2081 }
2082
2083 .sidebar-tree-item .icon {
2084     float: left;
2085     width: 32px;
2086     height: 32px;
2087     margin-top: 1px;
2088     margin-right: 3px;
2089 }
2090
2091 li .status {
2092     float: right;
2093     height: 16px;
2094     margin-top: 9px;
2095     margin-left: 4px;
2096     line-height: 1em;
2097 }
2098
2099 li .status:empty {
2100     display: none;
2101 }
2102
2103 li .status .bubble {
2104     display: inline-block;
2105     height: 14px;
2106     min-width: 16px;
2107     margin-top: 1px;
2108     background-color: rgb(128, 151, 189);
2109     vertical-align: middle;
2110     white-space: nowrap;
2111     padding: 1px 4px;
2112     text-align: center;
2113     font-size: 11px;
2114     line-height: normal;
2115     font-weight: bold;
2116     text-shadow: none;
2117     color: white;
2118     -webkit-border-radius: 7px;
2119 }
2120
2121 li .status .bubble:empty {
2122     display: none;
2123 }
2124
2125 li.selected .status .bubble {
2126     background-color: white !important;
2127     color: rgb(132, 154, 190) !important;
2128 }
2129
2130 :focus li.selected .status .bubble {
2131     color: rgb(36, 98, 172) !important;
2132 }
2133
2134 body.inactive li.selected .status .bubble {
2135     color: rgb(159, 159, 159) !important;
2136 }
2137
2138 .sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side {
2139     height: 20px;
2140 }
2141
2142 .sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
2143     width: 16px;
2144     height: 16px;
2145 }
2146
2147 .sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
2148     margin-top: 1px;
2149 }
2150
2151 .sidebar-tree-item.selected {
2152     color: white;
2153     border-top: 1px solid rgb(145, 160, 192);
2154     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
2155     text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
2156     -webkit-background-origin: padding;
2157     -webkit-background-clip: padding;
2158 }
2159
2160 :focus .sidebar-tree-item.selected {
2161     border-top: 1px solid rgb(68, 128, 200);
2162     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
2163 }
2164
2165 body.inactive .sidebar-tree-item.selected {
2166     border-top: 1px solid rgb(151, 151, 151);
2167     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
2168 }
2169
2170 .sidebar-tree-item .titles {
2171     position: relative;
2172     top: 5px;
2173     line-height: 12px;
2174     padding-bottom: 1px;
2175     text-overflow: ellipsis;
2176     overflow: hidden;
2177     white-space: nowrap;
2178 }
2179
2180 .sidebar-tree-item .titles.no-subtitle {
2181     top: 10px;
2182 }
2183
2184 .sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
2185     top: 2px;
2186     line-height: normal;
2187 }
2188
2189 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
2190     content: "\A";
2191     white-space: pre;
2192 }
2193
2194 .sidebar-tree-item .subtitle {
2195     font-size: 80%;
2196 }
2197
2198 .sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
2199     display: none;
2200 }
2201
2202 .sidebar-tree-item.selected .subtitle {
2203     color: white;
2204 }
2205
2206 .bubble.debug, .console-debug-level .bubble {
2207     background-color: rgb(0, 0, 255) !important;
2208 }
2209
2210 .bubble.warning, .console-warning-level .bubble {
2211     background-color: rgb(232, 164, 0) !important;
2212 }
2213
2214 .bubble.error, .console-error-level .bubble {
2215     background-color: rgb(216, 35, 35) !important;
2216 }
2217
2218 .bubble.search-matches {
2219     background-image: url(Images/searchSmallWhite.png);
2220     background-repeat: no-repeat;
2221     background-position: 3px 2px;
2222     padding-left: 13px !important;
2223 }
2224
2225 li.selected .bubble.search-matches {
2226     background-image: url(Images/searchSmallBlue.png);
2227 }
2228
2229 :focus li.selected .bubble.search-matches {
2230     background-image: url(Images/searchSmallBrightBlue.png);
2231 }
2232
2233 body.inactive li.selected .bubble.search-matches {
2234     background-image: url(Images/searchSmallGray.png);
2235 }
2236
2237 .storage-application-cache-status-icon, .storage-application-cache-connectivity-icon {
2238     margin-bottom: -3px;
2239     margin-left: 5px;
2240     vertical-align: middle;
2241 }
2242
2243 .status-bar-divider {
2244     margin-left: 7px;
2245     border-right: 1px solid #CCC;
2246 }
2247
2248 .storage-application-cache-status, .storage-application-cache-connectivity {
2249     position: relative;
2250     top: 4px;
2251 }
2252
2253 .status-bar-items {
2254     position: absolute;
2255     top: 0;
2256     bottom: 0;
2257     left: 200px;
2258     overflow: hidden;
2259     border-left: 1px solid rgb(184, 184, 184);
2260     margin-left: -1px;
2261 }
2262
2263 .node-search-status-bar-item .glyph {
2264     -webkit-mask-position: -224px -24px;
2265 }
2266
2267 .delete-storage-status-bar-item .glyph {
2268     -webkit-mask-position: -128px 0;
2269 }
2270
2271 .clear-storage-status-bar-item .glyph {
2272     -webkit-mask-position: -64px 0;
2273 }
2274
2275 .refresh-storage-status-bar-item .glyph {
2276     -webkit-mask-position: 0 0;
2277 }
2278
2279 .webkit-html-js-node, .webkit-html-css-node {
2280     white-space: pre;
2281 }
2282
2283 .source-frame-breakpoint-condition {
2284     z-index: 30;
2285     padding: 4px;
2286     background-color: rgb(203, 226, 255);
2287     -webkit-border-radius: 7px;
2288     border: 2px solid rgb(169, 172, 203);
2289     width: 90%;
2290     pointer-events: auto;
2291 }
2292
2293 .source-frame-breakpoint-message {
2294     background-color: transparent;
2295     font-weight: normal;
2296     font-size: 11px;
2297     text-align: left;
2298     text-shadow: none;
2299     color: rgb(85, 85, 85);
2300     cursor: default;
2301     margin: 0 0 2px 0;
2302 }
2303
2304 #source-frame-breakpoint-condition {
2305     margin: 0;
2306     border: 1px inset rgb(190, 190, 190) !important;
2307     width: 100%;
2308     box-shadow: none !important;
2309     outline: none !important;
2310     -webkit-user-modify: read-write;
2311 }
2312
2313 .source-frame-popover-title {
2314     text-overflow: ellipsis;
2315     overflow: hidden;
2316     white-space: nowrap;
2317     font-weight: bold;
2318     padding-left: 18px;
2319 }
2320
2321 .source-frame-popover-tree {
2322     border-top: 1px solid rgb(194, 194, 147);
2323     overflow: auto;
2324     position: absolute;
2325     top: 15px;
2326     bottom: 0;
2327     left: 0;
2328     right: 0;
2329 }
2330
2331 .source-frame-eval-expression {
2332     border: 1px solid rgb(163, 41, 34);
2333     margin: -1px;
2334     background-color: rgb(255, 255, 194);
2335 }
2336
2337 .workers-list {
2338     list-style: none;
2339     margin: 0;
2340     padding: 0;
2341 }
2342
2343 .resource-content-unavailable {
2344     color: rgb(50%, 50%, 50%);
2345     font-style: italic;
2346     font-size: 14px;
2347     text-align: center;
2348     padding: 32px;
2349 }
2350
2351 .node-link {
2352     text-decoration: underline;
2353     cursor: pointer;
2354 }
2355
2356 .cursor-pointer {
2357     cursor: pointer;
2358 }
2359
2360 .cursor-auto {
2361     cursor: auto;
2362 }
2363
2364 .please-wait-msg {
2365     position: absolute;
2366     left: 0;
2367     top: 0;
2368     border: 4px black solid;
2369     border-radius: 4px;
2370     background-color: black;
2371     opacity: 0.85;
2372     color: white;
2373     font-size: 12px;
2374     font-weight: bold;
2375     z-index: 10000;
2376 }
2377
2378 .resource-view.json {
2379     padding: 5px;
2380 }
2381
2382 .resource-view.html iframe {
2383     width: 100%;
2384     height: 100%;
2385     position: absolute;
2386 }
2387
2388 .soft-context-menu-glass-pane {
2389     position: absolute;
2390     top: 0;
2391     bottom: 0;
2392     left: 0;
2393     right: 0;
2394     z-index: 20000;
2395 }
2396
2397 .soft-context-menu {
2398     position: absolute;
2399     border: 1px solid rgba(196, 196, 196, 0.9);
2400     border-top: 1px solid rgba(196, 196, 196, 0.5);
2401     border-bottom: 1px solid rgba(150, 150, 150, 0.9);
2402     padding: 4px 0 4px 0;
2403     border-radius: 4px;
2404     background-color: white;
2405     -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
2406 }
2407
2408 .soft-context-menu-item {
2409     width: 100%;
2410     line-height: 13px;
2411     font-size: 14px;
2412     border-top: 1px solid transparent;
2413     border-bottom: 1px solid transparent;
2414     padding: 2px 7px 2px 6px;
2415     margin: 0 13px 0 0;
2416     white-space: nowrap;
2417 }
2418
2419 .soft-context-menu-separator {
2420     height: 10px;
2421     margin: 0 1px;
2422 }
2423
2424 .soft-context-menu-separator > .separator-line {
2425     margin: 0;
2426     height: 5px;
2427     border-bottom: 1px solid rgb(227, 227, 227);
2428     pointer-events: none;
2429 }
2430
2431 .soft-context-menu-item-mouse-over {
2432     border-top: 1px solid rgb(56, 121, 217);
2433     border-bottom: 1px solid rgb(56, 121, 217);
2434     background-color: rgb(56, 121, 217);
2435     color: white;
2436 }
2437
2438 body.platform-mac .soft-context-menu-item-mouse-over {
2439     border-top: 1px solid rgb(90, 131, 236);
2440     border-bottom: 1px solid rgb(18, 88, 233);
2441     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(100, 140, 243)), to(rgb(36, 101, 243)));
2442 }
2443
2444 .soft-context-menu-item-checkmark {
2445     color: rgb(108, 108, 108);
2446     pointer-events: none;
2447 }
2448
2449 .soft-context-menu-item-submenu-arrow {
2450     color: black;
2451     float: right;
2452     pointer-events: none;
2453 }
2454
2455 .soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
2456     color: white;
2457 }
2458
2459 .search-view {
2460     position: absolute;
2461     top: 0;
2462     bottom: 0;
2463     left: 0;
2464     right: 0;
2465 }
2466
2467 .search-drawer-header input[type="search"].search-config-search {
2468     font-size: 11px;
2469     margin-left: 4px;
2470     color: #303030;
2471     position: relative;
2472 }
2473
2474 body.platform-mac .search-drawer-header input[type="search"].search-config-search {
2475     top: 1px;
2476 }
2477
2478 .search-drawer-header label.search-config-label {
2479     margin-left: 8px;
2480     color: #303030;
2481 }
2482
2483 .search-drawer-header input[type="checkbox"].search-config-checkbox {
2484     vertical-align: bottom;
2485 }
2486
2487 body:not(.platform-mac) .search-drawer-header input[type="checkbox"].search-config-checkbox {
2488     margin-bottom: 5px;
2489 }
2490
2491 body.platform-mac .search-drawer-header input[type="checkbox"].search-config-checkbox {
2492     margin-bottom: 4px;
2493 }
2494
2495 .drawer-header {
2496     font-size: 11px;
2497     border-right: 1px solid rgb(197, 197, 197);
2498     line-height: 21px;
2499     padding-left: 6px;
2500     display: inline-block;
2501 }
2502
2503 .drawer-header-close-button {
2504     padding: 3px 8px;
2505     font-size: 14px;
2506     color:rgb(80, 80, 80);
2507     opacity: 0.5;
2508     position: relative;
2509     top: 1px;
2510 }
2511
2512 .drawer-header-close-button:hover {
2513     opacity: 1;
2514 }
2515
2516 .drawer-header-close-button:active {
2517     opacity: 0.7;
2518 }
2519
2520 #bottom-status-bar-container {
2521     -webkit-flex: 1 1 0;
2522     width: 0;
2523     overflow: hidden;
2524 }
2525
2526 .animate #bottom-status-bar-container > * {
2527     -webkit-transition: opacity 100ms linear;
2528 }
2529
2530 .search-status-bar-item {
2531     display: inline-block;
2532     cursor: pointer;
2533     font-size: 11px;
2534     height: 23px;
2535 }
2536
2537 .search-status-bar-message {
2538     margin-left:5px;
2539     margin-right:5px;
2540     margin-top:5px;
2541     float:left;
2542 }
2543
2544 .progress-bar-stop-button-item {
2545     width: 19px;
2546     height: 24px;
2547     overflow: hidden;
2548 }
2549
2550 .progress-bar-stop-button .glyph {
2551     -webkit-mask-position: -96px -48px;
2552     background-color: rgb(216, 0, 0) !important;
2553 }
2554
2555 .search-results-status-bar-message {
2556     margin-right: 10px;
2557     cursor: default;
2558     font-size: 11px;
2559     float: right;
2560     margin-top: 5px;
2561 }
2562
2563 .search-view .search-results {
2564     position: absolute;
2565     top: 0;
2566     bottom: 0;
2567     left: 0;
2568     right: 0;
2569     overflow-y: auto;
2570 }
2571
2572 #search-results-pane-file-based li {
2573     list-style: none;
2574 }
2575
2576 #search-results-pane-file-based ol {
2577     -webkit-padding-start: 0;
2578     margin-top: 0;
2579 }
2580
2581 #search-results-pane-file-based ol.children {
2582     display: none;
2583 }
2584
2585 #search-results-pane-file-based ol.children.expanded {
2586     display: block;
2587 }
2588
2589 #search-results-pane-file-based li.parent::before {
2590     content: url(Images/treeRightTriangleBlack.png);
2591     position: relative;
2592     left: -4px;
2593 }
2594
2595 #search-results-pane-file-based li.parent.expanded::before {
2596     content: url(Images/treeDownTriangleBlack.png);
2597 }
2598
2599 #search-results-pane-file-based .search-result {
2600     font-size: 11px;
2601     padding: 2px 0 2px 10px;
2602     word-wrap: normal;
2603     white-space: pre;
2604     cursor: pointer;
2605 }
2606
2607 #search-results-pane-file-based .search-result:hover {
2608     background-color: rgba(121, 121, 121, 0.1);
2609 }
2610
2611 #search-results-pane-file-based .search-result .search-result-file-name {
2612     font-weight: bold;
2613     color: #222;
2614 }
2615
2616 #search-results-pane-file-based .search-result .search-result-matches-count {
2617     margin-left: 5px;
2618     color: #333;
2619 }
2620
2621 #search-results-pane-file-based .show-more-matches {
2622     padding: 4px 0;
2623     color: #333;
2624     cursor: pointer;
2625     font-size: 11px;
2626     margin-left: 20px;
2627 }
2628
2629 #search-results-pane-file-based .show-more-matches:hover {
2630     text-decoration: underline;
2631 }
2632
2633 #search-results-pane-file-based .search-match {
2634     word-wrap: normal;
2635     white-space: pre;
2636 }
2637
2638 #search-results-pane-file-based .search-match .webkit-line-number.search-match-line-number {
2639     margin-right: 5px;
2640     border-right: 1px solid #BBB;
2641 }
2642
2643 #search-results-pane-file-based .search-match:not(:hover) .webkit-line-number.search-match-line-number {
2644     background-color: #F0F0F0;
2645 }
2646
2647 #search-results-pane-file-based .search-match:hover {
2648     background-color: rgba(56, 121, 217, 0.1);
2649 }
2650
2651 #search-results-pane-file-based .search-match .highlighted-match {
2652     background-color: #F1EA00;
2653 }
2654
2655 #search-results-pane-file-based a {
2656     text-decoration: none;
2657     display: block;
2658 }
2659
2660 #search-results-pane-file-based .search-match .search-match-content {
2661     color: #000;
2662 }
2663
2664 .record-cpu-profile-status-bar-item .glyph, .record-profile-status-bar-item .glyph {
2665     -webkit-mask-position: -288px 0;
2666 }
2667
2668 .record-cpu-profile-status-bar-item.toggled-on .glyph, .record-profile-status-bar-item.toggled-on .glyph {
2669     -webkit-mask-position: -288px -24px;
2670     background-color: rgb(216, 0, 0) !important;
2671 }
2672
2673 .storage-empty-view, .storage-view .storage-table-error {
2674     position: absolute;
2675     top: 0;
2676     bottom: 25%;
2677     left: 0;
2678     right: 0;
2679     font-size: 24px;
2680     color: rgb(75%, 75%, 75%);
2681     margin-top: auto;
2682     margin-bottom: auto;
2683     height: 50px;
2684     line-height: 26px;
2685     text-align: center;
2686     font-weight: bold;
2687     padding: 10px;
2688     white-space: pre-wrap;
2689 }
2690
2691 /* Generic suggest box style */
2692
2693 .suggest-box.generic-suggest {
2694     margin-left: -1px;
2695     border-color: rgb(66%, 66%, 66%);
2696 }
2697
2698 .suggest-box.generic-suggest.above-anchor {
2699    border-radius: 5px 5px 5px 0;
2700 }
2701
2702 .suggest-box.generic-suggest.under-anchor {
2703    border-radius: 0 5px 5px 5px;
2704 }
2705
2706 /* Custom popup scrollers */
2707
2708 .custom-popup-horizontal-scroll ::-webkit-scrollbar, .custom-popup-vertical-scroll ::-webkit-scrollbar {
2709     width: 11px;
2710     height: 11px;
2711 }
2712
2713 .custom-popup-horizontal-scroll ::-webkit-scrollbar-corner, .custom-popup-vertical-scroll ::-webkit-scrollbar-corner {
2714     display: none;
2715 }
2716
2717 .custom-popup-horizontal-scroll ::-webkit-resizer, .custom-popup-vertical-scroll ::-webkit-resizer {
2718     display: none;
2719 }
2720
2721 .custom-popup-horizontal-scroll ::-webkit-scrollbar-button, .custom-popup-vertical-scroll ::-webkit-scrollbar-button {
2722     display: none;
2723 }
2724
2725 /* Custom Horizontal Scrollbar Styles */
2726
2727 .custom-popup-horizontal-scroll ::-webkit-scrollbar:horizontal:corner-present {
2728     border-right-width: 0;
2729 }
2730
2731 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal {
2732     -webkit-border-image: url(Images/thumbHoriz.png) 0 11 0 11;
2733     border-color: transparent;
2734     border-width: 0 11px;
2735     min-width: 20px;
2736 }
2737
2738 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:hover {
2739     -webkit-border-image: url(Images/thumbHoverHoriz.png) 0 11 0 11;
2740 }
2741
2742 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:active {
2743     -webkit-border-image: url(Images/thumbActiveHoriz.png) 0 11 0 11;
2744 }
2745
2746 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:start {
2747     margin-left: 5px;
2748 }
2749
2750 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end {
2751     margin-right: 5px;
2752 }
2753
2754 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end:corner-present {
2755     margin-right: 4px;
2756 }
2757
2758 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:decrement {
2759     -webkit-border-image: url(Images/trackHoriz.png) 0 11 0 11;
2760     border-color: transparent;
2761     border-width: 0 0 0 11px;
2762 }
2763
2764 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:increment {
2765     -webkit-border-image: url(Images/trackHoriz.png) 0 11 0 11;
2766     border-color: transparent;
2767     border-width: 0 11px 0 0;
2768 }
2769
2770 /* Custom Vertical Scrollbar Styles */
2771
2772 .custom-popup-vertical-scroll ::-webkit-scrollbar:vertical:corner-present {
2773     border-bottom-width: 0;
2774 }
2775
2776 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical {
2777     -webkit-border-image: url(Images/thumbVert.png) 11 0 11 0;
2778     border-color: transparent;
2779     border-width: 11px 0;
2780     min-height: 20px;
2781 }
2782
2783 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:hover {
2784     -webkit-border-image: url(Images/thumbHoverVert.png) 11 0 11 0;
2785 }
2786
2787 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:active {
2788     -webkit-border-image: url(Images/thumbActiveVert.png) 11 0 11 0;
2789 }
2790
2791 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:start {
2792     margin-top: 5px;
2793 }
2794
2795 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:end {
2796     margin-bottom: 5px;
2797 }
2798
2799 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:end:corner-present {
2800     margin-bottom: 4px;
2801 }
2802
2803 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:decrement {
2804     -webkit-border-image: url(Images/trackVert.png) 11 0 11 0;
2805     border-color: transparent;
2806     border-width: 11px 0 0 0;
2807 }
2808
2809 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment {
2810     -webkit-border-image: url(Images/trackVert.png) 11 0 11 0;
2811     border-color: transparent;
2812     border-width: 0 0 11px 0;
2813 }
2814
2815 .console-context {
2816     max-width: 200px;
2817 }
2818
2819 .inspector-footer {
2820     position: absolute;
2821     bottom: 0;
2822     left: 0;
2823     right: 0;
2824     font-size: 11px;
2825     height: auto;
2826 }
2827
2828 .progress-bar-container {
2829     display: -webkit-flex;
2830     margin: 0 8px;
2831     -webkit-flex: 1 0;
2832 }
2833
2834 .progress-bar-container span {
2835     padding: 6px;
2836 }
2837
2838 .progress-bar-container progress {
2839     margin-top: 7px;
2840     -webkit-flex: 1 0;
2841 }
2842
2843 body.platform-mac .progress-bar-container progress {
2844     margin-top: 6px;
2845 }
2846
2847 .progress-bar-container button.status-bar-item {
2848     border-left: none;
2849     margin-top: 1px;
2850 }
2851
2852 .source-frame-cursor-position {
2853     padding-left: 6px;
2854     padding-top: 5px;
2855     display: inline-block;
2856     pointer-events: auto;
2857     -webkit-user-select: text;
2858     font-size: 11px;
2859     cursor: text;
2860 }