Как добавить чат на экран во время трансляции на youtube (ч.2)

Не так давно youtube обновил свой дизайн и советы по добавлению чата на экран во время трансляции стали не актуальны. Как оказалось, многие воспользовались описанным в статье способом, а теперь их чаты на стримах превратились в тыкву. В общем, я не волшебник, а только учусь… поэтому забирайте адаптированный для нового дизайна CSS, а как настроить OBS и куда что вставлять читайте тут.

Как добавить чат на экран во время трансляции на youtube

/* Настройка фона */
#content-pages {
background-color: rgba(0, 0, 0, 0);
-webkit-mask-image: -webkit-gradient(linear, left 10%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

body {
background-color: transparent !important;
margin: 0 auto;
overflow: hidden !important;
color: #fff !important;
width: 100%;
font-family: Roboto,arial,sans-serif,Verdana;
}

/* Прозрачность фона */
yt-live-chat-renderer {
background-color: transparent !important;
}

/* Текст в сообщениях */
yt-live-chat-renderer * {
text-shadow: -1px -1px #222222,-1px -1px #222222,-1px 0px #222222,-1px 1px #222222,-1px 1px #222222,-1px -1px #222222,-1px -1px #222222,-1px 0px #222222,-1px 1px #222222,-1px 1px #222222,0px -1px #222222,0px -1px #222222,0px 0px #222222,0px 1px #222222,0px 1px #222222,1px -1px #222222,1px -1px #222222,1px 0px #222222,1px 1px #222222,1px 1px #222222,1px -1px #222222,1px -1px #222222,1px 0px #222222,1px 1px #222222,1px 1px #222222;
font-size: 16px !important;
line-height: 18px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
overflow: initial; !important
}

/* Скрываем ненужные элементы */
yt-live-chat-item-list-renderer #items{
overflow:hidden !important;
}

yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
display: none !important;
}

#item-scroller{
overflow: hidden !important;
}

@-webkit-keyframes FadeOut{
0%, 100% { opacity: 0; }
0%, 95% { opacity: 1; }
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
padding: 5px !important;
background: rgba(0,0,0,0.5) !important;
margin-bottom: 3px !important;
-webkit-animation-name: FadeOut;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 90s;
-webkit-animation-fill-mode: both;
}

/* Настройка аватаров */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
width: 25px !important;
height: 25px !important;
border-radius: 25px !important;
margin-right: 6.25px !important;
}

/* Отключение значков */
yt-live-chat-text-message-renderer #author-badges {
display: none !important;
vertical-align: text-top !important;
}

/* Время */
yt-live-chat-text-message-renderer #timestamp {
color: #999999 !important;
font-size: 14px !important;
line-height: 16px !important;
}

/* Значки */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
color: #28a5bc !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
color: #0000a0 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
color: #00ffff !important;
}

/* Имена */
yt-live-chat-text-message-renderer #author-name {
font-size: 13pt !important;
color: #c6b281 !important;
}

yt-live-chat-text-message-renderer #author-name::after {
content: '\A';
white-space: pre;
margin-left: 2px;
}

/* Текст сообщения */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
color: #eaeaea !important;
font-size: 12pt !important;
line-height: 20px !important;

}

yt-live-chat-legacy-paid-message-renderer #event-text {
color: #ffffff !important;
font-size: 12px !important;
line-height: 20px !important;
}

yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
color: #ffffff !important;
font-size: 12px !important;
line-height: 20px !important;
}

yt-live-chat-legacy-paid-message-renderer {
background-color: #00ffff !important;
margin: 4px 0 !important;
padding: 4px !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
display: none !important;
}

P.S. Кроме того, можно воспользоваться сайтом chatv2.septapus.com и настроить чат по своему вкусу.