X-Git-Url: https://git.nubati.net/cgi-bin/gitweb.cgi?p=e-DoKo.git;a=blobdiff_plain;f=css%2Fstandard.css;h=bea5189fc31a9f8c764de2eca14c0055d50c325d;hp=b2157a8846798a02ef9a2b326aebb35e2c709fba;hb=01e982e40cc5679cdb4647aec7c37d3d789eeb4b;hpb=b5f096688faaebf7846b3e725e1bd2dd9251b203 diff --git a/css/standard.css b/css/standard.css index b2157a8..bea5189 100644 --- a/css/standard.css +++ b/css/standard.css @@ -1,25 +1,52 @@ .header { - background-color:white; - text-align:center; - border-bottom:3px solid gray; + background-color: white; + text-align: center; + height: 4em; + border-bottom: 3px solid gray; +} + +.main { + min-height: 40em; } + .footer { - margin:0; - margin-top:0.3em; - padding:0; - border-top: 2px solid #444; - font-size:smaller; - clear:both; - } + margin:0; + margin-top:0.3em; + padding:0; + border-top: 2px solid #444; + font-size:smaller; + clear:both; +} .footer .right{ float:right; } .footer .left{ float:left; } .status { - position:absolute; - right:1em; - top:0.1em; - font-size: smaller; - } + position:absolute; + right:1em; + top:0.1em; + font-size: smaller; +} + +.joingame,.sickness,.poverty,.total,.message { + position: absolute; + width: 20%; + + top:20em; + left:40%; + right:40%; + text-align: center; +} + +.poverty { + top:32em; + z-index:15; + background-color:#fff; +} + +.rules { +margin-top:20em; +} + .card { position:absolute; @@ -35,45 +62,53 @@ /* display the table and the names */ div.table { position:absolute; + left:25%; + right:25%; margin:0; padding:0; /* border: 5px solid blue;*/ - top: 14em; - left: 20em; + top: 16em; + text-align:center; } div.table img { - height:20em; - width:20em; + top:25%; + bottom:25%; + height:50%; + width:50%; z-index:9; + display: block; + margin-left: auto; + margin-right: auto } -div.table span { +div.table div { /*background-color:green;*/ position:absolute; - width:13em; + width:25%; + height:25%; + text-align:center; } -div.table span.table0 { - top:9em; - left:-15em; - text-align:right; +div.table div img{ + /*background-color:green;*/ + width:25%; + height:25%; } -div.table span.table1 { - top:-3.5em; - left: 0em; - width:20em; - text-align:center; + +div.table div.table0 { + top:37.5%; + left:0%; } -div.table span.table2 { - top:9em; - left:22em; - text-align:left; - vertical-align:center; +div.table div.table1 { + top:-25%; + left:37.5%; } -div.table span.table3 { - top:21.5em; - left: 0em; - width:20em; - text-align:center; +div.table div.table2 { + top:37.5%; + left:75%; +} +div.table div.table3 { + bottom:-25%; + left: 37.5%; } ul.tricks { @@ -97,15 +132,6 @@ ul.tricks li:hover { background-color: #bbb;} ul.tricks li.nohighlight:hover { background-color: #fff;} ul.tricks li div.trick { - position:absolute; - margin:0; - padding:0; -/* border: 5px solid green;*/ - top: 8em; - left: 20em; - height:20em; - width:20em; - z-index:9; display:none; } @@ -113,119 +139,119 @@ ul.tricks li div.trick img.arrow { position:absolute; margin:0; padding:0; - top: 4em; - left: 3em; - height:14em; - z-index:-2; +/* border: 5px solid blue;*/ + text-align:center; + width:16%; + left:42%; + right:42%; + top:12em; + z-index:8; } hr {clear:both;} /*ul.tricks li:hover div.table{ display:block; }*/ -ul.tricks li div div.card0 { +ul.tricks li div div.card0 img,ul.tricks li div div.card0 .score{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - top: 9em; - right:27em; + top: 16em; + left:37.5%; + right:56x.5%; + width:6%; + z-index:9; } -ul.tricks li div div.card1 { +ul.tricks li div div.card0 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - top: -3em; - left:-3em; - width:28em; - text-align:center; + top: 3em; + right:66.5%; + left:17.5%; + width:16%; } -ul.tricks li div div.card2 { +ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score { position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - top: 9em; - right:-2em; + top: 10em; + left:47%; + right:47%; + width:6%; + text-align:center; + z-index:9; } -ul.tricks li div div.card3 { +ul.tricks li div div.card1 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - top: 20em; - left:-3em; - width:28em; + top: 3em; + left:66.5%; + right:17.5%; + width:16%; text-align:center; } - -ul.tricks li div div img { +ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score{ position:absolute; - height:6em; margin:0; padding:0; + /*border: 1px solid red;*/ + top: 16em; + right:37.5%; + left:56x.5%; + width:6%; + z-index:9; } - -ul.tricks li div div.card0 img { - top: -2em; - left:5em; -} -ul.tricks li div div.card1 img { - top: 3em; - left:10em; -} -ul.tricks li div div.card2 img { - top: -2em; - left:-6em; -} -ul.tricks li div div.card3 img { - top: -6em; - left:10em; -} - - -ul.tricks li div div span.comment { +ul.tricks li div div.card2 span.comment{ position:absolute; - background-color:white; margin:0; padding:0; - width:10em; - border: 1px solid yellow; - z-index:-11; -} -ul.tricks li div div span.comment:hover { - z-index:11; -} -ul.tricks li div div.card0 span.comment{ - top:4em; - left:-10em; - border: 3px solid green; -} -ul.tricks li div div.card1 span.comment{ - top:-2em; - left:1em; - border: 3px solid green; + /*border: 1px solid red;*/ + top: 24em; + left:66.5%; + right:17.5%; + width:16%; + text-align:center; } -ul.tricks li div div.card2 span.comment{ - top:-2em; - left:0em; - border: 3px solid green; +ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 22em; + left:47%; + right:47%; + width:6%; + text-align:center; + z-index:9; } ul.tricks li div div.card3 span.comment{ - top:2em; - left:20em; - border: 3px solid green; + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 24em; + right:66.5%; + left:17.5%; + width:16%; +} + +span.comment{ + border: 3px solid green; } + ul.tricks li div div span.comment span{ display:block; - width:10em; text-align:left; border-top:1px solid green; } .mycards { - clear:both; margin:0; margin-top:33em; padding:0; @@ -261,23 +287,46 @@ ul.tricks li div div span.comment span{ text-align:center; } -.ruleset { +.gameinfo, .useroptions { position:absolute; - top:10.5em; - border:2px solid gray; + top:10em; + right:0em; + margin:1em; + margin-top:0em; + margin-right:0em; + + width:12em; + + border-top: 2px solid gray; + border-left: 2px solid gray; + border-bottom: 2px solid gray; + padding:0.3em; -} + background-color: #eee; +} -.bug { +.usermenu { position:absolute; - top:17.5em; - width:10em; - border:2px solid gray; - padding-top:0.5em; - clear:left; + top:10em; + left:0; + margin:1em; + margin-top:0em; + margin-left:0em; + + width: 12em; + + border-top: 2px solid gray; + border-right: 2px solid gray; + border-bottom: 2px solid gray; + + padding:0.3em; + + background-color: #eee; } +.user { margin-left:25%;margin-right:25%; } + .over { text-align:center; margin-bottom:0.1em; @@ -292,19 +341,6 @@ ul.tricks li div div span.comment span{ background-color:#afa; } -.useroptions{ - float:right; - padding-left:0.3em; - border-left: 1px solid #aaa; - border-bottom: 1px solid #aaa; -} -.useroptions h4 { - margin:0.1em; - margin-left:0em; - padding:0.1em; - padding-left:0em; - text-align:left; -} .cardinput { display:inline; @@ -323,5 +359,18 @@ ul.tricks li div div span.comment span{ div span img.button { height: 2em; width: 2em; +} +.gamestatuspre { + padding: 0 0.3em; + + background-color: #fd8901; +} +.gamestatusover { + padding:0 0.3em; + background-color: #f82c20 ; +} +.gamestatusplay { + padding:0 0.3em; + background-color: #15de26; } \ No newline at end of file