provide installation instructions
[extjs.git] / air / samples / tasks / ext-2.0 / resources / css / xtheme-gray.css
1 /*\r
2  * Ext JS Library 0.30\r
3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
4  * licensing@extjs.com\r
5  * \r
6  * http://extjs.com/license\r
7  */\r
8 \r
9 /*\r
10  * Ext JS Library 2.0\r
11  * Copyright(c) 2006-2007, Ext JS, LLC.\r
12  * licensing@extjs.com\r
13  * \r
14  * http://extjs.com/license\r
15  */\r
16 \r
17 .x-panel {\r
18     border-style: solid;\r
19     border-color: #d0d0d0;\r
20 }\r
21 .x-panel-header {\r
22     color:#333;\r
23         border:1px solid #d0d0d0;\r
24     background-image:url(../images/gray/panel/white-top-bottom.gif);\r
25 }\r
26 \r
27 .x-panel-body {\r
28     border-color:#d0d0d0;\r
29 }\r
30 \r
31 .x-panel-bbar .x-toolbar {\r
32     border-color:#d0d0d0;\r
33 }\r
34 \r
35 .x-panel-tbar .x-toolbar {\r
36     border-color:#d0d0d0;\r
37 }\r
38 \r
39 .x-panel-tbar-noheader .x-toolbar, .x-panel-mc .x-panel-tbar .x-toolbar {\r
40     border-color:#d0d0d0;\r
41 }\r
42 .x-panel-body-noheader, .x-panel-mc .x-panel-body {\r
43     border-color:#d0d0d0;\r
44 }\r
45 .x-panel-tl .x-panel-header {\r
46     color:#333;\r
47 }\r
48 .x-panel-tc {\r
49         background-image:url(../images/gray/panel/top-bottom.gif);\r
50 }\r
51 .x-panel-tl {\r
52         background-image:url(../images/gray/panel/corners-sprite.gif);\r
53     border-color:#d0d0d0;\r
54 }\r
55 .x-panel-tr {\r
56         background-image:url(../images/gray/panel/corners-sprite.gif);\r
57 }\r
58 .x-panel-bc {\r
59         background-image:url(../images/gray/panel/top-bottom.gif);\r
60 }\r
61 .x-panel-bl {\r
62         background-image:url(../images/gray/panel/corners-sprite.gif);\r
63 }\r
64 .x-panel-br {\r
65         background-image:url(../images/gray/panel/corners-sprite.gif);\r
66 }\r
67 .x-panel-mc {\r
68     background:#f1f1f1;\r
69 }\r
70 .x-panel-mc .x-panel-body {\r
71     background:transparent;\r
72     border: 0 none;\r
73 }\r
74 .x-panel-ml {\r
75         background-image:url(../images/gray/panel/left-right.gif);\r
76 }\r
77 .x-panel-mr {\r
78         background-image:url(../images/gray/panel/left-right.gif);\r
79 }\r
80 \r
81 /* Tools */\r
82 .x-tool {\r
83     background-image:url(../images/gray/panel/tool-sprites.gif);\r
84 }\r
85 \r
86 /* Ghosting */\r
87 .x-panel-ghost {\r
88     background:#e0e0e0;\r
89 }\r
90 \r
91 .x-panel-ghost ul {\r
92     border-color:#b0b0b0;\r
93 }\r
94 \r
95 .x-grid-panel .x-panel-mc .x-panel-body {\r
96     border:1px solid #d0d0d0;\r
97 }\r
98 \r
99 /* Buttons */\r
100 \r
101 .x-btn-left{\r
102         background-image:url(../images/gray/button/btn-sprite.gif);\r
103 }\r
104 .x-btn-right{\r
105         background-image:url(../images/gray/button/btn-sprite.gif);\r
106 }\r
107 .x-btn-center{\r
108         background-image:url(../images/gray/button/btn-sprite.gif);\r
109 }\r
110 \r
111 /* Layout classes */\r
112 \r
113 .x-border-layout-ct {\r
114     background:#f0f0f0;\r
115 }\r
116 \r
117 .x-accordion-hd {\r
118         background-image:url(../images/gray/panel/light-hd.gif);\r
119 }\r
120 \r
121 .x-layout-collapsed{\r
122     background-color:#eee;\r
123     border-color:#e0e0e0;\r
124 }\r
125 .x-layout-collapsed-over{\r
126          background-color:#fbfbfb;\r
127 }\r
128 \r
129 \r
130 /* qtips */\r
131 .x-tip .x-tip-top {\r
132         background-image:url(../images/gray/qtip/tip-sprite.gif);\r
133 }\r
134 .x-tip .x-tip-top-left {\r
135         background-image:url(../images/gray/qtip/tip-sprite.gif);\r
136 }\r
137 .x-tip .x-tip-top-right {\r
138         background-image:url(../images/gray/qtip/tip-sprite.gif);\r
139 }\r
140 .x-tip .x-tip-ft {\r
141         background-image:url(../images/gray/qtip/tip-sprite.gif);\r
142 }\r
143 .x-tip .x-tip-ft-left {\r
144         background-image:url(../images/gray/qtip/tip-sprite.gif);\r
145 }\r
146 .x-tip .x-tip-ft-right {\r
147         background-image:url(../images/gray/qtip/tip-sprite.gif);\r
148 }\r
149 .x-tip .x-tip-bd-left {\r
150         background-image:url(../images/gray/qtip/tip-sprite.gif);\r
151 }\r
152 .x-tip .x-tip-bd-right {\r
153         background-image:url(../images/gray/qtip/tip-sprite.gif);\r
154 }\r
155 \r
156 /* Toolbars */\r
157 \r
158 .x-toolbar{\r
159         border-color:#d0d0d0;\r
160     background:#f0f4f5 url(../images/gray/toolbar/bg.gif) repeat-x top left;\r
161 }\r
162 .x-toolbar button {\r
163     color:#444;\r
164 }\r
165 .x-toolbar .x-btn-menu-arrow-wrap .x-btn-center button {\r
166     background-image:url(../images/gray/toolbar/btn-arrow.gif);\r
167 }\r
168 .x-toolbar .x-btn-text-icon .x-btn-menu-arrow-wrap .x-btn-center button {\r
169     background-image:url(../images/gray/toolbar/btn-arrow.gif);\r
170 }\r
171 .x-toolbar .x-btn-over .x-btn-left{\r
172         background-image:url(../images/gray/toolbar/tb-btn-sprite.gif);\r
173 }\r
174 .x-toolbar .x-btn-over .x-btn-right{\r
175         background-image:url(../images/gray/toolbar/tb-btn-sprite.gif);\r
176 }\r
177 .x-toolbar .x-btn-over .x-btn-center{\r
178         background-image:url(../images/gray/toolbar/tb-btn-sprite.gif);\r
179 }\r
180 .x-toolbar .x-btn-over button {\r
181     color:#111;\r
182 }\r
183 .x-toolbar .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed .x-btn-left, .x-toolbar .x-btn-menu-active .x-btn-left{\r
184         background-image:url(../images/gray/toolbar/tb-btn-sprite.gif);\r
185 }\r
186 .x-toolbar .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed .x-btn-right, .x-toolbar .x-btn-menu-active .x-btn-right{\r
187         background-image:url(../images/gray/toolbar/tb-btn-sprite.gif);\r
188 }\r
189 \r
190 .x-toolbar .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed .x-btn-center, .x-toolbar .x-btn-menu-active .x-btn-center{\r
191         background-image:url(../images/gray/toolbar/tb-btn-sprite.gif);\r
192 }\r
193 .x-toolbar .ytb-sep {\r
194         background-image: url(../images/default/grid/grid-split.gif);\r
195 }\r
196 \r
197 /* Tabs */\r
198 \r
199 .x-tab-panel-header, .x-tab-panel-footer {\r
200         background: #EAEAEA;\r
201         border-color:#d0d0d0;\r
202 }\r
203 \r
204 \r
205 .x-tab-panel-header {\r
206         border-color:#d0d0d0;\r
207 }\r
208 \r
209 .x-tab-panel-footer {\r
210         border-color:#d0d0d0;\r
211 }\r
212 \r
213 ul.x-tab-strip-top{\r
214         background:#dbdbdb url(../images/gray/tabs/tab-strip-bg.gif) repeat-x left top;\r
215         border-color:#d0d0d0;\r
216     padding-top: 2px;\r
217 }\r
218 \r
219 ul.x-tab-strip-bottom{\r
220         background-image:url(../images/gray/tabs/tab-strip-btm-bg.gif);\r
221         border-color:#d0d0d0;\r
222 }\r
223 \r
224 .x-tab-strip span.x-tab-strip-text {\r
225         color:#333;\r
226 }\r
227 .x-tab-strip-over span.x-tab-strip-text {\r
228         color:#111;\r
229 }\r
230 \r
231 .x-tab-strip-active span.x-tab-strip-text {\r
232         color:#333;\r
233 }\r
234 \r
235 .x-tab-strip-disabled .x-tabs-text {\r
236         color:#aaaaaa;\r
237 }\r
238 \r
239 .x-tab-strip-top .x-tab-right {\r
240         background-image:url(../images/gray/tabs/tabs-sprite.gif);\r
241 }\r
242 \r
243 .x-tab-strip-top .x-tab-left {\r
244         background-image:url(../images/gray/tabs/tabs-sprite.gif);\r
245 }\r
246 .x-tab-strip-top .x-tab-strip-inner {\r
247         background-image:url(../images/gray/tabs/tabs-sprite.gif);\r
248 }\r
249 \r
250 .x-tab-strip-bottom .x-tab-right {\r
251         background-image:url(../images/gray/tabs/tab-btm-inactive-right-bg.gif);\r
252 }\r
253 \r
254 .x-tab-strip-bottom .x-tab-left {\r
255         background-image:url(../images/gray/tabs/tab-btm-inactive-left-bg.gif);\r
256 }\r
257 \r
258 .x-tab-strip-bottom .x-tab-strip-active .x-tab-right {\r
259         background-image:url(../images/gray/tabs/tab-btm-right-bg.gif);\r
260 }\r
261 \r
262 .x-tab-strip-bottom .x-tab-strip-active .x-tab-left {\r
263         background-image:url(../images/gray/tabs/tab-btm-left-bg.gif);\r
264 }\r
265 \r
266 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {\r
267         background-image:url(../images/gray/tabs/tab-close.gif);\r
268 }\r
269 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover{\r
270         background-image:url(../images/gray/tabs/tab-close.gif);\r
271 }\r
272 \r
273 .x-tab-panel-body {\r
274     border-color:#d0d0d0;\r
275     background:#fff;\r
276 }\r
277 .x-tab-panel-bbar .x-toolbar {\r
278     border-color: #d0d0d0;\r
279 }\r
280 \r
281 .x-tab-panel-tbar .x-toolbar {\r
282     border-color: #d0d0d0;\r
283 }\r
284 \r
285 .x-tab-panel-header-plain .x-tab-strip-spacer {\r
286     border-color:#d0d0d0;\r
287     background: #eaeaea;\r
288 }\r
289 \r
290 .x-tab-scroller-left {\r
291     background-image: url(../images/gray/tabs/scroll-left.gif);\r
292     border-color:#aeaeae;\r
293 }\r
294 .x-tab-scroller-right {\r
295     background-image: url(../images/gray/tabs/scroll-right.gif);\r
296     border-color:#aeaeae;\r
297 }\r
298 \r
299 /* Window */\r
300 \r
301 .x-window-proxy {\r
302     background:#e0e0e0;\r
303     border-color:#b0b0b0;\r
304 }\r
305 \r
306 .x-window-tl .x-window-header {\r
307     color:#555;\r
308 }\r
309 .x-window-tc {\r
310         background-image:url(../images/gray/window/top-bottom.png);\r
311 }\r
312 .x-window-tl {\r
313         background-image:url(../images/gray/window/left-corners.png);\r
314 }\r
315 .x-window-tr {\r
316         background-image:url(../images/gray/window/right-corners.png);\r
317 }\r
318 .x-window-bc {\r
319         background-image:url(../images/gray/window/top-bottom.png);\r
320 }\r
321 .x-window-bl {\r
322         background-image:url(../images/gray/window/left-corners.png);\r
323 }\r
324 .x-window-br {\r
325         background-image:url(../images/gray/window/right-corners.png);\r
326 }\r
327 .x-window-mc {\r
328     border:1px solid #d0d0d0;\r
329     background:#e8e8e8;\r
330 }\r
331 \r
332 .x-window-ml {\r
333         background-image:url(../images/gray/window/left-right.png);\r
334 }\r
335 .x-window-mr {\r
336         background-image:url(../images/gray/window/left-right.png);\r
337 }\r
338 .x-panel-ghost .x-window-tl {\r
339     border-color:#d0d0d0;\r
340 }\r
341 .x-panel-collapsed .x-window-tl {\r
342     border-color:#d0d0d0;\r
343 }\r
344 \r
345 .x-window-plain .x-window-mc {\r
346     background: #e8e8e8;\r
347     border-right:1px solid #eee;\r
348     border-bottom:1px solid #eee;\r
349     border-top:1px solid #d0d0d0;\r
350     border-left:1px solid #d0d0d0;\r
351 }\r
352 \r
353 .x-window-plain .x-window-body {\r
354     border-left:1px solid #eee;\r
355     border-top:1px solid #eee;\r
356     border-bottom:1px solid #d0d0d0;\r
357     border-right:1px solid #d0d0d0;\r
358     background:transparent !important;\r
359 }\r
360 \r
361 body.x-body-masked .x-window-mc, body.x-body-masked .x-window-plain .x-window-mc {\r
362     background-color: #e4e4e4;\r
363 }\r
364 \r
365 \r
366 /* misc */\r
367 .x-html-editor-wrap {\r
368     border-color:#d0d0d0;\r
369 }\r
370 \r
371 /* Borders go last for specificity */\r
372 .x-panel-noborder .x-panel-body-noborder {\r
373     border-width:0;\r
374 }\r
375 \r
376 .x-panel-noborder .x-panel-header-noborder {\r
377     border-width:0;\r
378     border-bottom:1px solid #d0d0d0;\r
379 }\r
380 \r
381 .x-panel-noborder .x-panel-tbar-noborder .x-toolbar {\r
382     border-width:0;\r
383     border-bottom:1px solid #d0d0d0;\r
384 }\r
385 \r
386 .x-panel-noborder .x-panel-bbar-noborder .x-toolbar {\r
387     border-width:0;\r
388     border-top:1px solid #d0d0d0;\r
389 }\r
390 \r
391 .x-window-noborder .x-window-mc {\r
392     border-width:0;\r
393 }\r
394 .x-window-plain .x-window-body-noborder {\r
395     border-width:0;\r
396 }\r
397 \r
398 .x-tab-panel-noborder .x-tab-panel-body-noborder {\r
399         border-width:0;\r
400 }\r
401 \r
402 .x-tab-panel-noborder .x-tab-panel-header-noborder {\r
403         border-top-width:0;\r
404         border-left-width:0;\r
405         border-right-width:0;\r
406 }\r
407 \r
408 .x-tab-panel-noborder .x-tab-panel-footer-noborder {\r
409         border-bottom-width:0;\r
410         border-left-width:0;\r
411         border-right-width:0;\r
412 }\r
413 \r
414 \r
415 .x-tab-panel-bbar-noborder .x-toolbar {\r
416     border-width:0;\r
417     border-top:1px solid #d0d0d0;\r
418 }\r
419 \r
420 .x-tab-panel-tbar-noborder .x-toolbar {\r
421     border-width:0;\r
422     border-bottom:1px solid #d0d0d0;\r
423 }