Skip to content

Instantly share code, notes, and snippets.

@NexAdn
Last active August 28, 2018 11:50
Show Gist options
  • Save NexAdn/a928ea7b00f7fb172825b5ea6f1d4746 to your computer and use it in GitHub Desktop.
Save NexAdn/a928ea7b00f7fb172825b5ea6f1d4746 to your computer and use it in GitHub Desktop.
YouTube overlay CSS
/* Transparenz */
body {
background: rgba(0, 0, 0, 0);
/* background: #0f0 */
}
yt-live-chat-renderer {
background: transparent !important;
/* background: #0f0; */
}
/* Font 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: "Purisa";
font-size: 18px !important;
line-height: 18px !important;
color: #ffffff;
}
/* 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 bar */
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;
}
/* 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 {
display: block;
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
margin-right: 6px !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: "Latin Modern Sans";
font-size: 16px !important;
line-height: 16px !important;
display: block;
}
/* Channel names */
yt-live-chat-text-message-renderer #author-name {
color: #ffffff !important;
font-family: "Latin Modern Sans" !important;
font-size: 20pt !important;
}
yt-live-chat-text-message-renderer #author-name::after {
content: ":";
margin-left: 0.2em;
margin-right: 0.5em;
}
yt-live-chat-text-message-renderer #author-name[type="owner"] {
color: #ff000e !important;
}
yt-live-chat-text-message-renderer #author-name[type="moderator"] {
color: #5e84f1 !important;
}
yt-live-chat-text-message-renderer #author-name[type="member"] {
color: #0f9d58 !important;
}
/* Messages */
/* Kein Effekt >>>>> */
yt-live-chat-ticker-renderer {
background: transparent !important;
box-shadow: none !important;
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: "Purisa";
}
/* <<<<< */
yt-live-chat-text-message-renderer {
margin-top: 5px;
background: rgba(255, 255, 255, 0.5);
}
yt-live-chat-text-message-renderer #message, yt-live-chat-text-message-renderer #message * {
color: #ffffff !important;
font-family: "Purisa";
font-size: 20pt !important;
line-height: 23pt !important;
}
/* Highlight owner and moderator messages */
@keyframes bgredfade {
0% {
color: #ff5c65;
}
70% {
color: #ff5c65;
}
100% {
color: #ffffff;
}
}
yt-live-chat-text-message-renderer[author-type="owner"] #message {
animation: bgredfade 12s;
animation-fill-mode: forwards;
}
@keyframes bgbluefade {
0% {
color: #63acff;
}
50% {
color: #63acff;
}
100% {
color: #ffffff;
}
}
yt-live-chat-text-message-renderer[author-type="moderator"] #message {
animation: bgbluefade 8s;
animation-fill-mode: forwards;
}
/* Not used: animated VIP messages >>>>>
@keyframes bggreenfade {
0% {
color: #0f9d58;
}
50% {
color: #0f9d58;
}
100% {
color: #ffffff;
}
}
yt-live-chat-text-message-renderer[author-type="member"] #message {
animation: bggreenfade 3s;
}
<<<<< */
/* Auto fade-in-out messages */
@keyframes fadeinout {
0% {
opacity: 0;
}
0.3% {
opacity: 1;
transform: none;
}
99.3421052631579% {
opacity: 0.8;
transform: none;
}
100% {
opacity: 0;
}
}
yt-live-chat-text-message-renderer, yt-live-chat-legacy-paid-message-renderer {
border-radius: 10px;
animation: fadeinout 120400ms;
animation-fill-mode: forwards;
}
/* Links */
yt-live-chat-renderer a, yt-live-chat-text-message-renderer a, yt-live-chat-paid-message-renderer a, yt-live-chat-legacy-paid-message-renderer a {
text-decoration: none;
}
/* SuperChat */
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: "Purisa";
font-size: 20pt !important;
line-height: 23pt !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: "Purisa";
font-size: 20pt !important;
line-height: 23pt !important;
}
yt-live-chat-paid-message-renderer #content, yt-live-chat-paid-message-renderer #content * {
color: #ffffff;
font-family: "Purisa";
font-size: 20pt !important;
line-height: 23pt !important;
}
yt-live-chat-paid-message-renderer {
margin: 0.5em 0 !important;
background: rgba(15, 157, 88, 0.5);
}
yt-live-chat-legacy-paid-message-renderer {
background: rgba(15, 157, 88, 0.5);
margin: 0.5em 0 !important;
border-radius: 10px !important;
}
/* Hide deleted messages */
yt-live-chat-text-message-renderer[is-deleted], yt-live-chat-legacy-paid-message-renderer[is-deleted] {
display: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment