static/css/mochaui/ui.css

   1 /*
   2
   3 CSS for Mocha UI
   4
   5 Copyright:
   6         Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.
   7
   8 License:
   9         MIT-style license.
  10
  11 */
  12
  13 html, body {
  14         height: 100%;
  15         overflow: auto; /* Removes empty vertical scrollbars in IE */
  16 }
  17
  18 body {
  19         margin: 0; /* Required */
  20         background: #fff;
  21 }
  22
  23 #desktop {
  24         position: relative;
  25         top: 0;
  26         left: 0;
  27         width: 100%;
  28         min-width: 750px; /* Helps keep header content from wrapping */
  29         height: 100%;
  30         min-height: 100%;
  31         overflow: hidden;
  32         cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */
  33 }
  34
  35 #desktopHeader {
  36         background: #fff; /* Will be the margin color between toolbars */
  37 }
  38
  39 #desktopTitlebarWrapper {
  40         position: relative;
  41         height: 40px;
  42         overflow: hidden;
  43         background: #333 url(../images/bg-desktopTitlebar-bk.gif) repeat-x;
  44 }
  45
  46 #desktopTitlebar {
  47         padding: 7px 8px 6px 125px;
  48         height: 23px;
  49         background: url(../images/logo.gif) no-repeat;
  50         background-position: 10px 0;
  51 }
  52
  53 #desktopTitlebar h1.applicationTitle {
  54         display: none;
  55         margin: 0;
  56         padding: 5px 0 0 0;
  57         font-size: 20px;
  58         font-weight: bold;
  59         color: #fff;
  60 }
  61
  62 #desktopTitlebar h1.tagline {
  63         font-size: 12px;
  64         color: #d9d9d9;
  65         font-weight: normal;
  66         padding: 5px 0 0 0;
  67 }
  68
  69 #desktopTitlebar h1.tagline .taglineEm {
  70         color: #fff;
  71         font-weight: bold;
  72 }
  73
  74 #topNav {
  75         float: right;
  76         color: #d9d9d9;
  77         text-align: right;
  78         padding: 5px 5px 0 0;
  79 }
  80
  81 #topNav a {
  82         color: #fff;
  83         font-weight: bold;
  84 }
  85
  86 #topNav a:hover {
  87         color: #fff;
  88         text-decoration: underline;
  89 }
  90
  91 /* Toolboxes */
  92
  93 .toolbox {
  94         float: right;
  95         margin-top: 3px;
  96         padding: 4px 10px 0 10px;
  97         border-left: 1px solid #ccc;
  98         height: 20px;
  99         overflow: hidden;
 100 }
 101
 102 /* Navbar */
 103
 104 #desktopNavbar {
 105         background: #f1f1f1;
 106         height: 30px;
 107 }
 108
 109 #desktopNavbar ul {
 110         padding: 0;
 111         margin: 0;
 112         list-style: none;
 113         font-size: 12px;
 114 }
 115
 116 #desktopNavbar li {
 117         float: left;
 118 }
 119
 120 #desktopNavbar a {
 121         display: block;
 122 }
 123
 124 #desktopNavbar ul li a {
 125         padding: 6px 10px 6px 10px;
 126         color: #3f3f3f;
 127 }
 128
 129 #desktopNavbar ul li a:hover {
 130         background-color: #ddd;
 131 }
 132
 133 #desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right {
 134         background-image: url(../images/arrow-right.gif);
 135         background-repeat: no-repeat;
 136         background-position: right 6px;
 137 }
 138
 139 #desktopNavbar li ul {
 140         padding: 2px;
 141         border: 1px solid #333;
 142         background: #fff;
 143         position: absolute;
 144         width: 158px;
 145         left: -999em;
 146         z-index: 8000;
 147 }
 148
 149 #desktopNavbar li:hover ul ul,
 150 #desktopNavbar li.ieHover ul ul,
 151 #desktopNavbar li:hover ul ul ul,
 152 #desktopNavbar li.ieHover ul ul ul {
 153         left: -999em;
 154 }
 155
 156 #desktopNavbar li ul ul { /* third-and-above-level lists */
 157         margin: -22px 0 0 158px;
 158 }
 159
 160 #desktopNavbar li ul li .check {
 161         position: absolute;
 162         top: 7px;
 163         left: 6px;
 164         width: 5px;
 165         height: 5px;
 166         background: #00CC33;
 167         overflow: hidden;
 168         line-height: 1px;
 169         font-size: 1px;
 170 }
 171
 172 #desktopNavbar li ul li a {
 173         position: relative;
 174         padding: 1px 9px 1px 19px;
 175         width: 130px;
 176         color: #333;
 177         font-weight: normal;
 178 }
 179
 180 #desktopNavbar li ul li a:hover {
 181         background: #eee;
 182 }
 183
 184 #desktopNavbar li:hover ul,
 185 #desktopNavbar li.ieHover ul,
 186 #desktopNavbar li li.ieHover ul,
 187 #desktopNavbar li li li.ieHover ul,
 188 #desktopNavbar li li:hover ul,
 189 #desktopNavbar li li li:hover ul { /* lists nested under hovered list items */
 190       left: auto;
 191 }
 192
 193 #desktopNavbar li:hover { /* For IE7 */
 194     position: static;
 195 }
 196
 197 .divider {
 198         margin-top: 2px;
 199         padding-top: 3px;
 200         border-top: 1px solid #ddd;
 201 }
 202
 203 #pageWrapper {
 204         position: relative;
 205         overflow: hidden; /* This can be set to hidden or auto */
 206 }
 207
 208 /* Footer */
 209 #desktopFooterWrapper {
 210         background: #888;
 211         padding: 1px 0 0 0;
 212 }
 213
 214 #desktopFooter {
 215         font-size: 11px;
 216         height: 21px;
 217         padding: 4px 10px 0 10px;
 218         background: #343E47;
 219         color: #fff;
 220         border: 1px solid #202A33;
 221 }
 222
 223 #desktopFooter a {
 224         color: #fff;
 225         font-weight: bold;
 226 }
 227
 228 #desktopFooter a:hover {
 229         text-decoration: underline;
 230 }
 231
 232 /* Menus */
 233
 234 .menu-right li {
 235         list-style-type: none;
 236         display: inline;
 237         margin: 0 0 0 15px;
 238 }
 239
 240 /* Windows */
 241
 242 .mocha {
 243         position: absolute;
 244         top: 0;
 245         left: 0;
 246         display: none;
 247         overflow: hidden;
 248 }
 249
 250 .mocha.isFocused {
 251 }
 252
 253 .mochaOverlay {
 254         position: absolute;
 255         top: 0;
 256         left: 0;
 257 }
 258
 259 .mochaTitlebar {
 260         width: 100%;
 261         overflow: hidden;
 262 }
 263
 264 .mochaTitlebar h3 {
 265         font-size: 12px;
 266         line-height: 15px;
 267         font-weight: bold;
 268         margin: 5px 10px 4px 12px;
 269         padding: 0;
 270         color: #888;
 271 }
 272
 273 .mocha.isFocused .mochaTitlebar h3 {
 274         color: #141414;
 275 }
 276
 277 .mochaToolbarWrapper {
 278         width: 100%; /* For IE */
 279         position: relative;
 280         height: 29px;
 281         background: #fff;
 282         overflow: hidden;
 283         border-top: 1px solid #d9d9d9;
 284 }
 285
 286 .mochaToolbar {
 287         width: 100%; /* For IE */
 288         border-top: 1px solid #fff;
 289 }
 290
 291 .toolbarTabs {
 292         padding: 0 5px 2px 2px;
 293         background: #e4e4e4 url(../images/tabs.gif) repeat-x;
 294         background-position: left -60px;
 295 }
 296
 297 .tab-menu {
 298         padding-top: 1px;
 299         list-style:     none;
 300         margin: 0;
 301         padding: 0;
 302         line-height: 16px;
 303         font-size: 11px;
 304 }
 305
 306 .tab-menu li {
 307         display: block;
 308         float: left;
 309         margin: 0;
 310         cursor: pointer;
 311         background: url(../images/tabs.gif) repeat-x;
 312         background-position: left -30px;
 313 }
 314
 315 .tab-menu li.selected {
 316         background: url(../images/tabs.gif) repeat-x;
 317         background-position: left 0;
 318 }
 319
 320 .tab-menu li a {
 321         display: block;
 322         margin-left: 8px;
 323         padding: 6px 16px 5px 10px;
 324         text-align: center;
 325         font-weight: normal;
 326         color: #141414;
 327         background: url(../images/tabs.gif) repeat-x;
 328         background-position: right -30px;
 329 }
 330
 331 .tab-menu li.selected a {
 332         color: #141414;
 333         font-weight: bold;
 334         background: url(../images/tabs.gif) repeat-x;
 335         background-position: right 0;
 336 }
 337
 338 .mochaContentBorder {
 339         border-top: 1px solid #dadada;
 340         border-bottom: 1px solid #dadada;
 341 }
 342
 343 .mochaContentWrapper { /* Has a fixed height and scrollbars if required. */
 344         font-size: 12px;
 345         overflow: auto;
 346 }
 347
 348 .mochaContent {
 349         padding: 10px 12px;
 350 }
 351
 352 .mocha .handle {
 353         position: absolute;
 354         background: #0f0;
 355         width: 3px;
 356         height: 3px;
 357         z-index: 2;
 358         opacity: .0;
 359         filter: alpha(opacity=0);
 360         -moz-opacity: .0;
 361         overflow: hidden;
 362         font-size: 1px; /* For IE6 */
 363 }
 364
 365 .mocha .corner { /* Corner resize handles */
 366         background: #f00;
 367         width: 10px;
 368         height: 10px;
 369 }
 370
 371 .mocha .cornerSE { /* Bottom right resize handle */
 372         background: #f00;
 373         width: 20px;
 374         height: 20px;
 375 }
 376
 377 .mochaCanvasHeader {
 378         position: absolute;
 379         top: 0;
 380         left: 0;
 381         background: transparent;
 382         z-index: -1;
 383         display: none;
 384         overflow: hidden;
 385 }
 386
 387 .mochaControls {
 388         position: absolute;
 389         width: 52px;
 390         top: 8px;
 391         right: 8px;
 392         height: 14px;
 393         z-index: 4;
 394         background: transparent;
 395 }
 396
 397 .mochaCanvasControls {
 398         position: absolute;
 399         top: 8px;
 400         right: 8px;
 401         z-index: 3;
 402         background: transparent;
 403 }
 404
 405 /*
 406         To use images for these buttons:
 407         1. Set the useCanvasControls window option to false.
 408         2. If you use a different button size you may need to reposition the controls.
 409            Modify the controlsOffset window option.
 410         2. Add background images to each button.
 411
 412 */
 413 .mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {
 414         float: right;
 415         width: 14px;
 416         height: 14px;
 417         font-size: 1px;
 418         cursor: pointer;
 419         z-index: 4;
 420         background: #f00;
 421         margin-left: 5px;
 422 }
 423
 424 .mochaMinimizeButton {
 425         margin-left: 0;
 426 }
 427
 428 .mochaMaximizeButton {
 429 }
 430
 431 .mochaCloseButton {
 432 }
 433
 434 .mochaLoadingIcon {
 435         position: absolute;
 436         bottom: 7px;
 437         left: 6px;
 438 }
 439
 440 .mochaIframe {
 441         width: 100%;
 442 }
 443
 444 /* Sliders */
 445
 446 .slider {
 447         clear: both;
 448         position: relative;
 449         font-size: 12px;
 450         font-weight: bold;
 451         width: 200px;
 452         margin-bottom: 15px;
 453 }
 454
 455 .sliderarea {
 456         position: relative;
 457         height: 6px;
 458         width: 200px;
 459         font-size: 1px;
 460         line-height: 1px;
 461         background: #dfdfdf;
 462         margin: 0;
 463         padding: 0;
 464 }
 465
 466 .sliderknob {
 467         position: absolute;
 468         top: 0px;
 469         height: 6px;
 470         width: 13px;
 471         font-size: 1px;
 472         line-height: 1px;
 473         background: #888;
 474         border-right: 1px solid #eee;
 475         border-left: 1px solid #eee;
 476         cursor: pointer;
 477         overflow: hidden;
 478 }
 479
 480 .update {
 481         padding-bottom: 5px;
 482 }
 483
 484 .clear {
 485         clear: both;
 486         height: 0;
 487 }
 488
 489 *html .clear {
 490         height: 1%;
 491         font-size: 1px;
 492         line-height: 1px;
 493         overflow: hidden;
 494         visibility: hidden;
 495 }
 496
 497 /* Window Builder Form Elements */
 498
 499 #desktop form {
 500         margin: 0 0 0 0;
 501         padding: 5px 0 0 0;
 502         width: 320px;
 503 }
 504
 505 #desktop .input {
 506         width: 225px;
 507         padding: 1px 0 1px 3px;
 508         border: 1px solid #bbb;
 509 }
 510
 511 #desktop textarea {
 512         width: 225px;
 513         height: 100px;
 514         padding: 1px 0 1px 3px;
 515         border: 1px solid #bbb;
 516 }
 517
 518 #desktop .formLabel {
 519         float: left;
 520         text-align: right;
 521         width: 80px;
 522         margin: 0 0 5px 0;
 523 }
 524
 525 #desktop .formField {
 526         float: right;
 527         margin: 0 0 5px 0;
 528         padding: 0 0 0 0;
 529         width: 230px;
 530 }
 531
 532 #desktop form .number {
 533         width: 40px;
 534 }
 535
 536 /* Modal Windows */
 537 #modalOverlay {
 538         display: none;
 539         position: fixed;
 540         top: 0;
 541         left: 0;
 542         width: 100%;
 543         background: #000;
 544         opacity: 0;
 545         filter: alpha(opacity=0);
 546         -moz-opacity: 0;
 547         z-index: 10000;
 548 }
 549
 550 * html  #modalOverlay {
 551         position: absolute;
 552 }
 553
 554 /* Fix for IE6 select z-index issue */
 555 #modalFix {
 556         display: none;
 557         position: absolute;
 558         top: 0;
 559         left: 0;
 560         width: 100%;
 561         opacity: 0;
 562         filter: alpha(opacity=0);
 563         -moz-opacity: 0;
 564         z-index: 9999;
 565 }
 566
 567 /* Overlay */
 568
 569 #windowUnderlay {
 570         position: fixed;
 571         top: 0;
 572         left: 0;
 573         width: 100%;
 574         background: #fff;
 575 }
 576
 577 * html #windowUnderlay {
 578         position: absolute;
 579 }
 580
 581 /* Fix for IE6 select z-index issue */
 582 iframe.zIndexFix {
 583         display: block;
 584         position: absolute;
 585         top: 0;
 586         left: 0;
 587         z-index: -1;
 588         filter: mask();
 589         width: 100px;
 590         height: 100px;
 591         border: 1px solid transparent;
 592 }
 593
 594 /* Window Minimize Dock */
 595
 596 #dockWrapper {
 597         display: none;
 598         background: #f1f1f1;
 599         width: 100%;
 600 }
 601
 602 #dockWrapper.top {
 603         border-top: 1px solid #d0d0d0;
 604 }
 605
 606 #dock {
 607         position: relative;
 608         padding: 3px 15px 1px 15px;
 609         bottom: 0;
 610         left: 0;
 611         width: 100%;
 612         background: #f1f1f1;
 613         border: 1px solid #f1f1f1;
 614         min-height: 26px;
 615         height: auto;
 616    _height: 26px; /* IE 6.0 hack, for not supporting min-height */
 617 }
 618
 619 .dockTab {
 620         float: left;
 621         font-size: 11px;
 622         position: relative;
 623         width: 140px;
 624         height: 22px;
 625         margin: 0 2px 2px 0;
 626         overflow: hidden;
 627         cursor: pointer;
 628         background: transparent url(../images/bg-desktopTitlebar.gif)  repeat-x;
 629         border: 1px solid #c0c0c0;
 630 }
 631
 632 .dockTab.activeDockTab {
 633         background: #fff;
 634 }
 635
 636 .dockText {
 637         position: absolute;
 638         top: 0;
 639         left: 0;
 640         display: block;
 641         text-align: left;
 642         padding: 2px 0 0 23px;
 643         width: 115px;
 644         height: 19px;
 645         overflow: hidden;
 646         background: url(../images/icons/page.gif) 2px 3px no-repeat;
 647 }
 648
 649 #dockCanvas {
 650         position: absolute;
 651         top: 4px;
 652         left: 2px;
 653         z-index: 2;
 654 }
 655
 656 #dockPlacement {
 657         position: absolute;
 658         top: 3px;
 659         left: 2px;
 660         width: 10px;
 661         height: 9px;
 662         opacity: 0;
 663         filter: alpha(opacity=0);
 664         -moz-opacity: 0;
 665         background: #f00; /* for troubleshooting */
 666         cursor: pointer;
 667         z-index: 3; /* for IE */
 668 }
 669
 670 #dockAutoHide {
 671         position: absolute;
 672         top: 13px;
 673         left: 2px;
 674         width: 10px;
 675         height: 9px;
 676         opacity: 0;
 677         filter: alpha(opacity=0);
 678         -moz-opacity: 0;
 679         background: #f00; /* for troubleshooting */
 680         cursor: pointer;
 681         z-index: 3; /* for IE */
 682 }
 683
 684 /* Accordian */
 685
 686 .accordianWrapper {
 687         padding: 0;
 688         background: #fff;
 689 }
 690
 691 .accordianToggler {
 692         margin: 0;
 693         padding: 6px 10px;
 694         background: #fff url(../images/bg-desktopTitlebar.gif) repeat-x;
 695         font-size: 12px;
 696         cursor: pointer;
 697         border-top: 1px solid #e3e3e3;
 698 }
 699
 700 .topToggler {
 701         border-top: none;
 702 }
 703
 704 .accordianToggler.open {
 705         background: #fff url(../images/bg-desktopTitlebar.gif) repeat-x;
 706 }
 707
 708 .accordianContent {
 709         padding: 10px 10px 5px 10px;
 710 }
 711
 712 /* Window Themes */
 713
 714 .mocha.transparent .mochaTitlebar h3 {
 715         color: #fff;
 716         display: none;
 717 }
 718
 719 .mocha.notification .mochaTitlebar {
 720         opacity: .0;
 721         filter: alpha(opacity=0);
 722         -moz-opacity: 0;
 723 }
 724
 725 .mocha.notification .mochaContentBorder {
 726         border-width: 0px;
 727 }
 728
 729 .mocha.notification .mochaContentWrapper {
 730         text-align: center;
 731         font-size: 12px;
 732         font-weight: bold;
 733 }
 734
 735 /* Folder Tree */
 736
 737 .tree {
 738         font-size: 11px;
 739         line-height: 15px;
 740         margin: 0;
 741 }
 742
 743 .tree ul {
 744         margin: 0;
 745 }
 746
 747 .tree li {
 748         list-style-type: none;
 749         white-space: nowrap;
 750 }
 751
 752 .tree li img {
 753         vertical-align: middle;
 754         width: 18px;
 755         height: 18px;
 756         overflow: hidden;
 757 }
 758
 759 .tree li span {
 760         padding-left: 2px;
 761 }