vegas.css 5.4 KB

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