examples/desktop/css/desktop.css

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