LAYOUT: better layout for mobile devices
[e-DoKo.git] / 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 }