|
1 /* vim:set ts=2 sw=2 sts=2 et: */ |
|
2 /* This Source Code Form is subject to the terms of the Mozilla Public |
|
3 * License, v. 2.0. If a copy of the MPL was not distributed with this |
|
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
|
5 |
|
6 * { |
|
7 box-sizing: border-box; |
|
8 } |
|
9 |
|
10 :root { |
|
11 height: 100%; |
|
12 } |
|
13 |
|
14 body { |
|
15 margin: 0; |
|
16 display : flex; |
|
17 flex-direction: column; |
|
18 height: 100%; |
|
19 } |
|
20 |
|
21 #propertyContainer { |
|
22 -moz-user-select: text; |
|
23 overflow: auto; |
|
24 min-height: 0; |
|
25 flex: 1; |
|
26 } |
|
27 |
|
28 .property-view-hidden, |
|
29 .property-content-hidden { |
|
30 display: none; |
|
31 } |
|
32 |
|
33 .property-view { |
|
34 clear: both; |
|
35 padding: 2px 0 2px 17px; |
|
36 } |
|
37 |
|
38 .property-view > * { |
|
39 display: inline-block; |
|
40 vertical-align: middle; |
|
41 } |
|
42 |
|
43 .property-name { |
|
44 /* -12px is so the expander triangle isn't pushed up above the property */ |
|
45 width: calc(100% - 12px); |
|
46 overflow-x: hidden; |
|
47 text-overflow: ellipsis; |
|
48 white-space: nowrap; |
|
49 outline: 0; |
|
50 } |
|
51 |
|
52 .property-value { |
|
53 width: 100%; |
|
54 overflow-x: hidden; |
|
55 text-overflow: ellipsis; |
|
56 white-space: nowrap; |
|
57 background-image: url(arrow-e.png); |
|
58 background-repeat: no-repeat; |
|
59 background-size: 5px 8px; |
|
60 background-position: 2px center; |
|
61 padding-left: 10px; |
|
62 outline: 0; |
|
63 } |
|
64 |
|
65 .other-property-value { |
|
66 background-image: url(arrow-e.png); |
|
67 background-repeat: no-repeat; |
|
68 background-size: 5px 8px; |
|
69 background-position: left center; |
|
70 padding-left: 8px; |
|
71 } |
|
72 |
|
73 @media (min-width: 400px) { |
|
74 .property-name { |
|
75 width: 200px; |
|
76 } |
|
77 .property-value { |
|
78 /* -212px is accounting for the 200px property-name and the 12px triangle */ |
|
79 width: calc(100% - 212px); |
|
80 } |
|
81 } |
|
82 |
|
83 .property-content { |
|
84 padding-left: 17px; |
|
85 } |
|
86 |
|
87 /* From skin */ |
|
88 .expander { |
|
89 visibility: hidden; |
|
90 margin-left: -12px!important; |
|
91 } |
|
92 |
|
93 .expandable { |
|
94 visibility: visible; |
|
95 } |
|
96 |
|
97 .match { |
|
98 visibility: hidden; |
|
99 } |
|
100 |
|
101 .matchedselectors > p { |
|
102 clear: both; |
|
103 margin: 0 2px 0 0; |
|
104 padding: 2px; |
|
105 overflow-x: hidden; |
|
106 border-style: dotted; |
|
107 border-color: rgba(128,128,128,0.4); |
|
108 border-width: 1px 1px 0 1px; |
|
109 } |
|
110 |
|
111 .matchedselectors > p:last-of-type { |
|
112 border-bottom-width: 1px; |
|
113 } |
|
114 |
|
115 /* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ |
|
116 .rule-text { |
|
117 direction: ltr; |
|
118 } |
|
119 |
|
120 .matched { |
|
121 text-decoration: line-through; |
|
122 } |
|
123 |
|
124 .parentmatch { |
|
125 opacity: 0.5; |
|
126 } |
|
127 |
|
128 #noResults { |
|
129 font-size: 110%; |
|
130 margin: 5px; |
|
131 text-align: center; |
|
132 } |
|
133 |
|
134 .onlyuserstyles { |
|
135 cursor: pointer; |
|
136 } |
|
137 |
|
138 .legendKey { |
|
139 margin: 0 5px; |
|
140 } |
|
141 |
|
142 .devtools-toolbar { |
|
143 width: 100%; |
|
144 } |
|
145 |
|
146 .link { |
|
147 padding: 0 3px; |
|
148 cursor: pointer; |
|
149 float: right; |
|
150 } |
|
151 |
|
152 .computedview-colorswatch { |
|
153 display: inline-block; |
|
154 border-radius: 50%; |
|
155 width: 1em; |
|
156 height: 1em; |
|
157 vertical-align: text-top; |
|
158 -moz-margin-end: 5px; |
|
159 } |