|
body { |
|
font-family: Nasu, sans-serif; /*'使いたいフォント名' */ |
|
font-weight: 400; /* フォントのウェイト */ |
|
background-color: rgba(0, 0, 0, 0); |
|
margin: 0px auto; overflow: hidden; |
|
--yt-live-chat-background-color: rgba(255, 255, 255, 0.3); /* チャット背景 */ |
|
--yt-live-chat-action-panel-background-color: transparent; /* いじらない */ |
|
--yt-live-chat-action-panel-background-color-transparent: transparent; /* いじらない */ |
|
--yt-live-chat-mode-change-background-color: transparent; /* いじらない */ |
|
--yt-live-chat-message-background-color: rgba(255, 255, 255, 0); /* 一般ユーザーのコメント背景 */ |
|
--yt-live-chat-message-highlight-background-color: rgba(255, 128, 128, 0.1); /* 配信主/モデレーターのコメント背景 */ |
|
--yt-live-chat-secondary-text-color: #333; /* 一般ユーザーの名前の文字色 */ |
|
--message-shadow-color: #fff; /* コメントのふちどりの色 */ |
|
--message-shadow: var(--message-shadow-color) 2px 0px, var(--message-shadow-color) -2px 0px, var(--message-shadow-color) 0px -2px, var(--message-shadow-color) 0px 2px, var(--message-shadow-color) 2px 2px , var(--message-shadow-color) -2px 2px, var(--message-shadow-color) 2px -2px, var(--message-shadow-color) -2px -2px, var(--message-shadow-color) 1px 2px, var(--message-shadow-color) -1px 2px, var(--message-shadow-color) 1px -2px, var(--message-shadow-color) -1px -2px, var(--message-shadow-color) 2px 1px, var(--message-shadow-color) -2px 1px, var(--message-shadow-color) 2px -1px, var(--message-shadow-color) -2px -1px; |
|
/* ↑コメントのふちどりの指定 (2pxぶん) */ |
|
--img-size: 48px; /* 画像サイズ */ |
|
--yt-live-chat-emoji-size: 42px; /* 絵文字サイズ */ |
|
--author-bardge-size: 42px; /* バッジサイズ */ |
|
--live-chat-author-icon-size: 75px; /* スーパーチャットアイコンサイズ */ |
|
} |
|
|
|
yt-live-chat-header-renderer { |
|
/* ヘッダーを非表示 */ |
|
display: none; |
|
} |
|
#ticker { |
|
display: none; |
|
} |
|
#panel-pages { |
|
/* コメントを書き込む部分を非表示 */ |
|
display: none; |
|
} |
|
yt-live-chat-viewer-engagement-message-renderer { |
|
/* ポリシーなんたらを非表示 */ |
|
display: none; |
|
} |
|
yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer { |
|
/* スクロールバーを消す */ |
|
overflow-y: hidden |
|
} |
|
|
|
yt-live-chat-text-message-renderer { |
|
padding: 6px 16px /* コメントの余白 */ |
|
} |
|
|
|
yt-live-chat-text-message-renderer[author-type=""] { |
|
/* 一般ユーザーのコメントにも背景色を */ |
|
background: var(--yt-live-chat-message-background-color) |
|
} |
|
|
|
#author-name.yt-live-chat-author-chip { |
|
/* ユーザー名チップ */ |
|
border-radius: 6px; /* 角はもうすこし丸みをつける */ |
|
font-weight: 700; /* 太字 */ |
|
} |
|
|
|
.yt-live-chat-text-message-renderer { |
|
font-size: 32px; /* フォントサイズ */ |
|
} |
|
|
|
#author-photo.yt-live-chat-text-message-renderer { |
|
margin-right: 8px; /* 画像と名前の間隔 */ |
|
} |
|
|
|
img.yt-img-shadow { |
|
/* 画像の高さ・幅を定義 */ |
|
width: var(--img-size); |
|
height: var(--img-size); |
|
} |
|
|
|
#author-name.yt-live-chat-author-chip { |
|
padding: 2px 4px; |
|
} |
|
|
|
#author-name.yt-live-chat-author-chip[type=""] { |
|
/* 一般ユーザーの名前にも背景を付けたい */ |
|
background-color: #fff !important; |
|
} |
|
|
|
img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer { |
|
/* 名前バッジ */ |
|
width: var(--author-bardge-size); |
|
height: var(--author-bardge-size); |
|
} |
|
|
|
#author-name.yt-live-chat-author-chip[type="member"] { |
|
/* スポンサーの名前にも背景を付けたい */ |
|
background-color: #0a0; |
|
--yt-live-chat-sponsor-color: #fff; /* 文字色を変える */ |
|
} |
|
|
|
#author-name.yt-live-chat-author-chip[type="moderator"] { |
|
/* モデレーター */ |
|
background-color: rgb(95, 132, 241); /* 背景色 */ |
|
--yt-live-chat-moderator-color: #fff; /* 文字色を変える */ |
|
} |
|
|
|
.yt-live-chat-text-message-renderer#message { |
|
/* テキストをふちどる */ |
|
text-shadow: var(--message-shadow) |
|
} |
|
|
|
/* スーパーチャット&新規メンバー */ |
|
yt-live-chat-paid-message-renderer, yt-live-chat-legacy-paid-message-renderer { |
|
padding: 6px 16px; |
|
} |
|
|
|
yt-live-chat-paid-message-renderer, |
|
#card.yt-live-chat-legacy-paid-message-renderer, |
|
#detail-text.yt-live-chat-legacy-paid-message-renderer { |
|
font-size: 36px |
|
} |
|
|
|
#author-name.yt-live-chat-paid-message-renderer, |
|
#event-text.yt-live-chat-legacy-paid-message-renderer { |
|
font-size: 32px; |
|
} |
|
|
|
#content.yt-live-chat-paid-message-renderer, |
|
#card.yt-live-chat-legacy-paid-message-renderer, |
|
#header.yt-live-chat-paid-message-renderer { |
|
padding: 14px 28px |
|
} |
|
|
|
#header.yt-live-chat-paid-message-renderer { |
|
border-top-left-radius: 8px; |
|
border-top-right-radius: 8px; |
|
} |
|
|
|
yt-live-chat-paid-message-renderer[show-only-header] #header.yt-live-chat-paid-message-renderer { |
|
border-bottom-left-radius: 8px; |
|
border-bottom-right-radius: 8px; |
|
} |
|
|
|
#card.yt-live-chat-legacy-paid-message-renderer, |
|
#card.yt-live-chat-paid-message-renderer { |
|
border-radius: 8px |
|
} |
|
|
|
#author-photo.yt-live-chat-paid-message-renderer, |
|
#author-photo.yt-live-chat-paid-message-renderer > img, |
|
#author-photo.yt-live-chat-legacy-paid-message-renderer > img { |
|
width: var(--live-chat-author-icon-size); |
|
height: var(--live-chat-author-icon-size); |
|
} |
