148 lines
No EOL
2.7 KiB
CSS
Executable file
148 lines
No EOL
2.7 KiB
CSS
Executable file
@keyframes slidePrompt{
|
|
0%{
|
|
color: transparent;
|
|
width: 0%;
|
|
margin-left: 50%;
|
|
}
|
|
35%{
|
|
color: rgb(202, 202, 202);
|
|
width: 40%;
|
|
margin-left: 28%;
|
|
}
|
|
75%{
|
|
color: rgb(202, 202, 202);
|
|
width: 40%;
|
|
margin-left: 28%;
|
|
}
|
|
100%{
|
|
color: transparent;
|
|
width: 0%;
|
|
margin-left: 50%;
|
|
}
|
|
}
|
|
@keyframes hideInput{
|
|
0%{
|
|
background-color: rgb(39, 39, 39);
|
|
border: 2px solid rgb(53, 53, 179);
|
|
color: rgb(202, 202, 202);
|
|
height: 3rem;
|
|
}
|
|
35%{
|
|
background-color: transparent;
|
|
border: 0px solid transparent;
|
|
color: transparent;
|
|
height: 0rem;
|
|
}
|
|
75%{
|
|
background-color: transparent;
|
|
border: 0px solid transparent;
|
|
color: transparent;
|
|
height: 0rem;
|
|
}
|
|
100%{
|
|
background-color: rgb(39, 39, 39);
|
|
border: 2px solid rgb(53, 53, 179);
|
|
color: rgb(202, 202, 202);
|
|
height: 3rem;
|
|
}
|
|
}
|
|
|
|
body{
|
|
background-color: rgb(39, 39, 39);
|
|
color: rgb(202, 202, 202);
|
|
text-align: center;
|
|
}
|
|
|
|
.enclosed{
|
|
border: 2px solid rgb(180, 180, 180);
|
|
width: 20%;
|
|
|
|
text-align: center;
|
|
}
|
|
.enclosed input{
|
|
display: block;
|
|
float: none;
|
|
}
|
|
.mbtn{
|
|
background-color: rgb(39, 39, 39);
|
|
border: 2px solid rgb(103, 103, 247);
|
|
color: rgb(202, 202, 202);
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
|
|
padding: 5px;
|
|
margin-top: 5px;
|
|
margin-left: -2%;
|
|
margin-right: 2%;
|
|
|
|
width: 12rem;
|
|
height: 2.5rem;
|
|
|
|
transition-duration: 500ms;
|
|
}
|
|
.mbtn:disabled{
|
|
background-color: transparent;
|
|
color: transparent;
|
|
|
|
border: 0px solid transparent;
|
|
border-radius: 2.5px;
|
|
|
|
cursor: default;
|
|
|
|
height: 0px;
|
|
}
|
|
.mbtn:enabled:hover{
|
|
border: 2px solid rgb(146, 146, 228)
|
|
}
|
|
|
|
#scrambled{
|
|
background-color: rgb(39, 39, 39);
|
|
border: 2px solid rgb(68, 68, 68);
|
|
border-radius: 5px;
|
|
color: rgb(180, 180, 180);
|
|
|
|
width: 25%;
|
|
margin-left: 37%;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
}
|
|
#guess{
|
|
background-color: rgb(39, 39, 39);
|
|
border: 2px solid rgb(53, 53, 179);
|
|
color: rgb(202, 202, 202);
|
|
|
|
width: 98%;
|
|
height: 3rem;
|
|
|
|
text-align: center;
|
|
}
|
|
#guess:hover{
|
|
border: 2px solid rgb(103, 103, 247);
|
|
}
|
|
#bkgImg{
|
|
z-index: -1;
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#hint{
|
|
background-color: rgb(39, 39, 39);
|
|
border: 2px solid rgb(202, 202, 202);
|
|
border-radius: 15px;
|
|
|
|
width: 40%;
|
|
height: 2rem;
|
|
margin-left: 28%;
|
|
}
|
|
|
|
.showPrompt{
|
|
animation-name: slidePrompt;
|
|
animation-duration: 2500ms;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
.hideBox{
|
|
animation-name: hideInput;
|
|
animation-duration: 2500ms;
|
|
animation-fill-mode: forwards;
|
|
} |