Tweaking CSS
This commit is contained in:
Denis
parent
b41ac6d76f
commit
87b9aba14b
1 changed files with 191 additions and 199 deletions
390
src/styles.css
390
src/styles.css
|
|
@ -1,203 +1,195 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #eef7fb;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-text-stroke: 1px #375449;
|
||||
-moz-text-stroke: 1px #375449;
|
||||
-o-text-stroke: 1px #375449;
|
||||
text-stroke: 1px #375449;
|
||||
font-family: "Impact", "Arial Black";
|
||||
letter-spacing: 2px;
|
||||
font-style: oblique;
|
||||
font-variant: small-caps;
|
||||
font-size: 50px;
|
||||
color: #8AD4B8;
|
||||
}
|
||||
h2,
|
||||
h4 {
|
||||
color: #224557;
|
||||
font-family: Verdana;
|
||||
}
|
||||
h3,
|
||||
h5 {
|
||||
color: #3b7998;
|
||||
}
|
||||
footer,
|
||||
#content:after {
|
||||
height: 50px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-family: "Trebuchet MS", Helvetica, Arial;
|
||||
color: #e9f5fa;
|
||||
font-size: 15px;
|
||||
}
|
||||
a:hover {
|
||||
color: #abd9ec;
|
||||
text-decoration: underline;
|
||||
-webkit-transition: color 0.5s;
|
||||
-moz-transition: color 0.5s;
|
||||
-o-transition: color 0.5s;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
footer {
|
||||
font-family: sans-serif, Helvetica, Verdana;
|
||||
color: #c9e7f3;
|
||||
background-color: #8aa3c8;
|
||||
}
|
||||
.game p {
|
||||
color: #448aae;
|
||||
}
|
||||
.game {
|
||||
padding: 30px;
|
||||
margin: 20px 80px 20px;
|
||||
height: 400px;
|
||||
border: solid 5px black;
|
||||
background-color: #C9E7F3;
|
||||
border-radius: 20px;
|
||||
font-family: Helvetica, Verdana, Arial;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#content {
|
||||
min-height: 100%;
|
||||
/* equal to footer height */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #eef7fb;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-text-stroke: 1px #375449;
|
||||
-moz-text-stroke: 1px #375449;
|
||||
-o-text-stroke: 1px #375449;
|
||||
text-stroke: 1px #375449;
|
||||
font-family: "Impact", "Arial Black";
|
||||
letter-spacing: 2px;
|
||||
font-style: oblique;
|
||||
font-variant: small-caps;
|
||||
font-size: 50px;
|
||||
color: #8AD4B8;
|
||||
}
|
||||
h2, h4 {
|
||||
color: #224557;
|
||||
font-family: Verdana;
|
||||
}
|
||||
h3, h5 {
|
||||
color: #3b7998;
|
||||
}
|
||||
footer, #content:after {
|
||||
height: 50px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-family: "Trebuchet MS", Helvetica, Arial;
|
||||
color: #e9f5fa;
|
||||
font-size: 15px;
|
||||
}
|
||||
a:hover {
|
||||
color: #abd9ec;
|
||||
text-decoration: underline;
|
||||
-webkit-transition: color 0.5s;
|
||||
-moz-transition: color 0.5s;
|
||||
-o-transition: color 0.5s;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
footer {
|
||||
font-family: sans-serif, Helvetica, Verdana;
|
||||
color: #c9e7f3;
|
||||
background-color: #8aa3c8;
|
||||
}
|
||||
.game p {
|
||||
color: #448aae;
|
||||
}
|
||||
.game {
|
||||
padding: 30px;
|
||||
margin: 20px 80px 20px;
|
||||
height: 400px;
|
||||
border: solid 5px black;
|
||||
background-color: #C9E7F3;
|
||||
border-radius: 20px;
|
||||
font-family: Helvetica, Verdana, Arial;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#content {
|
||||
min-height: 100%;
|
||||
/* equal to footer height */
|
||||
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
#left {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
}
|
||||
#right {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
#content:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
#incercari_msg {
|
||||
margin-top: 340px;
|
||||
margin-right: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#gamewon {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: 2px solid #636d92;
|
||||
border-radius: 30px;
|
||||
height: 380px;
|
||||
background-color: #a6b7f4;
|
||||
z-index: 2;
|
||||
top: 18%;
|
||||
left: 35%;
|
||||
}
|
||||
#gamewon img {
|
||||
z-index: 2;
|
||||
height: 340px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
#gamewon p {
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
#gameover {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: 2px solid #636d92;
|
||||
border-radius: 30px;
|
||||
height: 380px;
|
||||
width: 350px;
|
||||
background-color: #a6b7f4;
|
||||
z-index: 2;
|
||||
top: 18%;
|
||||
left: 35%;
|
||||
}
|
||||
#gameover img {
|
||||
z-index: 2;
|
||||
height: 330px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
#gameover p:first-child {
|
||||
padding-top: 10px;
|
||||
}
|
||||
#gameover p {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.red {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#hang {
|
||||
position: absolute;
|
||||
top: 145px;
|
||||
right: 133px;
|
||||
}
|
||||
#human {
|
||||
position: absolute;
|
||||
top: 190px;
|
||||
right: 108px;
|
||||
}
|
||||
.footer-content {
|
||||
margin: 0px 10px 0px 10px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.footer-content * {
|
||||
display: inline;
|
||||
}
|
||||
.footer-content span {
|
||||
color: #e9f5fa;
|
||||
font-weight: bold;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
/* Mobile CSS */
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
#left {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
}
|
||||
#right {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
#content:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
#incercari_msg {
|
||||
margin-top: 340px;
|
||||
margin-right: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#gamewon {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: 2px solid #636d92;
|
||||
border-radius: 30px;
|
||||
height: 380px;
|
||||
background-color: #a6b7f4;
|
||||
z-index: 2;
|
||||
top: 18%;
|
||||
left: 35%;
|
||||
}
|
||||
#gamewon img {
|
||||
z-index: 2;
|
||||
height: 340px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
#gamewon p {
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
#gameover {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: 2px solid #636d92;
|
||||
border-radius: 30px;
|
||||
height: 380px;
|
||||
width: 350px;
|
||||
background-color: #a6b7f4;
|
||||
z-index: 2;
|
||||
top: 18%;
|
||||
left: 35%;
|
||||
}
|
||||
#gameover img {
|
||||
z-index: 2;
|
||||
height: 330px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
#gameover p:first-child {
|
||||
padding-top: 10px;
|
||||
}
|
||||
#gameover p {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.red {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#hang {
|
||||
position: absolute;
|
||||
top: 145px;
|
||||
right: 133px;
|
||||
}
|
||||
#human {
|
||||
position: absolute;
|
||||
top: 190px;
|
||||
right: 108px;
|
||||
}
|
||||
.footer-content {
|
||||
margin: 0px 10px 0px 10px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.footer-content * {
|
||||
display: inline;
|
||||
}
|
||||
.footer-content span {
|
||||
color: #e9f5fa;
|
||||
font-weight: bold;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mobile {
|
||||
display: none;
|
||||
}
|
||||
/* Mobile CSS */
|
||||
|
||||
@media only screen and (max-width: 930px) {
|
||||
.mobile {
|
||||
display: inline;
|
||||
}
|
||||
.mobile input {
|
||||
-webkit-box-sizing: border-box;
|
||||
/* Safari/Chrome, other WebKit */
|
||||
@media only screen and (max-width: 930px) {
|
||||
.mobile {
|
||||
display: inline;
|
||||
}
|
||||
.mobile input {
|
||||
-webkit-box-sizing: border-box;
|
||||
/* Safari/Chrome, other WebKit */
|
||||
|
||||
-moz-box-sizing: border-box;
|
||||
/* Firefox, other Gecko */
|
||||
-moz-box-sizing: border-box;
|
||||
/* Firefox, other Gecko */
|
||||
|
||||
box-sizing: border-box;
|
||||
/* Opera/IE 8+ */
|
||||
}
|
||||
#incercari_msg {
|
||||
padding-top: 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
#game {
|
||||
min-width: 20%;
|
||||
}
|
||||
#left,
|
||||
#hang,
|
||||
#human,
|
||||
#gamover,
|
||||
#gamewon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
box-sizing: border-box;
|
||||
/* Opera/IE 8+ */
|
||||
}
|
||||
#incercari_msg {
|
||||
padding-top: 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
#game {
|
||||
min-width: 20%;
|
||||
}
|
||||
#left, #hang, #human, #gamover, #gamewon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue