-
-
Save lohanidamodar/81145c6d3a668cf18e6453ab5ba1f642 to your computer and use it in GitHub Desktop.
Styles for YouTube streaming live-chat (tested in OBS)
This file contains hidden or 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 hidden or 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 hidden or 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; | |
| } |
Something seems to have changed in youtube's end and I can't get this or other custom css's working. You know how this could be fixed? Thanks.
Something seems to have changed in youtube's end and I can't get this or other custom css's working. You know how this could be fixed? Thanks.
Yup, YouTube implemented a stricter security policy that caused OBS's CSS injection method to be considered insecure, making it to not be recognized. as of OBS 30.2.3 (released August 15, 2024) the problem has been fixed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
halo