css/standard.less

   1 /* Copyright 2006, 2007, 2008, 2009, 2010, 2011, 2012 Arun Persaud <arun@nubati.net>
   2  *
   3  *   This file is part of e-DoKo.
   4  *
   5  *   e-DoKo is free software: you can redistribute it and/or modify
   6  *   it under the terms of the GNU General Public License as published by
   7  *   the Free Software Foundation, either version 3 of the License, or
   8  *   (at your option) any later version.
   9  *
  10  *   e-DoKo is distributed in the hope that it will be useful,
  11  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  12  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13  *   GNU General Public License for more details.
  14  *
  15  *   You should have received a copy of the GNU General Public License
  16  *   along with e-DoKo.  If not, see <http://www.gnu.org/licenses/>.
  17  *
  18  */
  19
  20 body { background-color: #ddd; padding-top:40px}
  21
  22 /* the header, footer, etc */
  23 header {
  24   background-color: #fff;
  25   text-align:       center;
  26   padding-top: 1.5em;
  27   margin: 0em 3em;
  28   border-bottom:    3px solid gray;
  29 }
  30
  31 .lastlogin {
  32   position:absolute;
  33   top:0;
  34   left:3em;
  35 }
  36 .lastlogin span { font-size:smaller;}
  37
  38 .main {
  39   background-color: #fff;
  40   padding: 1px 0em;
  41   margin:  0em 3em;
  42   padding-bottom: 1em;
  43 }
  44
  45 footer {
  46   background-color: #fff;
  47   margin: 0em 3em;
  48   padding:0em 0.2em;
  49   border-top: 2px solid gray;
  50 }
  51 footer .right { text-align:right;   font-size:smaller;}
  52 footer .left  { float:left;         font-size:smaller;}
  53
  54 .WIP {
  55   background-color: #efaaaa;
  56   text-size: larger;
  57   text-align: center;
  58   margin: 30px 10% ;
  59   border-radius: 5px;
  60   border: 2px solid red;
  61   padding: 10px;
  62 }
  63
  64 /* sessions */
  65 .session {
  66   border-bottom: 1px solid #000;
  67   padding: 0.5em;
  68   text-align: center;
  69 }
  70 .session div.sessionrules {
  71   width: 19em;
  72   float: left;
  73   text-align: left;
  74 }
  75 .session div.sessionrules div{
  76   display:none;
  77   background-color: #fff;
  78   border: 1px solid #000;
  79   position:absolute;
  80   z-index: 30;
  81   padding:0.5em;
  82 }
  83 .session div.sessionrules:hover div{ display:block; }
  84 .session div.sessionscore {
  85   width: 19em;
  86   float: right;
  87   text-align: right;
  88 }
  89 .session div.sessionscore div{
  90   position:absolute;
  91   width:12em;
  92   right:3em;
  93   display:none;
  94   background-color: #fff;
  95   border: 1px solid #000;
  96   z-index: 30;
  97 }
  98 .session div.sessionscore:hover div{ display:block;}
  99 .session img.rulesicon{ height: 1em; }
 100
 101 .session .scoretable{
 102   height:20em;
 103   overflow: auto;
 104 }
 105 .session table.score {
 106   margin:0.5em;
 107   width:10em;
 108   border-collapse:collapse;
 109 }
 110
 111 /* all kind of message that should appear in the middle of the page/table */
 112 .message {
 113  position: absolute;
 114  background-color: #fff;
 115  width: 20%;
 116  top:19em;
 117  left:40%;
 118  right:40%;
 119  text-align: center;
 120  z-index:33;
 121 }
 122 .message >div { border: 2px solid black; }
 123 .message div div {
 124     width: 100%;
 125     text-align: right;
 126     font-size: smaller;
 127 }
 128
 129 .joingame,.sickness,.poverty,.total {
 130  position: absolute;
 131  background-color: #fff;
 132  border-radius: 5px;
 133  width: 20%;
 134  top: 30%;
 135  left: 40%;
 136  margin: auto;
 137  text-align: center;
 138  z-index:42;
 139 }
 140 .total {
 141     width: 14%;
 142     left: 43%;
 143 }
 144 /* scoring */
 145 .total .re {
 146  position: absolute;
 147  left: -12em;
 148  top:8em;
 149  background-color: #eee;
 150  padding: 0.3em;
 151  z-index:15;
 152 }
 153 .total .contra {
 154  position: absolute;
 155  right: -14em;
 156  top:8em;
 157  background-color: #eee;
 158  padding: 0.3em;
 159  z-index:15;
 160 }
 161
 162 /* playing cards*/
 163 .card {
 164   position:absolute;
 165   z-index:20;
 166   top:18em;
 167   left:28em;
 168   text-align:center;
 169   background-color:#fff;
 170   border:2px solid gray;
 171 }
 172 .card img { width:8em; }
 173
 174 form {  position: relative;}
 175
 176 /* display the table and the names */
 177 div.table {
 178   position:relative;
 179   text-align:center;
 180   margin: 0;
 181   padding:0;
 182   border-bottom:1px solid #444;
 183 }
 184
 185 div.table div.table1 {
 186   width:10.5%;
 187   min-width: 10em;
 188   text-align:center;
 189   z-index:20;
 190   margin: 0 auto;
 191 }
 192
 193 div.middle {
 194     position:relative;
 195     min-height: 6em;
 196 }
 197 div.table div.table0 {
 198   position:absolute;
 199   width:10.5%;
 200   min-width: 10em;
 201   min-height: 4em;
 202   top:20%;
 203   right: 64.5%;
 204   text-align:center;
 205   z-index:20;
 206 }
 207 div.table div.table0 .start {
 208   background-color: #efaaaa;
 209   border-radius: 5px;
 210   padding: 3px;
 211   padding-bottom: 1px;
 212   margin: 3px;
 213 }
 214
 215 div.table img.table {
 216   width:25%;
 217   z-index:5;
 218   margin:  0 auto;
 219   min-margin-left: 10xem;
 220   min-margin-right: 10em;
 221   min-height: 6em;
 222   display: block;
 223   vertical-align:middle;
 224 }
 225 div.table div.table2 {
 226   position:absolute;
 227   width:10.5%;
 228   min-width: 10em;
 229   min-height: 4em;
 230   top:20%;
 231   left:64.5%;
 232   text-align:center;
 233   z-index:20;
 234 }
 235 div.table div.table3 {
 236   width:10.5%;
 237   min-width: 10em;
 238   text-align:center;
 239   z-index:20;
 240   margin: 0 auto;
 241 }
 242
 243 img.gravatar  {
 244     width:  4em;
 245     height: 4em;
 246     border: 3px solid #aaa;
 247 }
 248
 249 div img.button {
 250     width: 2em;
 251 }
 252
 253 div span.numberoftricks {
 254     text-align:center;
 255 }
 256
 257 /* display the card tricks */
 258
 259 div.tricks {
 260   position: absolute;
 261   top: 0;
 262   left: 0;
 263   right:0;
 264   bottom: 0;
 265   text-align:center;
 266   margin: 0;
 267   padding:0 0;
 268 }
 269
 270 div.tricks div.trick {
 271   position: absolute;
 272   top: 0%;
 273   left: 0;
 274   right:0;
 275   bottom: 0%;
 276   display:none;
 277 }
 278 .tricks div.trick img.arrow {
 279   position:relative;
 280   display:inline;
 281   text-align:center;
 282   height: 60%;
 283   top: 20%;
 284   z-index:8;
 285 }
 286
 287 #trick0 img { float:left; width: 3em; }
 288
 289 hr {clear:both;}
 290
 291 /* left player */
 292 .tricks div div.card0 img,
 293 .tricks div div.card0 .score,
 294 .vorbehalt0 {
 295   position:absolute;
 296   margin:0;
 297   padding:0;
 298  /*border: 1px solid red;*/
 299   top: 30%;
 300   left:37.5%;
 301   right:56.5%;
 302   height:40%;
 303   z-index:30;
 304 }
 305
 306 .vorbehalt0 {
 307   left:33.5%;
 308   right:59.5%;
 309   width:10%;
 310   text-align:left;
 311 }
 312
 313 .tricks div div.card0 span.comment{
 314   position:absolute;
 315   margin:0;
 316   padding:0;
 317   /*border: 1px solid red;*/
 318   top: 5%;
 319   right:66.5%;
 320   left:17.5%;
 321   width:16%;
 322 }
 323
 324 /* top player */
 325 .tricks div div.card1 img,
 326 .tricks div div.card1 .score,
 327 .vorbehalt1 {
 328   position:absolute;
 329   margin:0;
 330   padding:0;
 331   /*border: 1px solid red;*/
 332   top: 0%;
 333   left:47%;
 334   right:47%;
 335   height:40%;
 336   text-align:center;
 337   z-index:30;
 338 }
 339 .vorbehalt1{
 340   left:45%;
 341   right:45%;
 342   width:10%;
 343   z-index:30;
 344 }
 345
 346 .tricks div div.card1 span.comment{
 347   position:absolute;
 348   margin:0;
 349   padding:0;
 350   /*border: 1px solid red;*/
 351   top: 5%;
 352   left:66.5%;
 353   right:17.5%;
 354   width:16%;
 355   text-align:center;
 356 }
 357
 358 /* right player */
 359 .tricks div div.card2 img,
 360 .tricks div div.card2 .score,
 361 .vorbehalt2{
 362   position:absolute;
 363   margin:0;
 364   padding:0;
 365   /*border: 1px solid red;*/
 366   top: 30%;
 367   right:37.5%;
 368   left:56.5%;
 369   height:40%;
 370   z-index:30;
 371 }
 372 .vorbehalt2{
 373   left:56%;
 374   right:34%;
 375   width:10%;
 376   text-align:right;
 377 }
 378
 379 .tricks div div.card2 span.comment{
 380   position:absolute;
 381   margin:0;
 382   padding:0;
 383   /*border: 1px solid red;*/
 384   top: 85%;
 385   left:66.5%;
 386   right:17.5%;
 387   width:16%;
 388   text-align:center;
 389 }
 390
 391 /* bottom player */
 392 .tricks div div.card3 img,
 393 .tricks div div.card3 .score,
 394 .vorbehalt3{
 395   position:absolute;
 396   margin:0;
 397   padding:0;
 398   /*border: 1px solid red;*/
 399   bottom: 0%;
 400   left:47%;
 401   right:47%;
 402   height: 40%;
 403   z-index:30;
 404 }
 405 .tricks div div.card3 .score, .vorbehalt3{
 406   left:45%;
 407   right:45%;
 408   width:10%;
 409   height: 3em;
 410   text-align:center;
 411 }
 412 .tricks div div.card3 span.comment{
 413   position:absolute;
 414   margin:0;
 415   padding:0;
 416   /*border: 1px solid red;*/
 417   top: 85%;
 418   right:66.5%;
 419   left:17.5%;
 420   width:16%;
 421 }
 422
 423 span.comment{
 424  border: 3px solid green;
 425  max-height:6em;
 426  overflow: auto;
 427  word-wrap: break-word;
 428 }
 429
 430 .tricks div div span.comment span{
 431   display:block;
 432   text-align:left;
 433   border-top:1px solid green;
 434 }
 435
 436 .mycards {
 437   margin:0;
 438   padding:0;
 439   border-top:       2px solid gray;
 440 /* border-bottom:    2px solid green;*/
 441   background-color: #faffc7;
 442   text-align:center;
 443 }
 444
 445 .mycards img { height:6em;}
 446
 447 .exchange {
 448   clear:both;
 449   margin:0;
 450   padding:0;
 451   border:1px solid red;
 452   background-color:yellow;
 453 }
 454
 455 .exchange img { height:6em;}
 456
 457 .line{
 458   clear:both;
 459   border-top:2px solid gray;
 460   margin:0;
 461   padding:0;
 462 }
 463
 464 .gameinfo {
 465   position:relative;
 466   top:0em;
 467   margin:0em;
 468   padding:0em;
 469   width:100%;
 470   border-top:    2px solid gray;
 471   background-color: #efaaaa;
 472   text-align:center;
 473 }
 474
 475 .usermenu {
 476   text-align: center;
 477   padding:0.7em;
 478   border-bottom: 1px solid black;
 479 }
 480
 481 .notes {
 482   position:absolute;
 483   top:3em;
 484   left:0;
 485   margin:1em;
 486   margin-top:0em;
 487   margin-left:2em;
 488
 489   width: 12em;
 490
 491   border:  2px solid gray;
 492
 493   padding:0.3em;
 494
 495   background-color: #efefef;
 496
 497   height:10em;
 498   overflow: auto;
 499   z-index:50;
 500 }
 501
 502 .user {
 503     margin-left:25%;
 504     margin-right:5%;
 505 }
 506
 507 div.user ul {
 508   list-style:none;
 509   padding: 0px;
 510 }
 511
 512 div.user ul li {
 513   position: relative;
 514   padding:3px;
 515   margin: 0px;
 516   width: 80%;
 517   min-height: 1.2em;
 518   border-left: 2px solid #babdb6 ;
 519   border-right: 2px solid #babdb6 ;
 520   border-bottom: 2px solid #babdb6 ;
 521 }
 522
 523 div.user ul li:first-child {
 524   border-top: 2px solid #babdb6 ;
 525 }
 526 .gamessession {
 527     display:none;
 528 }
 529
 530 .user .gameid {
 531     float: left;
 532     width: 5em;
 533 }
 534 .user .turn {
 535     padding-left: 1em;
 536     width: 20em;
 537 }
 538
 539 .user .gameshidesession {
 540   display: none;
 541 }
 542
 543 .user .gameshidesession , .user .gamesshowsession {
 544     float:right;
 545     width: 10em;
 546 }
 547
 548 .wide { margin-left:5%;margin-right:5%; }
 549
 550 .over {
 551   text-align:center;
 552   margin-bottom:0.1em;
 553 }
 554
 555 .cardinput {
 556   display:inline;
 557   position:relative;
 558   border: 1px solid #000;
 559 }
 560 .cardinput img { width: 4em;}
 561 .cardinput:hover{ background-color:red;}
 562
 563 .gamestatuspre {
 564   padding: 0 0.3em;
 565   background-color: #f57900;
 566 }
 567 .gamestatusover {
 568   padding:0 0.3em;
 569   background-color: #e9b96e ;
 570   color: #fff;
 571 }
 572 .gamestatusplay {
 573   padding:0 0.3em;
 574   background-color: #8ae234;
 575 }
 576
 577 .bigger{ font-size:larger;}
 578
 579
 580 /* statistics using jquery*/
 581 caption {
 582   text-align: center;
 583   margin: 0.5em;
 584   padding: 0.5em;
 585   padding-bottom: 0em;
 586   margin-bottom: 0;
 587  }
 588
 589 table.stats {
 590   margin: 0.5em 1em;
 591   border: solid 0.2em #aeaeae;
 592   -moz-border-radius: 0.5em ;
 593   float: left;
 594 }
 595 table.stats tbody tr.odd td  { background-color:#aeaeae; }
 596 table.stats tbody tr.even td { background-color:#eaeaea; }
 597 table.stats td, table.stats th {
 598   margin-left:  0.2em;
 599   margin-right: 0.2em;
 600   padding-left:  0.2em;
 601   padding-right: 0.2em;
 602   border-right: solid 0.1em #000;
 603 }
 604 table.stats tr td:last-child, table.stats  tr th:last-child { border-right: solid 0 #000; }
 605 table.stats th { border-bottom: solid 0.2em #000 }
 606
 607 table.stats thead tr .header {
 608     background-image: url(bg.png);
 609     background-repeat: no-repeat;
 610     background-position: center right;
 611     padding-right: 15px;
 612     cursor: pointer;
 613 }
 614 table.stats tbody td {
 615     padding: 4px;
 616     background-color: #eaeaea;
 617     vertical-align: top;
 618 }
 619 table.stats thead tr .headerSortUp {
 620     background-image: url(asc.png);
 621 }
 622 table.stats thead tr .headerSortDown {
 623     background-image: url(desc.png);
 624 }
 625 table.stats thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
 626     background-color: #8dbdd8;
 627 }
 628
 629
 630
 631 /* the login window */
 632 .login {
 633   text-align:center;
 634   padding-top: 1em;
 635 }
 636
 637 .login p {
 638   padding: 0.1em 0.1em 0.15em;
 639 }
 640 .login h4 {
 641   padding: 0.3em 0.3em 0.45em;
 642 }
 643
 644 /* the login/register form */
 645 ul.loginregister {
 646   width: 24em;
 647   margin: 0.25em auto;
 648   margin-top: 1.0em;
 649   padding: 0.0em;
 650   padding-top:0.5em;
 651   text-align: right;
 652   z-index: 1;
 653  }
 654
 655 ul.loginregister li {
 656   display:inline;
 657   border: 0px;
 658   border-top: 2px solid #000;
 659   border-left: 2px solid #000;
 660   padding: 0.5em 0.75em;
 661   padding-bottom: 0.25em;
 662   background-color: #eee;
 663 }
 664
 665 ul.loginregister li:last-child { border-right: 2px solid #000;}
 666 ul.loginregister li:hover {background-color: #aaa; }
 667
 668 .doregister {display: none;}
 669 .dologin label,.doregister label {float:left; width: 6em; }
 670
 671
 672 .login fieldset{
 673   width: 24em;
 674   margin: 0.0em auto;
 675   margin-bottom: 0.5em;
 676   padding: 0.5em 0.5em  1.5em;
 677   text-align: center;
 678 }
 679
 680 fieldset {
 681   border: 2px solid #000;
 682   padding: 0.5em 0.5em 0.75em;
 683   background-color: #eee;
 684 }
 685
 686 fieldset p {
 687   font-size:smaller;
 688 }
 689
 690 .login label, .login input{ margin: 0.5em 0.5em 0.75em;}
 691
 692 .login label{
 693   float:left;
 694   width:7em;
 695   text-align: left;
 696 }
 697
 698 .login input #email, .login input #password{
 699   width:9em;
 700   float:right;
 701 }
 702
 703 .login .submitbutton { background-color: #fff;}
 704 .login .submitbutton:hover { background-color: #aaa;}
 705
 706 #openid_url {
 707   background: #FFFFFF url('openid-icon-small.gif') no-repeat scroll 0pt 50%;
 708   padding-left: 18px;
 709 }
 710
 711 table.openid td, table.openid th{
 712     padding: 0.0em 0.3em;
 713 }
 714
 715 .newbiehint {
 716     background-color: #fee;
 717 }
 718
 719 .vacation {
 720     color: #666;
 721     background-color: #fc3;
 722 }
 723
 724 .highcall {
 725     background-color: #fc3;
 726 }
 727
 728 .about {
 729     margin-left: 20%;
 730     margin-right: 20%;
 731     padding-top: 10%;
 732 }
 733
 734 .about ul {
 735     margin-left: 2em;
 736 }
 737
 738 .about div {
 739     width:12em;
 740     height: 6em;
 741     margin: 2em;
 742     padding: 1em;
 743     float:left;
 744     border: 1px solid black;
 745 }
 746
 747 .about .code {
 748     background-color: #729fcf;
 749 }
 750 .about .database {
 751     background-color: #8ae234;
 752 }
 753 .about .graphics {
 754     background-color: #e9b96e;
 755 }
 756 .about .translation {
 757     background-color: #fce94f;
 758 }
 759
 760
 761 /* special layout for mobile devices */
 762 @media only screen and (max-width: 900px) {
 763 .main {
 764   background-color: #fff;
 765   margin-left: 0em;
 766   margin-right: 0em;
 767 }
 768
 769 header, footer {
 770   margin-left: 0em;
 771   margin-right: 0em;
 772 }
 773
 774 .lastlogin {
 775   position: relative;
 776   left: 0em;
 777   top:  0em;
 778   width: 100%;
 779   text-align: center;
 780   border-top: 1px solid gray;
 781 }
 782
 783 .session div.sessionscore div {
 784   right:0em;
 785 }
 786
 787 .notes {
 788   position:relative;
 789   top:0em;
 790   left:0;
 791   margin:0.1em;
 792   margin-top:0em;
 793   margin-left:0em;
 794
 795   width: 100%;
 796
 797   border:    2px solid gray;
 798
 799   padding:0.3em;
 800
 801   background-color: #efefef;
 802
 803   height:100%;
 804   overflow: auto;
 805   z-index:0;
 806 }
 807
 808 .user { margin-left:5%;margin-right:5%; }
 809
 810 .message {
 811  position: relative;
 812  background-color: #fff;
 813  width: 100%;
 814  top:0em;
 815  left:0%;
 816  right:0%;
 817  text-align: center;
 818  z-index:1;
 819 }
 820 .message >div { border: 2px solid black; }
 821 .message div div {
 822     width: 100%;
 823     text-align: right;
 824     font-size: smaller;
 825 }
 826 }
 827 .pagination {
 828   text-align:center;
 829 }