0% found this document useful (0 votes)
12 views

Css Za Chat

This document contains CSS styling rules to customize the appearance of YouTube live chat. It imports custom fonts, sets background colors to be transparent, hides elements like headers and scrollbars, styles text colors and properties, and adds animation to messages. The goal is to achieve a minimal transparent chat interface with customized typography.
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
12 views

Css Za Chat

This document contains CSS styling rules to customize the appearance of YouTube live chat. It imports custom fonts, sets background colors to be transparent, hides elements like headers and scrollbars, styles text colors and properties, and adds animation to messages. The goal is to achieve a minimal transparent chat interface with customized typography.
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

@import url("https://fonts.googleapis.com/css?

family=Changa One");
@import url("https://fonts.googleapis.com/css?family=Changa");
@import url("https://fonts.googleapis.com/css?family=Imprima");
@import url("https://fonts.googleapis.com/css?family=IM Fell Great Primer");

/* Background colors*/
body {
overflow: hidden;
background-color: rgba(0,0,0,0);
}
/* Transparent background. */
yt-live-chat-renderer {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
background-color: transparent !important;
}

yt-live-chat-author-chip #author-name {
background-color: transparent !important;
}
/* Outlines */
yt-live-chat-renderer * {
text-shadow: -1px -1px #000000,-1px 0px #000000,-1px 1px #000000,0px -1px
#000000,0px 0px #000000,0px 1px #000000,1px -1px #000000,1px 0px #000000,1px 1px
#000000;
font-family: "IM Fell Great Primer";
font-size: 25px !important;
line-height: 25px !important;
}

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

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
overflow: hidden !important;
}

/* Hide header and input. */


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

/* Reduce side padding. */


yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}

yt-live-chat-paid-message-renderer #header {
padding-left: 4px !important;
padding-right: 4px !important;
}

/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-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;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
display: none !important;
vertical-align: text-top !important;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {

color: #999999 !important;


font-family: "Imprima";
font-size: 16px !important;
line-height: 16px !important;
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"]
{
color: #00ff20 !important;
}

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

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

/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
color: #ffff00 !important;
font-family: "Changa One";
font-size: 25px !important;
line-height: 25px !important;
}

yt-live-chat-text-message-renderer #author-name::after {
content: ":";
margin-left: 1px;
}

/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
color: #ffffff !important;
font-family: "IM Fell Great Primer";
font-size: 25px !important;
line-height: 25px !important;
}

/* SuperChat/Fan Funding Messages. */


yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
color: #ffffff !important;
font-family: "Changa";
font-size: 23px !important;
line-height: 23px !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}

yt-live-chat-paid-message-renderer {
margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
background-color: #400080 !important;
margin: 4px 0 !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;
}

yt-live-chat-ticker-renderer {
background-color: transparent !important;
box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
display: none !important;
}

yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
color: #ffffff !important;
font-family: "Imprima";
}

yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer {
display: none !important;
}

yt-live-chat-banner-manager {
display: none !important;
}
@keyframes anim {
0% { opacity: 0; transform: translateX(-16px); }
0.6578947368421052% { opacity: 1; transform: none;}
99.3421052631579% { opacity: 1; transform: none;}
100% { opacity: 0; transform: translateX(16px); }
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
animation: anim 30400ms;
animation-fill-mode: both;
}

You might also like