Created
September 4, 2020 00:21
-
-
Save dev-jonghoonpark/3063ade80de2d83c8ac6a4b88aafa9d2 to your computer and use it in GitHub Desktop.
css for obs youtube chatbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css?family=Noto Sans"); | |
html { | |
background-color: rgba(0,0,0,0); | |
} | |
/* Background colors*/ | |
body { | |
overflow: hidden; | |
background-color: rgba(0,0,0,0); | |
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2em ); | |
} | |
/* Transparent background. */ | |
yt-live-chat-renderer { | |
background-color: transparent !important; | |
} | |
yt-live-chat-text-message-renderer { | |
background-color: rgba(0, 0, 0, 0.8) !important; | |
border-radius: 0.15em; | |
box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.5); | |
animation: fadeInUp .5s ease, fadeOutUp .5s ease 100000s forwards; | |
margin-left: 4px; | |
margin-bottom: 2px; | |
width: 234px; | |
} | |
yt-live-chat-author-chip #author-name { | |
background-color: transparent !important; | |
} | |
/* Outlines */ | |
yt-live-chat-renderer * { | |
font-family: "Noto Sans"; | |
font-size: 12px !important; | |
line-height: 12px !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 { | |
display: none !important; | |
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: "Noto Sans"; | |
font-size: 12px !important; | |
line-height: 12px !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: #ffd600 !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: #5e84f1 !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: #0f9d58 !important; | |
} | |
/* Channel names. */ | |
yt-live-chat-text-message-renderer #author-name { | |
color: #cccccc !important; | |
font-family: "Noto Sans"; | |
font-size: 12px !important; | |
line-height: 12px !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: "Noto Sans"; | |
font-size: 12px !important; | |
line-height: 12px !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: "Noto Sans"; | |
font-size: 12px !important; | |
line-height: 12px !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: "Noto Sans"; | |
font-size: 12px !important; | |
line-height: 12px !important; | |
} | |
yt-live-chat-paid-message-renderer #content, | |
yt-live-chat-paid-message-renderer #content * { | |
color: #ffffff !important; | |
font-family: "Noto Sans"; | |
font-size: 12px !important; | |
line-height: 12px !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: "Noto Sans"; | |
} | |
yt-live-chat-mode-change-message-renderer, | |
yt-live-chat-viewer-engagement-message-renderer, | |
yt-live-chat-restricted-participation-renderer { | |
display: none !important; | |
} | |
#item-offset { | |
height: 150px !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey there,
thank you for the code it's really great.
Could I ask how could you stick all the messages on the bottom of the screen so that the new message always appear on the bottom and the rest scroll up ? (Like twitch would do)
Thank you so much