css/standard.css

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