☰

Gartic chat with avatars

Adds avatars to the chat.

如何安装

您需要先安装一个扩展，例如 篡改猴、Greasemonkey 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 暴力猴，之后才能安装此脚本。

您需要先安装一个扩展，例如 篡改猴 或 Userscripts ，之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展，例如 Tampermonkey，才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

（我已经安装了用户脚本管理器，让我安装！）

如何安装

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展，比如 Stylus，才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

（我已经安装了用户样式管理器，让我安装！） 

// ==UserScript==
// @name        Gartic chat with avatars
// @namespace   Violentmonkey Scripts
// @description Adds avatars to the chat.
// @icon        https://gartic.io/favicon.ico
// @match       *://gartic.io/*
// @license     Mit
// @version     1.0.2
// @grant       GM_addStyle
// @author      Mops
// ==/UserScript==

GM_addStyle(`
#screenRoom .ctt #interaction #chat .history .msg {
  --avatar-size: 24px;
}

#screenRoom .ctt #interaction #chat .history .msg div:not(.avatar) > strong + span {
  display: block;
}

#screenRoom .ctt #interaction #chat .history .msg .avatar {
  display: block !important;
  width: var(--avatar-size);
  height: var(--avatar-size);
  min-width: var(--avatar-size);
  background-size: contain;
}

#screenRoom .ctt #interaction #chat .history .msg:has(.avatar) {
  display: flex;
  gap: 5px;
}
`)