skins/default/common.css

   1 /***** Roundcube|Mail basic styles *****/
   2
   3 body
   4 {
   5   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
   6   margin: 8px;
   7   background-color: #F6F6F6;
   8   color: #000;
   9   font-size: 12px;
  10 }
  11
  12 body.iframe
  13 {
  14   margin: 20px 0 0 0;
  15   background-color: #FFF;
  16 }
  17
  18 body.extwin
  19 {
  20   margin: 10px;
  21 }
  22
  23 td, th, div, p, select, input, textarea
  24 {
  25   font-size: 12px;
  26   font-family: inherit;
  27 }
  28
  29 th
  30 {
  31   font-weight: normal;
  32 }
  33
  34 h3
  35 {
  36   font-size: 18px;
  37 }
  38
  39 a, a:active, a:visited
  40 {
  41   color: #000;
  42   outline: none;
  43 }
  44
  45 a.button, a.button:visited, a.tab, a.tab:visited, a.axislist
  46 {
  47   color: #000;
  48   text-decoration: none;
  49 }
  50
  51 a.tab
  52 {
  53   width: 80px;
  54   display: block;
  55   text-align: center;
  56 }
  57
  58 hr
  59 {
  60   height: 1px;
  61   background-color: #666;
  62   border-style: none;
  63 }
  64
  65 input[type="text"],
  66 input[type="button"],
  67 input[type="password"],
  68 textarea
  69 {
  70   border: 1px solid #666;
  71   color: #333;
  72   background-color: #FFF;
  73 }
  74
  75 input, textarea
  76 {
  77   color: black;
  78   padding: 1px 3px;
  79 }
  80
  81 input.placeholder,
  82 textarea.placeholder
  83 {
  84   color: #aaa;
  85 }
  86
  87 input.button
  88 {
  89   height: 20px;
  90   color: #333333;
  91   font-size: 12px;
  92   padding-left: 8px;
  93   padding-right: 8px;
  94   background: url(images/buttons/bg.gif) repeat-x #f0f0f0;
  95   border: 1px solid #a4a4a4;
  96 }
  97
  98 input.button:hover
  99 {
 100   color: black;
 101 }
 102
 103 input.button[disabled],
 104 input.button[disabled]:hover
 105 {
 106   color: #aaa;
 107   border-color: #ccc;
 108 }
 109
 110 input.mainaction
 111 {
 112   font-weight: bold;
 113   border: 1px solid #999;
 114 }
 115
 116 img
 117 {
 118   border: 0;
 119 }
 120
 121 .alttext
 122 {
 123   font-size: 11px;
 124 }
 125
 126 .hint
 127 {
 128   color: #666;
 129   font-size: 11px;
 130 }
 131
 132 .formlinks a,
 133 .formlinks a:visited
 134 {
 135   color: #CC0000;
 136   font-size: 11px;
 137   text-decoration: none;
 138 }
 139
 140 .formlinks a.disabled,
 141 .formlinks a.disabled:visited
 142 {
 143   color: #999999;
 144 }
 145
 146 /** common user interface objects */
 147
 148 #mainscreen
 149 {
 150   position: absolute;
 151   top: 85px;
 152   right: 20px;
 153   bottom: 20px;
 154   left: 20px;
 155 }
 156
 157 #header
 158 {
 159   position: absolute;
 160   top: 8px;
 161   left: 19px;
 162   width: 170px;
 163   height: 40px;
 164   z-index: 100;
 165 }
 166
 167 #taskbar
 168 {
 169   position: absolute;
 170   top: 0px;
 171   right: 0px;
 172   height: 24px;
 173   width: 100%;
 174   background: url(images/taskbar.png) top right no-repeat;
 175   padding: 10px 6px 5px 0px;
 176   text-align: right;
 177   white-space: nowrap;
 178   z-index: 2;
 179 }
 180
 181 #taskbar a
 182 {
 183   font-size: 11px;
 184   color: #666666;
 185   text-decoration: none;
 186   padding: 6px 12px 6px 26px;
 187   background: url(images/taskicons.gif) no-repeat;
 188 }
 189
 190 #taskbar a:hover
 191 {
 192   color: #333333;
 193 }
 194
 195 #taskbar a.button-mail
 196 {
 197   background-position: 0 0;
 198 }
 199
 200 #taskbar a.button-addressbook
 201 {
 202   background-position: 0 -25px;
 203 }
 204
 205 #taskbar a.button-settings
 206 {
 207   background-position: 0 -50px;
 208 }
 209
 210 #taskbar a.button-logout
 211 {
 212   background-position: 0 -75px;
 213 }
 214
 215 #message
 216 {
 217   position: absolute;
 218   display: none;
 219   top: -1px;
 220   margin-left: -225px;
 221   left: 50%;
 222   z-index: 5000;
 223   opacity: 0.85;
 224 }
 225
 226 #message div
 227 {
 228   width: 400px;
 229   margin: 0px;
 230   min-height: 22px;
 231   padding: 8px 10px 8px 46px;
 232 }
 233
 234 #message div.notice,
 235 #message-objects div.notice
 236 {
 237   background: url(images/display/icons.png) 6px 3px no-repeat;
 238   background-color: #F7FDCB;
 239   border: 1px solid #C2D071;
 240 }
 241
 242 #message div.error,
 243 #message div.warning,
 244 #message-objects div.warning,
 245 #message-objects div.error
 246 {
 247   background: url(images/display/icons.png) 6px -97px no-repeat;
 248   background-color: #EF9398;
 249   border: 1px solid #DC5757;
 250 }
 251
 252 #message div.confirmation,
 253 #message-objects div.confirmation
 254 {
 255   background: url(images/display/icons.png) 6px -47px no-repeat;
 256   background-color: #A6EF7B;
 257   border: 1px solid #76C83F;
 258 }
 259
 260 #message div.loading,
 261 #message-objects div.loading
 262 {
 263   background: url(images/display/loading.gif) 6px 3px no-repeat;
 264   background-color: #EBEBEB;
 265   border: 1px solid #CCCCCC;
 266 }
 267
 268 #message a
 269 {
 270   cursor: pointer;
 271   text-decoration: underline;
 272 }
 273
 274 .box
 275 {
 276   border: 1px solid #999;
 277 }
 278
 279 .boxtitle
 280 {
 281   height: 12px !important;
 282   padding: 2px 10px 5px 5px;
 283   border-bottom: 1px solid #999;
 284   color: #333;
 285   font-size: 11px;
 286   font-weight: bold;
 287   overflow: hidden;
 288   text-overflow: ellipsis;
 289   -o-text-overflow: ellipsis;
 290   white-space: nowrap;
 291   background: url(images/listheader.gif) top left repeat-x #CCC;
 292 }
 293
 294 .boxtitle .rightalign
 295 {
 296   float: right;
 297 }
 298
 299 body.iframe .boxtitle
 300 {
 301   position: fixed;
 302   top: 0;
 303   left: 0;
 304   width: 100%;
 305 }
 306
 307 .boxcontent
 308 {
 309   padding: 15px 10px 10px 10px;
 310   background-color: #F2F2F2;
 311 }
 312
 313 .boxcontent table td.title
 314 {
 315   color: #666;
 316   padding-right: 10px;
 317 }
 318
 319 .boxlistcontent
 320 {
 321   position: absolute;
 322   top: 20px;
 323   bottom: 22px;
 324   left: 0;
 325   right: 0;
 326   width: 100%;
 327   overflow-y: auto;
 328   overflow-x: hidden;
 329 }
 330
 331 .boxsubject
 332 {
 333   position: absolute;
 334   top: 0px;
 335   left: 0px;
 336   right: 0px;
 337   overflow: hidden;
 338   height: 22px;
 339   border-bottom: 1px solid #999;
 340   background: url(images/listheader.gif) top left repeat-x #CCC;
 341 }
 342
 343 .boxfooter
 344 {
 345   position: absolute;
 346   bottom: 0px;
 347   left: 0px;
 348   right: 0px;
 349   overflow: hidden;
 350   height: 22px;
 351   border-top: 1px solid #999;
 352   background: url(images/listheader.gif) top left repeat-x #CCC;
 353 }
 354
 355 .boxfooter a.button,
 356 .boxfooter a.buttonPas
 357 {
 358   display: block;
 359   float: left;
 360   width: 34px;
 361   height: 22px;
 362   padding: 0px;
 363   margin: 0;
 364   overflow: hidden;
 365   background: url(images/icons/groupactions.png) 0 0 no-repeat transparent;
 366   opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
 367 }
 368
 369 .boxfooter a.groupactions
 370 {
 371   background-position: 0 -26px;
 372 }
 373
 374 .boxfooter a.buttonPas
 375 {
 376   opacity: 0.35;
 377 }
 378
 379 .pagenav
 380 {
 381   min-width: 250px;
 382 }
 383
 384 .pagenav span
 385 {
 386   color: #444;
 387   font-size: 11px;
 388   text-shadow: white 1px 1px;
 389   white-space: nowrap;
 390 }
 391
 392 .pagenav a.button,
 393 .pagenav a.buttonPas
 394 {
 395   display: block;
 396   float: left;
 397   width: 11px;
 398   height: 11px;
 399   padding: 0;
 400   margin: 1px;
 401   overflow: hidden;
 402   background: url(images/pagenav.gif) 0 0 no-repeat transparent;
 403   opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
 404 }
 405
 406 .pagenav a.buttonPas {
 407   opacity: 0.35;
 408 }
 409
 410 .pagenav a.firstpageSel {
 411   background-position: 0 -11px;
 412 }
 413
 414 .pagenav a.prevpage {
 415   background-position: -11px 0;
 416 }
 417
 418 .pagenav a.prevpageSel {
 419   background-position: -11px -11px;
 420 }
 421
 422 .pagenav a.nextpage {
 423   background-position: -22px 0;
 424 }
 425
 426 .pagenav a.nextpageSel {
 427   background-position: -22px -11px;
 428 }
 429
 430 .pagenav a.lastpage {
 431   background-position: -33px 0;
 432 }
 433
 434 .pagenav a.lastpageSel {
 435   background-position: -33px -11px;
 436 }
 437
 438 .splitter
 439 {
 440   user-select: none;
 441   -moz-user-select: none;
 442   -khtml-user-select: none;
 443   position: absolute;
 444   background: url(images/dimple.png) center no-repeat;
 445 }
 446
 447 .splitter-h
 448 {
 449   cursor: n-resize; cursor: row-resize;
 450   background-position: center 2px;
 451 }
 452
 453 .splitter-v
 454 {
 455   cursor: e-resize; cursor: col-resize;
 456   background-position: 2px center;
 457 }
 458
 459 .popupmenu
 460 {
 461   position: absolute;
 462   top: 32px;
 463   left: 90px;
 464   width: auto;
 465   display: none;
 466   background-color: #fff;
 467   background-color: rgba(255, 255, 255, 0.95);
 468   border: 1px solid #999;
 469   padding: 4px;
 470   z-index: 240;
 471   border-radius: 3px;
 472   -moz-border-radius: 3px;
 473   -webkit-border-radius: 3px;
 474   -moz-box-shadow: 1px 1px 12px #999;
 475   -webkit-box-shadow: #999 1px 1px 12px;
 476 }
 477
 478 .popupmenu ul
 479 {
 480   margin: -4px 0;
 481   padding: 0;
 482   list-style: none;
 483 }
 484
 485 .popupmenu ul li
 486 {
 487   font-size: 11px;
 488   white-space: nowrap;
 489   min-width: 100px;
 490   margin: 3px -4px;
 491 }
 492
 493 .popupmenu li a
 494 {
 495   display: block;
 496   color: #a0a0a0;
 497   padding: 2px 10px;
 498   text-decoration: none;
 499   min-height: 14px;
 500 }
 501
 502 .popupmenu li a.active,
 503 .popupmenu li a.active:active,
 504 .popupmenu li a.active:visited
 505 {
 506   color: #333;
 507 }
 508
 509 .popupmenu li a.active:hover
 510 {
 511   color: #fff;
 512   background-color: #c00;
 513 }
 514
 515 .popupmenu li.block input
 516 {
 517   float: left;
 518 }
 519
 520 .darkbg
 521 {
 522   background-color: #F2F2F2 !important;
 523 }
 524
 525 .dropbutton,
 526 .dropbutton span
 527 {
 528   float: left;
 529   height: 32px;
 530 }
 531
 532 .dropbutton:hover
 533 {
 534 /*  background: url(images/dbutton.png) 0 0 no-repeat transparent; */
 535 }
 536
 537 .dropbutton span
 538 {
 539   width: 9px;
 540   background: url(images/dbutton.png) -53px 0 no-repeat transparent;
 541 }
 542
 543 .dropbutton span:hover
 544 {
 545   cursor: pointer;
 546   background-position: -74px 0;
 547 }
 548
 549
 550 /***** common table settings ******/
 551
 552 table.records-table thead tr td
 553 {
 554   height: 20px;
 555   padding: 0px 4px 0px 4px;
 556   vertical-align: middle;
 557   border-bottom: 1px solid #999999;
 558   color: #333333;
 559   background: url(images/listheader.gif) top left repeat-x #CCC;
 560   font-size: 11px;
 561   font-weight: bold;
 562 }
 563
 564 table.records-table tbody tr td
 565 {
 566   height: 16px;
 567   padding: 2px 4px 2px 4px;
 568   font-size: 11px;
 569   white-space: nowrap;
 570   border-bottom: 1px solid #EBEBEB;
 571   overflow: hidden;
 572   text-align: left;
 573 }
 574
 575 table.records-table tr
 576 {
 577   background-color: #FFFFFF;
 578 }
 579
 580 table.records-table tr.selected td
 581 {
 582   color: #FFFFFF;
 583   background-color: #CC3333;
 584 }
 585
 586 table.records-table tr.focused td
 587 {
 588 }
 589
 590 table.records-table tr.unfocused td
 591 {
 592   color: #FFFFFF;
 593   background-color: #929292;
 594 }
 595
 596
 597 /***** mac-style quicksearch field *****/
 598
 599 #quicksearchbar
 600 {
 601   position: absolute;
 602   top: 55px;
 603   right: 30px;
 604   width: 190px;
 605   height: 20px;
 606   text-align: right;
 607   background: url(images/searchfield.gif) top left no-repeat;
 608 }
 609
 610 #searchreset
 611 {
 612   position: absolute;
 613   top: 3px;
 614   right: 12px;
 615   text-decoration: none;
 616 }
 617
 618 #searchmenulink
 619 {
 620  position: absolute;
 621  top: 3px;
 622  right: 168px;
 623 }
 624
 625 #quicksearchbar img
 626 {
 627   vertical-align: middle;
 628 }
 629
 630 #quicksearchbox
 631 {
 632   position: absolute;
 633   top: 2px;
 634   left: 24px;
 635   width: 140px;
 636   height: 15px;
 637   font-size: 11px;
 638   padding: 0px;
 639   border: none;
 640 }
 641
 642 /***** roundcube webmail pre-defined classes *****/
 643
 644 #rcmversion
 645 {
 646   position: absolute;
 647   bottom: 10px;
 648   right: 20px;
 649   text-align: right;
 650   white-space: nowrap;
 651   font-size: 8pt;
 652   color: #999;
 653 }
 654
 655 #rcmdraglayer
 656 {
 657   min-width: 300px;
 658   width: auto !important;
 659   width: 300px;
 660   border: 1px solid #999999;
 661   background-color: #fff;
 662   padding-left: 8px;
 663   padding-right: 8px;
 664   padding-top: 3px;
 665   padding-bottom: 3px;
 666   font-size: 11px;
 667   white-space: nowrap;
 668   opacity: 0.82;
 669   border-radius: 3px;
 670   -moz-border-radius: 3px;
 671   -webkit-border-radius: 3px;
 672   -moz-box-shadow: 1px 1px 12px #999;
 673   -webkit-box-shadow: #999 1px 1px 12px;
 674 }
 675
 676 .draglayercopy:before
 677 {
 678   position: absolute;
 679   bottom: -5px;
 680   left: -6px;
 681   content: " ";
 682   width: 14px;
 683   height: 14px;
 684   background: url(images/messageactions.png) -2px -128px no-repeat;
 685 }
 686
 687 a.rcmContactAddress
 688 {
 689   text-decoration: none;
 690 }
 691
 692 a.rcmContactAddress:hover
 693 {
 694   text-decoration: underline;
 695 }
 696
 697 #rcmKSearchpane
 698 {
 699   background-color: #F9F9F9;
 700   border: 1px solid #CCCCCC;
 701 }
 702
 703 #rcmKSearchpane ul
 704 {
 705   margin: 0px;
 706   padding: 2px;
 707   list-style-image: none;
 708   list-style-type: none;
 709 }
 710
 711 #rcmKSearchpane ul li
 712 {
 713   display: block;
 714   height: 16px;
 715   font-size: 11px;
 716   padding-left: 6px;
 717   padding-top: 2px;
 718   padding-right: 6px;
 719   white-space: nowrap;
 720   cursor: pointer;
 721 }
 722
 723 #rcmKSearchpane ul li.selected
 724 {
 725   color: #ffffff;
 726   background-color: #CC3333;
 727 }
 728
 729 #login-form
 730 {
 731   margin-left: auto;
 732   margin-right: auto;
 733   margin-top: 50px;
 734   width: 400px;
 735   border: 1px solid #999;
 736 }
 737
 738 #login-form table td.title
 739 {
 740   text-align: right;
 741   white-space: nowrap;
 742 }
 743
 744 #login-form table
 745 {
 746   width: 1%;
 747   margin: auto;
 748 }
 749
 750 #login-form table td.input input
 751 {
 752   width: 200px;
 753 }
 754
 755 #console
 756 {
 757   opacity: 0.8;
 758 }
 759
 760 .disabled
 761 {
 762   color: #999;
 763 }
 764
 765 font.bold
 766 {
 767   font-weight: bold;
 768 }
 769
 770
 771 /***** onclick menu list *****/
 772
 773 ul.toolbarmenu
 774 {
 775   margin: -4px 0 -4px 0;
 776   padding: 0;
 777   list-style: none;
 778 }
 779
 780 ul.toolbarmenu li
 781 {
 782   font-size: 11px;
 783   white-space: nowrap;
 784   min-width: 130px;
 785   margin: 2px -4px;
 786 }
 787
 788 ul.toolbarmenu li a
 789 {
 790   display: block;
 791   color: #a0a0a0;
 792   padding: 1px 12px 3px 28px;
 793   text-decoration: none;
 794   min-height: 14px;
 795 }
 796
 797 ul.toolbarmenu li a.active,
 798 ul.toolbarmenu li a.active:active,
 799 ul.toolbarmenu li a.active:visited
 800 {
 801   color: #333;
 802 }
 803
 804 ul.toolbarmenu li input
 805 {
 806   vertical-align: middle;
 807 }
 808
 809 ul.toolbarmenu li hr
 810 {
 811   color: #ccc;
 812   width: 130px;
 813   height: 1px;
 814   margin: 2px 1px 2px 1px;
 815 }
 816
 817 ul.toolbarmenu li img
 818 {
 819   float: left;
 820   margin: 0 2px;
 821 }
 822
 823 div.popupmenu ul li.separator_below,
 824 ul.toolbarmenu li.separator_below
 825 {
 826   border-bottom: 1px solid #ccc;
 827   margin-bottom: 2px;
 828   padding-bottom: 2px;
 829 }
 830
 831 div.popupmenu ul li.separator_above,
 832 ul.toolbarmenu li.separator_above
 833 {
 834   border-top: 1px solid #ccc;
 835   margin-top: 2px;
 836   padding-top: 2px;
 837 }
 838
 839 #searchmenu
 840 {
 841   width: 160px;
 842 }
 843
 844 #searchmenu ul.toolbarmenu
 845 {
 846   margin: 0;
 847 }
 848
 849 #searchmenu ul.toolbarmenu li
 850 {
 851   margin: 1px 4px 1px;
 852 }
 853
 854
 855 /***** tabbed interface elements *****/
 856
 857 div.tabsbar,
 858 #tabsbar
 859 {
 860   position: absolute;
 861   top: 50px;
 862   left: 220px;
 863   right: 20px;
 864   height: 22px;
 865   border-bottom: 1px solid #999999;
 866   white-space: nowrap;
 867 }
 868
 869 div.tabsbar
 870 {
 871   top: 35px;
 872   left: 12px;
 873   right: 12px;
 874 }
 875
 876 span.tablink,
 877 span.tablink-selected
 878 {
 879   float: left;
 880   height: 23px !important;
 881   height: 22px;
 882   overflow: hidden;
 883   background: url(images/tabs-left.gif) top left no-repeat;
 884 }
 885
 886 span.tablink
 887 {
 888   cursor: pointer;
 889 }
 890
 891 span.tablink-selected
 892 {
 893   cursor: default;
 894   background-position: 0px -23px;
 895 }
 896
 897 span.tablink a,
 898 span.tablink-selected a
 899 {
 900   display: inline-block;
 901   padding: 5px 10px 0 5px;
 902   margin-left: 5px;
 903   height: 23px;
 904   color: #555555;
 905   max-width: 185px;
 906   text-decoration: none;
 907   overflow: hidden;
 908   text-overflow: ellipsis;
 909   -o-text-overflow: ellipsis;
 910   background: url(images/tabs-right.gif) top right no-repeat;
 911 }
 912
 913 span.tablink-selected a
 914 {
 915   cursor: inherit;
 916   color: #000000;
 917   background-position: right -23px;
 918 }
 919
 920 fieldset
 921 {
 922   margin-bottom: 1em;
 923   border: 1px solid #999999;
 924   padding: 4px 8px 9px 8px;
 925 }
 926
 927 legend
 928 {
 929   color: #999999;
 930 }
 931
 932 fieldset.tabbed
 933 {
 934   margin-top: 22px;
 935   padding-top: 12px;
 936 }
 937
 938 .quota_text {
 939   text-align: center;
 940   font-size: 10px;
 941   color: #666;
 942   border: 1px solid #999;
 943   cursor: default;
 944 }
 945 .quota_bg { background-color: white; }
 946 .quota_high { background: url(images/quota-colors.png) repeat-x 0 -28px #f90509; }
 947 .quota_mid { background: url(images/quota-colors.png) repeat-x 0 -14px #e3e909; }
 948 .quota_low { background: url(images/quota-colors.png) repeat-x 0 0px #05f905; }
 949 .quota_text_high { color: white; }
 950 .quota_text_mid { color: #666; }
 951 .quota_text_low { color: #666; }