見出し画像

雑談タブ表示｜ココフォリアカスタムCSS

カイゲ

- TRPGをオンラインで遊ぶにあたり、オンラインセッションツール『ココフォリア』を使用することが多い
- 楽しく遊べればそれでいいんだけど、せっかくなら後で見返せるようにログを残しておきたい
- せっかくならログを見やすく＆プレイ当時の印象が思い出せるような画面にしてみたい

元記事：OBSでココフォリアを録画するときのカスタムCSS

今回はチャットの雑談タブのカスタムCSSです。

OBSでの使用イメージ ちょっとみづらいか…？

参考にさせていただきました

Made by 葉桜ヨウ
YouTube：https://www.youtube.com/channel/UCtEKNmkUAj02lI3TtY6U0SA
Twitter：https://twitter.com/you_hzkr

you-custom-css クレジット記載より

魔改造しています（CSS）

タブを雑談に移動しないといけないので残しています OBS「対話」で切り替え&トリミング
切り替えを毎度忘れる　困る
/**************************
 設定変更箇所
**************************/

:root {
  /** 表示行数の上限 */
  --line-clamp: auto;
  /** ダイス結果の上下揃えの設定 */
  --is-top: auto; /* 上揃えの場合⇒0、下揃えの場合⇒auto */
  --is-bottom: 0; /* 上揃えの場合⇒auto、下揃えの場合⇒0 */
  /** ダイス結果背景 */
  --width: auto; /** 結果の横幅 */
  --background-color: rgba(0, 0, 0, 0); /** 背景色 */
  --background-padding: 0; /** 外枠と文字の隙間 */
  --border-color: rgba(255, 255, 255, 0); /** 枠線の色 */
  --border-image: url(https://xxx/yyy.png); /** 枠線に画像を使用 */
  --border-slice: 0px; /** 枠線画像の太さ */
  --border-width: 0px; /** 枠線の幅 */
  --border-radius: 0px; /** 角の丸み */
  --border-shadow: none; /** 読み方）X軸 Y軸 影の幅 色 */
  --result-space: 3px; /** ダイス結果同士の隙間 */
  /** アイコン画像の設定 */
  --icon-radius: 50%; /** 画像の丸み：0%⇒四角、50%⇒正円 */
  --icon-background-color: transparent; /** アイコン背景色：transparentで透明 */
  --icon-width: 36px; /** 画像の横幅 */
  --icon-height: 36px; /** 画像の高さ */
  --icon-margin-top: 0px; /** アイコン上のスペース */
  --icon-margin-bottom: 0px; /** アイコン下のスペース */
  --icon-margin-left: 0px; /** アイコン左のスペース */
  --icon-margin-right: 6px; /** アイコン右のスペース */
  /** ダイス結果の文字部分（デフォルト） */
  --font-size-result: 1.125rem;
  --font-color-result: rgba(255, 255, 255, 1);
  --font-shadow-result: 0px 2px 3px black; /** 読み方）X軸 Y軸 影の幅 色 */
  /** 成功時の青文字部分 */
  --font-size-success: 1.125rem;
  --font-color-success: rgba(134, 202, 255, 1);
  --font-shadow-success: 2px 2px 3px black; /** 読み方）X軸 Y軸 影の幅 色 */
  /** 失敗時の赤文字部分 */
  --font-size-fail: 1.125rem;
  --font-color-fail: rgba(255, 161, 161, 1);
  --font-shadow-fail: 0px 2px 3px black;/** 読み方）X軸 Y軸 影の幅 色 */
  /** ユーザ名の部分 */
  --font-size-user-name: 1rem;
  --font-color-user-name: rgba(255, 255, 255, 1);
  --font-shadow-user-name: 2px 2px 3px black; /** 読み方）X軸 Y軸 影の幅 色 */
  /** ダイスを振った時間を表示するか */
  --disp-dice-time: transparent; /** none⇒表示しない、transparent⇒表示する */
  --font-size-dice-time: 0rem;
  --font-color-dice-time: rgba(255, 255, 255, 0.6);
  --font-shadow-dice-time: 2px 2px 3px black; /** 読み方）X軸 Y軸 影の幅 色 */
}

/**************************
 OBS用のおまじない
**************************/

body {
  background-color: rgba(0, 0, 0, 0);
  margin: 0px auto;
  overflow: hidden;
}

/**************************
 非表示要素の設定
**************************/

/** ツールバー */
.MuiToolbar-regular,
/** ダイス結果 */
.MuiPaper-elevation1,
/** チャット入力欄の削除 */
.MuiPaper-root > form,
/** 背景の非表示 */
#root>div>div:nth-child(2),
/** 前景全体 */
#root>div>div:nth-child(3),
/** 監視モード注釈の削除 */
.MuiSnackbar-root,
/** 広告の削除 */
.MuiDialog-root {
  display: none !important;
}

/**************************
　デザイン
**************************/

/**　右側全体 */
.MuiDrawer-root > .MuiPaper-root {
  /** チャットがアニメーションする幅を確保 */
  width: 100% !important;
}

/** ダイス結果間の境界線 */
hr {
  display: none !important;
}

/**　ダイス結果 */
.MuiList-root > div > div > div {
  padding: var(--background-padding) !important;
  background: none !important;
  border: solid var(--border-width) var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  border-image-source: var(--border-image) !important;
  border-image-slice: var(--border-slice) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  box-sizing: border-box !important;
  box-shadow: var(--border-shadow) !important;
  align-items: center !important;
  /** ダイス結果の横幅を設定 */
  width: var(--width) !important;
  height: auto !important;
  position: relative !important;
  top: 0 !important;
  /** ダイス結果同士の距離感を設定 */
  margin: var(--result-space) !important;
  /** 要素の高さを持ってる子要素に合わせる */
  height: auto !important;
  min-height: auto !important;
  /** ダイス結果の横幅を設定 */
  width: var(--width) !important;
  /** top,leftなどの影響を受けないようにする */
  position: relative !important;
  /* 他の要素のサイズで箱の要素の横幅が変わらないよう固定 */
  flex-shrink: 0 !important;
  /** 自動で設定されるtopをリセットする */
  top: 0 !important;
  /** ダイス結果をすべて非表示に。外出しした設定にimportantを付けることで設定した個数だけ表示する */
  display: none;
}

/**　チャット欄アイコン入れ物 */
.MuiListItemAvatar-root {
  min-width: unset;
  margin-top: var(--icon-margin-top) !important;
  margin-bottom: var(--icon-margin-bottom) !important;
  margin-left: var(--icon-margin-left) !important;
  margin-right: var(--icon-margin-right) !important;
}
/**　チャット欄アイコン背景 */
.MuiListItemAvatar-root > div {
  width: var(--icon-width) !important;
  height: var(--icon-height) !important;
  background: var(--icon-background-color) !important;
  border-radius: var(--icon-radius) !important;
}
/** チャット欄アイコン画像 */
.MuiListItemAvatar-root img {
  width: var(--icon-width) !important;
}

/**　右側背景 */
.MuiPaper-root {
  background-color: rgba(0, 0, 0, 0) !important;
}

/** ダイス結果のスクロールを発生させないよう高さを指定 */
.MuiList-root > div {
  height: 100% !important;
}
.MuiList-root > div > div {
  position: absolute !important;
  /** ダイス結果の上揃え、下揃えを設定 */
  top: var(--is-top) !important;
  bottom: var(--is-bottom) !important;
}

/* ダイス結果欄のテキストすべてを囲う要素 */
.MuiListItemText-root {
  /* ダイス結果が長すぎて四角をはみ出た場合に、はみ出し部分を表示しない */
  overflow: hidden !important;
}

/** ダイス結果テキスト（ユーザ名などを除く） */
p.MuiTypography-root {
  /** -webkit-line-clampを有効にするためのおまじない */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  /* ダイス結果の上限行数を指定(超えると…表示になる) */
  -webkit-line-clamp: var(--line-clamp) !important;
  color: var(--font-color-result) !important;
  text-shadow: var(--font-shadow-result) !important;
  font-size: var(--font-size-result) !important;
}

/** 成功時の青文字部分 */
.MuiTypography-colorPrimary {
  color: var(--font-color-success) !important;
  text-shadow: var(--font-shadow-success) !important;
  font-size: var(--font-size-success) !important;
}

/* 失敗時の赤字部分 */
.MuiTypography-colorSecondary {
  color: var(--font-color-fail) !important;
  text-shadow: var(--font-shadow-fail) !important;
  font-size: var(--font-size-fail) !important;
}

/** ダイス結果（1D100）など */
.MuiTypography-colorTextSecondary {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* ユーザ名、ダイスを振った時間 */
.MuiListItemText-primary,
.MuiTypography-caption {
  /** ユーザ名を設定した色にしたい場合はここ（color）を削除する */
/*   color: var(--font-color-user-name) !important; */
  text-shadow: var(--font-shadow-user-name) !important;
  font-size: var(--font-size-user-name) !important;
}
.MuiListItemText-primary {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: -1;
  border-radius: 999px;
  width: 38px;
  height: 38px;
}

.MuiListItemText-primary::before {
  width: 38px;
  height: 38px;
  content: "";
  display: block;
  background-color: currentcolor;

}
/* ダイスを振った時間 */
span.MuiTypography-root.MuiTypography-caption {
  display: var(--disp-dice-time) !important;
  color: var(--font-color-dice-time) !important;
  text-shadow: var(--font-shadow-dice-time) !important;
  font-size: var(--font-size-dice-time) !important;
}
.MuiList-root>div>div>div {
  /* アニメーション名の指定：@keyframesと名前をそろえる */
  animation-name: fadeBottomToTop;
  /* 再生時間：短いほどフェードインが早くなる */
  animation-duration: 8s;
  /* アニメーション終了後の動き
  　：forwards⇒最後の状態を保持、backwards⇒最初に戻る */
  animation-fill-mode:forwards;
  /* 繰り返し回数 */
  animation-iteration-count:1;
  /* 滑らかに動くためのおまじない */
  animation-timing-function:ease;
  /* 表示されてからアニメーション開始するまでの時間 */
  animation-delay: 0s;
  /* 気にしないでください */
    animation-direction:normal;
}

@keyframes fadeBottomToTop {
  0% {
    /* 透明度：0⇒透明、1⇒不透明 */
    opacity: 0;
    /* 横の動き */
    transform: translateY(50px);
  }

  10% {
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

.MuiList-root>div>div>div:nth-last-child(-n+3){
  display: block !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

:root {
  --icon-width: 36px !important; /** 画像の横幅 */
  --icon-height: 36px !important; /** 画像の高さ */
  --font-color-success: rgb(255 255 255) !important;
  --font-color-fail: rgb(255 255 255) !important;
  --background-color: rgba(0, 0, 0, 0.5) !important;
  --is-top: auto;/* 上揃えの場合⇒0、下揃えの場合⇒auto */
  --is-bottom: 48px;/* 上揃えの場合⇒auto、下揃えの場合⇒0 */
}

.MuiListItemAvatar-root {
  position: relative !important;
  left: 0px !important;/* アイコン画像のY座標 */
  opacity: 1 !important;/* 画像の不透明度　0：透明、1：不透明 */
  z-index: 1 !important;
  border: 1px solid #fff;
  border-radius: 999px;
}
 .MuiListItemAvatar-root img{
   position: relative !important;
   top: 0px !important;/* アイコン画像のX座標 */
}

.MuiListItemText-root {
  z-index: -1 !important;
}

.MuiListItem-root {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  overflow: visible !important;
}

.css-1l6qhgm {
    font-size: inherit;
    color: #5A7EFF;
}
.css-ucj12 {
    font-size: inherit;
    color: #fff;
}
.css-1j13mke {
  font-size: inherit;
  color: #F93844;
}

.MuiPaper-root > form {
  display: block !important;
  height: 48px;
  background-color: #000;
}

利用について

  • このCSSはココフォリアのアップデートでCSSのclassやDOM構造が変更されたら動かなくなりますが、緊急のサポートは行えません。

  • 利用報告・クレジット表記不要です。

実装メモ

  • メインタブの表示の、後ろから1番目のスタイルを上書きせず、タブ切り替えのためのUIを残したもの。

  • 背景に吹き出しとか半透明の黒とか乗せないとちょっと可読性が怪しいが…乗せると場所取る……乗せる版は気が向いたら…CSSで文字囲み線設定できるようにならんか？なってくれ


日々のコーヒー代になります！