Не так давно youtube обновил свой дизайн и советы по добавлению чата на экран во время трансляции стали не актуальны. Как оказалось, многие воспользовались описанным в статье способом, а теперь их чаты на стримах превратились в тыкву. В общем, я не волшебник, а только учусь… поэтому забирайте адаптированный для нового дизайна CSS, а как настроить OBS и куда что вставлять читайте тут.
/* Настройка фона */
#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 и настроить чат по своему вкусу.
Не подскажете какие строчки отвечают за цвета модераторов и админа? А то тёмно синий для модера не очень. Да и цвет для админа какой-то не очень.
Попробуйте создать через конструктор https://chatv2.septapus.com/
Да уже выискал всё, что хотелось.
Опять окно непрозрачное стало(
Блин, подскажите что сделать, если показывается сообщение от ютуба “Welcome to live….”, большой такой банер и просто место занимает..
Добавьте к стилям:
yt-live-chat-viewer-engagement-message-renderer{
display: none;
}