StreamLabs.css

/*
** Author: MonokaiJs
*/
@import url("https://fonts.googleapis.com/css?family={font_family}");

@keyframes sliding {
  0% {
    width: 100%;
  }
  100% {
    width: 48px;
  }
}
.widget-EventList li::before,
.widget-EventList li::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}

.widget-EventList li::after {
  z-index: 9999;
  height: 48px;
  left: 0%;
  top: 0;
  /*transform: skew(-50deg);*/
  clip-path: polygon(32px 0, calc(100% - 10px) 0, 100% 10px, calc(100% - 32px) 100%, 10px 100%, 0 calc(100% - 10px));
  transition-duration: 0.6s;
  transform-origin: top left;
  animation: 0.7s ease-out 0s 1 sliding;
}

.widget-EventList li::after {
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
	transition: all 0.3s;
}

html, .widget-EventList li > div {
    -webkit-transform: rotateX({rotate_x}) rotateY({rotate_y});
            transform: rotateX({rotate_x}) rotateY({rotate_y});
}

.widget-EventList, .widget-EventList * {
    box-sizing: border-box;
}

.widget-EventList {
    margin: 10px;
    font-weight: 700;
    font-size: {font_size};
    font-family: "Montserrat";
    color: {text_color};
    background: {background};
    overflow: hidden;
    list-style: none;
    padding: 0;
    text-transform: uppercase;
    position: relative;
}

.widget-EventList li {
	width: max-content;
	margin-left: 10px;
	position: relative;
  overflow: hidden;
}

.widget-EventList li > div:first-child {
	clip-path: polygon(32px 0, calc(100% - 10px) 0, 100% 10px, calc(100% - 32px) 100%, 10px 100%, 0 calc(100% - 10px));
    position: absolute;
    opacity: 0.7;
	background: #000;
    -webkit-animation: fade 10s;
    animation: fade 10s;
    -moz-animation: fade 10s;
    -o-animation: fade 10s;
}

.widget-EventList li > div:last-child {
    overflow: hidden;
    position: relative;
    margin-bottom: 4px;
    padding: 0 10px;
    opacity: 0.7;
    font-size: 0.9em;
    height: 1.2em;
    line-height: 1.2em;
}

.widget-EventList .tag {
	color: yellow;
    font-size: 0.6em;
    line-height: 0.6em;
	padding-top: 5px;
	padding-left: 30px;
	padding-bottom: 10px;
    padding-right: 3em;
    position: absolute;
}

.widget-EventList .message {
	padding-left: 30px;
    padding-top: 5px;
    padding-right: 30px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.widget-EventList li {
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.7);
    opacity: 0.8;
}

.widget-EventList li > div:first-child {
	height: 48px;
}

.facebook-follow .tag {
  color: green;
}
.facebook-like .tag {
  color: red;
}
.facebook-share .tag {
  color: yellow;
}
.facebook-stars .tag {
  color: pink;
}