Не так давно youtube обновил свой дизайн и
советы по добавлению чата на экран во время трансляции стали не актуальны. Как оказалось, многие воспользовались описанным в статье способом, а теперь их чаты на стримах превратились в тыкву. В общем, я не волшебник, а только учусь… поэтому забирайте адаптированный для нового дизайна CSS, а как настроить OBS и куда что вставлять читайте
тут.
![](http://www.otrip.ru/uploads/2017/10/obs_chat_youtube_new-1024x640.jpg)
/* Настройка фона */
#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;
}
Оригинальная запись опубликована в блоге
СВОЙ ЖУРНАЛ.