1/*
2 * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
4 *
5 * Redistribution and use in source and binary forms, with or without
6 * modification, are permitted provided that the following conditions
7 * are met:
8 *
9 * 1.  Redistributions of source code must retain the above copyright
10 *     notice, this list of conditions and the following disclaimer.
11 * 2.  Redistributions in binary form must reproduce the above copyright
12 *     notice, this list of conditions and the following disclaimer in the
13 *     documentation and/or other materials provided with the distribution.
14 * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
15 *     its contributors may be used to endorse or promote products derived
16 *     from this software without specific prior written permission.
17 *
18 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
19 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
22 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
27 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 */
29
30#elements-content {
31    flex: 1 1;
32    overflow: auto;
33    padding-left: 0;
34    -webkit-transform: translateZ(0);
35}
36
37#elements-crumbs {
38    flex: 0 0 19px;
39    background-color: white;
40    border-top: 1px solid #ccc;
41    overflow: hidden;
42    height: 19px;
43    width: 100%;
44}
45
46#elements-content > ol {
47    display: inline-block;
48    min-height: 100%;
49    -webkit-transform: translateZ(0);
50}
51
52.elements-tree-outline.pick-node-mode {
53    cursor: pointer;
54}
55
56#elements-content .editing {
57    margin-left: 8px;
58}
59
60#elements-content .elements-gutter-decoration {
61    position: absolute;
62    left: 1px;
63    margin-top: 2px;
64    height: 8px;
65    width: 8px;
66    border-radius: 4px;
67    border: 1px solid orange;
68    background-color: orange;
69}
70
71#elements-content .elements-gutter-decoration.elements-has-decorated-children {
72    opacity: 0.5;
73}
74
75#elements-content .CodeMirror {
76    /* Consistent with the .editing class in inspectorStyle.css */
77    box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
78    outline: 1px solid rgb(66%, 66%, 66%) !important;
79    background-color: white;
80}
81
82#elements-content .CodeMirror pre {
83    padding: 0;
84}
85
86#elements-content .CodeMirror-lines {
87    padding: 0;
88}
89
90.elements-tree-editor {
91    -webkit-user-select: text;
92    -webkit-user-modify: read-write-plaintext-only;
93}
94
95.metrics {
96    padding: 8px;
97    font-size: 10px;
98    text-align: center;
99    white-space: nowrap;
100}
101
102.metrics .label {
103    position: absolute;
104    font-size: 10px;
105    margin-left: 3px;
106    padding-left: 2px;
107    padding-right: 2px;
108}
109
110.metrics .position {
111    border: 1px rgb(66%, 66%, 66%) dotted;
112    background-color: white;
113    display: inline-block;
114    text-align: center;
115    padding: 3px;
116    margin: 3px;
117}
118
119.metrics .margin {
120    border: 1px dashed;
121    background-color: white;
122    display: inline-block;
123    text-align: center;
124    vertical-align: middle;
125    padding: 3px;
126    margin: 3px;
127}
128
129.metrics .border {
130    border: 1px black solid;
131    background-color: white;
132    display: inline-block;
133    text-align: center;
134    vertical-align: middle;
135    padding: 3px;
136    margin: 3px;
137}
138
139.metrics .padding {
140    border: 1px grey dashed;
141    background-color: white;
142    display: inline-block;
143    text-align: center;
144    vertical-align: middle;
145    padding: 3px;
146    margin: 3px;
147}
148
149.metrics .content {
150    position: static;
151    border: 1px gray solid;
152    background-color: white;
153    display: inline-block;
154    text-align: center;
155    vertical-align: middle;
156    padding: 3px;
157    margin: 3px;
158    min-width: 80px;
159    overflow: visible;
160}
161
162.metrics .content span {
163    display: inline-block;
164}
165
166.metrics .editing {
167    position: relative;
168    z-index: 100;
169    cursor: text;
170}
171
172.metrics .left {
173    display: inline-block;
174    vertical-align: middle;
175}
176
177.metrics .right {
178    display: inline-block;
179    vertical-align: middle;
180}
181
182.metrics .top {
183    display: inline-block;
184}
185
186.metrics .bottom {
187    display: inline-block;
188}
189
190.styles-section {
191    padding: 2px 2px 4px 4px;
192    min-height: 18px;
193    white-space: nowrap;
194    background-origin: padding;
195    background-clip: padding;
196    -webkit-user-select: text;
197    border-bottom: 1px solid rgb(191, 191, 191);
198    position: relative;
199}
200
201.styles-pane .sidebar-separator {
202    border-top: 0px none;
203}
204
205.styles-section.user-rule {
206    display: none;
207}
208
209.show-user-styles .styles-section.user-rule {
210    display: block;
211}
212
213.styles-sidebar-placeholder {
214    height: 16px;
215}
216
217.styles-section.read-only:not(.computed-style) {
218    background-color: rgb(240, 240, 240);
219}
220
221.styles-section .properties li.not-parsed-ok {
222    margin-left: 0;
223}
224
225.styles-section.computed-style .properties li.not-parsed-ok {
226    margin-left: -6px;
227}
228
229.styles-section .properties li.filter-match,
230.styles-section .simple-selector.filter-match {
231    background-color: rgba(255, 255, 0, 0.5);
232}
233
234.styles-section .properties li.overloaded.filter-match {
235    background-color: rgba(255, 255, 0, 0.25);
236}
237
238.styles-section .properties li.not-parsed-ok .exclamation-mark {
239    display: inline-block;
240    position: relative;
241    width: 11px;
242    height: 10px;
243    margin: 0 7px 0 0;
244    top: 1px;
245    left: -36px; /* outdent to compensate for the top-level property indent */
246    -webkit-user-select: none;
247    cursor: default;
248    z-index: 1;
249}
250
251.styles-section .header {
252    white-space: nowrap;
253    background-origin: padding;
254    background-clip: padding;
255}
256
257.styles-section .header .title {
258    word-wrap: break-word;
259    white-space: normal;
260}
261
262.styles-section .header .title .media,
263.styles-section .header .title .media .subtitle {
264    color: rgb(128, 128, 128);
265    overflow: hidden;
266}
267
268.styles-section .header .subtitle {
269    color: rgb(85, 85, 85);
270    float: right;
271    margin-left: 5px;
272    max-width: 100%;
273    text-overflow: ellipsis;
274    overflow: hidden;
275    white-space: nowrap;
276}
277
278.styles-section .header .subtitle a {
279    color: inherit;
280}
281
282.styles-section .selector {
283    color: #888;
284}
285
286.styles-section .simple-selector.selector-matches {
287    color: #222;
288}
289
290.styles-section a[data-uncopyable] {
291    display: inline-block;
292}
293
294.styles-section a[data-uncopyable]::before {
295    content: attr(data-uncopyable);
296    text-decoration: underline;
297}
298
299.styles-section .properties {
300    display: none;
301    margin: 0;
302    padding: 2px 4px 0 0;
303    list-style: none;
304    clear: both;
305}
306
307.styles-section.matched-styles .properties {
308    padding-left: 0;
309}
310
311.styles-section.no-affect .properties li {
312    opacity: 0.5;
313}
314
315.styles-section.no-affect .properties li.editing {
316    opacity: 1.0;
317}
318
319.styles-section.expanded .properties {
320    display: block;
321}
322
323.styles-section .properties li {
324    margin-left: 12px;
325    padding-left: 22px;
326    white-space: normal;
327    text-overflow: ellipsis;
328    overflow: hidden;
329    cursor: auto;
330}
331
332.styles-section.computed-style.expanded .properties > li {
333    padding-left: 0;
334}
335
336.styles-section.computed-style.expanded .properties > li .webkit-css-property {
337    margin-left: 0;
338}
339
340.styles-section .properties li .webkit-css-property {
341    margin-left: -22px; /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the "padding-left" shift in .styles-section .properties li */
342}
343
344.styles-section.expanded .properties > li {
345    padding-left: 38px;
346}
347
348.styles-section .properties > li .webkit-css-property {
349    margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the "padding-left" shift in .styles-section .properties > li */
350}
351
352.styles-section .properties > li.child-editing {
353    padding-left: 8px;
354}
355
356.styles-section .properties > li.child-editing .webkit-css-property {
357    margin-left: 0;
358}
359
360.styles-section.matched-styles .properties li {
361    margin-left: 0 !important;
362}
363
364.styles-section .properties li.child-editing {
365    word-wrap: break-word !important;
366    white-space: normal !important;
367    padding-left: 0;
368}
369
370.styles-section .properties ol {
371    display: none;
372    margin: 0;
373    -webkit-padding-start: 12px;
374    list-style: none;
375}
376
377.styles-section .properties ol.expanded {
378    display: block;
379}
380
381.styles-section.matched-styles .properties li.parent .expand-element {
382    -webkit-user-select: none;
383    background-image: url(Images/statusbarButtonGlyphs.png);
384    background-size: 320px 144px;
385    margin-right: 2px;
386    margin-left: -6px;
387    opacity: 0.55;
388    width: 8px;
389    height: 10px;
390    display: inline-block;
391}
392
393@media (-webkit-min-device-pixel-ratio: 1.5) {
394.styles-section.matched-styles .properties li.parent .expand-element {
395    background-image: url(Images/statusbarButtonGlyphs_2x.png);
396}
397} /* media */
398
399.styles-section.matched-styles .properties li.parent .expand-element {
400    background-position: -4px -96px;
401}
402
403.styles-section.matched-styles .properties li.parent.expanded .expand-element {
404    background-position: -20px -96px;
405}
406
407.styles-section .properties li .info {
408    padding-top: 4px;
409    padding-bottom: 3px;
410}
411
412.styles-section.matched-styles:not(.read-only):hover .properties .enabled-button {
413    visibility: visible;
414}
415
416.styles-section.matched-styles:not(.read-only) .properties li.disabled .enabled-button {
417    visibility: visible;
418}
419
420.styles-section .properties .enabled-button {
421    visibility: hidden;
422    float: left;
423    font-size: 10px;
424    margin: 0;
425    vertical-align: top;
426    position: relative;
427    z-index: 1;
428    width: 18px;
429    left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */
430    top: 1px;
431}
432
433.styles-section.matched-styles .properties ol.expanded {
434    margin-left: 16px;
435}
436
437.styles-section .properties .overloaded:not(.has-ignorable-error),
438.styles-section .properties .inactive,
439.styles-section .properties .disabled,
440.styles-section .properties .not-parsed-ok:not(.has-ignorable-error) {
441    text-decoration: line-through;
442}
443
444.styles-section .properties .has-ignorable-error .webkit-css-property {
445    color: inherit;
446}
447
448.styles-section.computed-style .properties .disabled {
449    text-decoration: none;
450    opacity: 0.5;
451}
452
453.styles-section .properties .implicit,
454.styles-section .properties .inherited {
455    opacity: 0.5;
456}
457
458.styles-section .properties .has-ignorable-error {
459    color: gray;
460}
461
462.styles-element-state-pane {
463    overflow: hidden;
464    margin-top: -56px;
465    padding-top: 18px;
466    height: 56px;
467    -webkit-transition: margin-top 0.1s ease-in-out;
468    padding-left: 2px;
469}
470
471.styles-element-state-pane.expanded {
472    border-bottom: 1px solid rgb(189, 189, 189);
473    margin-top: 0;
474}
475
476.styles-element-state-pane > table {
477    width: 100%;
478    border-spacing: 0;
479}
480
481.styles-element-state-pane label {
482    display: flex;
483    margin: 1px;
484}
485
486.styles-selector {
487    cursor: text;
488}
489
490.body .styles-section .properties .inherited {
491    display: none;
492}
493
494.styles-section.styles-show-inherited .properties .inherited {
495    display: block;
496}
497
498.add-attribute {
499    margin-left: 1px;
500    margin-right: 1px;
501    white-space: nowrap;
502}
503
504.section .event-bars {
505    display: none;
506}
507
508.section.expanded .event-bars {
509    display: block;
510}
511
512.event-bar {
513    position: relative;
514    margin-left: 10px;
515}
516
517.event-bar:first-child {
518    margin-top: 1px;
519}
520
521.event-bars .event-bar .header {
522    padding: 0 8px 0 6px;
523    min-height: 16px;
524    opacity: 1.0;
525    white-space: nowrap;
526    background-origin: padding;
527    background-clip: padding;
528}
529
530.event-bars .event-bar .header .title {
531    font-weight: normal;
532    text-shadow: white 0 1px 0;
533}
534
535.event-bars .event-bar .header .subtitle {
536    color: rgba(90, 90, 90, 0.75);
537}
538
539.event-bars .event-bar .header::before {
540    -webkit-user-select: none;
541    background-image: url(Images/statusbarButtonGlyphs.png);
542    background-size: 320px 144px;
543    opacity: 0.5;
544    content: "a";
545    color: transparent;
546    text-shadow: none;
547    float: left;
548    width: 8px;
549    margin-right: 4px;
550    margin-top: 2px;
551}
552
553@media (-webkit-min-device-pixel-ratio: 1.5) {
554.event-bars .event-bar .header::before {
555    background-image: url(Images/statusbarButtonGlyphs_2x.png);
556}
557} /* media */
558
559.event-bars .event-bar .header::before {
560    background-position: -4px -96px;
561}
562
563.event-bars .event-bar.expanded .header::before {
564    background-position: -20px -96px;
565}
566
567.image-preview-container {
568    background: transparent;
569    text-align: center;
570}
571
572.image-preview-container img {
573    margin: 2px auto;
574    max-width: 100px;
575    max-height: 100px;
576    background-image: url(Images/checker.png);
577    -webkit-user-select: text;
578    -webkit-user-drag: auto;
579}
580
581.sidebar-pane.composite {
582    position: absolute;
583}
584
585.sidebar-pane.composite > .body {
586    height: 100%;
587}
588
589.sidebar-pane.composite .metrics {
590    border-bottom: 1px solid rgb(64%, 64%, 64%);
591    height: 206px;
592    display: flex;
593    flex-direction: column;
594    -webkit-align-items: center;
595    -webkit-justify-content: center;
596}
597
598.sidebar-pane .metrics-and-styles,
599.sidebar-pane .metrics-and-computed {
600    display: flex !important;
601    flex-direction: column !important;
602    position: relative;
603}
604
605.sidebar-pane .style-panes-wrapper {
606    transform: translateZ(0);
607    flex: 1;
608    overflow-y: auto;
609    position: relative;
610}
611
612.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar,
613.sidebar-pane.composite .metrics-and-styles .sidebar-pane-toolbar {
614    position: absolute;
615}
616
617.sidebar-pane-filter-box {
618    display: flex;
619    border-top: 1px solid rgb(191, 191, 191);
620    flex-basis: 19px;
621}
622
623.sidebar-pane-filter-box > input {
624    outline: none !important;
625    border: none;
626    width: 100%;
627    margin: 0 4px;
628    background: transparent;
629}
630
631.styles-filter-engaged {
632    background-color: rgba(255, 255, 0, 0.5);
633}
634
635.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar {
636    margin-top: 4px;
637    margin-bottom: -4px;
638    position: relative;
639}
640
641.sidebar-pane.composite .platform-fonts .body {
642    padding: 1ex;
643    -webkit-user-select: text;
644}
645
646.sidebar-pane.composite .platform-fonts .sidebar-separator {
647    border-top: none;
648}
649
650.sidebar-pane.composite .platform-fonts .stats-section {
651    margin-bottom: 5px;
652}
653
654.sidebar-pane.composite .platform-fonts .font-stats-item {
655    padding-left: 1em;
656}
657
658.sidebar-pane.composite .platform-fonts .font-stats-item .delimeter {
659    margin: 0 1ex 0 1ex;
660}
661
662.sidebar-pane.composite .metrics-and-styles .metrics {
663    border-bottom: none;
664}
665
666.sidebar-pane > .body > .split-view {
667    position: absolute;
668    top: 0;
669    bottom: 0;
670    left: 0;
671    right: 0;
672}
673
674.panel.elements .sidebar-pane-toolbar > select {
675    float: right;
676    width: 23px;
677    height: 17px;
678    color: transparent;
679    background-color: transparent;
680    border: none;
681    background-repeat: no-repeat;
682    margin: 1px 0 0 0;
683    padding: 0;
684    border-radius: 0;
685    -webkit-appearance: none;
686}
687
688.panel.elements .sidebar-pane-toolbar > select:hover {
689    background-position: -23px 0;
690}
691
692.panel.elements .sidebar-pane-toolbar > select:active {
693    background-position: -46px 0;
694}
695
696.panel.elements .sidebar-pane-toolbar > select.select-filter {
697    background-image: url(Images/paneFilterButtons.png);
698}
699.panel.elements .sidebar-pane-toolbar > select > option,
700.panel.elements .sidebar-pane-toolbar > select > hr {
701    color: black;
702}
703
704.styles-section:not(.read-only) .properties .webkit-css-property.styles-panel-hovered,
705.styles-section:not(.read-only) .properties .value .styles-panel-hovered,
706.styles-section:not(.read-only) .properties .value.styles-panel-hovered,
707.styles-section:not(.read-only) span.simple-selector.styles-panel-hovered {
708    text-decoration: underline;
709    cursor: default;
710}
711
712.styles-clipboard-only {
713    display: inline-block;
714    width: 0;
715    opacity: 0;
716    pointer-events: none;
717}
718
719li.child-editing .styles-clipboard-only {
720    display: none;
721}
722
723/* Breadcrumbs */
724
725.crumbs {
726    display: inline-block;
727    pointer-events: auto;
728    cursor: default;
729    font-size: 11px;
730    line-height: 17px;
731}
732
733.crumbs .crumb {
734    display: inline-block;
735    padding: 0 7px;
736    height: 18px;
737    white-space: nowrap;
738}
739
740.crumbs .crumb.collapsed > * {
741    display: none;
742}
743
744.crumbs .crumb.collapsed::before {
745    content: "\2026";
746    font-weight: bold;
747}
748
749.crumbs .crumb.compact .extra {
750    display: none;
751}
752
753.crumbs .crumb.selected, .crumbs .crumb.selected:hover {
754    background-color: rgb(56, 121, 217);
755    color: white;
756    text-shadow: rgba(255, 255, 255, 0.5) 0 0 0;
757}
758
759.crumbs .crumb:hover {
760    background-color: rgb(216, 216, 216);
761}
762
763.elements-tree-element-pick-node-1 {
764    border-radius: 3px;
765    padding: 1px 0 1px 0;
766    -webkit-animation: elements-tree-element-pick-node-animation-1 0.5s 1;
767}
768
769.elements-tree-element-pick-node-2 {
770    border-radius: 3px;
771    padding: 1px 0 1px 0;
772    -webkit-animation: elements-tree-element-pick-node-animation-2 0.5s 1;
773}
774
775@-webkit-keyframes elements-tree-element-pick-node-animation-1 {
776    from { background-color: rgb(255, 210, 126); }
777    to { background-color: inherit; }
778}
779
780@-webkit-keyframes elements-tree-element-pick-node-animation-2 {
781    from { background-color: rgb(255, 210, 126); }
782    to { background-color: inherit; }
783}
784
785.sidebar-separator {
786    background-color: rgb(230, 230, 230);
787    padding: 0 5px;
788    border-top: 1px solid rgb(189, 189, 189);
789    border-bottom: 1px solid rgb(189, 189, 189);
790    color: rgb(50, 50, 50);
791    white-space: nowrap;
792    text-overflow: ellipsis;
793    overflow: hidden;
794    line-height: 16px;
795}
796