lowheartrate

template css for Event List

Aug 27th, 2016
166
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.62 KB | None | 0 0
  1. @import url("https://fonts.googleapis.com/css?family=$font_family");
  2.  
  3. html,
  4. .widget-EventList li > div {
  5.   -webkit-transform: rotateX($rotate_x) rotateY($rotate_y);
  6.           transform: rotateX($rotate_x) rotateY($rotate_y);
  7. }
  8.  
  9. * {
  10.   margin: 0;
  11.   padding: 0;
  12.   list-style: none;
  13.   box-sizing: border-box;
  14.   font-family: "$font_family";
  15.   letter-spacing: 1px;
  16. }
  17.  
  18. .widget-EventList {
  19.   position: absolute;
  20.   top: 0;
  21.   left: 0;
  22.   height: 600px;
  23.   width: 600px;
  24. }
  25.  
  26. .widget-EventList li {
  27.   height: 0px;
  28.   overflow: hidden;
  29.   margin-bottom: 1px;
  30.   -webkit-animation: grow .4s ease-in 1 forwards;
  31.           animation: grow .4s ease-in 1 forwards;
  32.   opacity: .1;
  33. }
  34.  
  35. .widget-EventList li:nth-child(1) {
  36.   opacity: 1;
  37. }
  38.  
  39. .widget-EventList li:nth-child(2) {
  40.   opacity: .75;
  41. }
  42.  
  43. .widget-EventList li:nth-child(3) {
  44.   opacity: .5;
  45. }
  46.  
  47. .widget-EventList li:nth-child(4) {
  48.   opacity: .25;
  49. }
  50.  
  51. .widget-EventList li:nth-child(5) {
  52.   opacity: .1;
  53. }
  54.  
  55. .widget-EventList li:nth-child(6) {
  56.   opacity: .1;
  57. }
  58.  
  59. .widget-EventList li:nth-child(7) {
  60.   opacity: .1;
  61. }
  62.  
  63. .widget-EventList li:nth-child(8) {
  64.   opacity: .1;
  65. }
  66.  
  67. .widget-EventList li:nth-child(9) {
  68.   opacity: .1;
  69. }
  70.  
  71. .widget-EventList li:nth-child(10) {
  72.   opacity: .1;
  73. }
  74.  
  75. li div {
  76.   opacity: 0;
  77.   padding: 0 50px 0 10px;
  78.   height: 50px;
  79.   margin-left: 1px;
  80.   float: left;
  81.   line-height: 50px;
  82.   position: relative;
  83.   color: $text_color;
  84.   -webkit-animation: info .5s ease-in 1 .6s forwards;
  85.           animation: info .5s ease-in 1 .6s forwards;
  86.   background: #222;
  87.   /* info */
  88. }
  89.  
  90. div.background {
  91.   opacity: 0;
  92.   padding: 0;
  93.   width: 50px;
  94.   height: 50px;
  95.   background-size: 42px 42px !important;
  96.   background-position: 4px 3px !important;
  97.   background: url("http://uploads.twitchalerts.com/000/070/135/721/star-l.png") no-repeat $theme_color;
  98.   float: left;
  99.   margin-left: 0;
  100.   -webkit-animation: icon .5s ease-in 1 .4s forwards;
  101.           animation: icon .5s ease-in 1 .4s forwards;
  102.   /* icon */
  103. }
  104.  
  105. .donation .background {
  106.   background: url("http://uploads.twitchalerts.com/000/070/135/721/donation-l.png") no-repeat $theme_color;
  107. }
  108.  
  109. .twitch-follow .background {
  110.   background: url("http://uploads.twitchalerts.com/000/070/135/721/heart-l.png") no-repeat $theme_color;
  111. }
  112.  
  113. .tag {
  114.   position: absolute;
  115.   top: 3px;
  116.   right: 5px;
  117.   font-size: 12px;
  118.   line-height: 12px;
  119.   color: $text_color;
  120.   font-family: "$font_family";
  121. }
  122.  
  123. @-webkit-keyframes grow {
  124.   from {
  125.     height: 0px;
  126.   }
  127.   to {
  128.     height: 50px;
  129.   }
  130. }
  131.  
  132. @keyframes grow {
  133.   from {
  134.     height: 0px;
  135.   }
  136.   to {
  137.     height: 50px;
  138.   }
  139. }
  140.  
  141. @-webkit-keyframes icon {
  142.   0% {
  143.     left: -20px;
  144.     opacity: 0;
  145.   }
  146.   40% {
  147.     left: 0px;
  148.     opacity: 1;
  149.   }
  150.   60% {
  151.     left: 2px;
  152.     opacity: 1;
  153.   }
  154.   100% {
  155.     left: 0px;
  156.     opacity: 1;
  157.   }
  158. }
  159.  
  160. @keyframes icon {
  161.   0% {
  162.     left: -20px;
  163.     opacity: 0;
  164.   }
  165.   40% {
  166.     left: 0px;
  167.     opacity: 1;
  168.   }
  169.   60% {
  170.     left: 2px;
  171.     opacity: 1;
  172.   }
  173.   100% {
  174.     left: 0px;
  175.     opacity: 1;
  176.   }
  177. }
  178.  
  179. @-webkit-keyframes info {
  180.   0% {
  181.     left: 2px;
  182.     opacity: 0;
  183.     text-indent: 0px;
  184.   }
  185.   40% {
  186.     left: 4px;
  187.     opacity: 1;
  188.     text-indent: 0;
  189.   }
  190.   60% {
  191.     left: 0px;
  192.     opacity: 1;
  193.     text-indent: 10px;
  194.   }
  195.   100% {
  196.     left: 0;
  197.     opacity: 1;
  198.     text-indent: 0px;
  199.   }
  200. }
  201.  
  202. @keyframes info {
  203.   0% {
  204.     left: 2px;
  205.     opacity: 0;
  206.     text-indent: 0px;
  207.   }
  208.   40% {
  209.     left: 4px;
  210.     opacity: 1;
  211.     text-indent: 0;
  212.   }
  213.   60% {
  214.     left: 0px;
  215.     opacity: 1;
  216.     text-indent: 10px;
  217.   }
  218.   100% {
  219.     left: 0;
  220.     opacity: 1;
  221.     text-indent: 0px;
  222.   }
  223. }
Add Comment
Please, Sign In to add comment