vegas.css 6.2 KB

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