shiro/static/s/_admin.css

Online quiz game engine, inspired by russian tv show 'What? Where? When?' (Million Dollar Mind Game).

/* --- gameplay */

.gameplay_question
{
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0px;
  line-height: 40px;
  font-size: 20px;
  color: #999999;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
}
  .gameplay_question.gameplay_question_played
  {
    border-color: transparent;
    color: #e8e8e8;
    background-color: #ffffff;
  }
  .gameplay_question:hover
  {
    color: #333333;
    border-color: #999999;
  }
.gameplay_question:before
{
  content: "";
  position: absolute;
  display: block;
  top: -10px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 6px;
  background-color: #33dd33;
}
  .gameplay_question.gameplay_question_played:before
  {
    background-color: #dd3333;
    opacity: 0; /* do not show for now */
  }
  /* turn off user level stuff */
  .gameplay_question:after
  {
    content: none;
  }
  .gameplay_question.gameplay_question_playing
  {
    border-color: transparent;
    box-shadow: none;
    -moz-animation: none;
    -webkit-animation: none;
    animation: none;
  }
  .gameplay_question.gameplay_question_playing:before
  {
    width: 0px;
    height: 0px;
    margin-left: -6px;
    border: 6px solid transparent;
    border-color: #fe6c1d transparent transparent transparent;
    border-radius: 0px;
    background-color: transparent;
    opacity: 1;
  }

.gameplay_question_controls
{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: auto;
  height: auto;
}
.gameplay_show_answer,
.gameplay_edit_question,
.gameplay_delete_question
{
  display: none;

  position: absolute;
  bottom: -35px;
  width: 100%;
  line-height: 20px;
  font-size: 10px;
  color: #cccccc;
  text-align: center;
}
  .gameplay_question.gameplay_question_playing:hover .gameplay_show_answer
  {
    display: block;
  }
  .gameplay_show_answer:hover,
  .gameplay_edit_question:hover,
  .gameplay_delete_question:hover
  {
    color: #444444;
  }
.gameplay_edit_question
{
  bottom: -20px;
}
/* when it's last question and it's current
 * shift answer control a notch down
 */
.gameplay_question:last-child .gameplay_show_answer
{
  bottom: -50px;
}
  .gameplay_question:hover .gameplay_edit_question,
  /* show delete button only for the last question */
  .gameplay_question:last-child:hover .gameplay_delete_question
  {
    display: block;
  }
  .gameplay_question.gameplay_question_playing .gameplay_delete_question
  {
    display: none;
  }

.gameplay_edit_question:before
{
  content: "edit";
}
.gameplay_delete_question:before
{
  content: "delete";
}
.gameplay_show_answer:before
{
  content: "answer";
}

/* override forms */

.formprompt_field_played>input[type=checkbox]
{
  margin-right: 476px;
}


/* --- scoreboard & gameplay DMZ */

.scoreboard_control,
.gameplay_control
{
  margin-left: 10px;
  padding: 5px 15px;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 14px;
  color: #cccccc;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
}
  .scoreboard_control:hover,
  .gameplay_control:hover
  {
    color: #333333;
    border-color: #999999;
  }

.gameplay_add_question
{
  position: absolute;
  top: 8px;
  left: 0px;
  margin-left: 0px;
}
.gameplay_add_question:before
{
  content: "add question";
}

.gameplay_start_timer
{
  position: absolute;
  top: 8px;
  right: 0px;
}
  .gameplay_start_timer.timer_running_out
  {
    color: #fe6c1d;
  }
.gameplay_start_timer:before
{
  content: "start timer";
}
  .gameplay_start_timer[data-timer]:before
  {
    content: "stop timer :" attr(data-timer);
    color: #333333;
  }


/* --- scoreboard */

.scoreboard_add_team
{
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left: 0px;
}
.scoreboard_add_team:before
{
  content: "add new team";
}

.scoreboard_reset_scoreboard
{
  position: absolute;
  top: 0px;
  right: 0px;
}
  .scoreboard_reset_scoreboard:hover
  {
    color: #dd3333;
    border-color: #dd3333;
  }
.scoreboard_reset_scoreboard:before
{
  content: "reset scoreboard";
}

.scoreboard_team:before
{
  content: "";
  position: absolute;
  display: block;
  bottom: 12px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 8px;
}
  .scoreboard_team.scoreboard_team_online:before
  {
    background-color: #dd3333;
  }
  .scoreboard_team.scoreboard_team_online.scoreboard_team_has_focus:before
  {
    background-color: #33dd33;
  }

.scoreboard_team_points,
.scoreboard_team_time_bonus
{
  display: inline-block;
  min-width: 0px;
  width: 50%;
}
.scoreboard_team_time_bonus
{
  color: #999999;
}

