vegas.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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. transition-property: width;
  29. transition-timing-function: ease-out;
  30. }
  31. .vegas-timer-running .vegas-timer-progress {
  32. width: 100%;
  33. }
  34. .vegas-slide {
  35. padding: 0;
  36. background: transparent center center no-repeat;
  37. -webkit-transform: translateZ(0);
  38. transform: translateZ(0);
  39. }
  40. body.vegas-container {
  41. overflow: auto;
  42. }
  43. body.vegas-container > .vegas-timer,
  44. body.vegas-container > .vegas-overlay,
  45. body.vegas-container > .vegas-slide {
  46. position: fixed;
  47. z-index: -1;
  48. }
  49. .vegas-video {
  50. min-width: 100%;
  51. min-height: 100%;
  52. width: auto;
  53. height: auto;
  54. }
  55. /* fade */
  56. .vegas-transition-fade {
  57. opacity: 0;
  58. }
  59. .vegas-transition-fade-in {
  60. opacity: 1;
  61. }
  62. .vegas-transition-fade-out {
  63. opacity: 0;
  64. }
  65. /* slideLeft */
  66. .vegas-transition-slideLeft {
  67. -webkit-transform: translateX(100%);
  68. transform: translateX(100%);
  69. }
  70. .vegas-transition-slideLeft-in {
  71. -webkit-transform: translateX(0%);
  72. transform: translateX(0%);
  73. }
  74. .vegas-transition-slideLeft-out {
  75. -webkit-transform: translateX(-100%);
  76. transform: translateX(-100%);
  77. }
  78. /* slideRight */
  79. .vegas-transition-slideRight {
  80. -webkit-transform: translateX(-100%);
  81. transform: translateX(-100%);
  82. }
  83. .vegas-transition-slideRight-in {
  84. -webkit-transform: translateX(0%);
  85. transform: translateX(0%);
  86. }
  87. .vegas-transition-slideRight-out {
  88. -webkit-transform: translateX(100%);
  89. transform: translateX(100%);
  90. }
  91. /* slideUp */
  92. .vegas-transition-slideUp {
  93. -webkit-transform: translateY(100%);
  94. transform: translateY(100%);
  95. }
  96. .vegas-transition-slideUp-in {
  97. -webkit-transform: translateY(0%);
  98. transform: translateY(0%);
  99. }
  100. .vegas-transition-slideUp-out {
  101. -webkit-transform: translateY(-100%);
  102. transform: translateY(-100%);
  103. }
  104. /* slideDown */
  105. .vegas-transition-slideDown {
  106. -webkit-transform: translateY(-100%);
  107. transform: translateY(-100%);
  108. }
  109. .vegas-transition-slideDown-in {
  110. -webkit-transform: translateY(0%);
  111. transform: translateY(0%);
  112. }
  113. .vegas-transition-slideDown-out {
  114. -webkit-transform: translateY(100%);
  115. transform: translateY(100%);
  116. }
  117. /* zoomIn */
  118. .vegas-transition-zoomIn {
  119. -webkit-transform: scale(0);
  120. transform: scale(0);
  121. opacity: 0;
  122. }
  123. .vegas-transition-zoomIn-in {
  124. -webkit-transform: scale(1);
  125. transform: scale(1);
  126. opacity: 1;
  127. }
  128. .vegas-transition-zoomIn-out {
  129. -webkit-transform: scale(2);
  130. transform: scale(2);
  131. opacity: 0;
  132. }
  133. /* zoomOut */
  134. .vegas-transition-zoomOut {
  135. -webkit-transform: scale(2);
  136. transform: scale(2);
  137. opacity: 0;
  138. }
  139. .vegas-transition-zoomOut-in {
  140. -webkit-transform: scale(1);
  141. transform: scale(1);
  142. opacity: 1;
  143. }
  144. .vegas-transition-zoomOut-out {
  145. -webkit-transform: scale(0);
  146. transform: scale(0);
  147. opacity: 0;
  148. }
  149. /* swirlLeft */
  150. .vegas-transition-swirlLeft {
  151. -webkit-transform: scale(2) rotate(35deg);
  152. transform: scale(2) rotate(35deg);
  153. opacity: 0;
  154. }
  155. .vegas-transition-swirlLeft-in {
  156. -webkit-transform: scale(1) rotate(0deg);
  157. transform: scale(1) rotate(0deg);
  158. opacity: 1;
  159. }
  160. .vegas-transition-swirlLeft-out {
  161. -webkit-transform: scale(2) rotate(-35deg);
  162. transform: scale(2) rotate(-35deg);
  163. opacity: 0;
  164. }
  165. /* swirlRight */
  166. .vegas-transition-swirlRight {
  167. -webkit-transform: scale(2) rotate(-35deg);
  168. transform: scale(2) rotate(-35deg);
  169. opacity: 0;
  170. }
  171. .vegas-transition-swirlRight-in {
  172. -webkit-transform: scale(1) rotate(0deg);
  173. transform: scale(1) rotate(0deg);
  174. opacity: 1;
  175. }
  176. .vegas-transition-swirlRight-out {
  177. -webkit-transform: scale(2) rotate(35deg);
  178. transform: scale(2) rotate(35deg);
  179. opacity: 0;
  180. }