Если понравился мини-чат с новым дизайном,
можете взять его здесь - это рабочая версия.

CSS

Код

<style>
/* Контейнер чата */
.chat-messages {
  max-height: 600px;
  overflow-y: auto;
  padding: 4px;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
  font-size: 11px;
  line-height: 1.3em;
  color: #3d1f5a;
  background-color: #f7f3f8;
}

/* Общий блок сообщения */
.chat-message-block {
  position: relative;
  margin-bottom: 6px;
  padding: 2px;
  overflow: hidden;
}

/* Аватар */
.chatAvatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ccc;
  transition: transform 0.2s, box-shadow 0.2s;
  vertical-align: top;
  margin-right: 6px;
}

.chatAvatar img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

/* Текст сообщений */
.chat-message-text {
  background-color: #D9B8E2; /* фиолетовый фон */
  border-radius: 28px 6px 6px 6px; /* левый верхний сильно, левый нижний слегка */
  padding: 6px 10px;
  display: block;
  width: calc(100% - 10px); /* почти до края блока */
  color: #3d1f5a;
  font-size: 11px;
  line-height: 1.3em;
  box-sizing: border-box;
  word-wrap: break-word;
}

/* Сообщение справа */
.chat-message-block.right .chat-message-text {
  border-radius: 6px 28px 6px 28px; /* верхний правый сильно, нижний правый слегка */
}

/* Имя пользователя */
.chat-post-author a {
  color: #4b1d6f;
  font-weight: bold;
  text-decoration: none;
  font-size: 11px;
}

/* Дата/время */
.small {
  font-size: 9px;
  color: #555;
}

/* Кнопки */
.chat-button {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-left: 2px;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
}

.chat-message-block:hover .chat-button {
  opacity: 1;
}

.chat-button:hover {
  transform: scale(1.2);
}

/* Скролл */
.chat-messages::-webkit-scrollbar {
  width: 5px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-track {
  background-color: #eee;
}
</style>

HTML-код с элементами PHP-шаблонизации.

Код

<div class="chat-messages">
  <div class="chat-message-block left">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tbody>
        <tr>
          <td width="40">
            <span class="chatAvatar">
              <?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/template/chatok/noavatar.png"><?endif?>
            </span>
          </td>
          <td>
            <div style="float:right; margin-right:5px;">
              <span class="chat-button chat-reply tipsy-top" title="Ответить"
              href="javascript:void('Apply to')"
              onclick="parent.window.document.getElementById('asrea').focus();parent.window.document.getElementById('mchatMsgF').value+='[b]$USERNAME$[/b], ';return false;">
              </span>
            </div>
            <b class="chat-post-author">
              <?if($USER_ID$='1')?><a href="$PROFILE_URL$">$USERNAME$</a><?else?><a href="$PROFILE_URL$">$USERNAME$</a><?endif?>
            </b>
            <br>
            <span class="small">$DATE$ в $TIME$</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="chat-message-text">
      $MESSAGE$
    </div>
  </div>
</div>

На главной странице форума можете увидеть наглядный пример работы чата с новым дизайном.
Оцените удобство, стиль и функциональность прямо сейчас!

Мурчанн

1