Created
January 3, 2018 18:27
-
-
Save DorkmasterFlek/ef2e35d6de9a443594ca97e144841fda to your computer and use it in GitHub Desktop.
Streamlabs event list based on Nerd or Die's sample, converted to scroll horizontal instead.
This file contains 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
@import url("https://fonts.googleapis.com/css?family=$font_family"); | |
html, | |
.widget-EventList li > div { | |
-webkit-transform: rotateX($rotate_x) rotateY($rotate_y); | |
transform: rotateX($rotate_x) rotateY($rotate_y); | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
box-sizing: border-box; | |
font-family: "$font_family"; | |
letter-spacing: 1px; | |
} | |
.widget-EventList { | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100px; | |
width: 1000px; | |
} | |
.widget-EventList li { | |
height: 50px; | |
width: 0; | |
display: inline-block; | |
overflow: hidden; | |
margin-bottom: 1px; | |
-webkit-animation: grow .4s ease-in 1 forwards; | |
animation: grow .4s ease-in 1 forwards; | |
opacity: .1; | |
} | |
.widget-EventList li:nth-child(1) { | |
opacity: 1; | |
} | |
.widget-EventList li:nth-child(2) { | |
opacity: .75; | |
} | |
.widget-EventList li:nth-child(3) { | |
opacity: .5; | |
} | |
.widget-EventList li:nth-child(4) { | |
opacity: .25; | |
} | |
.widget-EventList li:nth-child(5) { | |
opacity: .1; | |
} | |
.widget-EventList li:nth-child(6) { | |
opacity: .1; | |
} | |
.widget-EventList li:nth-child(7) { | |
opacity: .1; | |
} | |
.widget-EventList li:nth-child(8) { | |
opacity: .1; | |
} | |
.widget-EventList li:nth-child(9) { | |
opacity: .1; | |
} | |
.widget-EventList li:nth-child(10) { | |
opacity: .1; | |
} | |
li div { | |
opacity: 0; | |
padding: 0 50px 0 10px; | |
height: 50px; | |
margin-left: 1px; | |
float: left; | |
line-height: 50px; | |
position: relative; | |
color: $text_color; | |
-webkit-animation: info .5s ease-in 1 .6s forwards; | |
animation: info .5s ease-in 1 .6s forwards; | |
background: #222; | |
/* info */ | |
} | |
div.background { | |
opacity: 0; | |
padding: 0; | |
width: 50px; | |
height: 50px; | |
background-size: 42px 42px !important; | |
background-position: 4px 3px !important; | |
background: url("https://uploads.twitchalerts.com/000/070/135/721/star-l.png") no-repeat $theme_color; | |
float: left; | |
margin-left: 0; | |
-webkit-animation: icon .5s ease-in 1 .4s forwards; | |
animation: icon .5s ease-in 1 .4s forwards; | |
/* icon */ | |
} | |
.donation .background { | |
background: url("https://uploads.twitchalerts.com/000/070/135/721/donation-l.png") no-repeat $theme_color; | |
} | |
.twitch-follow .background { | |
background: url("https://uploads.twitchalerts.com/000/070/135/721/heart-l.png") no-repeat $theme_color; | |
} | |
.tag { | |
position: absolute; | |
top: 3px; | |
right: 5px; | |
font-size: 12px; | |
line-height: 12px; | |
color: $text_color; | |
font-family: "$font_family"; | |
} | |
@-webkit-keyframes grow { | |
from { | |
width: 0; | |
} | |
to { | |
width: 200px; | |
} | |
} | |
@keyframes grow { | |
from { | |
width: 0; | |
} | |
to { | |
width: 200px; | |
} | |
} | |
@-webkit-keyframes icon { | |
0% { | |
left: -20px; | |
opacity: 0; | |
} | |
40% { | |
left: 0; | |
opacity: 1; | |
} | |
60% { | |
left: 2px; | |
opacity: 1; | |
} | |
100% { | |
left: 0; | |
opacity: 1; | |
} | |
} | |
@keyframes icon { | |
0% { | |
left: -20px; | |
opacity: 0; | |
} | |
40% { | |
left: 0; | |
opacity: 1; | |
} | |
60% { | |
left: 2px; | |
opacity: 1; | |
} | |
100% { | |
left: 0; | |
opacity: 1; | |
} | |
} | |
@-webkit-keyframes info { | |
0% { | |
left: 2px; | |
opacity: 0; | |
text-indent: 0; | |
} | |
40% { | |
left: 4px; | |
opacity: 1; | |
text-indent: 0; | |
} | |
60% { | |
left: 0; | |
opacity: 1; | |
text-indent: 10px; | |
} | |
100% { | |
left: 0; | |
opacity: 1; | |
text-indent: 0; | |
} | |
} | |
@keyframes info { | |
0% { | |
left: 2px; | |
opacity: 0; | |
text-indent: 0; | |
} | |
40% { | |
left: 4px; | |
opacity: 1; | |
text-indent: 0; | |
} | |
60% { | |
left: 0; | |
opacity: 1; | |
text-indent: 10px; | |
} | |
100% { | |
left: 0; | |
opacity: 1; | |
text-indent: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment