css/standard.css

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