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