Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @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: 600px;
- width: 600px;
- }
- .widget-EventList li {
- height: 0px;
- 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("http://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("http://uploads.twitchalerts.com/000/070/135/721/donation-l.png") no-repeat $theme_color;
- }
- .twitch-follow .background {
- background: url("http://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 {
- height: 0px;
- }
- to {
- height: 50px;
- }
- }
- @keyframes grow {
- from {
- height: 0px;
- }
- to {
- height: 50px;
- }
- }
- @-webkit-keyframes icon {
- 0% {
- left: -20px;
- opacity: 0;
- }
- 40% {
- left: 0px;
- opacity: 1;
- }
- 60% {
- left: 2px;
- opacity: 1;
- }
- 100% {
- left: 0px;
- opacity: 1;
- }
- }
- @keyframes icon {
- 0% {
- left: -20px;
- opacity: 0;
- }
- 40% {
- left: 0px;
- opacity: 1;
- }
- 60% {
- left: 2px;
- opacity: 1;
- }
- 100% {
- left: 0px;
- opacity: 1;
- }
- }
- @-webkit-keyframes info {
- 0% {
- left: 2px;
- opacity: 0;
- text-indent: 0px;
- }
- 40% {
- left: 4px;
- opacity: 1;
- text-indent: 0;
- }
- 60% {
- left: 0px;
- opacity: 1;
- text-indent: 10px;
- }
- 100% {
- left: 0;
- opacity: 1;
- text-indent: 0px;
- }
- }
- @keyframes info {
- 0% {
- left: 2px;
- opacity: 0;
- text-indent: 0px;
- }
- 40% {
- left: 4px;
- opacity: 1;
- text-indent: 0;
- }
- 60% {
- left: 0px;
- opacity: 1;
- text-indent: 10px;
- }
- 100% {
- left: 0;
- opacity: 1;
- text-indent: 0px;
- }
- }
Add Comment
Please, Sign In to add comment