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 }