Created
July 21, 2025 19:52
-
-
Save yoyo308/304bb91c5285c1c6577b634973963e3c to your computer and use it in GitHub Desktop.
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
| Estilo de live-chat para streamig en Youtube (probado en OBS Studio) | |
| Código tomado del usuario Damodar Lohani y modificado con nuevas opciones por la comunidad de compañeros linuxeros. | |
| Gracias a todos los que aportaron (ellos saben quienes son) | |
| @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"); | |
| /* Animaciones */ | |
| @keyframes slideInFromLeft { | |
| 0% { | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| /* 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: rgba(0,0,0,.5) !important; | |
| animation: slideInFromLeft 0.5s ease-out forwards; /* Aplicamos la animación */ | |
| margin-bottom: 8px; /* Espacio entre mensajes */ | |
| border-radius: 24px !important; | |
| padding: 8px 12px; /* Espaciado interno */ | |
| } | |
| 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; | |
| display: flex; /* Usamos flexbox para organizar los elementos */ | |
| align-items: flex-start; /* Alinea los elementos al inicio */ | |
| } | |
| 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: 50px !important; /* Avatar más grande */ | |
| height: 50px !important; /* Avatar más grande */ | |
| border-radius: 50% !important; /* Avatar circular */ | |
| margin-right: 15px !important; /* Más espacio a la derecha del avatar */ | |
| min-width: 50px; /* Asegura que no se achique */ | |
| } | |
| /* Contenedor para nombre y mensaje */ | |
| yt-live-chat-text-message-renderer #content-wrapper { | |
| display: flex; | |
| flex-direction: column; /* Apila el nombre y el mensaje */ | |
| align-items: flex-start; /* Alinea el texto a la izquierda */ | |
| } | |
| /* 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; | |
| margin-left: 5px; /* Pequeño espacio a la izquierda del timestamp */ | |
| } | |
| /* 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: 24px !important; | |
| line-height: 24px !important; | |
| order: 1; /* Establece el orden para que el nombre aparezca primero */ | |
| display: flex; /* Para alinear el nombre con el timestamp si lo necesitas */ | |
| align-items: center; | |
| } | |
| yt-live-chat-text-message-renderer #author-name::after { | |
| content: ""; /* Eliminamos los dos puntos para que el mensaje quede abajo */ | |
| margin-left: 0; | |
| } | |
| /* Messages. */ | |
| yt-live-chat-text-message-renderer #message, | |
| yt-live-chat-text-message-renderer #message * { | |
| color: #ffffff !important; | |
| font-family: "Imprima"; | |
| font-size: 24px !important; | |
| line-height: 24px !important; | |
| order: 2; /* Establece el orden para que el mensaje aparezca después del nombre */ | |
| word-wrap: break-word; /* Asegura que el texto largo se rompa en varias líneas */ | |
| width: 100%; /* Ocupa todo el ancho disponible */ | |
| } | |
| /* 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; | |
| display: flex; /* Usa flexbox para alinear avatar y contenido */ | |
| align-items: flex-start; | |
| } | |
| yt-live-chat-legacy-paid-message-renderer { | |
| background-color: #0f9d58 !important; | |
| margin: 4px 0 !important; | |
| display: flex; /* Usa flexbox para alinear avatar y contenido */ | |
| align-items: flex-start; | |
| } | |
| 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; | |
| } | |
| /* Avatars. */ | |
| yt-live-chat-text-message-renderer #author-photo img, | |
| yt-live-chat-paid-message-renderer #author-photo img, | |
| yt-live-chat-legacy-paid-message-renderer #author-photo img { | |
| height: 100% !important; | |
| width: 100% !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment