Raisely Donation Feed in Streamlabs

feed.html

<script type="text/template" id="eventlist_item">
    <div class="donation-stream__item">
        <div class="donation-tile"> 
            <div class="donation-tile__amount"><span>{tag}</span></div>
            <div class="donation-tile__content">
              <p class="donation-tile__content__activity">{from}</p>
            </div>
        </div>
    </div>
</script>

style.css

@import url('https://cdn.raisely.com/v3/core-styles.css');
/* Insert the path or uuid of your campaign below to import it's styles */
@import url('https://api.raisely.com/v3/campaigns/YOUR-CAMPAIGN/styles.css?cssReloader=123456789');

.widget-EventList {
  /* Uncomment this line to use the streamlabs background color */
  /* background: {background_color}; */
  /* Uncomment this line to use the streamlabs background color at 25% opacity */
  /* background: {background_color}44; */
}

/* Default 💜 Raisely Styles */
/* EDIT @ YOUR OWN RISK 🚨 */
html, .donation-tile {
    -webkit-transform: rotateX({rotate_x}) rotateY({rotate_y});
            transform: rotateX({rotate_x}) rotateY({rotate_y});
}

.widget-EventList {
  white-space: nowrap;
  color: {text_color};
  padding: 0;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) calc(100% - 3em), rgba(0,0,0,0) );
  				mask-image: linear-gradient(to right, rgba(0,0,0,1) calc(100% - 3em), rgba(0,0,0,0) );
}

.widget-EventList::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}


:root {
  --max-width: 35ch;
}

.donation-stream__item {
  position: relative;
  display: inline-block;
  max-width: var(--max-width);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    -webkit-animation: {show_animation} {animation_speed} forwards;
            animation: {show_animation} {animation_speed} forwards;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) calc(100% - 1.25em), rgba(0,0,0,0) );
    			mask-image: linear-gradient(to right, rgba(0,0,0,1) calc(100% - 1.25em), rgba(0,0,0,0) );
}

.donation-stream__item:first-child {
  max-width: 0;
	color: transparent;
  -webkit-animation:
    show_first {animation_speed} forwards,
  	fade_fast .3s forwards,
    {show_animation} {animation_speed} forwards;
  animation:
   	show_first {animation_speed} forwards,
  	fade_fast .3s forwards,
    {show_animation} {animation_speed} forwards ;
}

@keyframes fade_fast {
  0% { color: transparent; }
  100% { color: {text_color}; }
}

@-webkit-keyframes fade_fast {
  0% { color: transparent; }
  100% { color: {text_color}; }
}

@keyframes show_first {
  0% { max-width: 0 }
  100% { max-width: var(--max-width) }
}

@-webkit-keyframes show_first {
  0% { max-width: 0 }
  100% { max-width: var(--max-width) }
}

.donation-stream__item:nth-child(n+{max_events}) {
    -webkit-animation: {hide_animation} {animation_speed} forwards;
            animation: {hide_animation} {animation_speed} forwards;
}

.donation-tile {
  align-items: center;
}

.donation-tile__amount,
.donation-tile__content__activity {
    font-size: {font_size};
}