.scoreboard_team_controls
{
  display: none;

  position: absolute;
  top: 0px;
  left: 0px;
  width: 35px;
  height: 70px;
}
  .scoreboard_team:hover .scoreboard_team_controls
  {
    display: block;
  }
.scoreboard_edit_team,
.scoreboard_delete_team
{
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
}
.scoreboard_edit_team:before,
.scoreboard_delete_team:before
{
  display: inline-block;
  width: 35px;
  line-height: 35px;
  font-size: 10px;
  text-align: left;
  color: #cccccc;
}
  .scoreboard_edit_team:hover:before,
  .scoreboard_delete_team:hover:before
  {
    color: #444444;
  }
.scoreboard_edit_team:before
{
  content: "edit";
}
.scoreboard_delete_team:before
{
  content: "delete";
}

/* answers */
.answer_teams
{
  position: relative;
  display: inline-block;
  width: 90%;
  height: 80%;
  margin-top: 2%;
  border: 1px solid #cccccc;
  border-width: 1px 0px;
  border-radius: 4px;
  background-color: #fcfcfc;
  vertical-align: middle;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;
}
.answer_teams_stats
{
  position: absolute;
  display: block;
  bottom: -12px;
  right: 5%;
  margin-right: 5px;
  line-height: 20px;
  font-size: 12px;
  color: #999999;
}
.answer_teams_stats[data-answers]:before
{
  content: "Evaluated " attr(data-evaluated) " out of " attr(data-answers) " answers, from  " attr(data-teams) " teams";
}

.answer_teams_team
{
  position: relative;
  display: block;
  min-height: 30px;
  padding: 5px 75px;
  line-height: 18px;
  color: #999999;
  text-align: left;
  background-color: #fcfcfc;
}
  .answer_teams_team:nth-child(2n+1)
  {
    background-color: #f4f4f4;
  }
  .answer_teams_team:hover
  {
    background-color: #e8e8e8;
    color: #000000;
  }
  /* evaluated/not-evaluated divide */
  .answer_teams_team:not(.answer_teams_team_evaluated) + .answer_teams_team.answer_teams_team_evaluated
  {
    margin-top: 30px;
  }
  .answer_teams_team:not(.answer_teams_team_evaluated) + .answer_teams_team.answer_teams_team_evaluated:before
  {
    content: "evaluated";
    position: absolute;
    display: block;
    top: -29px;
    left: 0px;
    width: 100%;
    height: 28px;
    line-height: 28px;
    font-family: "Ubuntu", sans-serif;
    font-size: 14px;
    border-top: 1px solid #555555;
    color: #cccccc;
    text-align: center;
  }

.answer_teams_team:not(.answer_teams_team_evaluated)
{
  border-left: 2px solid #333333;
}
.answer_teams_team.answer_teams_team_evaluated
{
  border-left: 2px solid #dd3333;
}
.answer_teams_team.answer_teams_team_evaluated_correct
{
  border-color: #33dd33;
}

.answer_teams_control
{
  position: absolute;
  top: 4px;
  padding: 3px 12px;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 12px;
  color: #cccccc;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
}
  .answer_teams_control:hover
  {
    color: #333333;
    border-color: #999999;
  }
  .answer_teams_control.answer_teams_control_selected
  {
    color: #fe6c1d;
    border-color: transparent;
    pointer-events: none;
  }

.answer_teams_team_correct
{
  left: 5px;
}
.answer_teams_team_correct:before
{
  content: "correct";
}
  .answer_teams_team_correct.answer_teams_control_selected
  {
    color: #33dd33;
  }


.answer_teams_team_wrong
{
  right: 5px;
}
.answer_teams_team_wrong:before
{
  content: "wrong";
}
  .answer_teams_team_wrong.answer_teams_control_selected
  {
    color: #dd3333;
  }


  .answer_teams_team:hover .answer_teams_control:not(.answer_teams_control_selected)
  {
    color: #999999;
  }
  .answer_teams_team .answer_teams_control:hover
  {
    color: #000000;
  }

.answer_teams_team_time
{
  display: inline-block;
  height: 100%;
  font-size: 18px;
  min-width: 50px;
  margin-right: 10px;
}

.answer_teams_team_name
{
  display: inline-block;
  font-size: 14px;
  margin-right: 10px;
}
.answer_teams_team_name:after
{
  content: ":";
}

.answer_teams_team_time_permile
{
  position: absolute;
  display: inline-block;
  margin-top: 2px;
  font-size: 14px;
  color: #aaaaaa;
}

.answer_teams_team_answer
{
  font-size: 14px;
}