vegas.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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. transition-property: width;
  30. transition-timing-function: ease-out;
  31. }
  32. .vegas-timer-running .vegas-timer-progress {
  33. width: 100%;
  34. }
  35. .vegas-slide {
  36. padding: 0;
  37. background: transparent center center no-repeat;
  38. transform: translateZ(0);
  39. }
  40. body.vegas-container {
  41. overflow: auto;
  42. position: static;
  43. }
  44. body.vegas-container > .vegas-timer,
  45. body.vegas-container > .vegas-overlay,
  46. body.vegas-container > .vegas-slide {
  47. position: fixed;
  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. transform: translateX(100%);
  68. }
  69. .vegas-transition-slideLeft-in {
  70. transform: translateX(0%);
  71. }
  72. .vegas-transition-slideLeft-out {
  73. transform: translateX(-100%);
  74. }
  75. /* slideRight */
  76. .vegas-transition-slideRight {
  77. transform: translateX(-100%);
  78. }
  79. .vegas-transition-slideRight-in {
  80. transform: translateX(0%);
  81. }
  82. .vegas-transition-slideRight-out {
  83. transform: translateX(100%);
  84. }
  85. /* slideUp */
  86. .vegas-transition-slideUp {
  87. transform: translateY(100%);
  88. }
  89. .vegas-transition-slideUp-in {
  90. transform: translateY(0%);
  91. }
  92. .vegas-transition-slideUp-out {
  93. transform: translateY(-100%);
  94. }
  95. /* slideDown */
  96. .vegas-transition-slideDown {
  97. transform: translateY(-100%);
  98. }
  99. .vegas-transition-slideDown-in {
  100. transform: translateY(0%);
  101. }
  102. .vegas-transition-slideDown-out {
  103. transform: translateY(100%);
  104. }
  105. /* zoomIn */
  106. .vegas-transition-zoomIn {
  107. transform: scale(0);
  108. opacity: 0;
  109. }
  110. .vegas-transition-zoomIn-in {
  111. transform: scale(1);
  112. opacity: 1;
  113. }
  114. .vegas-transition-zoomIn-out {
  115. transform: scale(2);
  116. opacity: 0;
  117. }
  118. /* zoomOut */
  119. .vegas-transition-zoomOut {
  120. transform: scale(2);
  121. opacity: 0;
  122. }
  123. .vegas-transition-zoomOut-in {
  124. transform: scale(1);
  125. opacity: 1;
  126. }
  127. .vegas-transition-zoomOut-out {
  128. transform: scale(0);
  129. opacity: 0;
  130. }
  131. /* swirlLeft */
  132. .vegas-transition-swirlLeft {
  133. transform: scale(2) rotate(35deg);
  134. opacity: 0;
  135. }
  136. .vegas-transition-swirlLeft-in {
  137. transform: scale(1) rotate(0deg);
  138. opacity: 1;
  139. }
  140. .vegas-transition-swirlLeft-out {
  141. transform: scale(2) rotate(-35deg);
  142. opacity: 0;
  143. }
  144. /* swirlRight */
  145. .vegas-transition-swirlRight {
  146. transform: scale(2) rotate(-35deg);
  147. opacity: 0;
  148. }
  149. .vegas-transition-swirlRight-in {
  150. transform: scale(1) rotate(0deg);
  151. opacity: 1;
  152. }
  153. .vegas-transition-swirlRight-out {
  154. transform: scale(2) rotate(35deg);
  155. opacity: 0;
  156. }