diff options
author | Lionel LASKE <llaske@c2s.fr> | 2012-11-21 21:05:18 (GMT) |
---|---|---|
committer | Lionel LASKE <llaske@c2s.fr> | 2012-11-21 21:05:18 (GMT) |
commit | 1952f43195eabf55e57e9716fc6aa3f6196a21d1 (patch) | |
tree | e1d6af142c5ac171abf825e9a91bbfb61857a76b | |
parent | 6324696fd4888dee226be0c6ffb053c3a81b2b74 (diff) |
Add style sheet for web version
-rw-r--r-- | html/css/styles_web.css | 350 |
1 files changed, 350 insertions, 0 deletions
diff --git a/html/css/styles_web.css b/html/css/styles_web.css new file mode 100644 index 0000000..d6925c6 --- /dev/null +++ b/html/css/styles_web.css @@ -0,0 +1,350 @@ +/* Hack: put global config in a hidden rule attributes */ +.config { + position: absolute; + visibility: hidden; + width: 102px; /* Screen width / 10 */ + height: 83px; /* Screen height / 10 */ + margin-left: 19px; /* Card size / 10 */ +} + +/* App background */ +.board { + background-color: #005a40; +} + +/* Home page */ +.cardbox { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + z-index: 0; +} + +.glass { + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height: 850px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; +} + +.logo { + position: absolute; + left: 230px; + top: 110px; + z-index: 2; +} + +.game-one { + position: absolute; + left: 250px; + top: 330px; + z-index: 2; +} + +.game-two { + position: absolute; + left: 450px; + top: 280px; + z-index: 2; +} + +.game-three { + position: absolute; + left: 650px; + top: 330px; + z-index: 2; +} + +.game-popup { + position: absolute; + left: 400px; + top: 460px; + width: 250px; + height: 200px; + border: medium solid black; + border-radius: 20px / 15px; + background-color: white; + box-shadow: 5px 4px 10px 2px gray; + padding: 5px; + z-index: 2; +} + +.game-title { + font-size: xx-large; +} + +.game-color-one { + color: blue; +} + +.game-color-two { + color: red; +} + +.game-color-three { + color: magenta; +} + +.game-description { + font-size: large; +} + +.information { + position: absolute; + left: 85%; + top: 80%; +} + +/* Game One */ + +.start-box { + margin-top: 0px; + margin-left: 400px; + border-width: 2px; + border-style: dashed; + border-color: white; + width: 220px; + height: 230px; + z-index: -1; +} + +.end-box { + border-width: 2px; + border-style: dashed; + width: 220px; + height: 270px; + z-index: -1; + display: inline-block; + border-color: white; +} + +.herb-box-two { + margin-top: 10px; + margin-left: 220px; + background-image: url(images/grass.png); + background-repeat: no-repeat; + background-position: center; +} + +.herb-box-three { + margin-top: 10px; + margin-left: 155px; + background-image: url(images/grass.png); + background-repeat: no-repeat; + background-position: center; +} + +.carn-box-two { + margin-top: 10px; + margin-left: 130px; + background-image: url(images/meat.png); + background-repeat: no-repeat; + background-position: center; +} + +.carn-box-three { + margin-top: 10px; + margin-left: 20px; + background-image: url(images/meat.png); + background-repeat: no-repeat; + background-position: center; +} + +.omni-box-two { + visibility: hidden; +} + +.omni-box-three { + margin-top: 10px; + margin-left: 20px; + background-image: url(images/recycle.png); + background-repeat: no-repeat; + background-position: center; +} + +.box-name { + text-align: center; + font-size: x-large; + color: white; +} + + +/* Game Two */ +.level-value { + margin-left: 10px; +} + +.timer-value { + position: absolute; + right: 30px; +} + +.score { + margin-left: 335px; +} + +.score-value { + margin-left: 10px; +} + +.timer-overtime { + color: red !important; +} + +.title { + margin-bottom: 10px; + margin-top: 5px; + text-align: center; + font-size: xx-large; + color: white; + text-shadow: 0.1em .1em 1px lightgrey; + display: inline-block; +} + +.box { + margin-top: 10px; + margin-left: 5px; + border-width: 2px; + border-style: dashed; + border-color: white; + width: 980px; /* Screen width - 40 */ + height: 300px; + z-index: -1; +} + +.box-dragging { + cursor: move; +} + +.box-win { + background-color: green; +} + +.box-lost { + background-color: red; +} + +.play { + margin-left: 450px; +} + +.validate { + margin-left: 60%; +} + +.restart { + margin-left: 85%; +} + +.home { + margin-left: 10px; +} + +/* Game Three */ + +.game-box { + margin-top: 10px; + margin-left: 5px; + border-width: 2px; + border-style: dashed; + border-color: white; + background-image: url(images/play_background.png); + z-index: -1; +} + +.image-preload { + visibility: hidden; +} + +.life-border { + margin-top: 630px; + margin-left: 140px; + position: absolute; + z-index: 2; +} + +.life { + display: inline-block; +} + +/* Credits */ + +.credit-title { + font-size: xx-large; + margin-top: 10px; + margin-left: 300px; + color: white; +} + +.credit-name { + font-size: large; + margin-left: 300px; + color: white; +} + +.two-column-credits { + display: inline-block; +} + +.emul-canvas { + background-image: url(images/play_background.png); + margin-left: 50px; + margin-top: 50px; + position: absolute; +} + +/* Components */ + +.shadowbutton { + position: absolute; + z-index: 2; +} + +.shadowbutton-shadow { + position: absolute; + margin-left: 5px; + margin-top: 3px; + z-index: 1; +} + +.card { + border-width: 5px; + border-style: inset; + border-color: darkgray !important; + box-shadow: 5px -4px 4px 2px black; + width: 190px; + background-color: white; + position: absolute; + z-index: 0; + -webkit-user-select: none; + user-select: none; +} + +.card-dragged { + border-color: blue !important; + cursor: move; +} + +.cardImage { + width: 65%; + margin-top: 10px; + margin-left: 35px; +} + +.cardText { + font-size:30px; + text-align: center; + padding: 5px; +} + +.cardSoundIcon { +} + +.cardSound { + width: 50px; +} |