shiro/static/s/chat.css

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

/* messages log */

.log
{
  position: absolute;
  display: block;
  top: 0px;
  right: 0px;
  width: 20%;
  min-height: 100%;
  height: auto;
  padding: 2% 2% calc(4% + 85px) 2%;
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  color: #777777;
  border-left: 1px solid #cccccc;
  z-index: 0;
}
.log:before,
.log:after
{
  content: "";
  position: fixed;
  display: block;
  right: 0px;
  width: 20%;
  height: 4%;
  z-index: 1;
  pointer-events: none;
}
.log:before
{
  top: 0px;
  background-image: -webkit-linear-gradient(top, rgba(255,255,255, 1), rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 90%);
  background-image: -moz-linear-gradient(top, rgba(255,255,255, 1), rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 90%);
  background-image: linear-gradient(top, rgba(255,255,255, 1), rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 90%);
}
.log:after
{
  bottom: calc(80px + 2%);
  background-image: -webkit-linear-gradient(bottom, rgba(255,255,255, 1), rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-linear-gradient(bottom, rgba(255,255,255, 1), rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(bottom, rgba(255,255,255, 1), rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
}

/* chat message */

.chat_message
{
  display: block;
  width: 100%;
  padding: 10px 0px 0px;
  overflow: hidden;
}
.chat_message_user
{
  display: block;
  color: #cccccc;
}
.chat_message_user>i
{
  display: none;
}
  .chat_message_user:hover>i
  {
    display: inline;
  }

.chat_message_text
{
  position: relative;
  display: block;
  min-height: 25px;
  padding: 5px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f9f9f9;
  white-space: pre-line;
  z-index: 0;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
  .chat_message_user + .chat_message_text
  {
    margin-top: 6px;
  }
.chat_message_text:before
{
  content: "";
  position: absolute;
  display: block;
  left: 6px;
  top: -3px;
  width: 6px;
  height: 6px;
  background-color: #f9f9f9;
  box-shadow: 1px 1px 0px #e0e0e0;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg);
  z-index: -1;
}
  .chat_message_mine .chat_message_text,
  .chat_message_mine .chat_message_text:before
  {
    color: #aaaaaa;
    background-color: #ffffff;
  }
  .chat_message_personal .chat_message_text,
  .chat_message_personal .chat_message_text:before
  {
    color: #fe6c1d;
    background-color: #fadcc9;
  }
  .chat_message_personal .chat_message_text
  {
    border-color: #fe6c1d;
  }
  .chat_message_personal .chat_message_text:before
  {
    box-shadow: 1px 1px 0px #fe6c1d;
  }


/* special treatment */

.chat_message_status,
.chat_message_error
{
  padding: 5px 0px 0px;
}
.chat_message_status .chat_message_text,
.chat_message_error .chat_message_text
{
  min-height: 15px;
  margin-top: 5px;
  padding: 0px;
  border: none;
  color: #cccccc;
  background-color: transparent;
}
  .chat_message_error .chat_message_text
  {
    color: #dd3333;
  }
.chat_message_status .chat_message_text:before,
.chat_message_error .chat_message_text:before
{
  content: none;
}


/* chat text panel */
.chat
{
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 20%;
  height: calc(80px + 2%);
  padding: 0px 2% 2%;
  font-family: "Ubuntu", sans-serif;
  font-size: 10px;
  text-align: center;
  background-color: #ffffff;
}
  .chat.chat_blocked>*
  {
    display: none;
  }
  .chat.chat_blocked:before
  {
    content: "";
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
  }
  .chat.chat_blocked:after
  {
    content: "quiet\0aplease\0a\0a";
    display: inline-block;
    font-family: "Ubuntu", sans-serif;
    font-size: 24px;
    color: #cccccc;
    vertical-align: middle;
    white-space: pre;
    opacity: 0.5;
  }
.chat_messagebox
{
  width: 100%;
  height: 60%;
  padding: 5px;
  font-size: 12px;
  text-align: left;
  border: 1px solid #cccccc;
  border-radius: 4px;
  resize: none;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

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

  /* default: most right item */
  .chat_control.chat_control_default
  {
    color: #999999;
    border-color: #dddddd;
  }
    .chat_control.chat_control_default:hover
    {
      color: #333333;
      border-color: #999999;
    }

/* user join panel */

.user
{
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 20%;
  height: calc(80px + 2%);
  padding: 0px 2% 2%;
  font-family: "Ubuntu", sans-serif;
  font-size: 10px;
  text-align: center;
  background-color: #ffffff;
}

.user_nickname
{
  width: 100%;
  height: 30px;
  padding: 5px;
  font-size: 12px;
  text-align: left;
  border: 1px solid #cccccc;
  border-radius: 4px 4px 0px 4px;
  resize: none;
}