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   width: 8%;
 303   z-index: 30;
 304 }
 305 .vorbehalt0 {
 306   left: 33.5%;
 307   right: 59.5%;
 308   width: 10%;
 309   text-align: left;
 310 }
 311 .tricks div div.card0 span.comment {
 312   position: absolute;
 313   margin: 0;
 314   padding: 0;
 315   /*border: 1px solid red;*/
 316
 317   top: 5%;
 318   right: 66.5%;
 319   left: 17.5%;
 320   width: 16%;
 321 }
 322 /* top player */
 323 .tricks div div.card1 img,
 324 .tricks div div.card1 .score,
 325 .vorbehalt1 {
 326   position: absolute;
 327   margin: 0;
 328   padding: 0;
 329   /*border: 1px solid red;*/
 330
 331   top: 0%;
 332   left: 46%;
 333   width: 8%;
 334   text-align: center;
 335   z-index: 30;
 336 }
 337 .vorbehalt1 {
 338   left: 45%;
 339   right: 45%;
 340   width: 10%;
 341   z-index: 30;
 342 }
 343 .tricks div div.card1 span.comment {
 344   position: absolute;
 345   margin: 0;
 346   padding: 0;
 347   /*border: 1px solid red;*/
 348
 349   top: 5%;
 350   left: 66.5%;
 351   right: 17.5%;
 352   width: 16%;
 353   text-align: center;
 354 }
 355 /* right player */
 356 .tricks div div.card2 img,
 357 .tricks div div.card2 .score,
 358 .vorbehalt2 {
 359   position: absolute;
 360   margin: 0;
 361   padding: 0;
 362   /*border: 1px solid red;*/
 363
 364   top: 30%;
 365   right: 37.5%;
 366   width: 8%;
 367   z-index: 30;
 368 }
 369 .vorbehalt2 {
 370   left: 56%;
 371   right: 34%;
 372   width: 10%;
 373   text-align: right;
 374 }
 375 .tricks div div.card2 span.comment {
 376   position: absolute;
 377   margin: 0;
 378   padding: 0;
 379   /*border: 1px solid red;*/
 380
 381   top: 85%;
 382   left: 66.5%;
 383   right: 17.5%;
 384   width: 16%;
 385   text-align: center;
 386 }
 387 /* bottom player */
 388 .tricks div div.card3 img,
 389 .tricks div div.card3 .score,
 390 .vorbehalt3 {
 391   position: absolute;
 392   margin: 0;
 393   padding: 0;
 394   /*border: 1px solid red;*/
 395
 396   bottom: 0%;
 397   left: 46%;
 398   width: 8%;
 399   z-index: 30;
 400 }
 401 .tricks div div.card3 .score,
 402 .vorbehalt3 {
 403   left: 45%;
 404   right: 45%;
 405   width: 10%;
 406   height: 3em;
 407   text-align: center;
 408 }
 409 .tricks div div.card3 span.comment {
 410   position: absolute;
 411   margin: 0;
 412   padding: 0;
 413   /*border: 1px solid red;*/
 414
 415   top: 85%;
 416   right: 66.5%;
 417   left: 17.5%;
 418   width: 16%;
 419 }
 420 span.comment {
 421   border: 3px solid green;
 422   max-height: 6em;
 423   overflow: auto;
 424   word-wrap: break-word;
 425 }
 426 .tricks div div span.comment span {
 427   display: block;
 428   text-align: left;
 429   border-top: 1px solid green;
 430 }
 431 .mycards {
 432   margin: 0;
 433   padding: 0;
 434   border-top: 2px solid gray;
 435   /* border-bottom:    2px solid green;*/
 436
 437   background-color: #faffc7;
 438   text-align: center;
 439 }
 440 .mycards img {
 441   height: 6em;
 442 }
 443 .exchange {
 444   clear: both;
 445   margin: 0;
 446   padding: 0;
 447   border: 1px solid red;
 448   background-color: yellow;
 449 }
 450 .exchange img {
 451   height: 6em;
 452 }
 453 .line {
 454   clear: both;
 455   border-top: 2px solid gray;
 456   margin: 0;
 457   padding: 0;
 458 }
 459 .gameinfo {
 460   position: relative;
 461   top: 0em;
 462   margin: 0em;
 463   padding: 0em;
 464   width: 100%;
 465   border-top: 2px solid gray;
 466   background-color: #efaaaa;
 467   text-align: center;
 468 }
 469 .user {
 470     margin-left: 5%;
 471     margin-right: 5%;
 472 }
 473 .usermenu {
 474   text-align: center;
 475   padding: 0.7em;
 476   border-bottom: 1px solid black;
 477 }
 478 .notes {
 479   position: absolute;
 480   top: 3em;
 481   left: 0;
 482   margin: 1em;
 483   margin-top: 0em;
 484   margin-left: 2em;
 485   width: 12em;
 486   border: 2px solid gray;
 487   padding: 0.3em;
 488   background-color: #efefef;
 489   height: 10em;
 490   overflow: auto;
 491   z-index: 50;
 492 }
 493 .gamessession {
 494   display: none;
 495 }
 496 .user .gameid {
 497   float: left;
 498   width: 5em;
 499 }
 500 .user .turn {
 501   padding-left: 1em;
 502   width: 20em;
 503 }
 504 .user .gameshidesession {
 505   display: none;
 506 }
 507 .user .gameshidesession,
 508 .user .gamesshowsession {
 509   width: 10em;
 510 }
 511 .wide {
 512   margin-left: 5%;
 513   margin-right: 5%;
 514 }
 515 .over {
 516   text-align: center;
 517   margin-bottom: 0.1em;
 518 }
 519 .cardinput {
 520   display: inline;
 521   position: relative;
 522   border: 1px solid #000;
 523 }
 524 .cardinput img {
 525   width: 4em;
 526 }
 527 .cardinput:hover {
 528   background-color: red;
 529 }
 530 /* statistics using jquery*/
 531 caption {
 532   text-align: center;
 533   margin: 0.5em;
 534   padding: 0.5em;
 535   padding-bottom: 0em;
 536   margin-bottom: 0;
 537 }
 538 table.stats {
 539   margin: 0.5em 1em;
 540   border: solid 0.2em #aeaeae;
 541   -moz-border-radius: 0.5em ;
 542   float: left;
 543 }
 544 table.stats tbody tr.odd td {
 545   background-color: #aeaeae;
 546 }
 547 table.stats tbody tr.even td {
 548   background-color: #eaeaea;
 549 }
 550 table.stats td,
 551 table.stats th {
 552   margin-left: 0.2em;
 553   margin-right: 0.2em;
 554   padding-left: 0.2em;
 555   padding-right: 0.2em;
 556   border-right: solid 0.1em #000;
 557 }
 558 table.stats tr td:last-child,
 559 table.stats tr th:last-child {
 560   border-right: solid 0 #000;
 561 }
 562 table.stats th {
 563   border-bottom: solid 0.2em #000000;
 564 }
 565 table.stats thead tr .header {
 566   background-image: url(bg.png);
 567   background-repeat: no-repeat;
 568   background-position: center right;
 569   padding-right: 15px;
 570   cursor: pointer;
 571 }
 572 table.stats tbody td {
 573   padding: 4px;
 574   background-color: #eaeaea;
 575   vertical-align: top;
 576 }
 577 table.stats thead tr .headerSortUp {
 578   background-image: url(asc.png);
 579 }
 580 table.stats thead tr .headerSortDown {
 581   background-image: url(desc.png);
 582 }
 583 table.stats thead tr .headerSortDown,
 584 table.tablesorter thead tr .headerSortUp {
 585   background-color: #8dbdd8;
 586 }
 587 /* the login window */
 588 /* the login/register form */
 589 #openid_url {
 590   background: #ffffff url('openid-icon-small.gif') no-repeat scroll 0pt 50%;
 591   padding-left: 18px;
 592 }
 593 table.openid td,
 594 table.openid th {
 595   padding: 0.0em 0.3em;
 596 }
 597 .newbiehint {
 598   background-color: #fee;
 599 }
 600 .vacation {
 601   color: #666;
 602   background-color: #fc3;
 603 }
 604 .highcall {
 605   background-color: #fc3;
 606 }
 607 .about ul {
 608   margin-left: 2em;
 609 }
 610 .about div {
 611   margin-top: 3em;
 612   border: 1px solid black;
 613 }
 614 .about .code {
 615   background-color: #729fcf;
 616 }
 617 .about .database {
 618   background-color: #8ae234;
 619 }
 620 .about .graphics {
 621   background-color: #e9b96e;
 622 }
 623 .about .translation {
 624   background-color: #fce94f;
 625 }
 626 /* special layout for mobile devices */
 627 @media only screen and (max-width: 600px) {
 628   .session div.sessionscore div {
 629     right: 0em;
 630   }
 631   .notes {
 632     position: relative;
 633     top: 0em;
 634     left: 0;
 635     margin: 0.1em;
 636     margin-top: 0em;
 637     margin-left: 0em;
 638     width: 100%;
 639     border: 2px solid gray;
 640     padding: 0.3em;
 641     background-color: #efefef;
 642     height: 100%;
 643     overflow: auto;
 644     z-index: 0;
 645   }
 646   .message {
 647     position: relative;
 648     background-color: #fff;
 649     width: 100%;
 650     top: 0em;
 651     left: 0%;
 652     right: 0%;
 653     text-align: center;
 654     z-index: 1;
 655   }
 656   .message > div {
 657     border: 2px solid black;
 658   }
 659   .message div div {
 660     width: 100%;
 661     text-align: right;
 662     font-size: smaller;
 663   }
 664   img.gravatar {
 665     width: 3em;
 666     height: 3em;
 667   }
 668   div.table img.table { width: 45%; }
 669
 670   .tricks div div.card0 img { width: 14%; }
 671   .tricks div div.card1 img { width: 14%; left: 43%;}
 672   .tricks div div.card2 img { width: 14%; }
 673   .tricks div div.card3 img { width: 14%; left: 43%;}
 674   .tricks div div.card0 img { left:  28%;}
 675   .tricks div div.card2 img { right: 28%;}
 676
 677 }
 678
 679 img.grav {
 680   height: 50px;
 681 }