Chat Script
/*
TITLE: CSS SCRIPT; FOR SHOWING YOUTUBE CHAT ON STREAMS WITH OBS
AUTHOR: TKBS
FUNCTIONS:
– SWIPE IN
– FADE OUT
– COLORED
CREDITS:
https://bitbucket.org/Frosthaven/youtube-chat-obs-styles/
*/
/*
Set Page Font
*/
#items #message,
#items #author-name,
#items .mention.yt-live-chat-text-message-renderer {
font-family: “verdana”;
font-size:32px;
}
/* User Name Color */
#items #author-name
{
color: #522693;
}
/* Owner Name Color */
#items #author-name[type=’owner’].yt-live-chat-text-message-renderer,
#items .yt-live-chat-author-badge-renderer-0[type=’owner’]
{
color:#ffd501;
}
/* Moderator Name Color */
#items #author-name[type=’moderator’].yt-live-chat-text-message-renderer,
#items .yt-live-chat-author-badge-renderer-0[type=’moderator’]
{
color:#5e84f1;
}
/* Message Text Color */
#items #message.yt-live-chat-text-message-renderer
{
color:#0fa81b;
}
/* Chat Animations (In & Out)
This will animate new chat messages in from the right, and then fade them out
after a short time.
*/
#items yt-live-chat-text-message-renderer
{
opacity:0;
padding-left:10px;
padding-bottom:10px;
animation: inAndOut 15s;
border:2px solid rgba(255,255,255,0.0);
}
@keyframes inAndOut
{
0% {
opacity:1;
left:100vw;
} 2% {
left:0;
} 75% {
opacity:1;
} 100% {
opacity:0;
}
}
/* Chat Message Background (even rows) */
#items yt-live-chat-text-message-renderer:nth-child(even)
{
background-color: rgba(0,0,0,0);
}
/* Chat Message Background (odd rows) */
#items yt-live-chat-text-message-renderer:nth-child(odd)
{
background-color: rgba(0,0,0,0);
}
/* ADVANCED ================TAKEN FROM FROST=============================
==========================CREDITS TO FROST=============================== */
/* Transparency And Borderless */
body {
margin: 0px auto; overflow: hidden;
}
body, yt-live-chat-renderer, #content-pages, #chat-messages
{
background:rgba(0,0,0,0) !important;
}
/* Hide Scrollbar */
* ::-webkit-scrollbar {
width: 0 !important;
opacity: 0 !important;
} * {
overflow: hidden !important;
}
/* Stay Scrolled To Bottom At All Times */
#items {
position:fixed !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
overflow:hidden !important;
}
/* Hide Chat Elements */
#items .yt-live-chat-author-badge-renderer-0,
yt-live-chat-pinned-message-renderer,
yt-live-chat-ticker-renderer,
yt-live-chat-ticker-paid-message-item-renderer,
#action-panel,
yt-live-chat-header-renderer,
#author-photo,
#show-more,
yt-live-chat-text-message-renderer #menu {
display:none !important;
}
/* Messages Appear Under Author Name Instead Of Beside It
#items #message.yt-live-chat-text-message-renderer {
display:block;
}
*/
/* Minimize Chat Padding */
.yt-live-chat-text-message-renderer-0 {
padding:2px 2px;
}
/* Remove Link Decorations */
#items a.yt-live-chat-text-message-renderer {
text-decoration: none;
}
/* Space Between Message Blocks */
#items yt-live-chat-text-message-renderer {
margin-bottom:32px;
}
/* Pretty Chat Panels */
#items yt-live-chat-text-message-renderer {
border-radius: 64px;
}
/* Not Working Yet / Incompatible with CLR Browser */
#items .mention {
color:#ff0000;
background:none;
padding:0;
}
/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
line-height: 18px !important;
}
/*
UNUSED CODE
// @import url(“https://fonts.googleapis.com/css?family=Changa One”);
// @import url(“https://fonts.googleapis.com/css?family=Imprima”);
*/
Unreal Content by Fusilade 