vegas.css 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  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. }
  19. .vegas-timer {
  20. top: auto;
  21. bottom: 0;
  22. height: 2px;
  23. }
  24. .vegas-timer-progress {
  25. width: 0%;
  26. height: 100%;
  27. background: yellowgreen;
  28. -webkit-transition-property: width;
  29. transition-property: width;
  30. -webkit-transition-timing-function: ease-out;
  31. transition-timing-function: ease-out;
  32. }
  33. .vegas-timer-running .vegas-timer-progress {
  34. width: 100%;
  35. }
  36. .vegas-slide {
  37. margin: 0;
  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. z-index: -2;
  47. }
  48. body.vegas-container > .vegas-timer,
  49. body.vegas-container > .vegas-overlay,
  50. body.vegas-container > .vegas-slide {
  51. position: fixed;
  52. z-index: -1;
  53. }
  54. .vegas-video {
  55. min-width: 100%;
  56. min-height: 100%;
  57. width: auto;
  58. height: auto;
  59. }
  60. /* fade */
  61. .vegas-transition-fade,
  62. .vegas-transition-fade2 {
  63. opacity: 0;
  64. }
  65. .vegas-transition-fade-in,
  66. .vegas-transition-fade2-in {
  67. opacity: 1;
  68. }
  69. .vegas-transition-fade2-out {
  70. opacity: 0;
  71. }
  72. /* slideLeft */
  73. .vegas-transition-slideLeft,
  74. .vegas-transition-slideLeft2 {
  75. -webkit-transform: translateX(100%);
  76. -ms-transform: translateX(100%);
  77. transform: translateX(100%);
  78. }
  79. .vegas-transition-slideLeft-in,
  80. .vegas-transition-slideLeft2-in {
  81. -webkit-transform: translateX(0%);
  82. -ms-transform: translateX(0%);
  83. transform: translateX(0%);
  84. }
  85. .vegas-transition-slideLeft2-out {
  86. -webkit-transform: translateX(-100%);
  87. -ms-transform: translateX(-100%);
  88. transform: translateX(-100%);
  89. }
  90. /* slideRight */
  91. .vegas-transition-slideRight,
  92. .vegas-transition-slideRight2 {
  93. -webkit-transform: translateX(-100%);
  94. -ms-transform: translateX(-100%);
  95. transform: translateX(-100%);
  96. }
  97. .vegas-transition-slideRight-in,
  98. .vegas-transition-slideRight2-in {
  99. -webkit-transform: translateX(0%);
  100. -ms-transform: translateX(0%);
  101. transform: translateX(0%);
  102. }
  103. .vegas-transition-slideRight2-out {
  104. -webkit-transform: translateX(100%);
  105. -ms-transform: translateX(100%);
  106. transform: translateX(100%);
  107. }
  108. /* slideUp */
  109. .vegas-transition-slideUp,
  110. .vegas-transition-slideUp2 {
  111. -webkit-transform: translateY(100%);
  112. -ms-transform: translateY(100%);
  113. transform: translateY(100%);
  114. }
  115. .vegas-transition-slideUp-in,
  116. .vegas-transition-slideUp2-in {
  117. -webkit-transform: translateY(0%);
  118. -ms-transform: translateY(0%);
  119. transform: translateY(0%);
  120. }
  121. .vegas-transition-slideUp2-out {
  122. -webkit-transform: translateY(-100%);
  123. -ms-transform: translateY(-100%);
  124. transform: translateY(-100%);
  125. }
  126. /* slideDown */
  127. .vegas-transition-slideDown,
  128. .vegas-transition-slideDown2 {
  129. -webkit-transform: translateY(-100%);
  130. -ms-transform: translateY(-100%);
  131. transform: translateY(-100%);
  132. }
  133. .vegas-transition-slideDown-in,
  134. .vegas-transition-slideDown2-in {
  135. -webkit-transform: translateY(0%);
  136. -ms-transform: translateY(0%);
  137. transform: translateY(0%);
  138. }
  139. .vegas-transition-slideDown2-out {
  140. -webkit-transform: translateY(100%);
  141. -ms-transform: translateY(100%);
  142. transform: translateY(100%);
  143. }
  144. /* zoomIn */
  145. .vegas-transition-zoomIn,
  146. .vegas-transition-zoomIn2 {
  147. -webkit-transform: scale(0);
  148. -ms-transform: scale(0);
  149. transform: scale(0);
  150. opacity: 0;
  151. }
  152. .vegas-transition-zoomIn-in,
  153. .vegas-transition-zoomIn2-in {
  154. -webkit-transform: scale(1);
  155. -ms-transform: scale(1);
  156. transform: scale(1);
  157. opacity: 1;
  158. }
  159. .vegas-transition-zoomIn2-out {
  160. -webkit-transform: scale(2);
  161. -ms-transform: scale(2);
  162. transform: scale(2);
  163. opacity: 0;
  164. }
  165. /* zoomOut */
  166. .vegas-transition-zoomOut,
  167. .vegas-transition-zoomOut2 {
  168. -webkit-transform: scale(2);
  169. -ms-transform: scale(2);
  170. transform: scale(2);
  171. opacity: 0;
  172. }
  173. .vegas-transition-zoomOut-in,
  174. .vegas-transition-zoomOut2-in {
  175. -webkit-transform: scale(1);
  176. -ms-transform: scale(1);
  177. transform: scale(1);
  178. opacity: 1;
  179. }
  180. .vegas-transition-zoomOut2-out {
  181. -webkit-transform: scale(0);
  182. -ms-transform: scale(0);
  183. transform: scale(0);
  184. opacity: 0;
  185. }
  186. /* swirlLeft */
  187. .vegas-transition-swirlLeft,
  188. .vegas-transition-swirlLeft2 {
  189. -webkit-transform: scale(2) rotate(35deg);
  190. -ms-transform: scale(2) rotate(35deg);
  191. transform: scale(2) rotate(35deg);
  192. opacity: 0;
  193. }
  194. .vegas-transition-swirlLeft-in,
  195. .vegas-transition-swirlLeft2-in {
  196. -webkit-transform: scale(1) rotate(0deg);
  197. -ms-transform: scale(1) rotate(0deg);
  198. transform: scale(1) rotate(0deg);
  199. opacity: 1;
  200. }
  201. .vegas-transition-swirlLeft2-out {
  202. -webkit-transform: scale(2) rotate(-35deg);
  203. -ms-transform: scale(2) rotate(-35deg);
  204. transform: scale(2) rotate(-35deg);
  205. opacity: 0;
  206. }
  207. /* swirlRight */
  208. .vegas-transition-swirlRight,
  209. .vegas-transition-swirlRight2 {
  210. -webkit-transform: scale(2) rotate(-35deg);
  211. -ms-transform: scale(2) rotate(-35deg);
  212. transform: scale(2) rotate(-35deg);
  213. opacity: 0;
  214. }
  215. .vegas-transition-swirlRight-in,
  216. .vegas-transition-swirlRight2-in {
  217. -webkit-transform: scale(1) rotate(0deg);
  218. -ms-transform: scale(1) rotate(0deg);
  219. transform: scale(1) rotate(0deg);
  220. opacity: 1;
  221. }
  222. .vegas-transition-swirlRight2-out {
  223. -webkit-transform: scale(2) rotate(35deg);
  224. -ms-transform: scale(2) rotate(35deg);
  225. transform: scale(2) rotate(35deg);
  226. opacity: 0;
  227. }