billiards-server/public/assets/addons/fastchat/css/fastchat.css

:root {
  --white: #fff;
  --black: #000;
  --bg: #f8f8f8;
  --grey: #999;
  --dark: #1a1a1a;
  --light: #e6e6e6;
  --wrapper: 100%;
  --blue: #00b0ff;
}

.chat-wrapper {
  position: relative;
  left: 50%;
  width: var(--wrapper);
  height: 620px;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}

.chat-container {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.chat-container .left {
  position: relative;
  float: left;
  width: 37%;
  height: 100%;
  border: 1px solid var(--light);
  background-color: var(--white);
}

.chat-container .left .top {
  position: relative;
  width: 100%;
  height: 96px;
  padding: 29px 12px;
}

.chat-container .left input {
  float: left;
  width: 100%;
  height: 42px;
  padding: 0 15px;
  border: 1px solid var(--light);
  background-color: #eceff1;
  border-radius: 21px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}
.chat-container .left input:focus {
  outline: none;
}
.chat-container .left a.search {
  display: block;
  float: left;
  width: 42px;
  height: 42px;
  margin-left: 10px;
  border: 1px solid var(--light);
  background-color: var(--blue);
  background-image: url("../img/name-type.png");
  background-repeat: no-repeat;
  background-position: top 12px left 14px;
  border-radius: 50%;
}

.chat-container .left .people {
  margin-left: -1px;
  border-right: 1px solid var(--light);
  border-left: 1px solid var(--light);
  width: calc(100% + 2px);
  height: 84%;
  overflow-x: hidden;
  overflow-y: auto;
}
.chat-container .left .people::-webkit-scrollbar,.chat_scroll::-webkit-scrollbar,.search_users::-webkit-scrollbar {
 width: 4px;
}
.chat-container .left .people::-webkit-scrollbar-track,.chat_scroll::-webkit-scrollbar-track,.search_users::-webkit-scrollbar-track {
  background-color:#fff;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}
.chat-container .left .people::-webkit-scrollbar-thumb,.chat_scroll::-webkit-scrollbar-thumb {
  background-color:#e6e6e6;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius:2em;
}
.chat-container .left ul{
  list-style:none;
  padding: 0;
  margin: 0;
}
.chat-container .left .people .person {
  position: relative;
  width: 100%;
  padding: 12px 10% 16px;
  cursor: pointer;
  background-color: var(--white);
}
.chat-container .left .people .person:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 80%;
  height: 1px;
  content: '';
  background-color: var(--light);
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}
.chat-container .left .people .person img {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 50%;
}
.chat-container .left .people .person .person_head_gray { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.chat-container .left .people .person .session_info_item{
  display: flex;
  height: 24px;
  overflow: hidden;
  justify-content: space-between;
}
.chat-container .left .people .person .name {
  width: 60%;
  overflow: hidden;
  font-size: 14px;
  color: var(--dark);
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  display: inline-block;
}
.chat-container .left .people .person .time {
  font-size: 14px;
  padding-top: 2px;
  color: var(--grey);
  background-color: var(--white);
}
.chat-container .left .people .person .preview {
  width: 60%;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--grey);
}
.chat-container .left .people .person .unread_msg_count {
  height: 17px;
  margin-top: 1.5px;
  padding: 0 5px;
  background: #f74c31;
  text-align: center;
  line-height: 17px;
  border-radius: 50%;
  color: var(--white);
}
.chat-container .left .people .person .count_hide{
  display: none;
}
.chat-container .left .people .person.active .unread_msg_count, .chat-container .left .people .person:hover .unread_msg_count{
  color: var(--white);
  background: #f74c31;
}
.chat-container .left .people .person.active, .chat-container .left .people .person:hover {
  margin-top: -1px;
  margin-left: -1px;
  padding-top: 13px;
  border: 0;
  background-color: var(--blue);
  width: calc(100% + 2px);
  padding-left: calc(10% + 1px);
}
.chat-container .left .people .person.active span, .chat-container .left .people .person:hover span {
  color: var(--white);
  background: transparent;
}
.chat-container .left .people .person.active:after, .chat-container .left .people .person:hover:after {
  display: none;
}
.chat-container .right {
  position: relative;
  float: left;
  width: 62.4%;
  height: 100%;
}

.chat-container .right .top {
  width: 100%;
  height: 47px;
  padding: 15px 29px;
  background-color: #eceff1;
}
.chat-container .right .top span {
  font-size: 15px;
  color: var(--grey);
  vertical-align: middle;
}
.chat-container .right .top span .name {
  color: var(--dark);
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  overflow: hidden;
  display: inline-block;
  text-overflow:ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.chat-container .right .top span .shielding {
  font-family: 'Source Sans Pro', sans-serif;
  margin-left: 10px;
  color: var(--blue);
  font-size: 13px;
  cursor:pointer;
}
.chat-container .right .top span #error_warning {
  font-family: 'Source Sans Pro', sans-serif;
  margin-left: 10px;
  color: #e64340;
  font-size: 13px;
}
.chat-container .right .chat {
  position: relative;
  display: none;
  overflow: hidden;
  padding: 0 0 110px 0;
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-color: var(--light);
  height: calc(100% - 47px);
  justify-content: flex-end;
  flex-direction: column;
}
.chat-container .right .chat_scroll{
  overflow-y:auto;
  overflow-x:hidden;
  padding: 20px;
}
.chat-container .right .chat.active-chat {
  display: flex;
}
.chat-container .right .chat.active-chat .bubble {
  word-break: break-all;
  word-wrap: break-word;
}
.chat_button_popover{
  position: fixed;
  word-break: break-all;
  word-wrap: break-word;
}
.chat-container .right .write {
  position: absolute;
  bottom: 10px;
  left: 4%;
  height: 100px;
  padding: 8px;
  border: 1px solid var(--light);
  background-color: #eceff1;
  width: 92%;
  border-radius: 5px;
}
.chat-container .right .chat_emoji{
  position: absolute;
  bottom: 100px;
  left: 2%;
  padding: 8px;
  border: 1px solid var(--light);
  width: 96%;
  display: none;
  border-radius: 5px;
  background: #fff;
  z-index: 1070;
}
.chat-container .right .chat_emoji img{
  height: 30px;
  width: 30px;
  padding: 4px;
}
.chat-container .right .chat_emoji img:hover{
  border: 1px solid #f2f2f2;
}
.chat-container .right .write pre {
  font-size: 16px;
  float: left;
  width: 100%;
  height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  padding-left: 2px;
  white-space: pre-wrap;
  word-break: normal;
  color: var(--dark);
  outline: none;
  background-color: #eceff1;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}
.chat-container .right .write .write_top{
  height: 24px;
}

.chat-container .right .write .smiley {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '';
  background-image: url("../img/smiley.png");
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
.chat-container .right .write .select_file{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  vertical-align: middle;
  position:relative;
}
.chat-container .right .write #chatfile{
  filter:alpha(opacity=0);
  opacity: 0;
  width: 20px;
  height: 20px;
  display: inline-block;
  position:absolute;
  z-index: 2;
  text-indent: -9999px;
}
.chat-container .right .write .attach {
  display: inline-block;
  position:absolute;
  width: 20px;
  height: 20px;
  content: '';
  background-image: url("../img/attachment.png");
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  z-index: 1;
}
.chat-container .right .write #send_tis{
  display: inline-block;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  margin-left: 10px;
  vertical-align: middle;
  color: #999;
}
.chat-container .right .fastchat_footer .send{
  float: right;
}

.chat-container .right .bubble {
  font-size: 16px;
  position: relative;
  display: inline-block;
  clear: both;
  margin-bottom: 8px;
  padding: 13px 14px;
  vertical-align: top;
  border-radius: 5px;
}
.chat-container .right .bubble:before {
  position: absolute;
  top: 19px;
  display: block;
  width: 8px;
  height: 6px;
  content: '\00a0';
  transform: rotate(29deg) skew(-35deg);
  -webkit-transform: rotate(29deg) skew(-35deg);
}
.chat-container .right .bubble.you {
  float: left;
  color: var(--dark);
  background-color: #eceff1;
  align-self: flex-start;
}
.chat-container .right .bubble.you:before {
  left: -3px;
  background-color: #eceff1;
}
.chat-container .right .bubble.you img{
  background: #fff;
  max-width: 200px;
}
.chat-container .right .bubble.you a{
  color: var(--dark);
  text-decoration: underline;
  font-size: 14px;
}
.chat-container .right .bubble.me {
  float: right;
  color: var(--white);
  background-color: var(--blue);
  align-self: flex-end;
}
.chat-container .right .bubble.me img{
  background: var(--white);
  max-width: 200px;
}
.chat-container .right .bubble.me a{
  color: var(--white);
  text-decoration: underline;
  font-size: 14px;
}
.chat-container .right .bubble.me:before {
  right: -3px;
  background-color: var(--blue);
}
.chat-container .right .conversation-start {
  position: relative;
  float: right;
  width: 100%;
  margin: 20px 0;
  text-align: center;
}
.chat-container .right .conversation-start span {
  font-size: 14px;
  display: inline-block;
  color: var(--grey);
}
.chat-container .right .conversation-start span:before, .chat-container .right .conversation-start span:after {
  position: absolute;
  top: 10px;
  display: inline-block;
  width: 30%;
  height: 1px;
  content: '';
  background-color: var(--light);
}
.chat-container .right .conversation-start span:before {
  left: 0;
}
.chat-container .right .conversation-start span:after {
  right: 0;
}

/*搜索预选*/
.chat-container .left .search_users{
  display: none;
  position: absolute;
  top: 96px;
  margin-left: -1px;
  width: 100%;
  height: 84%;
  background: #fff;
  line-height: 40px;
  overflow-x: hidden;
  overflow-y: auto;
}
.chat-container .left .search_users :hover,.select_item{
  font-weight: bold;
}
.chat-container .left .search_users .fastchat_user{
  height: 40px;
  width: 100%;
  padding-left: 6%;
  cursor:pointer;
  margin-bottom: 10px;
}
.chat-container .left .search_users .fastchat_user img{
  height: 40px;
  width: 40px;
}
.chat-container .left .search_users .fastchat_user .name{
  margin-left: 10px;
}
.chat-container .left .search_users .fastchat_user .go_chat{
  float: right;
  margin-right: 6%;
  color: var(--blue);
  font-weight: normal !important;
}

@media screen and (max-width: 766px) {
  .chat-container .left {
    float: left;
    width: 99%;
    height: 100%;
    border: 1px solid var(--light);
    background-color: var(--white);
  }
  .chat-container .right {
    position: relative;
    float: left;
    display: none;
    width: 99%;
    height: 100%;
  }
}

/*抖动动画-代码来源于:shake.css*/
@keyframes shake-horizontal {
  2% {
  transform: translate(-6px, 0) rotate(0); }
  4% {
  transform: translate(9px, 0) rotate(0); }
  6% {
  transform: translate(-6px, 0) rotate(0); }
  8% {
  transform: translate(-2px, 0) rotate(0); }
  10% {
  transform: translate(8px, 0) rotate(0); }
  12% {
  transform: translate(-6px, 0) rotate(0); }
  14% {
  transform: translate(0px, 0) rotate(0); }
  16% {
  transform: translate(-1px, 0) rotate(0); }
  18% {
  transform: translate(9px, 0) rotate(0); }
  20% {
  transform: translate(-4px, 0) rotate(0); }
  22% {
  transform: translate(-6px, 0) rotate(0); }
  24% {
  transform: translate(-5px, 0) rotate(0); }
  26% {
  transform: translate(-9px, 0) rotate(0); }
  28% {
  transform: translate(-4px, 0) rotate(0); }
  30% {
  transform: translate(2px, 0) rotate(0); }
  32% {
  transform: translate(0px, 0) rotate(0); }
  34% {
  transform: translate(0px, 0) rotate(0); }
  36% {
  transform: translate(1px, 0) rotate(0); }
  38% {
  transform: translate(-1px, 0) rotate(0); }
  40% {
  transform: translate(0px, 0) rotate(0); }
  42% {
  transform: translate(1px, 0) rotate(0); }
  44% {
  transform: translate(-8px, 0) rotate(0); }
  46% {
  transform: translate(-8px, 0) rotate(0); }
  48% {
  transform: translate(8px, 0) rotate(0); }
  50% {
  transform: translate(3px, 0) rotate(0); }
  52% {
  transform: translate(-4px, 0) rotate(0); }
  54% {
  transform: translate(3px, 0) rotate(0); }
  56% {
  transform: translate(-8px, 0) rotate(0); }
  58% {
  transform: translate(0px, 0) rotate(0); }
  60% {
  transform: translate(-9px, 0) rotate(0); }
  62% {
  transform: translate(-4px, 0) rotate(0); }
  64% {
  transform: translate(2px, 0) rotate(0); }
  66% {
  transform: translate(1px, 0) rotate(0); }
  68% {
  transform: translate(-7px, 0) rotate(0); }
  70% {
  transform: translate(-8px, 0) rotate(0); }
  72% {
  transform: translate(5px, 0) rotate(0); }
  74% {
  transform: translate(-7px, 0) rotate(0); }
  76% {
  transform: translate(6px, 0) rotate(0); }
  78% {
  transform: translate(-6px, 0) rotate(0); }
  80% {
  transform: translate(4px, 0) rotate(0); }
  82% {
  transform: translate(-8px, 0) rotate(0); }
  84% {
  transform: translate(-3px, 0) rotate(0); }
  86% {
  transform: translate(2px, 0) rotate(0); }
  88% {
  transform: translate(-1px, 0) rotate(0); }
  90% {
  transform: translate(1px, 0) rotate(0); }
  92% {
  transform: translate(-5px, 0) rotate(0); }
  94% {
  transform: translate(-8px, 0) rotate(0); }
  96% {
  transform: translate(0px, 0) rotate(0); }
  98% {
  transform: translate(-8px, 0) rotate(0); }
  0%, 100% {
  transform: translate(0, 0) rotate(0); }
}

.fastchat-shake-horizontal {
  transform-origin: center center;
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 4;
}