@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosansjp.css");
/*
コメントの縦位置　ランダムとスタティックの2種類どちらかを選んでください
デフォルトではランダムにしてあります

Youtubeの仕様上、一定コメント数以上が消去されます
要素の上からn個目という指定方法の為、最上部のコメントが消えるたびに位置が一つ繰り上がります
コメント数が多すぎる場合は、ランダムだと画面上をコメントががっちゃがっちゃ動くのでスタティックがオススメ
*/
@import url("https://nmnm.mn/youtube/scroll_random_words.css");
/*@import url("https://nmnm.mn/youtube/scroll_random.css");*/
/*@import url("https://nmnm.mn/youtube/scroll_static.css");*/
:root {
  /*メインテキスト,チャンネルアイコンサイズ*/
  --cs-font-size: 50px;
  /*テキストカラー*/
  --cs-font-color: #fff;
  /*配信者名前カラー*/
  --cs-live-chat-owner-color: #ffd600;
  /*モデレーター名前カラー*/
  --cs-live-chat-moderator-color: #5e84f1;
  /*メンバー名前カラー*/
  --cs-live-chat-sponsor-color: #107516;
  /*テキストふちどりカラー*/
  --cs-font-rim-color: #000;
  /*名前テキスト倍率　--cs-font-sizeに対する倍率　0で非表示*/
  --cs-name-ratio: 0.66;
  /*アイコン倍率　--cs-font-sizeに対する倍率　0で非表示*/
  --cs-icon-ratio: 1;
  /*アイコン枠線　単位px 0で非表示*/
  --cs-icon-bdw: 2px;
  /*コメントスクロール時間*/
  --cs-com-scroll: 9s;
  /*コメント繰り上がりアニメーション時間*/
  --cs-com-anim: 0.4s;
}

/*

v1.2 - 2023.05.07
スクロールアニメーションの名前が、youtube仕様変更の際追加されたアニメーションキーフレーム名と偶然一致していたため、
スクロールが実行されていなかった不具合を解消しました

v1.1.1
テキスト色変更用の変数名を修正
Youtubeデフォルトと共通だったので上書きできなかったみたい

v1.1
2019/06ごろからモデレーターなどの名前に色がつかなくなっていたようだったのを修正

v1.0
OBS用コメントスクロールcss正式版
各種調整用カスタムプロパティを実装
任意で表現を調整することができるようになりました

また、元ネタの動画サイトと直接連絡を取りましたので、
その辺りの話と旧バージョン仕様についてはこちらを参照ください。

https://nmnm.mn/youtube/custom_niconico.css

*/
yt-live-chat-paid-message-renderer #chat-badges,
yt-live-chat-paid-sticker-renderer #chat-badges,
yt-live-chat-text-message-renderer #chat-badges,
yt-live-chat-legacy-paid-message-renderer #chat-badges, #menu, #timestamp, yt-live-chat-message-input-renderer,
yt-live-chat-viewer-engagement-message-renderer, #reaction-control-panel-overlay, yt-live-chat-docked-message#docked-messages.yt-live-chat-item-list-renderer,
yt-live-chat-banner-manager#live-chat-banner.yt-live-chat-item-list-renderer,
yt-live-chat-header-renderer.yt-live-chat-renderer {
  display: none !important;
}

yt-live-chat-renderer,
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted],
yt-live-chat-text-message-renderer[author-type=owner],
yt-live-chat-text-message-renderer[author-type=owner][is-highlighted],
yt-live-chat-text-message-renderer[author-type=moderator],
yt-live-chat-text-message-renderer[author-type=moderator][is-highlighted],
yt-live-chat-text-message-renderer[author-type=member],
yt-live-chat-text-message-renderer[author-type=member][is-highlighted],
yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}

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

yt-live-chat-item-list-renderer,
yt-live-chat-item-list-renderer #items {
  height: 100vh;
}

yt-live-chat-item-list-renderer #items,
yt-live-chat-item-list-renderer #item-scroller {
  overflow: hidden !important;
}

yt-live-chat-paid-message-renderer *,
yt-live-chat-paid-sticker-renderer *,
yt-live-chat-text-message-renderer *,
yt-live-chat-legacy-paid-message-renderer * {
  font-family: "Noto Sans JP";
  color: var(--cs-font-color) !important;
  font-size: var(--cs-font-size) !important;
  line-height: var(--cs-font-size) !important;
  white-space: nowrap;
  overflow: visible;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  text-shadow: -1px -1px var(--cs-font-rim-color), -1px 0px var(--cs-font-rim-color), -1px 1px var(--cs-font-rim-color), 0px -1px var(--cs-font-rim-color), 0px 0px var(--cs-font-rim-color), 0px 1px var(--cs-font-rim-color), 1px -1px var(--cs-font-rim-color), 1px 0px var(--cs-font-rim-color), 1px 1px var(--cs-font-rim-color);
}

