-
-
Save LudovicoPiero/1d1b3a689dfcb84a04f3b195f317e7bb to your computer and use it in GitHub Desktop.
Styles for YouTube streaming live-chat (tested in OBS)
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=Candal"); | |
| @import url("https://fonts.googleapis.com/css?family=Changa One"); | |
| @import url("https://fonts.googleapis.com/css?family=Imprima"); | |
| @import url("https://fonts.googleapis.com/css?family=Fira Sans"); | |
| /* Background colors*/ | |
| body { | |
| overflow: hidden; | |
| background-color: rgba(255,255,255,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: rgba(227,227,227,0.83) !important; | |
| } | |
| yt-live-chat-text-message-renderer[author-type="owner"], | |
| yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] { | |
| background-color: rgba(NaN,10,0,0.32) !important; | |
| } | |
| yt-live-chat-text-message-renderer[author-type="moderator"], | |
| yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] { | |
| background-color: rgba(NaN,10,0,1) !important; | |
| } | |
| yt-live-chat-text-message-renderer[author-type="member"], | |
| yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] { | |
| background-color: rgba(NaN,10,0,1) !important; | |
| } | |
| yt-live-chat-author-chip #author-name { | |
| background-color: transparent !important; | |
| } | |
| /* Outlines */ | |
| yt-live-chat-renderer * { | |
| font-family: "Fira Sans"; | |
| 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; | |
| } | |
| 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: 30px !important; | |
| height: 30px !important; | |
| border-radius: 30px !important; | |
| margin-right: 7.5px !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: #8a1919 !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: #363636 !important; | |
| font-family: "Candal"; | |
| font-size: 20px !important; | |
| line-height: 20px !important; | |
| } | |
| yt-live-chat-text-message-renderer #author-name::after { | |
| content: ":"; | |
| margin-left: 0px; | |
| } | |
| /* Messages. */ | |
| yt-live-chat-text-message-renderer #message, | |
| yt-live-chat-text-message-renderer #message * { | |
| color: #060505 !important; | |
| font-family: "Fira Sans"; | |
| 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: "Changa One"; | |
| 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: "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: #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: "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; | |
| } |
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=Candal"); | |
| @import url("https://fonts.googleapis.com/css?family=Changa One"); | |
| @import url("https://fonts.googleapis.com/css?family=Imprima"); | |
| /* 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: -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: "Imprima"; | |
| font-size: 18px !important; | |
| line-height: 18px !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: 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: "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: #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: "Candal"; | |
| 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: "Imprima"; | |
| font-size: 18px !important; | |
| line-height: 18px !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 One"; | |
| 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: "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: #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: "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; | |
| } |
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
| /* | |
| https://chatv2.septapus.com/ | |
| remove background */ | |
| .style-scope yt-live-chat-renderer { | |
| background-color: rgb(0, 0, 0, 0); | |
| } | |
| #items.yt-live-chat-item-list-renderer > *.yt-live-chat-item-list-renderer { | |
| background-color: rgb(0, 0, 0, 0); | |
| } | |
| /* remove top bar scroll bar, chat box */ | |
| .style-scope yt-live-chat-header-renderer { | |
| display: none; | |
| } | |
| yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer { | |
| overflow: hidden; | |
| } | |
| .style-scope yt-live-chat-message-input-renderer { | |
| display: none; | |
| } | |
| /* hide profile picture */ | |
| yt-img-shadow#author-photo.no-transition.style-scope.yt-live-chat-text-message-renderer { | |
| display: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment