diff --git a/base.css b/base.css index 1d7ef14..e4ce861 100644 --- a/base.css +++ b/base.css @@ -1,5 +1,10 @@ @import url('https://fonts.googleapis.com/css?family=Quicksand'); +@keyframes change { + from { opacity: 1.0;} + to { opacity: 0;} +} + body { font-family: 'Quicksand', sans-serif; font-size: 32px; @@ -19,6 +24,7 @@ div[id*="ib"] { width: 180px; height: 180px; position: absolute; + cursor: pointer; } #ib1 { @@ -71,7 +77,7 @@ div[id*="ib"] { height: 140px; margin-left: 93px; margin-top: 23px; - opacity: 1; + cursor: default; } .cross:before, @@ -135,27 +141,70 @@ div[id^="ci"] { display: none; } + +#status { + padding-top: 10px; + width: 400px; + height: 60px; + margin: 0 auto; + font-size: 48px; + text-align: center; + font-weight: bold; +} + +.change { + animation: change 2s 1; + animation-fill-mode: forwards; +} + +.score1, .score2{ + position: absolute; + width: auto; + height: 140px; + text-align: center; + border-radius: 10px; + border-bottom: 2px solid black; + margin: 0 10px; + padding: 0 10px; +} + +.score2{ + right: 0; +} + +.btn { + position: absolute; + width: auto; + height: 40px; + text-align: center; + border-radius: 5px; + border: 2px solid #333; + margin: 10px 10px; + bottom: 0; + right: 0; + padding: 0 10px; + cursor: pointer; +} + + + .player { - width: 180px; + font-size: 32px; + width: 100%; height: 40px; text-align: center; background-color: #000; - opacity: 0.2; + opacity: 1.0; + margin-left: -10px; border-radius: 10px; - float: right; color: white; - padding: 10px; + padding: 5px 10px; } -#p1 { - opacity: 1.0; - float: left; +#p2 { + opacity: 0.2; } -#status { - padding-top: 10px; - width: 250px; - height: 60px; - margin: 0 auto; - text-align: center; -} \ No newline at end of file +.sp { + font-size: 64px; +} diff --git a/index.html b/index.html index 497de77..16c6f82 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,22 @@ -