Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / desktop / css / desktop.css
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.com/license
6  */
7 html, body {
8         background:#3d71b8 url(../wallpapers/desktop.jpg) no-repeat left top;
9     font: normal 12px tahoma, arial, verdana, sans-serif;
10         margin: 0;
11         padding: 0;
12         border: 0 none;
13         overflow: hidden;
14         height: 100%;
15 }
16
17 .start {
18         background-image: url( ../images/taskbar/black/startbutton-icon.gif ) !important;
19 }
20
21 .bogus {
22         background-image: url( ../images/bogus.png ) !important;
23 }
24
25 .logout {
26         background-image: url( ../images/logout.gif ) !important;
27 }
28
29 .settings {
30         background-image: url( ../images/gears.gif ) !important;
31 }
32
33 #dpanels {
34         width: 250px;
35         float: right;
36 }
37
38 #dpanels .x-panel {
39         margin: 15px;
40 }
41
42 #dpanels .x-date-picker {
43         border: 0 none;
44         border-top: 0 none;
45         background: transparent;
46 }
47
48 #dpanels .x-date-picker td.x-date-active {
49         background: #ffffff;
50 }
51
52 #dpanels .x-date-picker {
53         width: 100% !important;
54 }
55
56 #x-desktop {
57         width: 100%;
58         height: 100%;
59         border: 0 none;
60         position: relative;
61     overflow:hidden;
62     zoom:1;
63 }
64
65 #ux-taskbar .x-btn {
66         margin: 1px 0 0 1px;
67 }
68
69 #ux-taskbar-start .x-btn {
70         margin: 0;
71 }
72
73 #ux-taskbar button {
74         /* width: 150px;
75         overflow: hidden; */
76         text-align: left;
77         color: #ffffff;
78 }
79 #title-bar-wrapper {
80         height:35px;
81 }
82
83 #title-bar {
84         color: #225599;
85         padding: 9px 7px;
86         font: bold 16px tahoma,arial,verdana,sans-serif;
87         float:left;
88 }
89
90 #x-logout {
91         float:right;
92         padding:6px 7px;
93 }
94
95 .x-btn-text-icon .x-btn-center .logout {
96         background-position:0pt 3px;
97         background-repeat:no-repeat;
98         padding:3px 0pt 3px 18px;
99 }
100
101 #ux-taskbar {
102         background:transparent none;
103         height:30px;
104         margin:0;
105         padding:0;
106         position:relative;
107         z-index:12001;
108 }
109
110 .x-btn-icon .ux-taskbutton-center .x-btn-text{
111         background-position: center;
112         background-repeat: no-repeat;
113         height: 16px;
114         width: 16px;
115         cursor:pointer;
116         white-space: nowrap;
117     padding:0;
118 }
119 .x-btn-icon .ux-taskbutton-center{
120         padding:1px;
121 }
122
123 .x-btn-text-icon .ux-taskbutton-center .x-btn-text{
124         background-position: 0 6px;
125         background-repeat: no-repeat;
126         padding:7px 0px 7px 20px;
127 }
128
129 .x-btn-text-icon .ux-startbutton-center .x-btn-text{
130         background-position: 0 4px;
131         background-repeat: no-repeat;
132         color:#000000 !important;
133         font-weight:bold;
134         padding:7px 0px 7px 28px;
135 }
136
137 .ux-taskbutton-left, .ux-taskbutton-right{
138         font-size:1px;
139     line-height:1px;
140 }
141 .ux-taskbutton-left{
142         width:4px;
143         height:28px;
144         background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 0;
145 }
146 .ux-taskbutton-right{
147         width:4px;
148         height:28px;
149         background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 -28px;
150 }
151 .ux-taskbutton-left i, .ux-taskbutton-right i{
152         display:block;
153     width:4px;
154     overflow:hidden;
155     font-size:1px;
156     line-height:1px;
157 }
158 .ux-taskbutton-center{
159         background:url( ../images/taskbar/black/taskbutton.gif ) repeat-x 0 -56px;
160         vertical-align: middle;
161         text-align:center;
162         padding:0 5px;
163         cursor:pointer;
164         white-space:nowrap;
165 }
166
167 #ux-taskbar .ux-taskbutton-left{
168         background-position:0 0;
169 }
170 #ux-taskbar .ux-taskbutton-right{
171         background-position:0 -28px;
172 }
173 #ux-taskbar .ux-taskbutton-center{
174         background-position:0 -56px;
175 }
176
177 #ux-taskbar .x-btn-over .ux-taskbutton-left{
178         background-position:0 -252px;
179 }
180 #ux-taskbar .x-btn-over  .ux-taskbutton-right{
181         background-position:0 -280px;
182 }
183 #ux-taskbar .x-btn-over .ux-taskbutton-center{
184         background-position:0 -308px;
185 }
186
187 #ux-taskbar .x-btn-click .ux-taskbutton-left{
188         background-position:0 -168px;
189 }
190 #ux-taskbar .x-btn-click  .ux-taskbutton-right{
191         background-position:0 -196px;
192 }
193 #ux-taskbar .x-btn-click .ux-taskbutton-center{
194         background-position:0 -224px;
195 }
196
197 #ux-taskbar .active-win .ux-taskbutton-left{
198         background-position:0 -84px;
199 }
200 #ux-taskbar .active-win  .ux-taskbutton-right{
201         background:url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 -112px;
202 }
203 #ux-taskbar .active-win .ux-taskbutton-center{
204         background:url( ../images/taskbar/black/taskbutton.gif ) repeat-x 0 -140px;
205 }
206 #ux-taskbar .active-win .ux-taskbutton-center button {
207     color:#fff;
208 }
209
210 #spacer {
211         height: 25px;
212         float: left;
213         width: 0;
214         overflow: hidden;
215         margin-top: 2px;
216 }
217
218 .x-window-body p,.x-panel-body p {
219         padding: 10px;
220         margin: 0;
221 }
222
223 .x-window-maximized .x-window-bc {
224         height:0;
225 }
226
227 .icon-grid {
228     background-image:url( ../images/grid.png ) !important;
229 }
230 .add {
231     background-image:url(../../shared/icons/fam/add.gif) !important;
232 }
233 .option {
234     background-image:url(../../shared/icons/fam/plugin.gif) !important;
235 }
236 .remove {
237     background-image:url(../../shared/icons/fam/delete.gif) !important;
238 }
239 .save {
240     background-image:url(../../shared/icons/save.gif) !important;
241 }
242 .accordion {
243     background-image:url(../images/accordian.gif) !important;
244 }
245 .tabs {
246     background-image:url(../images/tabs.gif) !important;
247 }
248
249 /* IM window icons */
250
251 .user {
252     background-image:url( ../../shared/icons/fam/user.gif ) !important;
253 }
254
255 .user-add {
256     background-image:url(../../shared/icons/fam/user_add.gif) !important;
257 }
258
259 .user-delete {
260     background-image:url(../../shared/icons/fam/user_delete.gif) !important;
261 }
262
263 .connect {
264     background-image:url(../../shared/icons/fam/connect.gif) !important;
265 }
266
267 .user-girl {
268     background-image:url(../../shared/icons/fam/user_female.gif) !important;
269 }
270
271 .user-kid {
272     background-image:url(../../shared/icons/fam/user_green.gif) !important;
273 }
274
275 .user-suit {
276     background-image:url(../../shared/icons/fam/user_suit.gif) !important;
277 }
278
279 .ux-start-menu {
280         background:transparent none;
281         border:0px none;
282         padding:0;
283 }
284
285 .ux-start-menu-tl .x-window-header {
286         color:#f1f1f1;
287         font:bold 11px tahoma,arial,verdana,sans-serif;
288     padding:5px 0 4px 0;
289 }
290
291 .x-panel-tl .x-panel-icon, .ux-start-menu-tl .x-panel-icon {
292         background-position:0pt 4px;
293         background-repeat:no-repeat;
294         padding-left:20px !important;
295 }
296
297 .ux-start-menu-tl {
298         background: transparent url( ../images/taskbar/black/start-menu-left-corners.png ) no-repeat 0 0;
299         padding-left:6px;
300     zoom:1;
301     z-index:1;
302     position:relative;
303 }
304
305 .ux-start-menu-tr {
306         background: transparent url( ../images/taskbar/black/start-menu-right-corners.png ) no-repeat right 0;
307         padding-right:6px;
308 }
309
310 .ux-start-menu-tc {
311         background: transparent url( ../images/taskbar/black/start-menu-top-bottom.png ) repeat-x 0 0;
312         overflow:hidden;
313     zoom:1;
314 }
315
316 .ux-start-menu-ml {
317         background: transparent url( ../images/taskbar/black/start-menu-left-right.png ) repeat-y 0 0;
318         padding-left:6px;
319     zoom:1;
320 }
321
322 .ux-start-menu-bc {
323         background: transparent url( ../images/taskbar/black/start-menu-top-bottom.png ) repeat-x 0 bottom;
324     zoom:1;
325 }
326
327 .ux-start-menu-bc .x-window-footer {
328     padding-bottom:6px;
329     zoom:1;
330     font-size:0;
331     line-height:0;
332 }
333
334 .ux-start-menu-bl {
335         background: transparent url( ../images/taskbar/black/start-menu-left-corners.png ) no-repeat 0 bottom;
336         padding-left:6px;
337     zoom:1;
338 }
339
340 .ux-start-menu-br {
341         background: transparent url( ../images/taskbar/black/start-menu-right-corners.png ) no-repeat right bottom;
342         padding-right:6px;
343     zoom:1;
344 }
345
346 .x-panel-nofooter .ux-start-menu-bc {
347         height:6px;
348 }
349
350 .ux-start-menu-splitbar-h {
351         background-color:#d0d0d0;
352 }
353
354
355 .ux-start-menu-bwrap {
356         background:transparent none;
357         border:0px none;
358 }
359
360 .ux-start-menu-body {
361         background:transparent none;
362         border:0px none;
363 }
364
365 .ux-start-menu-apps-panel {
366         background:#ffffff none;
367         border:1px solid #1e2124;
368 }
369
370 .ux-start-menu-tools-panel {
371         border:0px none;
372         background:transparent url( ../images/taskbar/black/start-menu-right.png ) repeat-y scroll right 0pt;
373 }
374
375 #ux-taskbar-start {
376         background:#000000 url( ../images/taskbar/black/taskbar-start-panel-bg.gif ) repeat-x left top;
377         left:0px;
378         padding:0;
379         position:absolute;
380 }
381
382 #ux-taskbar-start .x-toolbar {
383         background: none;
384         padding:0px;
385         border:0px none;
386 }
387
388 #ux-taskbuttons-panel {
389         background:#000000 url( ../images/taskbar/black/taskbuttons-panel-bg.gif ) repeat-x left top;
390         padding-top:0;
391         position:relative;
392 }
393
394 .ux-taskbuttons-strip-wrap {
395         /* overflow:hidden;
396         position:relative;
397         width:100%; */
398
399         width:100%;
400     overflow:hidden;
401     position:relative;
402     zoom:1;
403 }
404
405 ul.ux-taskbuttons-strip {
406         display:block;
407         width:5000px;
408     zoom:1;
409 }
410
411 ul.ux-taskbuttons-strip li {
412     float:left;
413     margin-left:2px;
414 }
415
416
417 ul.ux-taskbuttons-strip li.ux-taskbuttons-edge {
418     float:left;
419     margin:0 !important;
420     padding:0 !important;
421     border:0 none !important;
422     font-size:1px !important;
423     line-height:1px !important;
424     overflow:hidden;
425     zoom:1;
426     background:transparent !important;
427     width:1px;
428 }
429
430 .x-clear {
431     clear:both;
432     height:0;
433     overflow:hidden;
434     line-height:0;
435     font-size:0;
436 }
437
438 .x-taskbuttons-scrolling {
439         position:relative;
440 }
441
442 .x-taskbuttons-scrolling .ux-taskbuttons-strip-wrap {
443         margin-left:18px;
444         margin-right:18px;
445 }
446
447 td.ux-taskButtons-edge {
448     /*float:left;*/
449     margin:0 !important;
450     padding:0 !important;
451     border:0 none !important;
452     font-size:1px !important;
453     line-height:1px !important;
454     overflow:hidden;
455     zoom:1;
456     background:transparent !important;
457     width:1px;
458 }
459
460 .ux-taskbuttons-scroller-left {
461     background: transparent url( ../images/taskbar/black/scroll-left.gif ) no-repeat -18px 0;
462     width:18px;
463     position:absolute;
464     left:1px;
465     top:0px;
466     z-index:10;
467     cursor:pointer;
468 }
469 .ux-taskbuttons-scroller-left-over {
470     background-position: 0 0;
471 }
472 .ux-taskbuttons-scroller-left-disabled {
473     background-position: -18px 0;
474     opacity:.5;
475     -moz-opacity:.5;
476     filter:alpha(opacity=50);
477     cursor:default;
478 }
479 .ux-taskbuttons-scroller-right {
480     background: transparent url( ../images/taskbar/black/scroll-right.gif ) no-repeat 0 0;
481     width:18px;
482     position:absolute;
483     right:0;
484     top:0px;
485     z-index:10;
486     cursor:pointer;
487 }
488 .ux-taskbuttons-scroller-right-over {
489     background-position: -18px 0;
490 }
491 .ux-taskbuttons-scroller-right-disabled {
492     background-position: 0 0;
493     opacity:.5;
494     -moz-opacity:.5;
495     filter:alpha(opacity=50);
496     cursor:default;
497 }
498
499 .ux-toolmenu-sep {
500         background-color:#18191a;
501         border-bottom:1px solid #858789;
502         display:block;
503         font-size:1px;
504         line-height:1px;
505         margin:2px 3px;
506 }
507
508 .ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item a.x-menu-item {
509         color:#ffffff;
510 }
511
512 .ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item .x-menu-item-active a.x-menu-item {
513         color:#000000;
514 }
515
516 .ux-start-menu-tools-panel .x-menu-item-active {
517         background: #525456 url( ../images/taskbar/black/item-over.gif ) repeat-x left bottom;
518         border:1px solid #000000;
519         padding: 0;
520 }
521
522 #ux-taskbar .x-splitbar-h {
523         background:#000000 url( ../images/taskbar/black/taskbar-split-h.gif ) no-repeat 0 0;
524         width:8px;
525 }
526
527 .x-window-header-text {
528         cursor:default;
529 }
530
531 /*
532  * Begin Start button
533  */
534 .ux-startbutton-left, .ux-startbutton-right{
535         font-size:1px;
536     line-height:1px;
537 }
538 .ux-startbutton-left{
539         width:10px;
540         height:28px;
541         background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 0;
542 }
543 .ux-startbutton-right{
544         width:10px;
545         height:30px;
546         background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 -28px;
547 }
548 .ux-startbutton-left i, .ux-startbutton-right i{
549         display:block;
550     width:10px;
551     overflow:hidden;
552     font-size:1px;
553     line-height:1px;
554 }
555 .ux-startbutton-center{
556         background:url( ../images/taskbar/black/startbutton.gif ) repeat-x 0 -56px;
557         vertical-align: middle;
558         text-align:center;
559         padding:0;
560         cursor:pointer;
561         white-space:nowrap;
562 }
563
564 #ux-taskbar .ux-startbutton-left{
565         background-position:0 0;
566 }
567 #ux-taskbar .ux-startbutton-right{
568         background-position:0 -30px;
569 }
570 #ux-taskbar .ux-startbutton-center{
571         background-position:0 -60px;
572 }
573
574 #ux-taskbar .x-btn-over .ux-startbutton-left{
575         background-position:0 -270px;
576 }
577 #ux-taskbar .x-btn-over  .ux-startbutton-right{
578         background-position:0 -300px;
579 }
580 #ux-taskbar .x-btn-over .ux-startbutton-center{
581         background-position:0 -330px;
582 }
583
584 #ux-taskbar .x-btn-click .ux-startbutton-left{
585         background-position:0 -180px;
586 }
587 #ux-taskbar .x-btn-click  .ux-startbutton-right{
588         background-position:0 -210px;
589 }
590 #ux-taskbar .x-btn-click .ux-startbutton-center{
591         background-position:0 -240px;
592 }
593
594 #ux-taskbar .active-win .ux-startbutton-left{
595         background-position:0 -90px;
596 }
597 #ux-taskbar .active-win  .ux-startbutton-right{
598         background:url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 -120px;
599 }
600 #ux-taskbar .active-win .ux-startbutton-center{
601         background:url( ../images/taskbar/black/startbutton.gif ) repeat-x 0 -150px;
602 }
603 #ux-taskbar .active-win .ux-startbutton-center button {
604     color:#fff;
605 }
606 /*
607  * End Start button
608  */
609
610 .x-resizable-proxy{
611     background:#C7DFFC;
612     opacity:.5;
613     -moz-opacity:.5;
614     filter:alpha(opacity=50);
615     border: 1px solid #3b5a82;
616 }
617
618 /* Desktop Shortcuts */
619 #x-shortcuts dt {
620     float:left;
621     margin:15px 0 0 15px;
622     clear:left;
623     width:64px;
624     font:normal 10px tahoma,arial,verdana,sans-serif;
625     text-align:center;
626     zoom:1;
627     display:block;
628 }
629 #x-shortcuts dt a {
630     width:64px;
631     display:block;
632     color:white;
633     text-decoration:none;
634 }
635 #x-shortcuts dt div {
636     width:100%;
637     color:white;
638     overflow:hidden;
639     text-overflow:ellipsis;
640     cursor:pointer;
641 }
642 .ext-ie #x-shortcuts dt img {
643     background:transparent !important;
644 }
645 #x-shortcuts dt a:hover {
646     text-decoration:underline;
647 }
648 /* shortcuts */
649 #grid-win-shortcut img {
650     width:48px;
651     height:48px;
652     background-image: url(../images/grid48x48.png);
653     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/grid48x48.png', sizingMethod='scale');
654 }
655 #acc-win-shortcut img {
656     width:48px;
657     height:48px;
658     background-image: url(../images/im48x48.png);
659     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/im48x48.png', sizingMethod='scale');
660 }