Konstantin V.Udovichenko (otrip) wrote,
Konstantin V.Udovichenko
otrip

Как добавить чат на экран во время трансляции на 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;
}





Оригинальная запись опубликована в блоге СВОЙ ЖУРНАЛ.
Tags: obs, youtube, ИТ, компьютер, настройка, советы, стрим, трансляция
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments