X-Git-Url: https://git.nubati.net/cgi-bin/gitweb.cgi?p=e-DoKo.git;a=blobdiff_plain;f=css%2Fstandard.css;h=d536394e7b10bea4985b0a12ce140386e8364649;hp=368bd523d876d611b3d91e1eebafb644a064dd28;hb=5db5f9e9ee3544b1a2b82ad1dc4e250530dd8e64;hpb=92a2164d4f1d5367b9325a8d65089abe79ee653b diff --git a/css/standard.css b/css/standard.css index 368bd52..d536394 100644 --- a/css/standard.css +++ b/css/standard.css @@ -1,187 +1,311 @@ .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; +} + +.lastlogin { + position:absolute; + font-size:smaller; + top:0; + left:0; +} + +.main { + min-height: 40em; +} + +.footer { + 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; +} + +.joingame,.sickness,.poverty,.total,.message { + position: absolute; + width: 20%; + top:22em; + left:40%; + right:40%; + text-align: center; + z-index:22 +} + + +.total .re { + position: absolute; + left: -4em; + top:8em; + background-color: #fff; + z-index:15; +} +.total .contra { + position: absolute; + right: -4em; + top:8em; + background-color: #fff; + z-index:15; +} + +.poverty { + top:32em; + z-index:15; + background-color:#fff; +} + +.rules { +margin-top:20em; } -.card { + +.card { position:absolute; z-index:20; top:18em; left:28em; - text-aling:center; + text-align:center; background-color:white; border:2px solid gray; } .card img { width:8em; } +/* display the table and the names */ +div.table { + position:absolute; + width:99%; + height:35em; + margin:0; + padding:0; +// border: 3px solid blue; + top: 8.2em; + text-align:center; +} + +div.table img.table { + position:absolute; + width:25%; + top:20%; + height:22em; + left:37.5%; + z-index:9; + display: block; + margin:0; + padding:0; +} +div.table div { + /*background-color:green;*/ + position:absolute; + width:12.5%; + text-align:center; + z-index:20; +} +div.table div img{ + /*background-color:green;*/ + width:20%; +} + +div.table div.table0 { + top:45%; + right:62.5%; +} +div.table div.table1 { + top:5%; + left:43.75%; +} +div.table div.table2 { + top:45%; + left:62.5%; +} +div.table div.table3 { + bottom:5%; + left: 43.75%; +} -ul.oldtrick { +ul.tricks { position:relative; list-style:none; margin:3px; padding:0; - /*background-color:yellow;*/ + padding-bottom:3px; text-align:center; - + border-bottom:1px solid #444; } - -ul.oldtrick a { text-decoration:none; color:#000;} - -ul.oldtrick li { +ul.tricks a { text-decoration:none; color:#000;} +ul.tricks li { /*background-color:blue;*/ - margin:0.2em 0.5em; + margin:0.1em; + padding:0.2em 0.5em; display:inline; } -ul.oldtrick li:hover { - background-color: yellow; -} +ul.tricks li.old { background-color:#fff; } +ul.tricks li:hover { background-color: #bbb;} +ul.tricks li.nohighlight:hover { background-color: #fff;} -ul.oldtrick li div.table img.table { +ul.tricks li div.trick { position:absolute; + width:100%; + height:35em; + top:1.2em; margin:0; padding:0; - top: 4em; - left: 4em; - height:22em; - z-index:-2; +// border: 2px solid red; + display:block; +} +ul.tricks li div.trick { + display:none; } -ul.oldtrick li div.table { +ul.tricks li div.trick img.arrow { position:absolute; margin:0; padding:0; - /*border: 5px solid green;*/ - top: 5em; - left: 18em; - height:28em; - width:28em; - z-index:9; - display:none; +/* border: 5px solid blue;*/ + text-align:center; + width:16%; + height:16em; + left:42%; + right:42%; + top:9em; + z-index:8; } hr {clear:both;} -/*ul.oldtrick li:hover div.table{ display:block; }*/ +/*ul.tricks li:hover div.table{ display:block; }*/ -ul.oldtrick 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: 14em; - right:26em; + top: 40%; + left:37.5%; + right:56x.5%; + width:6%; + z-index:9; } -ul.oldtrick li div div.card1 { +ul.tricks li div div.card0 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - top: 0; - left:0em; - width:28em; - text-align:center; + top: 5%; + right:66.5%; + left:17.5%; + width:16%; } -ul.oldtrick 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: 14em; - right:-1em; + top: 20%; + left:47%; + right:47%; + width:6%; + text-align:center; + z-index:9; } -ul.oldtrick li div div.card3 { +ul.tricks li div div.card1 span.comment{ position:absolute; margin:0; padding:0; /*border: 1px solid red;*/ - top: 29em; - left:0; - width:28em; + top: 5%; + left:66.5%; + right:17.5%; + width:16%; text-align:center; } - -ul.oldtrick 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: 40%; + right:37.5%; + left:56x.5%; + width:6%; + z-index:9; } - -ul.oldtrick li div div.card0 img { - top: -2em; - left:5em; -} -ul.oldtrick li div div.card1 img { - top: 3em; - left:12em; -} -ul.oldtrick li div div.card2 img { - top: -2em; - left:-6em; -} -ul.oldtrick li div div.card3 img { - top: -6em; - left:12em; -} - - -ul.oldtrick li div div span { - /*background-color:green;*/ -} -ul.oldtrick li div div.card0 span { - text-align:right; -} -ul.oldtrick li div div.card1 span { +ul.tricks li div div.card2 span.comment{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 80%; + left:66.5%; + right:17.5%; + width:16%; text-align:center; } -ul.oldtrick li div div.card0 span { - text-align:left; -} -ul.oldtrick li div div.card0 span { +ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + bottom: 20%; + left:47%; + right:47%; + width:6%; text-align:center; + z-index:9; } - -ul.oldtrick li div div span span { +ul.tricks li div div.card3 span.comment{ position:absolute; - background-color:white; margin:0; padding:0; - width:10em; - border: 1px solid yellow; - z-index:11; + /*border: 1px solid red;*/ + top: 80%; + right:66.5%; + left:17.5%; + width:16%; } -ul.oldtrick li div div.card0 span span{ - top:1em; - left:-14em; - border: 3px solid green; + +span.comment{ + border: 3px solid green; } -ul.oldtrick li div div.card1 span span{ - top:-2em; - left:1em; - border: 3px solid green; + +ul.tricks li div div span.comment span{ + display:block; + text-align:left; + border-top:1px solid green; } -ul.oldtrick li div div.card2 span span{ - top:-2em; - left:3em; - border: 3px solid green; + +.mycards { + margin:0; + margin-top:34.5em; + padding:0; + border:1px solid red; + background-color:yellow; } -ul.oldtrick li div div.card3 span span{ - top:1em; - left:3em; - border: 3px solid green; + +.mycards img { + height:6em; } -.mycards { +.exchange { clear:both; margin:0; - margin-top:38em; padding:0; border:1px solid red; background-color:yellow; } -.mycards img { +.exchange img { height:6em; } @@ -192,29 +316,107 @@ ul.oldtrick li div div.card3 span span{ padding:0; } -.info { - float:right; - border:2px solid gray; - border-top:0; +.session { + border-bottom:1px solid black; + text-align:center; } -.time { - float:left; - border:2px solid gray; - border-top:0; +.gameinfo, .useroptions { + position:absolute; + 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; } -.over { - float:right; - border:2px solid black; - clear:right; +.usermenu { + position:absolute; + 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; } -.bug { - float:left; +.user { margin-left:25%;margin-right:25%; } + +.over { + text-align:center; + margin-bottom:0.1em; +} + +.submitbutton { + border:0; + background-color: #efe; +} + +.submitbutton:hover { + background-color:#afa; +} + + +.cardinput { + display:inline; + position:relative; + border: 1px solid black; +} + +.cardinput img { + width: 4em; +} + +.cardinput:hover{ + background-color:red; +} + +div span img.button { + 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; +} + +.scoretable{ + height:10em; + overflow: auto; +} +table.score { width:10em; - border:2px solid gray; - border-top:0; - padding-top:0.5em; - clear:left; + border-collapse:collapse; +} + +.bigger { + font-size:larger; } \ No newline at end of file