Commit | Line | Data |
---|---|---|
9099c61d RK |
1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
2 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
da9978ec | 4 | |
e0c47e26 | 5 | :root { |
da9978ec | 6 | background: #000000; |
e0c47e26 | 7 | color: #FF9F00; |
da9978ec | 8 | } |
e0c47e26 | 9 | |
da9978ec | 10 | .property-header { |
c5772fdf | 11 | padding: 5px 0; |
e0c47e26 | 12 | white-space: nowrap; |
c5772fdf | 13 | vertical-align: text-top; |
da9978ec RK |
14 | } |
15 | ||
16 | /* Take away these two :visited rules to get a core dumper */ | |
17 | /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */ | |
e0c47e26 | 18 | .link, |
da9978ec | 19 | .link:visited { |
e0c47e26 | 20 | color: #0091ff; |
da9978ec | 21 | } |
e0c47e26 RK |
22 | .link, |
23 | .helplink, | |
24 | .link:visited, | |
25 | .helplink:visited { | |
da9978ec | 26 | text-decoration: none; |
da9978ec | 27 | } |
eec397be RK |
28 | link:hover { |
29 | text-decoration: underline; | |
30 | } | |
e0c47e26 | 31 | |
e0c47e26 | 32 | .helplink { |
e0c47e26 RK |
33 | height: 14px; |
34 | width: 0; | |
35 | overflow: hidden; | |
36 | -moz-padding-start: 14px; | |
37 | background-image: url("chrome://browser/skin/devtools/goto-mdn.png"); | |
38 | -moz-margin-end: 2px; | |
c5772fdf | 39 | cursor: pointer; |
e0c47e26 RK |
40 | } |
41 | ||
c5772fdf | 42 | .property-view:not(:hover) > .helplink-container { |
e0c47e26 RK |
43 | visibility: hidden; |
44 | } | |
45 | ||
da9978ec | 46 | .rulelink { |
e0c47e26 | 47 | color: -moz-dialogtext; |
c5772fdf | 48 | padding: 0; |
eec397be | 49 | cursor: pointer; |
da9978ec RK |
50 | } |
51 | ||
52 | .expander { | |
e0c47e26 RK |
53 | width: 9px; |
54 | height: 9px; | |
55 | -moz-margin-start: 5px; | |
da9978ec | 56 | -moz-margin-end: 5px; |
e0c47e26 | 57 | background: url("chrome://global/skin/tree/twisty-closed.png") center center no-repeat; |
c5772fdf | 58 | vertical-align: middle; |
da9978ec RK |
59 | } |
60 | ||
e0c47e26 RK |
61 | .expander[open] { |
62 | background-image: url("chrome://global/skin/tree/twisty-open.png"); | |
da9978ec RK |
63 | } |
64 | ||
e0c47e26 RK |
65 | .match { |
66 | visibility: hidden; | |
67 | } | |
68 | ||
8d7ef0d9 RK |
69 | .expandable { |
70 | cursor: pointer; | |
e0c47e26 RK |
71 | visibility: visible; |
72 | } | |
73 | ||
da9978ec | 74 | .property-name { |
da9978ec | 75 | font-size: 12px; |
da9978ec | 76 | color: #FF9F00; |
e0c47e26 | 77 | width: 220px; |
da9978ec RK |
78 | } |
79 | .property-value { | |
c5772fdf | 80 | padding: 0; |
da9978ec | 81 | font-size: 10px; |
e0c47e26 | 82 | color: #8050B0; |
c5772fdf RK |
83 | vertical-align: text-top; |
84 | width: 100%; | |
85 | } | |
86 | ||
c5772fdf RK |
87 | .rule-link { |
88 | text-align: end; | |
89 | -moz-padding-start: 10px; | |
90 | } | |
91 | ||
92 | /* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ | |
93 | .rule-text { | |
94 | direction: ltr; | |
95 | padding: 0; | |
96 | -moz-padding-start: 20px; | |
8d7ef0d9 | 97 | vertical-align: text-bottom; |
c5772fdf RK |
98 | } |
99 | ||
100 | .bestmatch { | |
101 | color: #FFCF00; | |
102 | } | |
103 | .matched { | |
104 | text-decoration: line-through; | |
105 | } | |
106 | .parentmatch { | |
107 | color: #E7ADE7; | |
da9978ec RK |
108 | } |
109 | ||
e0c47e26 | 110 | #propertyContainer { |
c5772fdf | 111 | border-collapse: collapse; |
da9978ec RK |
112 | } |
113 | ||
e0c47e26 RK |
114 | .darkrow { |
115 | background-color: #404000; | |
da9978ec RK |
116 | } |
117 | ||
e0c47e26 RK |
118 | #noResults { |
119 | font-size: 18px; | |
120 | margin-top: 5px; | |
121 | text-align: center; | |
da9978ec RK |
122 | } |
123 | ||
e0c47e26 RK |
124 | .headerControls { |
125 | color: #9C9CFF; | |
da9978ec RK |
126 | background-color: #000000; |
127 | } | |
128 | ||
e0c47e26 RK |
129 | .onlyuserstyles { |
130 | cursor: pointer; | |
131 | font-size: 11px; | |
da9978ec | 132 | } |
e0c47e26 | 133 | |
e0c47e26 RK |
134 | #footer { |
135 | border-top: 1px solid #9C9CFF; | |
da9978ec RK |
136 | } |
137 | ||
e0c47e26 RK |
138 | .legendKey { |
139 | margin: 0 5px; | |
da9978ec RK |
140 | } |
141 | ||
e0c47e26 RK |
142 | /** |
143 | * CSS Rule View | |
144 | */ | |
145 | ||
146 | .ruleview { | |
147 | background-color: #000000; | |
148 | } | |
149 | ||
150 | .ruleview-rule-source { | |
c29b709d RK |
151 | color: #9C9CFF; /* original: green */ |
152 | -moz-padding-start: 5px; | |
eec397be | 153 | cursor: pointer; |
c29b709d RK |
154 | text-align: right; |
155 | float: right; | |
156 | -moz-user-select: -moz-none; | |
157 | } | |
158 | ||
159 | .ruleview-rule-inheritance { | |
160 | background-color: #000000; | |
161 | color: #8050B0; | |
162 | border-top: 1px solid #9C9CFF; | |
163 | border-bottom: 1px solid #9C9CFF; | |
164 | padding: 1px 4px; | |
165 | margin-top: 4px; | |
166 | -moz-user-select: -moz-none; | |
eec397be RK |
167 | } |
168 | ||
169 | .ruleview-rule-source:hover { | |
170 | text-decoration: underline; | |
e0c47e26 RK |
171 | } |
172 | ||
c29b709d RK |
173 | .ruleview-rule { |
174 | padding: 2px 4px; | |
175 | } | |
176 | ||
177 | .ruleview-rule + .ruleview-rule { | |
178 | border-top: 1px dotted #008484; | |
e0c47e26 RK |
179 | } |
180 | ||
8d7ef0d9 RK |
181 | .ruleview-warning { |
182 | background: url("chrome://browser/skin/devtools/alerticon-warning.png"); | |
183 | -moz-margin-start: 5px; | |
184 | vertical-align: middle; | |
185 | width: 13px; | |
186 | height: 12px; | |
187 | } | |
188 | ||
c5772fdf RK |
189 | .ruleview-ruleopen { |
190 | -moz-padding-end: 5px; | |
191 | } | |
192 | ||
8d7ef0d9 | 193 | .ruleview-ruleclose { |
37953ab4 | 194 | cursor: text; |
8d7ef0d9 RK |
195 | padding-right: 20px; |
196 | } | |
197 | ||
e0c47e26 RK |
198 | .ruleview-propertylist { |
199 | list-style: none; | |
200 | padding: 0; | |
201 | margin: 0; | |
202 | } | |
203 | ||
204 | .ruleview-enableproperty { | |
205 | height: 10px; | |
206 | width: 10px; | |
c29b709d | 207 | -moz-margin-start: 1px; |
e0c47e26 | 208 | -moz-margin-end: 0; |
c29b709d RK |
209 | transition: opacity 100ms; |
210 | transition-delay: 200ms; | |
211 | } | |
212 | ||
d7cfd768 | 213 | .ruleview-property:not(:hover) > .ruleview-enableproperty[checked] { |
c29b709d RK |
214 | opacity: 0; |
215 | transition: none; | |
e0c47e26 RK |
216 | } |
217 | ||
218 | .ruleview-expander { | |
e0c47e26 RK |
219 | width: 8px; |
220 | height: 8px; | |
221 | background: url("chrome://browser/skin/devtools/arrows.png") 24px 0; | |
da9978ec | 222 | cursor: pointer; |
e0c47e26 RK |
223 | -moz-margin-start: 2px; |
224 | -moz-margin-end: 5px; | |
225 | } | |
226 | ||
e0c47e26 RK |
227 | .ruleview-expander.styleinspector-open { |
228 | background-position: 8px 0; | |
229 | } | |
230 | ||
231 | .ruleview-newproperty { | |
232 | /* (enable checkbox width: 12px) + (expander width: 15px) */ | |
233 | -moz-margin-start: 27px; | |
234 | } | |
235 | ||
236 | .ruleview-propertyname { | |
e0c47e26 | 237 | padding: 1px 0; |
c29b709d RK |
238 | color: #9C9CFF; /* original: blue */ |
239 | } | |
240 | ||
241 | .ruleview-propertyvalue { | |
242 | padding: 1px 0; | |
e0c47e26 RK |
243 | } |
244 | ||
37953ab4 RK |
245 | .ruleview-namecontainer, |
246 | .ruleview-propertycontainer, | |
247 | .ruleview-propertyname, | |
e0c47e26 | 248 | .ruleview-propertyvalue { |
e0c47e26 RK |
249 | text-decoration: inherit; |
250 | } | |
251 | ||
252 | .ruleview-computedlist { | |
253 | list-style: none; | |
254 | padding: 0; | |
255 | } | |
256 | ||
257 | .ruleview-computed { | |
258 | -moz-margin-start: 4em; | |
259 | } | |
260 | ||
261 | .ruleview-overridden { | |
262 | text-decoration: line-through; | |
263 | } | |
264 | ||
265 | .styleinspector-propertyeditor { | |
266 | border: 1px solid #9C9CFF; | |
267 | padding: 0; | |
da9978ec | 268 | } |
85cfb236 RK |
269 | |
270 | .ruleview-property { | |
271 | border-left: 2px solid transparent; | |
272 | } | |
273 | ||
274 | .ruleview-property[dirty] { | |
275 | border-left-color: #008484; | |
37953ab4 RK |
276 | } |
277 | ||
278 | .ruleview-namecontainer > .ruleview-propertyname, | |
279 | .ruleview-propertycontainer > .ruleview-propertyvalue { | |
c29b709d | 280 | border-bottom: 1px dashed transparent; |
37953ab4 RK |
281 | } |
282 | ||
283 | .ruleview-namecontainer:hover > .ruleview-propertyname, | |
284 | .ruleview-propertycontainer:hover > .ruleview-propertyvalue { | |
285 | border-bottom-color: #9C9CFF; | |
286 | } |