yt-img-shadow #img,
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-sticker-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
  border-radius: 0 !important;
  margin-right: 0 !important;
}
yt-img-shadow #img #img,
yt-live-chat-text-message-renderer #author-photo #img,
yt-live-chat-paid-sticker-renderer #author-photo #img,
yt-live-chat-paid-message-renderer #author-photo #img,
yt-live-chat-legacy-paid-message-renderer #author-photo #img {
  border-radius: var(--cs-font-size) !important;
  margin-right: 6px !important;
  width: calc(var(--cs-font-size) * var(--cs-icon-ratio));
  height: calc(var(--cs-font-size) * var(--cs-icon-ratio));
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: bottom;
  border-radius: 100%;
  border: #fff var(--cs-icon-bdw) solid;
}

yt-live-chat-text-message-renderer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

yt-live-chat-paid-message-renderer #card,
yt-live-chat-paid-sticker-renderer #card,
yt-live-chat-legacy-paid-message-renderer #card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
yt-live-chat-paid-message-renderer #author-info,
yt-live-chat-paid-sticker-renderer #author-info,
yt-live-chat-legacy-paid-message-renderer #author-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
yt-live-chat-paid-message-renderer #header,
yt-live-chat-paid-sticker-renderer #header,
yt-live-chat-legacy-paid-message-renderer #header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
yt-live-chat-paid-message-renderer #header-content-primary-column,
yt-live-chat-paid-message-renderer #content-primary-column,
yt-live-chat-paid-sticker-renderer #header-content-primary-column,
yt-live-chat-paid-sticker-renderer #content-primary-column,
yt-live-chat-legacy-paid-message-renderer #header-content-primary-column,
yt-live-chat-legacy-paid-message-renderer #content-primary-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  font-size: calc(var(--cs-font-size) * var(--cs-name-ratio)) !important;
  line-height: calc(var(--cs-font-size) * var(--cs-name-ratio)) !important;
  margin-right: 6px;
}
yt-live-chat-paid-message-renderer #header-content-primary-column #purchase-amount,
yt-live-chat-paid-message-renderer #header-content-primary-column #purchase-amount-chip,
yt-live-chat-paid-message-renderer #content-primary-column #purchase-amount,
yt-live-chat-paid-message-renderer #content-primary-column #purchase-amount-chip,
yt-live-chat-paid-sticker-renderer #header-content-primary-column #purchase-amount,
yt-live-chat-paid-sticker-renderer #header-content-primary-column #purchase-amount-chip,
yt-live-chat-paid-sticker-renderer #content-primary-column #purchase-amount,
yt-live-chat-paid-sticker-renderer #content-primary-column #purchase-amount-chip,
yt-live-chat-legacy-paid-message-renderer #header-content-primary-column #purchase-amount,
yt-live-chat-legacy-paid-message-renderer #header-content-primary-column #purchase-amount-chip,
yt-live-chat-legacy-paid-message-renderer #content-primary-column #purchase-amount,
yt-live-chat-legacy-paid-message-renderer #content-primary-column #purchase-amount-chip {
  font-weight: bold;
  vertical-align: baseline;
}

#sticker-container img {
  width: 40px;
  height: 40px;
}

