X-Git-Url: https://git.nubati.net/cgi-bin/gitweb.cgi?p=e-DoKo.git;a=blobdiff_plain;f=css%2Fstandard019.css;fp=css%2Fstandard019.css;h=2483c99377df4f167bb545c40fa26e0cac3c0c64;hp=0000000000000000000000000000000000000000;hb=5edd63b115fe7712c6e220fc6a0b78dbace4f3cd;hpb=65322d53842f9ee7e166970e5250f76c36fc3e6a diff --git a/css/standard019.css b/css/standard019.css new file mode 100644 index 0000000..2483c99 --- /dev/null +++ b/css/standard019.css @@ -0,0 +1,627 @@ +/* reset CSS (taken from blueprint and modified a bit) */ + +html, body, div, span, +h1, h2, h3, h4, h5, h6, p, +a,img, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} +table { border-collapse: separate; border-spacing: 0; } +caption, th, td { text-align: left; font-weight: normal; } +table, td, th { vertical-align: middle; } + +/* end reset */ + +/* some general layout */ +h1, h2, h3, h4, h5, h6, p {margin: 2px; padding: 1px;} + +body { background-color: #ddd; } + + +/* the header, footer, etc */ +.header { + background-color: #fff; + text-align: center; + height: 4em; + padding-top: 1.5em; + margin-left: 3em; + margin-right: 3em; + border-bottom: 3px solid gray; +} + +.lastlogin { + position:absolute; + top:0; + left:3em; +} +.lastlogin span { font-size:smaller;} + +.main { + background-color: #fff; + margin-left: 3em; + margin-right: 3em; + min-height: 40em; +} + +.footer { + background-color: #fff; + margin-left: 3em; + margin-right: 3em; + padding:0; + border-top: 2px solid gray; + clear:both; + height: 8em; +} +.footer .right { float:right; font-size:smaller;} +.footer .left { float:left; font-size:smaller; } + +.status { + position:absolute; + right:4em; + top:0.1em; + font-size: smaller; +} + +/* sessions */ +.session { + width: 100%; + border-bottom: 1px solid #000; + text-align: center; +} +.session div.sessionrules { + width: 19em; + float: left; + text-align: left; +} +.session div.sessionrules div{ + display:none; + background-color: #fff; + border: 1px solid #000; + position:absolute; + z-index: 30; + padding:0.5em; +} +.session div.sessionrules:hover div{ display:block; } +.session div.sessionscore { + width: 19em; + float: right; + text-align: right; +} +.session div.sessionscore div{ + position:absolute; + width:12em; + right:3em; + display:none; + background-color: #fff; + border: 1px solid #000; + z-index: 30; +} +.session div.sessionscore:hover div{ display:block;} +.session img.rulesicon{ height: 1em; } + +.session .scoretable{ + height:20em; + overflow: auto; +} +.session table.score { + margin:0.5em; + width:10em; + border-collapse:collapse; +} + +/* all kind of message that should appear in the middle of the page/table */ +.joingame,.sickness,.poverty,.total,.message { + position: absolute; + background-color: #fff; + width: 20%; + top:19em; + left:40%; + right:40%; + text-align: center; + z-index:22 +} + +.total { + top:11em; + width: 14%; + left: 43%; +} +/* scoring */ +.total .re { + position: absolute; + left: -12em; + top:8em; + background-color: #eee; + z-index:15; +} +.total .contra { + position: absolute; + right: -14em; + top:8em; + background-color: #eee; + z-index:15; +} + +/* output possible rules for a new game */ +.rules { margin-top:24em;} + +/* playing cards*/ +.card { + position:absolute; + z-index:20; + top:18em; + left:28em; + text-align:center; + background-color:#fff; + border:2px solid gray; +} +.card img { width:8em; } + +/* display the table and the names */ +div.table { + position:absolute; + width:100%; + height:35em; + margin:0; + left:0; + padding:0; +/* border: 3px solid blue; */ + top: 9.2em; + text-align:center; +} + +div.table img.table { + position:absolute; + width:25%; + top:20%; + height:22em; + left:37.5%; + z-index:5; + 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:7.5%; + left:43.75%; +} +div.table div.table2 { + top:45%; + left:62.5%; +} +div.table div.table3 { + bottom:5%; + left: 43.75%; +} + +/* display the card tricks */ + +ul.tricks { + position:relative; + zoom:1; /* fixes an IE6 issue and hopefully doesn't mess up anything else */ + list-style:none; + margin:3px; + padding:0; + padding-bottom:3px; + text-align:center; + border-bottom:1px solid #444; +} +ul.tricks a { text-decoration:none; color:#000;} +ul.tricks li { + /*background-color:blue;*/ + padding:0.1em; + margin:0.2em 0.5em; + display:inline; +} +ul.tricks li.old { background-color:#fff; } +ul.tricks li:hover { background-color: #bbb;} +ul.tricks li.nohighlight:hover { background-color: #fff;} + +ul.tricks li div.trick { + position:absolute; + width:100%; + height:35em; + top:2.2em; + left: 0; + margin:0; + padding:0; +/* border: 2px solid red;*/ + display:block; +} +ul.tricks li div.trick { display:none;} +ul.tricks li div.trick img.arrow { + position:absolute; + margin:0; + padding:0; +/* border: 5px solid blue;*/ + text-align:center; + width:16%; + height:16em; + left:42%; + right:42%; + top:10em; + z-index:8; +} + +#trick0 img { float:left; width: 3em; } + +hr {clear:both;} + +/*ul.tricks li:hover div.table{ display:block; }*/ + +/* left player */ +ul.tricks li div div.card0 img,ul.tricks li div div.card0 .score, .vorbehalt0 { + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 40%; + left:37.5%; + right:56.5%; + width:6%; + z-index:30; +} +.vorbehalt0 { + left:37.5%; + right:57.5%; + width:10%; + text-align:left; +} +ul.tricks li div div.card0 span.comment{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 5%; + right:66.5%; + left:17.5%; + width:16%; +} + +/* top player */ +ul.tricks li div div.card1 img,ul.tricks li div div.card1 .score, .vorbehalt1 { + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 22%; + left:47%; + right:47%; + width:6%; + text-align:center; + z-index:30; +} +.vorbehalt1{ + left:45%; + right:45%; + width:10%; + z-index:30; +} +ul.tricks li div div.card1 span.comment{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 5%; + left:66.5%; + right:17.5%; + width:16%; + text-align:center; +} + +/* right player */ +ul.tricks li div div.card2 img,ul.tricks li div div.card2 .score, .vorbehalt2{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 40%; + right:37.5%; + left:56.5%; + width:6%; + z-index:30; +} +.vorbehalt2{ + left:auto; + right:38%; + width:10%; + text-align:right; +} +ul.tricks li div div.card2 span.comment{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 85%; + left:66.5%; + right:17.5%; + width:16%; + text-align:center; +} + +/* bottom player */ +ul.tricks li div div.card3 img,ul.tricks li div div.card3 .score, .vorbehalt3{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + bottom: 20%; + left:47%; + right:47%; + width:6%; + text-align:center; + z-index:30; +} +.vorbehalt3{ + left:45%; + right:45%; + width:10%; + text-align:center; +} +ul.tricks li div div.card3 span.comment{ + position:absolute; + margin:0; + padding:0; + /*border: 1px solid red;*/ + top: 85%; + right:66.5%; + left:17.5%; + width:16%; +} + +span.comment{ + border: 3px solid green; + max-height:6em; + overflow: auto; + word-wrap: break-word; +} + +ul.tricks li div div span.comment span{ + display:block; + text-align:left; + border-top:1px solid green; +} + +.mycards { + margin:0; + margin-top:34.5em; + padding:0; + border-top: 2px solid gray; +/* border-bottom: 2px solid green;*/ + background-color: #faffc7; + text-align:center; +} + +.mycards img { height:6em;} + +.exchange { + clear:both; + margin:0; + padding:0; + border:1px solid red; + background-color:yellow; +} + +.exchange img { height:6em;} + +.line{ + clear:both; + border-top:2px solid gray; + margin:0; + padding:0; +} + +.gameinfo { + position:absolute; + top:27em; + right:0em; + margin:1em; + margin-top:0em; + margin-right:3em; + + width:12em; + + padding:0.3em; + + border: 2px solid gray; + background-color: #efefef; +} + +.usermenu { + position:absolute; + top:10em; + left:3em; + margin:1em; + margin-top:0em; + margin-left:0em; + + width: 12em; + + border: 2px solid gray; + + padding:0.3em; + + background-color: #eee; +} + +.notes { + position:absolute; + top:27em; + left:0; + margin:1em; + margin-top:0em; + margin-left:3em; + + width: 12em; + + border: 2px solid gray; + + padding:0.3em; + + background-color: #efefef; + + height:10em; + overflow: auto; + z-index:50; +} + +.user { margin-left:25%;margin-right:5%; } +.user td.usergames { width:50%; } +.wide { margin-left:5%;margin-right:5%; } + +.over { + text-align:center; + margin-bottom:0.1em; +} + +.cardinput { + display:inline; + position:relative; + border: 1px solid #000; +} + +.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; +} + +.multi a{ color: #fff;} + +.bigger{ font-size:larger;} + + +/* statistics using jquery*/ +caption { + text-align: center; + margin: 0.5em; + padding: 0.5em; + padding-bottom: 0em; + margin-bottom: 0; + } + +table.stats { + margin: 0.5em 1em; + border: solid 0.2em #aeaeae; + -moz-border-radius: 0.5em ; + float: left; +} +table.stats tbody tr.odd td { background-color:#aeaeae; } +table.stats tbody tr.even td { background-color:#eaeaea; } +table.stats td, table.stats th { + margin-left: 0.2em; + margin-right: 0.2em; + padding-left: 0.2em; + padding-right: 0.2em; + border-right: solid 0.1em #000; +} +table.stats tr td:last-child, table.stats tr th:last-child { border-right: solid 0 #000; } +table.stats th { border-bottom: solid 0.2em #000 } + +table.stats thead tr .header { + background-image: url(bg.png); + background-repeat: no-repeat; + background-position: center right; + cursor: pointer; +} +table.stats tbody td { + padding: 4px; + background-color: #eaeaea; + vertical-align: top; +} +table.stats thead tr .headerSortUp { + background-image: url(asc.png); +} +table.stats thead tr .headerSortDown { + background-image: url(desc.png); +} +table.stats thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp { + background-color: #8dbdd8; +} + + + +/* the login window */ +.login { + text-align:center; + padding-top: 1em; +} + +.login p, { + padding: 0.1em 0.1em 0.15em; +} +.login h4 { + padding: 0.3em 0.3em 0.45em; +} + +/* the login form */ +.login form{ + width: 24em; + margin: 0.5em auto; + padding: 0.5em 0.5em 1.5em; + text-align: center; +} + +fieldset { + border: 2px solid #000; + padding: 0.5em 0.5em 0.75em; + background-color: #eee; +} + +.login label, .login input{ margin: 0.5em 0.5em 0.75em;} + +.login label{ + float:left; + width:7em; + text-align: left; +} + +.login input #email, .login input #password{ + width:9em; + float:right; +} + +.login .submitbutton { background-color: #fff;} +.login .submitbutton:hover { background-color: #aaa;} + +.newbiehint { + background-color: #fee; +} + +.vacation { + color: #666; + background-color: #fc3; +} \ No newline at end of file