skins/default/common.css

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