chat.css

@charset "UTF-8";
:root {
  /* 全体の背景色 */
  --background-color: #444;
  /* メッセージを区切る線の色 */
  --divider-color: #ffffff4a;
  /* 名前の文字サイズ（名前の文字色は標準でいじれるらしい） */
  --name-size: 15px;
  /* 日付の文字色・サイズ */
  --datetime-color: rgb(252, 89, 89);
  --datetime-size: 0.875rem;
  /* 本文の文字色とサイズ */
  --main-text-color: #a7ff70ef;
  --main-text-size: 0.875rem;
  /* 判定成功/失敗時の文字色 */
  --main-text-success-color: rgb(71, 197, 255);
  --main-text-failed-color: #e00d3e;
  /* アイコン画像のサイズと丸み */
  --icon-size: 40px;
  --icon-radius: 8px;
  /* スクロールバーの色と丸み */
  --scroll-bar-color: #506f7c7a;
  --scroll-bar-radius: 8px;
}

.MuiPaper-elevation0 {
  background-color: var(--background-color);
}

.MuiTypography-subtitle2 {
  font-size: var(--name-size);
}

.MuiTypography-caption {
  font-size: var(--datetime-size);
  color: var(--datetime-color) !important;
}

.MuiTypography-body2 {
  font-size: var(--main-text-size);
  color: var(--main-text-color);
}

.css-1l6qhgm {
  color: var(--main-text-success-color) !important;
}

.css-1j13mke {
  color: var(--main-text-failed-color) !important;
}

.MuiDivider-light {
  background-color: var(--divider-color);
}

.MuiListItemAvatar-alignItemsFlexStart {
  min-width: none !important;
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0 8px;
}
.MuiListItemAvatar-alignItemsFlexStart div {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--icon-radius);
}
.MuiListItemAvatar-alignItemsFlexStart div img {
  width: 100%;
  display: block;
}

body {
  background-color: transparent;
}

header.MuiPaper-elevation4 {
  display: none;
}

form > :not(header) {
  display: none !important;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scroll-bar-color);
  border-radius: var(--scroll-bar-radius);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}