shiro
Version:
Online quiz game engine, inspired by russian tv show 'What? Where? When?' (Million Dollar Mind Game).
99 lines (94 loc) • 1.78 kB
CSS
.answer_form
{
position: relative;
display: inline-block;
width: 90%;
height: 70%;
margin-top: 2%;
vertical-align: middle;
z-index: 1;
}
.answer_form_messagebox
{
display: inline-block;
width: 100%;
height: 100%;
padding: 10px;
font-family: "Ubuntu", sans-serif;
font-size: 14px;
text-align: left;
border: 1px solid #cccccc;
border-radius: 4px;
background-color: #ffffff;
resize: none;
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
}
.answer_form_control
{
position: absolute;
right: 0px;
bottom: 10px;
margin: 7px 10px 0px;
padding: 5px 15px;
font-family: 'Ubuntu Condensed', sans-serif;
font-size: 14px;
color: #999999;
border: 1px solid #dddddd;
border-radius: 4px;
background-color: #ffffff;
cursor: pointer;
}
.answer_form_control:hover
{
color: #333333;
border-color: #999999;
}
/* make submit button extra bright */
.answer_form_messagebox_send
{
color: #555555;
border-color: #999999;
}
.answer_form_messagebox_send:hover
{
color: #dd3333;
border-color: #dd3333;
}
/* has focus */
.answer_form:before
{
content: "";
position: absolute;
display: block;
top: -17px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #dd3333;
box-shadow: 0px 0px 5px #dd3333;
}
.answer_form.answer_form_has_focus:before
{
background-color: #33dd33;
box-shadow: 0px 0px 5px #33dd33;
}
.answer_form:after
{
content: "Game window is not in focus";
position: absolute;
display: block;
top: -20px;
right: 20px;
font-size: 12px;
color: #555555;
text-align: right;
}
.answer_form.answer_form_has_focus:after
{
content: "Game window is in focus";
color: #999999;
}