vegas.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. .vegas-container {
  2. overflow: hidden !important;
  3. position: relative;
  4. }
  5. .vegas-wrapper,
  6. .vegas-overlay,
  7. .vegas-timer,
  8. .vegas-slide {
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. bottom: 0;
  13. right: 0;
  14. overflow: hidden;
  15. }
  16. .vegas-overlay {
  17. background: transparent url(overlays/02.png) center center repeat;
  18. opacity: 0.5;
  19. }
  20. .vegas-timer {
  21. top: auto;
  22. bottom: 0;
  23. height: 2px;
  24. }
  25. .vegas-timer-progress {
  26. width: 0%;
  27. height: 100%;
  28. background: yellowgreen;
  29. -webkit-transition-property: width;
  30. transition-property: width;
  31. -webkit-transition-timing-function: ease-out;
  32. transition-timing-function: ease-out;
  33. }
  34. .vegas-timer-running .vegas-timer-progress {
  35. width: 100%;
  36. }
  37. .vegas-slide {
  38. padding: 0;
  39. background: transparent center center no-repeat;
  40. -webkit-transform: translateZ(0);
  41. transform: translateZ(0);
  42. }
  43. body.vegas-container {
  44. overflow: auto;
  45. position: static;
  46. }
  47. body.vegas-container > .vegas-timer,
  48. body.vegas-container > .vegas-overlay,
  49. body.vegas-container > .vegas-slide {
  50. position: fixed;
  51. }
  52. .vegas-video {
  53. min-width: 100%;
  54. min-height: 100%;
  55. width: auto;
  56. height: auto;
  57. }
  58. /* fade */
  59. .vegas-transition-fade {
  60. opacity: 0;
  61. }
  62. .vegas-transition-fade-in {
  63. opacity: 1;
  64. }
  65. .vegas-transition-fade-out {
  66. opacity: 0;
  67. }
  68. /* slideLeft */
  69. .vegas-transition-slideLeft {
  70. -webkit-transform: translateX(100%);
  71. -ms-transform: translateX(100%);
  72. transform: translateX(100%);
  73. }
  74. .vegas-transition-slideLeft-in {
  75. -webkit-transform: translateX(0%);
  76. -ms-transform: translateX(0%);
  77. transform: translateX(0%);
  78. }
  79. .vegas-transition-slideLeft-out {
  80. -webkit-transform: translateX(-100%);
  81. -ms-transform: translateX(-100%);
  82. transform: translateX(-100%);
  83. }
  84. /* slideRight */
  85. .vegas-transition-slideRight {
  86. -webkit-transform: translateX(-100%);
  87. -ms-transform: translateX(-100%);
  88. transform: translateX(-100%);
  89. }
  90. .vegas-transition-slideRight-in {
  91. -webkit-transform: translateX(0%);
  92. -ms-transform: translateX(0%);
  93. transform: translateX(0%);
  94. }
  95. .vegas-transition-slideRight-out {
  96. -webkit-transform: translateX(100%);
  97. -ms-transform: translateX(100%);
  98. transform: translateX(100%);
  99. }
  100. /* slideUp */
  101. .vegas-transition-slideUp {
  102. -webkit-transform: translateY(100%);
  103. -ms-transform: translateY(100%);
  104. transform: translateY(100%);
  105. }
  106. .vegas-transition-slideUp-in {
  107. -webkit-transform: translateY(0%);
  108. -ms-transform: translateY(0%);
  109. transform: translateY(0%);
  110. }
  111. .vegas-transition-slideUp-out {
  112. -webkit-transform: translateY(-100%);
  113. -ms-transform: translateY(-100%);
  114. transform: translateY(-100%);
  115. }
  116. /* slideDown */
  117. .vegas-transition-slideDown {
  118. -webkit-transform: translateY(-100%);
  119. -ms-transform: translateY(-100%);
  120. transform: translateY(-100%);
  121. }
  122. .vegas-transition-slideDown-in {
  123. -webkit-transform: translateY(0%);
  124. -ms-transform: translateY(0%);
  125. transform: translateY(0%);
  126. }
  127. .vegas-transition-slideDown-out {
  128. -webkit-transform: translateY(100%);
  129. -ms-transform: translateY(100%);
  130. transform: translateY(100%);
  131. }
  132. /* zoomIn */
  133. .vegas-transition-zoomIn {
  134. -webkit-transform: scale(0);
  135. -ms-transform: scale(0);
  136. transform: scale(0);
  137. opacity: 0;
  138. }
  139. .vegas-transition-zoomIn-in {
  140. -webkit-transform: scale(1);
  141. -ms-transform: scale(1);
  142. transform: scale(1);
  143. opacity: 1;
  144. }
  145. .vegas-transition-zoomIn-out {
  146. -webkit-transform: scale(2);
  147. -ms-transform: scale(2);
  148. transform: scale(2);
  149. opacity: 0;
  150. }
  151. /* zoomOut */
  152. .vegas-transition-zoomOut {
  153. -webkit-transform: scale(2);
  154. -ms-transform: scale(2);
  155. transform: scale(2);
  156. opacity: 0;
  157. }
  158. .vegas-transition-zoomOut-in {
  159. -webkit-transform: scale(1);
  160. -ms-transform: scale(1);
  161. transform: scale(1);
  162. opacity: 1;
  163. }
  164. .vegas-transition-zoomOut-out {
  165. -webkit-transform: scale(0);
  166. -ms-transform: scale(0);
  167. transform: scale(0);
  168. opacity: 0;
  169. }
  170. /* swirlLeft */
  171. .vegas-transition-swirlLeft {
  172. -webkit-transform: scale(2) rotate(35deg);
  173. -ms-transform: scale(2) rotate(35deg);
  174. transform: scale(2) rotate(35deg);
  175. opacity: 0;
  176. }
  177. .vegas-transition-swirlLeft-in {
  178. -webkit-transform: scale(1) rotate(0deg);
  179. -ms-transform: scale(1) rotate(0deg);
  180. transform: scale(1) rotate(0deg);
  181. opacity: 1;
  182. }
  183. .vegas-transition-swirlLeft-out {
  184. -webkit-transform: scale(2) rotate(-35deg);
  185. -ms-transform: scale(2) rotate(-35deg);
  186. transform: scale(2) rotate(-35deg);
  187. opacity: 0;
  188. }
  189. /* swirlRight */
  190. .vegas-transition-swirlRight {
  191. -webkit-transform: scale(2) rotate(-35deg);
  192. -ms-transform: scale(2) rotate(-35deg);
  193. transform: scale(2) rotate(-35deg);
  194. opacity: 0;
  195. }
  196. .vegas-transition-swirlRight-in {
  197. -webkit-transform: scale(1) rotate(0deg);
  198. -ms-transform: scale(1) rotate(0deg);
  199. transform: scale(1) rotate(0deg);
  200. opacity: 1;
  201. }
  202. .vegas-transition-swirlRight-out {
  203. -webkit-transform: scale(2) rotate(35deg);
  204. -ms-transform: scale(2) rotate(35deg);
  205. transform: scale(2) rotate(35deg);
  206. opacity: 0;
  207. }