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