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 {
  background-color: #00000000 !important;
}
#chat-container {
  background-color: #00000000 !important;
}

/* give each chatmessage a darkish background and assign the animation */
#chat-container > div > div > div > div {
  background-color: #11111166 !important;
  animation: fade 12s !important;
  opacity: 0;
}