235 lines
6.3 KiB
CSS
235 lines
6.3 KiB
CSS
body {
|
|
background-color: rgb(226, 238, 159);
|
|
}
|
|
|
|
#container {
|
|
margin: auto;
|
|
width: 600px;
|
|
}
|
|
|
|
#myCanvas {
|
|
background-color: #000000;
|
|
border: 3px red solid;
|
|
|
|
}
|
|
.accept{
|
|
font-size: 20px;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
#add_question {
|
|
position : absolute;
|
|
top: 100px;
|
|
left: 1500px;
|
|
}
|
|
#popup {
|
|
background-color: rgba(0,0,0,.25);
|
|
bottom: 0;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
input[type="text"] {
|
|
-webkit-transition: all 0.30s ease-in-out;
|
|
-moz-transition: all 0.30s ease-in-out;
|
|
-ms-transition: all 0.30s ease-in-out;
|
|
-o-transition: all 0.30s ease-in-out;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
width: 100%;
|
|
background: #fff;
|
|
margin-bottom: 4%;
|
|
margin-top: 4%;
|
|
border: 1px solid #ccc;
|
|
padding: 3%;
|
|
color: #555;
|
|
font: 95% Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
input[type="text"] {
|
|
box-shadow: 0 0 5px #43D1AF;
|
|
padding: 3%;
|
|
border: 1px solid #43D1AF;
|
|
}
|
|
|
|
|
|
#form-popup {
|
|
|
|
position: absolute;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
top: 20%;
|
|
left: 32.5%;
|
|
background-color: rgb(255,255,255);
|
|
border-radius: 10px;
|
|
padding: 0;
|
|
width: 700px;
|
|
height: 700px;
|
|
flex-direction: column;
|
|
font-family: Arial;
|
|
}
|
|
#popup_question {
|
|
position : absolute;
|
|
top: 150px;
|
|
left: 1500px;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
color: rgb(100, 219, 223);
|
|
display: none;
|
|
|
|
}
|
|
#continue_game{
|
|
display: none;
|
|
}
|
|
#correct{
|
|
display: none;
|
|
color: #10c878;
|
|
}
|
|
#incorrect{
|
|
display: none;
|
|
color: #c91616;
|
|
}
|
|
#restart{
|
|
display: none;
|
|
-moz-box-shadow: 0px 10px 14px -7px #276873;
|
|
-webkit-box-shadow: 0px 10px 14px -7px #276873;
|
|
box-shadow: 0px 10px 14px -7px #276873;
|
|
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
|
|
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
|
|
background-color:#599bb3;
|
|
-moz-border-radius:8px;
|
|
-webkit-border-radius:8px;
|
|
border-radius:8px;
|
|
cursor:pointer;
|
|
color:#ffffff;
|
|
font-family:Arial;
|
|
font-size:20px;
|
|
font-weight:bold;
|
|
padding:13px 32px;
|
|
text-decoration:none;
|
|
text-shadow:0px 1px 0px #3d768a
|
|
|
|
}
|
|
#restart_game, #add_question, #clear_local_storage, #send_question{
|
|
display: inline;
|
|
-moz-box-shadow: 0px 10px 14px -7px #276873;
|
|
-webkit-box-shadow: 0px 10px 14px -7px #276873;
|
|
box-shadow: 0px 10px 14px -7px #276873;
|
|
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
|
|
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
|
|
background-color:#599bb3;
|
|
-moz-border-radius:8px;
|
|
-webkit-border-radius:8px;
|
|
border-radius:8px;
|
|
cursor:pointer;
|
|
color:#ffffff;
|
|
font-family:Arial;
|
|
font-size:20px;
|
|
font-weight:bold;
|
|
padding:13px 32px;
|
|
margin-bottom: 8%;
|
|
text-decoration:none;
|
|
text-shadow:0px 1px 0px #3d768a
|
|
|
|
}
|
|
|
|
#restart:hover, #restart_game:hover, #clear_local_storage:hover, #send_question:hover, #add_question:hover{
|
|
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
|
|
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
|
|
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
|
|
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
|
|
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
|
|
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
|
|
background-color:#408c99;
|
|
}
|
|
|
|
#restart:active, #restart_game:active, #clear_local_storage:active, #send_question:active{
|
|
position:relative;
|
|
top:1px;
|
|
}
|
|
|
|
#score {
|
|
width: 600px;
|
|
height: 100px;
|
|
margin: auto;
|
|
background-color: grey;
|
|
font-size: 25px;
|
|
}
|
|
|
|
#current, #highest, #session, #question_couter, #lifes {
|
|
font-size : 25px;
|
|
color: black;
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color : #FFFFFF;
|
|
}
|
|
|
|
.popup-item{
|
|
text-align: center;
|
|
}
|
|
|
|
#try_again{
|
|
display: none;
|
|
-moz-box-shadow: 0px 10px 14px -7px #276873;
|
|
-webkit-box-shadow: 0px 10px 14px -7px #276873;
|
|
box-shadow: 0px 10px 14px -7px #276873;
|
|
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
|
|
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
|
|
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
|
|
background-color:#599bb3;
|
|
-moz-border-radius:8px;
|
|
-webkit-border-radius:8px;
|
|
border-radius:8px;
|
|
cursor:pointer;
|
|
color:#ffffff;
|
|
font-family:Arial;
|
|
font-size:20px;
|
|
font-weight:bold;
|
|
padding:13px 32px;
|
|
text-decoration:none;
|
|
text-shadow:0px 1px 0px #3d768a
|
|
}
|
|
|
|
#try_again:hover{
|
|
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
|
|
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
|
|
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
|
|
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
|
|
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
|
|
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
|
|
background-color:#408c99;
|
|
}
|
|
|
|
#try_again:active{
|
|
position:relative;
|
|
top:1px;
|
|
}
|