yt-live-chat-paid-message-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  padding: 5px !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}
yt-live-chat-paid-message-renderer img.yt-live-chat-author-badge-renderer,
yt-live-chat-paid-message-renderer yt-icon.yt-live-chat-author-badge-renderer,
yt-live-chat-paid-sticker-renderer img.yt-live-chat-author-badge-renderer,
yt-live-chat-paid-sticker-renderer yt-icon.yt-live-chat-author-badge-renderer,
yt-live-chat-text-message-renderer img.yt-live-chat-author-badge-renderer,
yt-live-chat-text-message-renderer yt-icon.yt-live-chat-author-badge-renderer,
yt-live-chat-legacy-paid-message-renderer img.yt-live-chat-author-badge-renderer,
yt-live-chat-legacy-paid-message-renderer yt-icon.yt-live-chat-author-badge-renderer {
  width: calc(var(--cs-font-size) * var(--cs-name-ratio));
  height: calc(var(--cs-font-size) * var(--cs-name-ratio));
  padding: 0;
}
yt-live-chat-paid-message-renderer #author-name.yt-live-chat-author-chip,
yt-live-chat-paid-message-renderer yt-live-chat-author-badge-renderer,
yt-live-chat-paid-sticker-renderer #author-name.yt-live-chat-author-chip,
yt-live-chat-paid-sticker-renderer yt-live-chat-author-badge-renderer,
yt-live-chat-text-message-renderer #author-name.yt-live-chat-author-chip,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer,
yt-live-chat-legacy-paid-message-renderer #author-name.yt-live-chat-author-chip,
yt-live-chat-legacy-paid-message-renderer yt-live-chat-author-badge-renderer {
  font-size: calc(var(--cs-font-size) * var(--cs-name-ratio)) !important;
  line-height: calc(var(--cs-font-size) * var(--cs-name-ratio)) !important;
}
yt-live-chat-paid-message-renderer #author-name.yt-live-chat-author-chip:after,
yt-live-chat-paid-message-renderer yt-live-chat-author-badge-renderer:after,
yt-live-chat-paid-sticker-renderer #author-name.yt-live-chat-author-chip:after,
yt-live-chat-paid-sticker-renderer yt-live-chat-author-badge-renderer:after,
yt-live-chat-text-message-renderer #author-name.yt-live-chat-author-chip:after,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer:after,
yt-live-chat-legacy-paid-message-renderer #author-name.yt-live-chat-author-chip:after,
yt-live-chat-legacy-paid-message-renderer yt-live-chat-author-badge-renderer:after {
  content: ":";
}
yt-live-chat-paid-message-renderer #author-name.yt-live-chat-author-chip.owner,
yt-live-chat-paid-message-renderer yt-live-chat-author-badge-renderer.owner,
yt-live-chat-paid-sticker-renderer #author-name.yt-live-chat-author-chip.owner,
yt-live-chat-paid-sticker-renderer yt-live-chat-author-badge-renderer.owner,
yt-live-chat-text-message-renderer #author-name.yt-live-chat-author-chip.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer.owner,
yt-live-chat-legacy-paid-message-renderer #author-name.yt-live-chat-author-chip.owner,
yt-live-chat-legacy-paid-message-renderer yt-live-chat-author-badge-renderer.owner {
  color: var(--cs-live-chat-owner-color) !important;
}
yt-live-chat-paid-message-renderer #author-name.yt-live-chat-author-chip.moderator,
yt-live-chat-paid-message-renderer yt-live-chat-author-badge-renderer.moderator,
yt-live-chat-paid-sticker-renderer #author-name.yt-live-chat-author-chip.moderator,
yt-live-chat-paid-sticker-renderer yt-live-chat-author-badge-renderer.moderator,
yt-live-chat-text-message-renderer #author-name.yt-live-chat-author-chip.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer.moderator,
yt-live-chat-legacy-paid-message-renderer #author-name.yt-live-chat-author-chip.moderator,
yt-live-chat-legacy-paid-message-renderer yt-live-chat-author-badge-renderer.moderator {
  color: var(--cs-live-chat-moderator-color) !important;
}
yt-live-chat-paid-message-renderer #author-name.yt-live-chat-author-chip.member,
yt-live-chat-paid-message-renderer yt-live-chat-author-badge-renderer.member,
yt-live-chat-paid-sticker-renderer #author-name.yt-live-chat-author-chip.member,
yt-live-chat-paid-sticker-renderer yt-live-chat-author-badge-renderer.member,
yt-live-chat-text-message-renderer #author-name.yt-live-chat-author-chip.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer.member,
yt-live-chat-legacy-paid-message-renderer #author-name.yt-live-chat-author-chip.member,
yt-live-chat-legacy-paid-message-renderer yt-live-chat-author-badge-renderer.member {
  color: var(--cs-live-chat-sponsor-color) !important;
}
yt-live-chat-paid-message-renderer #message img,
yt-live-chat-paid-sticker-renderer #message img,
yt-live-chat-text-message-renderer #message img,
yt-live-chat-legacy-paid-message-renderer #message img {
  width: calc(var(--cs-font-size) * 1) !important;
  height: calc(var(--cs-font-size) * 1) !important;
  margin: 0 3px;
}

yt-live-chat-paid-message-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  -webkit-animation: scrollanim var(--cs-com-scroll) linear;
          animation: scrollanim var(--cs-com-scroll) linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  z-index: 100;
  -webkit-transition: top var(--cs-com-anim);
  -o-transition: top var(--cs-com-anim);
  transition: top var(--cs-com-anim);
}

@-webkit-keyframes scrollanim {
  0% {
    -webkit-transform: translate(0%);
            transform: translate(0%);
    left: 100%;
  }
  100% {
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
    left: 0%;
  }
}

@keyframes scrollanim {
  0% {
    -webkit-transform: translate(0%);
            transform: translate(0%);
    left: 100%;
  }
  100% {
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
    left: 0%;
  }
}