Owncast_Onscreen_Chat_Fade_CSS/ChatOverlay.css

/*
 * CSS for displaying your Owncast v.0.1.0+ chat onscreen in OBS
 * to be used with [Your_Owncast_URL]/embed/chat/readonly. Modified by DeadTOm.
 * Original code by Hatnix.
 * https://codeberg.org/hatniX/Owncast-tweaks
 * @hatnix@social.tchncs.de
 */

/* the actual animation - only the last 15% are the fade out effect */
@keyframes fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/* remove background from main chat window */
body, #chat-container {
  background-color: transparent !important;
}

/* give each chatmessage a darkish background and assign the animation */
#chat-container {
  animation: fade 60s !important;
}