カスタムCSSで使用できる変数

変数	説明
--yt-lcf-animation-duration	基本設定のアニメーション秒数（単位s）
--yt-lcf-font-size	基本設定の文字サイズ（単位px）
--yt-lcf-line-height	基本設定の行の高さ（単位なし）
--yt-lcf-stroke-color	縁取りの色
--yt-lcf-stroke-offset	縁取りの太さ（単位px）
--yt-lcf-stroke-blur	縁取りのぼかし（単位px）

レイヤCSSの例

• チャット表示範囲を上部80%にする: height: 80%;
• チャット表示範囲を下部80%にする: height: 80%; top: 20%;

※ 文字サイズを行数指定している状態で、heightをフォントに基づく相対単位（emなど）で指定しないでください。

種類別設定の例

• メンバーのメッセージの縁取りの色を濃い緑（#050）にする
  メンバーのカスタムCSS: --yt-lcf-stroke-color: #050;
• モデレーターのメッセージが流れるスピードを1/2にする
  モデレーターのカスタムCSS: animation-duration: calc(var(--yt-lcf-animation-duration) * 2);
• チャンネル管理者のメッセージの文字サイズを2倍にする
  チャンネル管理者のカスタムCSS: font-size: calc(var(--yt-lcf-font-size) * 2);

ユーザーCSSの例

• テキストメッセージの背景を消す

  :host > .text {
    background: none !important;
  }
  

• 名前の後を改行する

  .name::after {
    content: '\a';
  }