Resource icon

All Versions Youtube Chat Transparent Background (Solely CSS)

Keter

New Member
Keter submitted a new resource:

Youtube Chat Transparent Background (Solely CSS) - youtube transparent chat

So, I was searching through youtube chat CSS today and found that if you type this into the CSS section of browser configuration (of YouTube chat), you will get a transparent background. I will also show how to do other things.
body {
margin: 0px auto;
overflow: hidden;
}
#item-list {
background-color: rgba(0, 0, 0, 0);
}

.yt-live-chat-item-list-renderer-1[allow-scroll] #items.yt-live-chat-item-list-renderer {
overflow-y: hidden;
}...

Read more about this resource...
 

TengFong

New Member
Is it possible to add a animation ?
this is my old animation css code
/*Animation*/
.comment {
-webkit-animation-name: Animation;
-webkit-animation-duration: 30s;
-webkit-animation-fill-mode: both;
}

@-webkit-keyframes Animation {
0% {
left: 200px;
}

1.3% {
opacity: 1;
left: 0px;
background: White;
}

6% {
opacity:1;
background: transparent;
}
95% {
opacity:1;
}

100% {
opacity: 0.35;
}
 

gonzo98x

New Member
I created a new browser source.
Popped out the YouTube chat window the get the URL.
Plugged the url into OBS
Added your CSS code and.....nothing. The window is still there. Even using http://chatv2.septapus.com/ doesn't help.

Did YouTube change something on their end again?
 

Good Game

New Member
I find something special:


@import url("https://fonts.googleapis.com/css?family=Ubuntu Condensed");

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

@import url("https://fonts.googleapis.com/css?family=Imprima");



/* Background colors*/

body {

background-color: rgba(0,0,0,0);

}

yt-live-chat-text-message-renderer {

background-color: rgba(0,0,0,0.7) !important;

}



yt-live-chat-text-message-renderer[author-type="owner"] {

background-color: rgba(100,0,0,0.7) !important;

}



yt-live-chat-text-message-renderer[author-type="moderator"] {

background-color: rgba(0,0,100,0.7) !important;

}



/* Transparent background. */

yt-live-chat-renderer {

background-color: transparent !important;

}



/* Outlines */

yt-live-chat-renderer * {

text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;

font-family: "Ubuntu";

font-size: 20px !important;

line-height: 20px !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;

margin: 4px 0 !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: 32px !important;

height: 32px !important;

border-radius: 32px !important;

margin-right: 8px !important;

}



/* Hide badges. */

yt-live-chat-text-message-renderer #author-badges {



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 yt-live-chat-author-badge-renderer[type="owner"] {

color: #ffd600 !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: #5e84f1 !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: #0f9d58 !important;

}



/* Channel names. */

yt-live-chat-text-message-renderer #author-name {

color: #cccccc !important;

font-family: "Ubuntu Condensed";

font-size: 20px !important;

line-height: 20px !important;

}



yt-live-chat-text-message-renderer #author-name::after {

content: ":";

margin-left: 2px;

}



/* Messages. */

yt-live-chat-text-message-renderer #message,

yt-live-chat-text-message-renderer #message * {

color: #ffffff !important;

font-family: "Ubuntu";

font-size: 20px !important;

line-height: 20px !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: "Ubuntu";

font-size: 20px !important;

line-height: 20px !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: "Ubuntu";

font-size: 20px !important;

line-height: 20px !important;

}



yt-live-chat-paid-message-renderer #content,

yt-live-chat-paid-message-renderer #content * {

color: #ffffff !important;

font-family: "Ubuntu";

font-size: 20px !important;

line-height: 20px !important;

}



yt-live-chat-paid-message-renderer {

margin: 4px 0 !important;

}



yt-live-chat-legacy-paid-message-renderer {

background-color: #0f9d58 !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: "Ubuntu";

}



@keyframes anim {

0% { opacity: 0; }

100% { opacity: 1; transform: none;}

}



yt-live-chat-text-message-renderer,

yt-live-chat-legacy-paid-message-renderer {

animation: anim 200ms;

animation-fill-mode: both;

}



yt-live-chat-text-message-renderer,

yt-live-chat-legacy-paid-message-renderer {

animation: anim 30400ms;

animation-fill-mode: both;

}



@keyframes anim {

0% { opacity: 0; }

0.6578947368421052% { opacity: 1; transform: none;}

99.3421052631579% { opacity: 1; transform: none;}

100% { opacity: 0; }

}



yt-live-chat-text-message-renderer,

yt-live-chat-legacy-paid-message-renderer {

animation: anim 30400ms;

animation-fill-mode: both;

}
 
Top