Last active
August 28, 2018 11:50
-
-
Save NexAdn/a928ea7b00f7fb172825b5ea6f1d4746 to your computer and use it in GitHub Desktop.
YouTube overlay CSS
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
| /* 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